From 1d0ea2f4856dce1fa4cb587833af6006bc6bcd1f Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 4 Mar 2026 08:57:49 +0100
Subject: [PATCH] =?UTF-8?q?fix(vendor):=20abbreviate=20large=20BSR=20numbe?=
 =?UTF-8?q?rs=20on=20Y-axis=20(500000=20=E2=86=92=20500K,=201.2M)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/VendorDataView.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index c2abf96..9b431b7 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -475,7 +475,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
 
         <div className="h-[220px] w-full mt-2">
           <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} />
               <XAxis
                 dataKey="label"
@@ -490,7 +490,8 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 axisLine={false}
                 tickLine={false}
                 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
                 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">
           <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} />
               <XAxis
                 dataKey="label"
@@ -558,7 +559,8 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 axisLine={false}
                 tickLine={false}
                 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
                 contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}