From 4025cb69a37d7dbd1536fa51722877c74da11ae4 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 3 Mar 2026 16:12:56 +0100
Subject: [PATCH] feat(vendor): change charts from lines to bars for weekly
 data

Convert Top Level BSR, Detail Level BSR, and Average Rating charts
from LineChart to BarChart for better week-over-week comparison.
Each market now displays as colored bars per week instead of lines.

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

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index 5a2e924..8575fe7 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 } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { BSRRecord } from '../types';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 
@@ -181,7 +181,7 @@ 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}>
-          <LineChart data={topBsrChartData}>
+          <BarChart data={topBsrChartData}>
             <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
             <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -191,18 +191,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Line
+              <Bar
                 key={m}
-                type="monotone"
                 dataKey={`${m}_bsr`}
                 name={`${m} BSR`}
-                stroke={MARKET_COLORS[m] || '#6b7280'}
-                strokeWidth={2}
-                dot={false}
-                connectNulls
+                fill={MARKET_COLORS[m] || '#6b7280'}
               />
             ))}
-          </LineChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
 
@@ -211,7 +207,7 @@ 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}>
-          <LineChart data={detailBsrChartData}>
+          <BarChart data={detailBsrChartData}>
             <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
             <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
             <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -221,18 +217,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Line
+              <Bar
                 key={m}
-                type="monotone"
                 dataKey={`${m}_bsr`}
                 name={`${m} BSR`}
-                stroke={MARKET_COLORS[m] || '#6b7280'}
-                strokeWidth={2}
-                dot={false}
-                connectNulls
+                fill={MARKET_COLORS[m] || '#6b7280'}
               />
             ))}
-          </LineChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
 
@@ -241,7 +233,7 @@ 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}>
-          <LineChart data={ratingChartData}>
+          <BarChart data={ratingChartData}>
             <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 }} />
@@ -251,18 +243,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
             />
             <Legend />
             {activeMarkets.map(m => (
-              <Line
+              <Bar
                 key={m}
-                type="monotone"
                 dataKey={`${m}_rating`}
                 name={`${m} Rating`}
-                stroke={MARKET_COLORS[m] || '#6b7280'}
-                strokeWidth={2}
-                dot={false}
-                connectNulls
+                fill={MARKET_COLORS[m] || '#6b7280'}
               />
             ))}
-          </LineChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
     </div>