christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 15:35:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(vendor): change charts from lines to bars for weekly data

Browse Source 
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>
This commit is contained in:
Christian Vidal Wolf
2026-03-03 16:12:56 +01:00
co-authored by Qwen-Coder
parent 1fb9956a15
commit 4025cb69a3
1 changed files with 13 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/VendorDataView.tsx
+13 -25
View File
@@ -1,5 +1,5 @@
import React, { useMemo, useState } from 'react'; 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 { BSRRecord } from '../types';
import { BuyBoxWarningBadge } from './BuyBoxWarningBadge'; 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> <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> <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}> <ResponsiveContainer width="100%" height={350}>
<LineChart data={topBsrChartData}> <BarChart data={topBsrChartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" /> <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
<YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} /> <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -191,18 +191,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
/> />
<Legend /> <Legend />
{activeMarkets.map(m => ( {activeMarkets.map(m => (
<Line <Bar
key={m} key={m}
type="monotone"
dataKey={`${m}_bsr`} dataKey={`${m}_bsr`}
name={`${m} BSR`} name={`${m} BSR`}
stroke={MARKET_COLORS[m] || '#6b7280'} fill={MARKET_COLORS[m] || '#6b7280'}
strokeWidth={2}
dot={false}
connectNulls
/> />
))} ))}
</LineChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </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> <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> <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}> <ResponsiveContainer width="100%" height={350}>
<LineChart data={detailBsrChartData}> <BarChart data={detailBsrChartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" /> <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
<YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} /> <YAxis reversed tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -221,18 +217,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
/> />
<Legend /> <Legend />
{activeMarkets.map(m => ( {activeMarkets.map(m => (
<Line <Bar
key={m} key={m}
type="monotone"
dataKey={`${m}_bsr`} dataKey={`${m}_bsr`}
name={`${m} BSR`} name={`${m} BSR`}
stroke={MARKET_COLORS[m] || '#6b7280'} fill={MARKET_COLORS[m] || '#6b7280'}
strokeWidth={2}
dot={false}
connectNulls
/> />
))} ))}
</LineChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </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> <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> <p className="text-xs text-slate-500 mb-3">Averaged across filtered ASINs per market.</p>
<ResponsiveContainer width="100%" height={350}> <ResponsiveContainer width="100%" height={350}>
<LineChart data={ratingChartData}> <BarChart data={ratingChartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" /> <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 11 }} interval="preserveStartEnd" />
<YAxis domain={[0, 5]} tick={{ fill: '#94a3b8', fontSize: 11 }} /> <YAxis domain={[0, 5]} tick={{ fill: '#94a3b8', fontSize: 11 }} />
@@ -251,18 +243,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
/> />
<Legend /> <Legend />
{activeMarkets.map(m => ( {activeMarkets.map(m => (
<Line <Bar
key={m} key={m}
type="monotone"
dataKey={`${m}_rating`} dataKey={`${m}_rating`}
name={`${m} Rating`} name={`${m} Rating`}
stroke={MARKET_COLORS[m] || '#6b7280'} fill={MARKET_COLORS[m] || '#6b7280'}
strokeWidth={2}
dot={false}
connectNulls
/> />
))} ))}
</LineChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
</div> </div>