David/MEGAINFRA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(financial): keep each month's order and delivery bars side by side

Browse source 
The bars were capped at 36px but centred in half-month slots, so on a
wide screen a month's pair drifted ~65px apart. A fixed 32px bar with a
3px gap keeps them together (recharts still shrinks them if space runs
out).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
DEls 2026-10-11 04:12:31 +02:00
parent 1fb65a9d9c
commit c7c48fde10
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/dashboard/financial/monthly-financial-chart.tsx
View file

@ -48,7 +48,7 @@ export function MonthlyFinancialChart({ months, undated }: {
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">Nothing recorded yet.</div>
) : (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={months} accessibilityLayer margin={{ top: 12, right: 8, bottom: 0, left: 0 }}>
<BarChart data={months} accessibilityLayer barSize={32} barGap={3} margin={{ top: 12, right: 8, bottom: 0, left: 0 }}>
<CartesianGrid stroke="var(--border)" strokeDasharray="3 3" vertical={false} />
<XAxis dataKey="month" tickFormatter={(value: string) => format(parseISO(`${value}-01`), "MMM yy")}
stroke="var(--muted-foreground)" tickLine={false} axisLine={false} fontSize={11} minTickGap={16} />
@ -59,8 +59,8 @@ export function MonthlyFinancialChart({ months, undated }: {
labelFormatter={(value) => format(parseISO(`${String(value)}-01`), "MMMM yyyy")}
formatter={(value: number) => formatCurrency(value)} />
<Legend iconType="circle" wrapperStyle={{ fontSize: 12 }} />
<Bar dataKey="poValue" name="Orders raised" fill={PO_COLOR} radius={[4, 4, 0, 0]} maxBarSize={36} isAnimationActive={false} />
<Bar dataKey="deliveryValue" name="Delivered" fill={DELIVERY_COLOR} radius={[4, 4, 0, 0]} maxBarSize={36} isAnimationActive={false} />
<Bar dataKey="poValue" name="Orders raised" fill={PO_COLOR} radius={[4, 4, 0, 0]} isAnimationActive={false} />
<Bar dataKey="deliveryValue" name="Delivered" fill={DELIVERY_COLOR} radius={[4, 4, 0, 0]} isAnimationActive={false} />
</BarChart>
</ResponsiveContainer>
)}