From 5eb42f5e33a536c29284b0e206cd44e83bd4d291 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 4 Mar 2026 08:35:00 +0100
Subject: [PATCH] feat: show X and Y axis values on Vendor charts

---
 components/VendorDataView.tsx | 56 +++++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index a0cfe14..11b58a4 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -168,7 +168,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: 10, left: 10, bottom: 0 }}>
+            <AreaChart data={topBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
               <defs>
                 <linearGradient id="colorOrange" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor={orangeHex} stopOpacity={0.25} />
@@ -176,8 +176,21 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
-              <XAxis dataKey="label" hide />
-              <YAxis reversed domain={['auto', 'auto']} hide />
+              <XAxis
+                dataKey="label"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
+                dy={10}
+              />
+              <YAxis
+                reversed
+                domain={['auto', 'auto']}
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
+                dx={-10}
+              />
               <Tooltip
                 contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
                 itemStyle={{ fontSize: '12px' }}
@@ -222,7 +235,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: 10, left: 10, bottom: 0 }}>
+            <AreaChart data={detailBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
               <defs>
                 <linearGradient id="colorCyan" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor={cyanHex} stopOpacity={0.25} />
@@ -230,8 +243,21 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
-              <XAxis dataKey="label" hide />
-              <YAxis reversed domain={['auto', 'auto']} hide />
+              <XAxis
+                dataKey="label"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
+                dy={10}
+              />
+              <YAxis
+                reversed
+                domain={['auto', 'auto']}
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
+                dx={-10}
+              />
               <Tooltip
                 contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
                 itemStyle={{ fontSize: '12px' }}
@@ -274,7 +300,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
 
         <div className="h-[220px] w-full mt-2">
           <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={ratingChartData} margin={{ top: 20, right: 10, left: 10, bottom: 0 }}>
+            <AreaChart data={ratingChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
               <defs>
                 <linearGradient id="colorPurple" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor={purpleHex} stopOpacity={0.25} />
@@ -282,8 +308,20 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
-              <XAxis dataKey="label" hide />
-              <YAxis domain={[0, 5]} hide />
+              <XAxis
+                dataKey="label"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
+                dy={10}
+              />
+              <YAxis
+                domain={[0, 5]}
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
+                dx={-10}
+              />
               <Tooltip
                 contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
                 itemStyle={{ fontSize: '12px' }}