From 4fa8b0f45edd077a66edca1f287b786bd152845c Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 3 Mar 2026 16:16:52 +0100
Subject: [PATCH] feat(vendor): use modern area charts with gradient fills

Replace bar charts with area charts featuring:
- Gradient fill effects for modern look
- Smooth monotone curves
- Proper Y-axis orientation (reversed for BSR where lower is better)
- Color-coded by market with transparency

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

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index 8575fe7..d6a6e4e 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts';
 import { BSRRecord } from '../types';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 
@@ -181,7 +181,15 @@ 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}>
-          <BarChart data={topBsrChartData}>
+          <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" />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
             <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -191,14 +199,18 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Bar
+              <Area
                 key={m}
+                type="monotone"
                 dataKey={`${m}_bsr`}
                 name={`${m} BSR`}
-                fill={MARKET_COLORS[m] || '#6b7280'}
+                stroke={MARKET_COLORS[m] || '#6b7280'}
+                strokeWidth={2}
+                fill={`url(#colorTop${m})`}
+                connectNulls
               />
             ))}
-          </BarChart>
+          </AreaChart>
         </ResponsiveContainer>
       </div>
 
@@ -207,7 +219,15 @@ 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}>
-          <BarChart data={detailBsrChartData}>
+          <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" />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
             <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -217,14 +237,18 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Bar
+              <Area
                 key={m}
+                type="monotone"
                 dataKey={`${m}_bsr`}
                 name={`${m} BSR`}
-                fill={MARKET_COLORS[m] || '#6b7280'}
+                stroke={MARKET_COLORS[m] || '#6b7280'}
+                strokeWidth={2}
+                fill={`url(#colorDetail${m})`}
+                connectNulls
               />
             ))}
-          </BarChart>
+          </AreaChart>
         </ResponsiveContainer>
       </div>
 
@@ -233,7 +257,15 @@ 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}>
-          <BarChart data={ratingChartData}>
+          <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" />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
             <YAxis domain={[0, 5]} tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -243,14 +275,18 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Bar
+              <Area
                 key={m}
+                type="monotone"
                 dataKey={`${m}_rating`}
                 name={`${m} Rating`}
-                fill={MARKET_COLORS[m] || '#6b7280'}
+                stroke={MARKET_COLORS[m] || '#6b7280'}
+                strokeWidth={2}
+                fill={`url(#colorRating${m})`}
+                connectNulls
               />
             ))}
-          </BarChart>
+          </AreaChart>
         </ResponsiveContainer>
       </div>
     </div>