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

fix(VendorDataView): assign distinct color per market in all three charts

Browse Source 
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>
This commit is contained in:
Christian Vidal Wolf
2026-03-04 09:06:05 +01:00
co-authored by Claude Sonnet 4.6
parent 1d0ea2f485
commit 07461031b8
1 changed files with 70 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/VendorDataView.tsx
+51 -37
View File
@@ -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) => (
{activeMarkets.map((m, i) => {
const color = getMarketColor(m, i);
return (
<Area
key={m}
type="monotone"
dataKey={`${m}_bsr`}
name={`${m} BSR`}
stroke={orangeHex}
stroke={color}
strokeWidth={2.5}
fillOpacity={1}
fill="transparent"
activeDot={{ r: 6, strokeWidth: 0, fill: orangeHex }}
dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: orangeHex }}
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) => (
{activeMarkets.map((m, i) => {
const color = getMarketColor(m, i);
return (
<Area
key={m}
type="monotone"
dataKey={`${m}_bsr`}
name="Category Rank"
stroke={cyanHex}
name={`${m} Rank`}
stroke={color}
strokeWidth={2.5}
fillOpacity={1}
fill="transparent"
activeDot={{ r: 6, strokeWidth: 0, fill: cyanHex }}
dot={{ r: 4, fill: cardBg, strokeWidth: 2, stroke: cyanHex }}
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 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 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>