From 0a2b15615d7b56e089aaec24029ea6db8a242582 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 3 Mar 2026 16:21:08 +0100
Subject: [PATCH] feat(vendor): update to modern bar charts

- Use BarChart with rounded corners for modern look
- Remove vertical grid lines for cleaner appearance
- Add hover cursor effect on tooltip
- Y-axis reversed for BSR charts (lower = better)
- Normal Y-axis for Rating chart (higher = better)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 components/VendorDataView.tsx | 78 +++++++++++------------------------
 1 file changed, 24 insertions(+), 54 deletions(-)

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index d6a6e4e..bde69b5 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';
 import { BSRRecord } from '../types';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 
@@ -181,36 +181,26 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
         <h3 className="text-lg font-bold text-slate-200 mb-4">Top Level BSR Trend ({resolutionLabel})</h3>
         <p className="text-xs text-slate-500 mb-3">Lower rank = better position. Averaged across filtered ASINs per market.</p>
         <ResponsiveContainer width="100%" height={350}>
-          <AreaChart data={topBsrChartData}>
-            <defs>
-              {activeMarkets.map(m => (
-                <linearGradient key={m} id={`colorTop${m}`} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={MARKET_COLORS[m] || '#6b7280'} stopOpacity={0.4} />
-                  <stop offset="95%" stopColor={MARKET_COLORS[m] || '#6b7280'} stopOpacity={0} />
-                </linearGradient>
-              ))}
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <BarChart data={topBsrChartData} barGap={4} barCategoryGap="20%">
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" vertical={false} />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
-            <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
+            <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} domain={['auto', 'auto']} />
             <Tooltip
               contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
               labelStyle={{ color: '#e2e8f0' }}
+              cursor={{ fill: 'rgba(255,255,255,0.05)' }}
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Area
+              <Bar
                 key={m}
-                type="monotone"
                 dataKey={`${m}_bsr`}
                 name={`${m} BSR`}
-                stroke={MARKET_COLORS[m] || '#6b7280'}
-                strokeWidth={2}
-                fill={`url(#colorTop${m})`}
-                connectNulls
+                fill={MARKET_COLORS[m] || '#6b7280'}
+                radius={[4, 4, 0, 0]}
               />
             ))}
-          </AreaChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
 
@@ -219,36 +209,26 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
         <h3 className="text-lg font-bold text-slate-200 mb-4">Detail Level BSR Trend ({resolutionLabel})</h3>
         <p className="text-xs text-slate-500 mb-3">Lower rank = better position. Averaged across filtered ASINs per market.</p>
         <ResponsiveContainer width="100%" height={350}>
-          <AreaChart data={detailBsrChartData}>
-            <defs>
-              {activeMarkets.map(m => (
-                <linearGradient key={m} id={`colorDetail${m}`} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={MARKET_COLORS[m] || '#6b7280'} stopOpacity={0.4} />
-                  <stop offset="95%" stopColor={MARKET_COLORS[m] || '#6b7280'} stopOpacity={0} />
-                </linearGradient>
-              ))}
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <BarChart data={detailBsrChartData} barGap={4} barCategoryGap="20%">
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" vertical={false} />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
-            <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
+            <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} domain={['auto', 'auto']} />
             <Tooltip
               contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
               labelStyle={{ color: '#e2e8f0' }}
+              cursor={{ fill: 'rgba(255,255,255,0.05)' }}
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Area
+              <Bar
                 key={m}
-                type="monotone"
                 dataKey={`${m}_bsr`}
                 name={`${m} BSR`}
-                stroke={MARKET_COLORS[m] || '#6b7280'}
-                strokeWidth={2}
-                fill={`url(#colorDetail${m})`}
-                connectNulls
+                fill={MARKET_COLORS[m] || '#6b7280'}
+                radius={[4, 4, 0, 0]}
               />
             ))}
-          </AreaChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
 
@@ -257,36 +237,26 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
         <h3 className="text-lg font-bold text-slate-200 mb-4">Average Rating ({resolutionLabel})</h3>
         <p className="text-xs text-slate-500 mb-3">Averaged across filtered ASINs per market.</p>
         <ResponsiveContainer width="100%" height={350}>
-          <AreaChart data={ratingChartData}>
-            <defs>
-              {activeMarkets.map(m => (
-                <linearGradient key={m} id={`colorRating${m}`} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={MARKET_COLORS[m] || '#6b7280'} stopOpacity={0.4} />
-                  <stop offset="95%" stopColor={MARKET_COLORS[m] || '#6b7280'} stopOpacity={0} />
-                </linearGradient>
-              ))}
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <BarChart data={ratingChartData} barGap={4} barCategoryGap="20%">
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" vertical={false} />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
             <YAxis domain={[0, 5]} tick={{ fill: '#94a3b8', fontSize: 11 }} />
             <Tooltip
               contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
               labelStyle={{ color: '#e2e8f0' }}
+              cursor={{ fill: 'rgba(255,255,255,0.05)' }}
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Area
+              <Bar
                 key={m}
-                type="monotone"
                 dataKey={`${m}_rating`}
                 name={`${m} Rating`}
-                stroke={MARKET_COLORS[m] || '#6b7280'}
-                strokeWidth={2}
-                fill={`url(#colorRating${m})`}
-                connectNulls
+                fill={MARKET_COLORS[m] || '#6b7280'}
+                radius={[4, 4, 0, 0]}
               />
             ))}
-          </AreaChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
     </div>