Merge pull request 'fix(reports): charts rendered one colour — RSC client/server boundary bug' (#120) from fix/reports-series-colors into master
All checks were successful
Refresh staging / refresh (push) Successful in 8s
Deploy release to production / deploy (push) Successful in 1m35s

Reviewed-on: #120
This commit is contained in:
shad0w 2026-06-24 07:05:39 +00:00
commit 2fcb207add
6 changed files with 33 additions and 5 deletions

View file

@ -19,7 +19,8 @@ import {
WEEK_LABELS,
} from "@/lib/reports";
import { ReportsToolbar } from "@/components/reports/reports-toolbar";
import { TrendChart, BreakdownChart, SERIES_COLORS } from "@/components/reports/charts";
import { TrendChart, BreakdownChart } from "@/components/reports/charts";
import { SERIES_COLORS } from "@/lib/report-colors";
import { Kpi, KpiStrip } from "@/components/reports/kpi";
import { ReportBreadcrumb, ReportTitle, SegLink } from "@/components/reports/report-header";

View file

@ -25,7 +25,8 @@ import {
type NodeSpend,
} from "@/lib/reports";
import { ReportsToolbar } from "@/components/reports/reports-toolbar";
import { ComparisonChart, Sparkline, SERIES_COLORS, type Series } from "@/components/reports/charts";
import { ComparisonChart, Sparkline, type Series } from "@/components/reports/charts";
import { SERIES_COLORS } from "@/lib/report-colors";
import { Kpi, KpiStrip } from "@/components/reports/kpi";
import { ReportBreadcrumb, ReportTitle, SelectCheckbox, CompareBar } from "@/components/reports/report-header";

View file

@ -19,7 +19,8 @@ import {
type Tier,
} from "@/lib/reports";
import { ReportsToolbar } from "@/components/reports/reports-toolbar";
import { TrendChart, BreakdownChart, SERIES_COLORS } from "@/components/reports/charts";
import { TrendChart, BreakdownChart } from "@/components/reports/charts";
import { SERIES_COLORS } from "@/lib/report-colors";
import { Kpi, KpiStrip } from "@/components/reports/kpi";
import { ReportBreadcrumb, ReportTitle, SegLink } from "@/components/reports/report-header";

View file

@ -23,7 +23,8 @@ import {
type CostCentreSpend,
} from "@/lib/reports";
import { ReportsToolbar } from "@/components/reports/reports-toolbar";
import { ComparisonChart, Sparkline, SERIES_COLORS, type Series } from "@/components/reports/charts";
import { ComparisonChart, Sparkline, type Series } from "@/components/reports/charts";
import { SERIES_COLORS } from "@/lib/report-colors";
import { Kpi, KpiStrip } from "@/components/reports/kpi";
import { ReportBreadcrumb, ReportTitle, SelectCheckbox, CompareBar } from "@/components/reports/report-header";

View file

@ -13,8 +13,11 @@ import {
CartesianGrid,
Cell,
} from "recharts";
import { SERIES_COLORS } from "@/lib/report-colors";
export const SERIES_COLORS = ["#2563eb", "#16a34a", "#9333ea", "#ea580c", "#0891b2", "#dc2626", "#ca8a04", "#4f46e5", "#0d9488", "#db2777"];
// Re-exported for back-compat; new server-component code should import the
// palette from "@/lib/report-colors" directly (see that file for why).
export { SERIES_COLORS };
/** Compact Indian-currency formatter for axis ticks / tooltips (₹..K / ₹..L / ₹..Cr). */
export function formatINRShort(n: number): string {

21
App/lib/report-colors.ts Normal file
View file

@ -0,0 +1,21 @@
// Shared categorical palette for the Reports charts + table swatches.
//
// This is a plain, dependency-free module (NO "use client", no server-only
// imports) so it can be imported by BOTH the server-component report pages and
// the client chart components and resolve to the real array in each. It must NOT
// live in a "use client" module: a plain value imported from a client module
// into a server component becomes a client-reference proxy (not the array), so
// `SERIES_COLORS[i]` would silently be `undefined` and every series would fall
// back to recharts' default colour.
export const SERIES_COLORS = [
"#2563eb",
"#16a34a",
"#9333ea",
"#ea580c",
"#0891b2",
"#dc2626",
"#ca8a04",
"#4f46e5",
"#0d9488",
"#db2777",
];