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

feat: show X and Y axis values on Vendor charts

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-03-04 08:35:00 +01:00
parent bdd65d16d1
commit 5eb42f5e33
1 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/VendorDataView.tsx
+47 -9
View File
@@ -168,7 +168,7 @@ 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: 10, left: 10, bottom: 0 }}> <AreaChart data={topBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
<defs> <defs>
<linearGradient id="colorOrange" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorOrange" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={orangeHex} stopOpacity={0.25} /> <stop offset="5%" stopColor={orangeHex} stopOpacity={0.25} />
@@ -176,8 +176,21 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis dataKey="label" hide /> <XAxis
<YAxis reversed domain={['auto', 'auto']} hide /> 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 <Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }} contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
itemStyle={{ fontSize: '12px' }} itemStyle={{ fontSize: '12px' }}
@@ -222,7 +235,7 @@ 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: 10, left: 10, bottom: 0 }}> <AreaChart data={detailBsrChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
<defs> <defs>
<linearGradient id="colorCyan" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorCyan" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={cyanHex} stopOpacity={0.25} /> <stop offset="5%" stopColor={cyanHex} stopOpacity={0.25} />
@@ -230,8 +243,21 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis dataKey="label" hide /> <XAxis
<YAxis reversed domain={['auto', 'auto']} hide /> 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 <Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }} contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
itemStyle={{ fontSize: '12px' }} itemStyle={{ fontSize: '12px' }}
@@ -274,7 +300,7 @@ 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: 10, left: 10, bottom: 0 }}> <AreaChart data={ratingChartData} margin={{ top: 20, right: 20, left: -20, bottom: 5 }}>
<defs> <defs>
<linearGradient id="colorPurple" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorPurple" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={purpleHex} stopOpacity={0.25} /> <stop offset="5%" stopColor={purpleHex} stopOpacity={0.25} />
@@ -282,8 +308,20 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} /> <CartesianGrid strokeDasharray="0" stroke={gridLineColor} strokeOpacity={0.03} vertical={false} />
<XAxis dataKey="label" hide /> <XAxis
<YAxis domain={[0, 5]} hide /> 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 <Tooltip
contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }} contentStyle={{ backgroundColor: '#111827', border: '1px solid #374151', borderRadius: '8px', color: '#fff' }}
itemStyle={{ fontSize: '12px' }} itemStyle={{ fontSize: '12px' }}