fix(energy): 氢能 Top5 排名圆点左侧被 SVG 视窗切掉
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user