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

feat(vendor): use modern area charts with gradient fills

Browse Source 
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>
This commit is contained in:
Christian Vidal Wolf
2026-03-03 16:16:52 +01:00
co-authored by Qwen-Coder
parent 4025cb69a3
commit 4fa8b0f45e
1 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/VendorDataView.tsx
+49 -13
View File
@@ -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>