fix(vendor): remove gradient fill from BSR and rating charts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-03-04 08:42:20 +01:00
co-authored by Claude Sonnet 4.6
parent 8d849dfb63
commit 9af2296a9b
+6 -24
View File
@@ -187,12 +187,6 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
<div className="h-[220px] w-full mt-2"> <div className="h-[220px] w-full mt-2">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={topBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}> <AreaChart data={topBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
<defs>
<linearGradient id="colorOrange" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={orangeHex} stopOpacity={0.25} />
<stop offset="95%" stopColor={orangeHex} stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis <XAxis
dataKey="label" dataKey="label"
@@ -215,7 +209,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }} labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }}
cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }} cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }}
/> />
{activeMarkets.map((m, i) => ( {activeMarkets.map((m) => (
<Area <Area
key={m} key={m}
type="monotone" type="monotone"
@@ -224,7 +218,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
stroke={orangeHex} stroke={orangeHex}
strokeWidth={2.5} strokeWidth={2.5}
fillOpacity={1} fillOpacity={1}
fill={i === 0 ? "url(#colorOrange)" : "transparent"} fill="transparent"
activeDot={{ r: 6, strokeWidth: 0, fill: orangeHex }} activeDot={{ r: 6, strokeWidth: 0, fill: orangeHex }}
dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: orangeHex }} dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: orangeHex }}
/> />
@@ -261,12 +255,6 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
<div className="h-[220px] w-full mt-2"> <div className="h-[220px] w-full mt-2">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={detailBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}> <AreaChart data={detailBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
<defs>
<linearGradient id="colorCyan" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={cyanHex} stopOpacity={0.25} />
<stop offset="95%" stopColor={cyanHex} stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis <XAxis
dataKey="label" dataKey="label"
@@ -289,7 +277,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }} labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }}
cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }} cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }}
/> />
{activeMarkets.map((m, i) => ( {activeMarkets.map((m) => (
<Area <Area
key={m} key={m}
type="monotone" type="monotone"
@@ -298,7 +286,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
stroke={cyanHex} stroke={cyanHex}
strokeWidth={2.5} strokeWidth={2.5}
fillOpacity={1} fillOpacity={1}
fill={i === 0 ? "url(#colorCyan)" : "transparent"} fill="transparent"
activeDot={{ r: 6, strokeWidth: 0, fill: cyanHex }} activeDot={{ r: 6, strokeWidth: 0, fill: cyanHex }}
dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: cyanHex }} dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: cyanHex }}
/> />
@@ -326,12 +314,6 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
<div className="h-[220px] w-full mt-2"> <div className="h-[220px] w-full mt-2">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={ratingChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}> <AreaChart data={ratingChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
<defs>
<linearGradient id="colorPurple" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={purpleHex} stopOpacity={0.25} />
<stop offset="95%" stopColor={purpleHex} stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis <XAxis
dataKey="label" dataKey="label"
@@ -353,7 +335,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }} labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }}
cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }} cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }}
/> />
{activeMarkets.map((m, i) => ( {activeMarkets.map((m) => (
<Area <Area
key={m} key={m}
type="monotone" type="monotone"
@@ -362,7 +344,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
stroke={purpleHex} stroke={purpleHex}
strokeWidth={2.5} strokeWidth={2.5}
fillOpacity={1} fillOpacity={1}
fill={i === 0 ? "url(#colorPurple)" : "transparent"} fill="transparent"
activeDot={{ r: 6, strokeWidth: 0, fill: purpleHex }} activeDot={{ r: 6, strokeWidth: 0, fill: purpleHex }}
dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: purpleHex }} dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: purpleHex }}
/> />