fix(vendor): abbreviate large BSR numbers on Y-axis (500000 → 500K, 1.2M)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-03-04 08:57:49 +01:00
co-authored by Claude Sonnet 4.6
parent c49b331e82
commit 1d0ea2f485
+6 -4
View File
@@ -475,7 +475,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
<div className="h-[220px] w-full mt-2"> <div className="h-[220px] w-full mt-2">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={topBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}> <AreaChart data={topBsrChartData} margin={{ top: 20, right: 20, left: 10, bottom: 5 }}>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis <XAxis
dataKey="label" dataKey="label"
@@ -490,7 +490,8 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }} tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dx={-10} tickFormatter={(v: number) => v >= 1_000_000 ? `${(v / 1_000_000).toFixed(1).replace(/\.0$/, '')}M` : v >= 1_000 ? `${Math.round(v / 1_000)}K` : String(v)}
width={45}
/> />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }} contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
@@ -543,7 +544,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
<div className="h-[220px] w-full mt-2"> <div className="h-[220px] w-full mt-2">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={detailBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}> <AreaChart data={detailBsrChartData} margin={{ top: 20, right: 20, left: 10, bottom: 5 }}>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis <XAxis
dataKey="label" dataKey="label"
@@ -558,7 +559,8 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }} tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dx={-10} tickFormatter={(v: number) => v >= 1_000_000 ? `${(v / 1_000_000).toFixed(1).replace(/\.0$/, '')}M` : v >= 1_000 ? `${Math.round(v / 1_000)}K` : String(v)}
width={45}
/> />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }} contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}