feat: show X and Y axis values on Vendor charts

This commit is contained in:
Christian Vidal Wolf
2026-03-04 08:35:00 +01:00
parent bdd65d16d1
commit 5eb42f5e33
+47 -9
View File
@@ -168,7 +168,7 @@ 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: 10, left: 10, bottom: 0 }}>
<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} />
@@ -176,8 +176,21 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis dataKey="label" hide />
<YAxis reversed domain={['auto', 'auto']} hide />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dy={10}
/>
<YAxis
reversed
domain={['auto', 'auto']}
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dx={-10}
/>
<Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
itemStyle={{ fontSize: '12px' }}
@@ -222,7 +235,7 @@ 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: 10, left: 10, bottom: 0 }}>
<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} />
@@ -230,8 +243,21 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis dataKey="label" hide />
<YAxis reversed domain={['auto', 'auto']} hide />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dy={10}
/>
<YAxis
reversed
domain={['auto', 'auto']}
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dx={-10}
/>
<Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
itemStyle={{ fontSize: '12px' }}
@@ -274,7 +300,7 @@ 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: 10, left: 10, bottom: 0 }}>
<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} />
@@ -282,8 +308,20 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis dataKey="label" hide />
<YAxis domain={[0, 5]} hide />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dy={10}
/>
<YAxis
domain={[0, 5]}
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 11, fontWeight: 500 }}
dx={-10}
/>
<Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
itemStyle={{ fontSize: '12px' }}