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) {
|
function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
|
||||||
return (
|
return (
|
||||||
<g transform={`translate(${x},${y})`}>
|
<g transform={`translate(${x},${y})`}>
|
||||||
<circle cx={-178} cy={0} r={9} fill="#3b82f6" />
|
<circle cx={-172} cy={0} r={9} fill="#3b82f6" />
|
||||||
<text x={-178} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
|
<text x={-172} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
|
||||||
{index + 1}
|
{index + 1}
|
||||||
</text>
|
</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}
|
{payload?.value}
|
||||||
</text>
|
</text>
|
||||||
</g>
|
</g>
|
||||||
@@ -126,12 +126,12 @@ export default function HydrogenOverview() {
|
|||||||
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
||||||
</div>
|
</div>
|
||||||
<ResponsiveContainer width="100%" height={260}>
|
<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 />
|
<XAxis type="number" hide />
|
||||||
<YAxis
|
<YAxis
|
||||||
type="category"
|
type="category"
|
||||||
dataKey="name"
|
dataKey="name"
|
||||||
width={190}
|
width={188}
|
||||||
tick={<RankYAxisTick />}
|
tick={<RankYAxisTick />}
|
||||||
tickLine={false}
|
tickLine={false}
|
||||||
axisLine={false}
|
axisLine={false}
|
||||||
|
|||||||
Reference in New Issue
Block a user