fix(energy): 氢能 Top5 排名圆点左侧被 SVG 视窗切掉
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

之前 cx=-178 + YAxis.width=190 + margin.left=0:
  Y 轴线 pivot 在 chart x=190;圆点 abs x=12,半径 9 → 左缘 abs x=3
  紧贴 SVG viewBox 左边界,渲染时被切掉一半。

新值:margin.left=12,YAxis.width=188,circle cx=-172,text x=-154
  pivot=200,圆点 abs x=28,左缘=19,离左边界 19px 缓冲,圆点完整可见。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-29 20:03:24 +08:00
parent 3efa701395
commit 213037c2ac

View File

@@ -13,11 +13,11 @@ interface YAxisTickProps {
function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
return (
<g transform={`translate(${x},${y})`}>
<circle cx={-178} cy={0} r={9} fill="#3b82f6" />
<text x={-178} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
<circle cx={-172} cy={0} r={9} fill="#3b82f6" />
<text x={-172} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
{index + 1}
</text>
<text x={-160} y={4} textAnchor="start" fontSize={11} fill="#475569">
<text x={-154} y={4} textAnchor="start" fontSize={11} fill="#475569">
{payload?.value}
</text>
</g>
@@ -126,12 +126,12 @@ export default function HydrogenOverview() {
<span className="text-[11px] text-slate-400 font-bold"> Kg</span>
</div>
<ResponsiveContainer width="100%" height={260}>
<BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 0 }}>
<BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 12 }}>
<XAxis type="number" hide />
<YAxis
type="category"
dataKey="name"
width={190}
width={188}
tick={<RankYAxisTick />}
tickLine={false}
axisLine={false}