diff --git a/frontend/src/components/Common/UplotChart.tsx b/frontend/src/components/Common/UplotChart.tsx index ffb3a63..5943ffe 100644 --- a/frontend/src/components/Common/UplotChart.tsx +++ b/frontend/src/components/Common/UplotChart.tsx @@ -176,13 +176,16 @@ function token(name: string, from: Element): string { /** * What one line is drawn in. * - * A palette entry is either a slot of the app's own ramp — the shape a - * dashboard stored before it could name colours — or a colour, which is what a - * palette writes today. A colour is used as it stands. + * A palette entry is one of three things: a slot of the app's own ramp — the + * shape a dashboard stored before it could name colours — a token, for a line + * that means something the ramp has no step for, or a colour, which is what a + * dashboard palette writes today. A colour is used as it stands; the other two + * are resolved here, since the canvas cannot read a custom property. */ const seriesColor = (index: number, slots: string[], from: Element) => { const slot = slots[index % slots.length] - return CHART_SLOTS.includes(slot) ? token(`--chart-${slot}`, from) : slot + if (CHART_SLOTS.includes(slot)) return token(`--chart-${slot}`, from) + return slot.startsWith("--") ? token(slot, from) : slot } /** diff --git a/frontend/src/components/Health/HealthActivity.tsx b/frontend/src/components/Health/HealthActivity.tsx index b6a9fce..4e4dbfd 100644 --- a/frontend/src/components/Health/HealthActivity.tsx +++ b/frontend/src/components/Health/HealthActivity.tsx @@ -102,12 +102,15 @@ function Chart({ plots, pending, moment, + palette, }: { title: string labels: string[] plots: HistoryPoint[][] pending: boolean moment: Moment + /** Only where a line means something the ramp has no step for. */ + palette?: string[] }) { return (