From 9af2296a9b01391073fe216ed7fd964da649afdd Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 4 Mar 2026 08:42:20 +0100
Subject: [PATCH] fix(vendor): remove gradient fill from BSR and rating charts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/VendorDataView.tsx | 30 ++++++------------------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index 81af64b..2e2e741 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -187,12 +187,6 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
         <div className="h-[220px] w-full mt-2">
           <ResponsiveContainer width="100%" height="100%">
             <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} />
               <XAxis
                 dataKey="label"
@@ -215,7 +209,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }}
                 cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }}
               />
-              {activeMarkets.map((m, i) => (
+              {activeMarkets.map((m) => (
                 <Area
                   key={m}
                   type="monotone"
@@ -224,7 +218,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                   stroke={orangeHex}
                   strokeWidth={2.5}
                   fillOpacity={1}
-                  fill={i === 0 ? "url(#colorOrange)" : "transparent"}
+                  fill="transparent"
                   activeDot={{ r: 6, strokeWidth: 0, fill: 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">
           <ResponsiveContainer width="100%" height="100%">
             <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} />
               <XAxis
                 dataKey="label"
@@ -289,7 +277,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }}
                 cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }}
               />
-              {activeMarkets.map((m, i) => (
+              {activeMarkets.map((m) => (
                 <Area
                   key={m}
                   type="monotone"
@@ -298,7 +286,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                   stroke={cyanHex}
                   strokeWidth={2.5}
                   fillOpacity={1}
-                  fill={i === 0 ? "url(#colorCyan)" : "transparent"}
+                  fill="transparent"
                   activeDot={{ r: 6, strokeWidth: 0, fill: 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">
           <ResponsiveContainer width="100%" height="100%">
             <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} />
               <XAxis
                 dataKey="label"
@@ -353,7 +335,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 labelStyle={{ color: '#9ca3af', fontSize: '11px', marginBottom: '4px' }}
                 cursor={{ stroke: '#374151', strokeWidth: 1, strokeDasharray: '3 3' }}
               />
-              {activeMarkets.map((m, i) => (
+              {activeMarkets.map((m) => (
                 <Area
                   key={m}
                   type="monotone"
@@ -362,7 +344,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                   stroke={purpleHex}
                   strokeWidth={2.5}
                   fillOpacity={1}
-                  fill={i === 0 ? "url(#colorPurple)" : "transparent"}
+                  fill="transparent"
                   activeDot={{ r: 6, strokeWidth: 0, fill: purpleHex }}
                   dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: purpleHex }}
                 />