From 07461031b8dfaf4ec95b8aea6daf14cac5184daf Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 4 Mar 2026 09:06:05 +0100
Subject: [PATCH] fix(VendorDataView): assign distinct color per market in all
 three charts

Each market line (DE/ES/FR/IT/UK) now renders with its own color across
Top Level BSR, Detail Level BSR, and Average Rating charts, along with
per-market legend entries. Removes hardcoded single-color approach.

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

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index 9b431b7..8340de7 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -417,13 +417,20 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
     );
   }
 
-  // Exact color values based on the screenshot
   const cardBg = '#161b24';
-  const orangeHex = '#f37526';
-  const cyanHex = '#2acbd6';
-  const purpleHex = '#7950f2';
   const gridLineColor = '#ffffff';
 
+  // One distinct color per market
+  const MARKET_COLORS: Record<string, string> = {
+    'Amazon DE': '#f37526',
+    'Amazon ES': '#2acbd6',
+    'Amazon FR': '#7950f2',
+    'Amazon IT': '#10b981',
+    'Amazon UK': '#f59e0b',
+  };
+  const FALLBACK_COLORS = ['#f37526', '#2acbd6', '#7950f2', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
+  const getMarketColor = (m: string, idx: number) => MARKET_COLORS[m] ?? FALLBACK_COLORS[idx % FALLBACK_COLORS.length];
+
   return (
     <div className="p-4 md:p-6 lg:px-8 pb-24 max-w-[800px] mx-auto space-y-6">
 
@@ -499,32 +506,34 @@ 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) => (
-                <Area
-                  key={m}
-                  type="monotone"
-                  dataKey={`${m}_bsr`}
-                  name={`${m} BSR`}
-                  stroke={orangeHex}
-                  strokeWidth={2.5}
-                  fillOpacity={1}
-                  fill="transparent"
-                  activeDot={{ r: 6, strokeWidth: 0, fill: orangeHex }}
-                  dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: orangeHex }}
-                />
-              ))}
+              {activeMarkets.map((m, i) => {
+                const color = getMarketColor(m, i);
+                return (
+                  <Area
+                    key={m}
+                    type="monotone"
+                    dataKey={`${m}_bsr`}
+                    name={`${m} BSR`}
+                    stroke={color}
+                    strokeWidth={2.5}
+                    fillOpacity={1}
+                    fill="transparent"
+                    activeDot={{ r: 6, strokeWidth: 0, fill: color }}
+                    dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: color }}
+                  />
+                );
+              })}
             </AreaChart>
           </ResponsiveContainer>
         </div>
 
-        {/* Exact Legend matching screenshot */}
-        <div className="mt-6 flex justify-center items-center gap-2">
-          {activeMarkets.length > 0 && (
-            <div className="flex items-center gap-2">
-              <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: orangeHex }}></div>
-              <span className="text-[12px] text-[#8b9bb4]">{activeMarkets[0]} BSR</span>
+        <div className="mt-6 flex justify-center items-center gap-3 flex-wrap">
+          {activeMarkets.map((m, i) => (
+            <div key={m} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: getMarketColor(m, i) }}></div>
+              <span className="text-[12px] text-[#8b9bb4]">{m} BSR</span>
             </div>
-          )}
+          ))}
         </div>
       </div>
 
@@ -568,30 +577,34 @@ 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) => (
-                <Area
-                  key={m}
-                  type="monotone"
-                  dataKey={`${m}_bsr`}
-                  name="Category Rank"
-                  stroke={cyanHex}
-                  strokeWidth={2.5}
-                  fillOpacity={1}
-                  fill="transparent"
-                  activeDot={{ r: 6, strokeWidth: 0, fill: cyanHex }}
-                  dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: cyanHex }}
-                />
-              ))}
+              {activeMarkets.map((m, i) => {
+                const color = getMarketColor(m, i);
+                return (
+                  <Area
+                    key={m}
+                    type="monotone"
+                    dataKey={`${m}_bsr`}
+                    name={`${m} Rank`}
+                    stroke={color}
+                    strokeWidth={2.5}
+                    fillOpacity={1}
+                    fill="transparent"
+                    activeDot={{ r: 6, strokeWidth: 0, fill: color }}
+                    dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: color }}
+                  />
+                );
+              })}
             </AreaChart>
           </ResponsiveContainer>
         </div>
 
-        {/* Exact Legend matching screenshot */}
-        <div className="mt-6 flex justify-center items-center gap-2">
-          <div className="flex items-center gap-2">
-            <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: cyanHex }}></div>
-            <span className="text-[12px] text-[#8b9bb4]">Category Rank</span>
-          </div>
+        <div className="mt-6 flex justify-center items-center gap-3 flex-wrap">
+          {activeMarkets.map((m, i) => (
+            <div key={m} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: getMarketColor(m, i) }}></div>
+              <span className="text-[12px] text-[#8b9bb4]">{m} Rank</span>
+            </div>
+          ))}
         </div>
       </div>
 
@@ -626,30 +639,31 @@ 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) => (
+              {activeMarkets.map((m, i) => (
                 <Area
                   key={m}
                   type="monotone"
                   dataKey={`${m}_rating`}
-                  name="Star Rating"
-                  stroke={purpleHex}
+                  name={m}
+                  stroke={getMarketColor(m, i)}
                   strokeWidth={2.5}
                   fillOpacity={1}
                   fill="transparent"
-                  activeDot={{ r: 6, strokeWidth: 0, fill: purpleHex }}
-                  dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: purpleHex }}
+                  activeDot={{ r: 6, strokeWidth: 0, fill: getMarketColor(m, i) }}
+                  dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: getMarketColor(m, i) }}
                 />
               ))}
             </AreaChart>
           </ResponsiveContainer>
         </div>
 
-        {/* Exact Legend matching screenshot */}
-        <div className="mt-6 flex justify-center items-center gap-2">
-          <div className="flex items-center gap-2">
-            <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: purpleHex }}></div>
-            <span className="text-[12px] text-[#8b9bb4]">Star Rating</span>
-          </div>
+        <div className="mt-6 flex justify-center items-center gap-3 flex-wrap">
+          {activeMarkets.map((m, i) => (
+            <div key={m} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: getMarketColor(m, i) }}></div>
+              <span className="text-[12px] text-[#8b9bb4]">{m} Rating</span>
+            </div>
+          ))}
         </div>
       </div>