maxamundsen/kjol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

begin new custom chart implementation for js ui

Browse Source
This commit is contained in:
Max Amundsen
2026-07-16 11:45:17 -04:00
parent 13a60a90a1
commit 550e97aa9b
21 changed files with 1001 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
go/jsruntime/styles/theme.css
View File

@@ -141,6 +141,29 @@
--color-on-warning: var(--color-white);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-white);
/* ---- the categorical CHART palette -------------------------------------
Eight fixed slots for uikit/Chart.tsx. A series is painted by its INDEX
(slot 1, 2, 3 …) and never by a cycled/derived hue — a ninth series folds
into "Other" rather than inventing a colour. Unlike the state colours these
are a set, tuned as a set: the ordering maximises the minimum colour-blind
ΔE between neighbouring slots, so adjacent series stay distinguishable under
protanopia/deuteranopia (worst adjacent ΔE 24 in light, 10 in dark — see the
data-viz palette validator).
These CAN be named in a component because a chart is SVG and SVG fills read
CSS variables (a canvas cannot, so it would need a literal hex). The dark
column below is the same eight hues stepped for the near-black surface, not a
second palette. Brand overrides by redefining these (or passing `palette` to a
single chart). */
--color-chart-1: #2a78d6; /* blue */
--color-chart-2: #1baf7a; /* aqua */
--color-chart-3: #eda100; /* yellow */
--color-chart-4: #008300; /* green */
--color-chart-5: #4a3aa7; /* violet */
--color-chart-6: #e34948; /* red */
--color-chart-7: #e87ba4; /* magenta */
--color-chart-8: #eb6834; /* orange */
}
/* ---------------------------------------------------------------------------
@@ -182,6 +205,19 @@
--color-primary-subtle: #1f1f24;
--color-primary-border: #3d3d45;
--color-accent: #e5e5e5;
/* The chart palette, re-stepped for the dark surface. Same eight hues, lifted
into the dark-mode lightness band so every slot clears 3:1 against #101013 —
a light-mode aqua or yellow would sink into the surface. Validated as a set
against the dark surface, exactly as the light column was against white. */
--color-chart-1: #3987e5;
--color-chart-2: #199e70;
--color-chart-3: #c98500;
--color-chart-4: #008300;
--color-chart-5: #9085e9;
--color-chart-6: #e66767;
--color-chart-7: #d55181;
--color-chart-8: #d95926;
}
/* The page's own background — painted before anything mounts, and behind it

637
go/jsruntime/uikit/Chart.tsx
View File

@@ -1,91 +1,582 @@
import { createEffect, onCleanup, onMount } from "solid-js";
import { Chart, registerables } from "chart.js";
import { createMemo, createSignal, For, Show, onMount, onCleanup, JSXElement } from "solid-js";
// chart.js v4 is tree-shakeable and ships nothing registered by default; register
// all controllers/elements/scales once so any chart type works (the old UMD shim
// did this implicitly).
Chart.register(...registerables);
// A dependency-free, reactive chart. It draws SVG — nothing is vendored, nothing is
// registered on a global, and there is no <canvas>.
//
// Being SVG is what makes it small. The picture IS the reactive tree: change
// props.series and Solid re-renders it, so there is no imperative update() to call and
// no mount-time construction pushing data into a canvas the reactive system cannot see.
// Marks name CSS variables (`fill: var(--color-chart-1)`), so the palette themes and
// inverts for dark mode for free — a canvas paints pixels and cannot read a variable.
//
// The marks are assembled as an SVG STRING and set with innerHTML, not written as JSX
// <path>/<line> elements. The Go-native Solid compiler namespaces an element as SVG only
// when it is written literally inside an <svg> in the same template; a <path> produced by
// control flow (<For>, a callback) is created in the HTML namespace and never paints.
// Setting innerHTML on an <svg> parses the string in the SVG namespace — the same trick
// uikit/Icons.tsx uses. Pointer handlers ride the <svg> element (a real Solid node), and
// which bar/slice the pointer is over is computed from geometry, not per-element listeners.
//
// Layout is measured, not scaled: a ResizeObserver reports the container's pixel width
// and the SVG is drawn at that width (viewBox === pixel box, 1:1), so text stays crisp
// at any size and pointer coordinates map straight onto the drawing. On the server (no
// ResizeObserver) it renders once at a sane default width and re-measures on mount.
type ChartType = "line" | "bar" | "radar" | "doughnut" | "polarArea" | "bubble" | "pie" | "scatter";
export type ChartKind = "line" | "area" | "bar" | "pie" | "donut";
interface ReactiveChartProps {
type: ChartType;
data: unknown;
options?: object;
export interface ChartSeries {
name: string;
data: number[];
// Override this series' palette slot. Any CSS colour; a var(--color-chart-n) keeps
// it theme-aware. Leave unset to take the Nth slot of the categorical palette.
color?: string;
}
export interface ChartProps {
kind: ChartKind;
// The x categories (line/area/bar) or the slice names (pie/donut). Optional only
// because a bare numeric series can fall back to 1..n; supply them for real charts.
labels?: string[];
series: ChartSeries[];
// bar / area: stack the series instead of grouping them side by side.
stacked?: boolean;
// line / area: "smooth" draws a Catmull-Rom spline through the points.
curve?: "linear" | "smooth";
// donut only: inner-radius fraction of the outer radius (0.6 by default).
donutRatio?: number;
height?: number; // px of the plot area (default 300). The legend adds its own height.
width?: number; // fix the width instead of measuring the container.
class?: string;
// Override the whole categorical palette (else the --color-chart-1..8 tokens).
palette?: string[];
// Format a value for the y-axis ticks and the tooltip. Defaults to en-US grouping.
valueFormat?: (v: number) => string;
legend?: boolean; // default: true when there is more than one series (or a pie).
grid?: boolean; // cartesian only; default true.
axes?: boolean; // cartesian only; default true.
tooltip?: boolean; // default true.
yMin?: number; // pin the y domain instead of deriving it from the data.
yMax?: number;
}
interface ChartInstance {
destroy(): void;
update(): void;
data: unknown;
options: object;
// The palette a component IS allowed to name — the tokens carry the theming. Referenced
// by index; a ninth series is the caller's problem (fold it into "Other"), never a
// synthesised ninth hue.
const CHART_TOKENS = [
"var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)",
"var(--color-chart-5)", "var(--color-chart-6)", "var(--color-chart-7)", "var(--color-chart-8)",
];
const DEFAULT_HEIGHT = 300;
const DEFAULT_WIDTH = 640; // used only until the container is measured (and on the server)
const BAR_MAX_W = 24; // cap a bar's thickness; the band's leftover is deliberate air
const BAR_RADIUS = 4; // rounded data-end
const SEG_GAP = 2; // the surface gap between touching marks (stacked segments)
const MARK_R = 4; // hover marker radius (8px mark)
// ── number + geometry helpers ───────────────────────────────────────────────────
// A value or label can carry markup-breaking characters (a series name from a CSV
// header, a "<"), and it goes into an innerHTML string — escape everything untrusted.
const esc = (s: unknown) =>
String(s).replace(/[&<>"]/g, (c) => (c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;"));
// Constructed lazily, not at module load: the SSR runtime (goja) may import this file
// while baking a page, and building the formatter at import time would run there too.
let _intl: Intl.NumberFormat | null = null;
const defaultFormat = (v: number) => {
if (!Number.isFinite(v)) return String(v);
_intl ??= new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
return _intl.format(v);
};
// "Nice" axis bounds: rounded min/max plus tick values a reader recognises (0, 20, 40 …)
// rather than the raw data extent.
function niceScale(min: number, max: number, maxTicks = 5): { min: number; max: number; ticks: number[] } {
if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
// A flat or empty series still needs a drawable axis.
const v = Number.isFinite(max) ? max : 0;
min = Math.min(0, v);
max = v === min ? min + 1 : Math.max(0, v);
}
const niceNum = (range: number, round: boolean) => {
const exp = Math.floor(Math.log10(range));
const frac = range / Math.pow(10, exp);
const nf = round
? frac < 1.5 ? 1 : frac < 3 ? 2 : frac < 7 ? 5 : 10
: frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 5 ? 5 : 10;
return nf * Math.pow(10, exp);
};
const step = niceNum((max - min) / Math.max(1, maxTicks - 1), true);
const niceMin = Math.floor(min / step) * step;
const niceMax = Math.ceil(max / step) * step;
const ticks: number[] = [];
const decimals = Math.max(0, -Math.floor(Math.log10(step)));
for (let v = niceMin; v <= niceMax + step * 0.5; v += step) {
ticks.push(Number(v.toFixed(decimals + 2)));
}
return { min: niceMin, max: niceMax, ticks };
}
type ChartCtor = new (ctx: CanvasRenderingContext2D, cfg: object) => ChartInstance;
// A column with the two corners at its VALUE end rounded and the baseline end square —
// the mark spec. Handles growing up or down from the baseline.
function columnPath(x: number, w: number, yBase: number, yVal: number, r: number): string {
const h = Math.abs(yBase - yVal);
const rr = Math.max(0, Math.min(r, w / 2, h));
if (yVal <= yBase) {
const t = yVal;
return `M${x},${yBase} L${x},${t + rr} Q${x},${t} ${x + rr},${t} L${x + w - rr},${t} Q${x + w},${t} ${x + w},${t + rr} L${x + w},${yBase} Z`;
}
const b = yVal;
return `M${x},${yBase} L${x},${b - rr} Q${x},${b} ${x + rr},${b} L${x + w - rr},${b} Q${x + w},${b} ${x + w},${b - rr} L${x + w},${yBase} Z`;
}
export default function ReactiveChart(props: ReactiveChartProps) {
let canvasRef: HTMLCanvasElement | undefined;
let chartInstance: ChartInstance | null = null;
function linePathD(pts: [number, number][]): string {
if (!pts.length) return "";
return pts.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join(" ");
}
// Catmull-Rom → cubic bezier, so the curve passes through every point (a plain bezier
// smoothing would miss them).
function smoothPathD(pts: [number, number][]): string {
if (pts.length < 3) return linePathD(pts);
let d = `M${pts[0][0]},${pts[0][1]}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] ?? pts[i];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[i + 2] ?? p2;
const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
d += ` C${c1x},${c1y} ${c2x},${c2y} ${p2[0]},${p2[1]}`;
}
return d;
}
function pointOnCircle(cx: number, cy: number, r: number, deg: number): [number, number] {
const a = (deg - 90) * Math.PI / 180; // 0° at 12 o'clock, clockwise
return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}
// One pie/donut slice from a0 to a1 degrees. rIn === 0 gives a pie wedge.
function slicePathD(cx: number, cy: number, rOut: number, rIn: number, a0: number, a1: number): string {
const large = a1 - a0 > 180 ? 1 : 0;
const [ox0, oy0] = pointOnCircle(cx, cy, rOut, a0);
const [ox1, oy1] = pointOnCircle(cx, cy, rOut, a1);
if (rIn <= 0) {
return `M${cx},${cy} L${ox0},${oy0} A${rOut},${rOut} 0 ${large} 1 ${ox1},${oy1} Z`;
}
const [ix1, iy1] = pointOnCircle(cx, cy, rIn, a1);
const [ix0, iy0] = pointOnCircle(cx, cy, rIn, a0);
return `M${ox0},${oy0} A${rOut},${rOut} 0 ${large} 1 ${ox1},${oy1} L${ix1},${iy1} A${rIn},${rIn} 0 ${large} 0 ${ix0},${iy0} Z`;
}
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
// ── the component ────────────────────────────────────────────────────────────────
export function Chart(props: ChartProps): JSXElement {
let wrap: HTMLDivElement | undefined;
const [measured, setMeasured] = createSignal(props.width ?? DEFAULT_WIDTH);
const width = () => props.width ?? measured();
const height = () => props.height ?? DEFAULT_HEIGHT;
onMount(() => {
// Defer initialization until the canvas is connected to the document.
// @solidjs/router creates route components before inserting them into
// the DOM, and Chart.js needs getComputedStyle which requires a
// connected element with ownerDocument.defaultView.
const init = () => {
if (!canvasRef) return;
if (!canvasRef.isConnected) {
requestAnimationFrame(init);
return;
}
const ctx = canvasRef.getContext("2d");
if (!ctx) return;
chartInstance = new (Chart as unknown as ChartCtor)(ctx, {
type: props.type,
data: props.data,
options: {
responsive: true,
maintainAspectRatio: false,
...(props.options ?? {}),
},
});
};
init();
if (props.width != null || !wrap) return;
const read = () => { if (wrap && wrap.clientWidth > 0) setMeasured(wrap.clientWidth); };
read();
if (typeof ResizeObserver === "undefined") return;
const ro = new ResizeObserver(read);
ro.observe(wrap);
onCleanup(() => ro.disconnect());
});
onCleanup(() => {
if (chartInstance) {
chartInstance.destroy();
chartInstance = null;
}
});
createEffect(() => {
const data = props.data;
if (chartInstance) {
chartInstance.data = data;
chartInstance.update();
}
});
createEffect(() => {
const options = props.options;
if (chartInstance) {
chartInstance.options = {
responsive: true,
maintainAspectRatio: false,
...(options ?? {}),
};
chartInstance.update();
}
});
const isRadial = () => props.kind === "pie" || props.kind === "donut";
const colorOf = (i: number) =>
props.series[i]?.color ?? props.palette?.[i % (props.palette.length || 1)] ?? CHART_TOKENS[i % CHART_TOKENS.length];
const fmt = (v: number) => (props.valueFormat ?? defaultFormat)(v);
const showLegend = () => props.legend ?? (isRadial() || props.series.length > 1);
return (
<div class={"h-full " + (props.class || "")}>
<canvas ref={(el: HTMLCanvasElement) => canvasRef = el}></canvas>
<div ref={wrap} class={"relative w-full" + (props.class ? " " + props.class : "")}>
<Show when={isRadial()} fallback={
<CartesianChart props={props} width={width()} height={height()} colorOf={colorOf} fmt={fmt} />
}>
<RadialChart props={props} width={width()} height={height()} colorOf={colorOf} fmt={fmt} />
</Show>
<Show when={showLegend()}>
<Legend props={props} colorOf={colorOf} />
</Show>
</div>
);
}
interface SubProps {
props: ChartProps;
width: number;
height: number;
colorOf: (i: number) => string;
fmt: (v: number) => string;
}
// ── cartesian (line / area / bar) ─────────────────────────────────────────────────
function CartesianChart(p: SubProps): JSXElement {
const [hover, setHover] = createSignal<number | null>(null);
const [pointerY, setPointerY] = createSignal(0);
const labels = () => p.props.labels ?? p.props.series[0]?.data.map((_, i) => String(i + 1)) ?? [];
const n = () => Math.max(labels().length, ...p.props.series.map((s) => s.data.length), 0);
// The y domain. Stacked bars/areas reach the tallest STACK, not the tallest single
// value; bars and areas always include zero so the baseline is honest.
const domain = createMemo(() => {
const series = p.props.series;
const count = n();
const includeZero = p.props.kind === "bar" || p.props.kind === "area";
let lo = Infinity, hi = -Infinity;
if (p.props.stacked) {
for (let i = 0; i < count; i++) {
let pos = 0, neg = 0;
for (const s of series) {
const v = s.data[i] ?? 0;
if (v >= 0) pos += v; else neg += v;
}
hi = Math.max(hi, pos); lo = Math.min(lo, neg);
}
} else {
for (const s of series) for (const v of s.data) { hi = Math.max(hi, v); lo = Math.min(lo, v); }
}
if (includeZero) { lo = Math.min(lo, 0); hi = Math.max(hi, 0); }
const scale = niceScale(p.props.yMin ?? lo, p.props.yMax ?? hi);
if (p.props.yMin != null) scale.min = p.props.yMin;
if (p.props.yMax != null) scale.max = p.props.yMax;
return scale;
});
// Left margin follows the widest y tick, so labels never clip and never float.
const layout = createMemo(() => {
const d = domain();
const showAxes = p.props.axes ?? true;
const tickW = showAxes ? Math.max(...d.ticks.map((t) => p.fmt(t).length)) * 7 + 12 : 8;
const left = Math.max(28, tickW);
const top = 12;
const bottom = showAxes ? 28 : 8;
const right = 12;
return {
left, top, right, bottom,
plotW: Math.max(0, p.width - left - right),
plotH: Math.max(0, p.height - top - bottom),
};
});
const yToPx = (v: number) => {
const d = domain(), l = layout();
const t = (v - d.min) / (d.max - d.min || 1);
return l.top + l.plotH * (1 - t);
};
const bandW = () => layout().plotW / Math.max(1, n());
const bandCenter = (i: number) => layout().left + bandW() * (i + 0.5);
const baselineY = () => yToPx(clamp(0, domain().min, domain().max));
// Grouped bar geometry: the series share a centred group that occupies ~72% of the
// band; each bar is capped at BAR_MAX_W with a SEG_GAP of air between neighbours.
const bars = createMemo(() => {
if (p.props.kind !== "bar") return [] as BarMark[];
const out: BarMark[] = [];
const count = n(), bw = bandW(), base = baselineY();
const series = p.props.series;
if (p.props.stacked) {
const colW = Math.min(BAR_MAX_W, bw * 0.72);
for (let i = 0; i < count; i++) {
const x = layout().left + bw * i + (bw - colW) / 2;
// The rounded data-end belongs to the OUTERMOST segment of each arm; the
// interior boundaries are separated by the surface gap, not by rounding.
let lastPos = -1, lastNeg = -1;
for (let s = 0; s < series.length; s++) {
const v = series[s].data[i] ?? 0;
if (v > 0) lastPos = s; else if (v < 0) lastNeg = s;
}
let accPos = 0, accNeg = 0;
for (let s = 0; s < series.length; s++) {
const v = series[s].data[i] ?? 0;
if (v === 0) continue;
const from = v >= 0 ? accPos : accNeg;
const to = from + v;
if (v >= 0) accPos = to; else accNeg = to;
const isEnd = (v > 0 && s === lastPos) || (v < 0 && s === lastNeg);
const inset = isEnd ? 0 : SEG_GAP; // shrink toward the baseline for the 2px gap
const yFrom = yToPx(from); // baseline-side edge
const yVal = v >= 0 ? yToPx(to) + inset : yToPx(to) - inset;
out.push({ x, w: colW, yBase: yFrom, yVal, seriesIdx: s, catIdx: i, value: v, round: isEnd });
}
}
} else {
const nS = Math.max(1, series.length);
const groupW = Math.min(bw * 0.72, (BAR_MAX_W + SEG_GAP) * nS);
const each = Math.max(1, Math.min(BAR_MAX_W, groupW / nS - SEG_GAP));
for (let i = 0; i < count; i++) {
const gx = layout().left + bw * i + (bw - groupW) / 2;
for (let s = 0; s < nS; s++) {
const v = series[s].data[i] ?? 0;
const x = gx + s * (groupW / nS) + (groupW / nS - each) / 2;
out.push({ x, w: each, yBase: base, yVal: yToPx(v), seriesIdx: s, catIdx: i, value: v, round: true });
}
}
}
return out;
});
// Line/area paths, one per series. Stacked areas ride on the running total below.
const paths = createMemo(() => {
if (p.props.kind !== "line" && p.props.kind !== "area") return [] as LineMark[];
const count = n(), base = baselineY();
const smooth = p.props.curve === "smooth";
const stackAcc = new Array(count).fill(0);
return p.props.series.map((s, si) => {
const pts: [number, number][] = [];
const lowerPts: [number, number][] = [];
for (let i = 0; i < count; i++) {
const v = s.data[i] ?? 0;
const yTop = p.props.stacked ? stackAcc[i] + v : v;
const yBot = p.props.stacked ? stackAcc[i] : 0;
pts.push([bandCenter(i), yToPx(yTop)]);
lowerPts.push([bandCenter(i), p.props.stacked ? yToPx(yBot) : base]);
if (p.props.stacked) stackAcc[i] = yTop;
}
const line = smooth ? smoothPathD(pts) : linePathD(pts);
const rev = [...lowerPts].reverse();
const area = line + " L" + linePathD(rev).slice(1) + " Z";
return { seriesIdx: si, line, area, pts };
});
});
const showAxes = () => p.props.axes ?? true;
const showGrid = () => p.props.grid ?? true;
const isBar = () => p.props.kind === "bar";
// The whole SVG interior, as a string (see the file header for why innerHTML and not
// JSX marks). Recomputed when the data, the size, or the hovered index changes.
const body = createMemo(() => {
const l = layout(), d = domain(), hv = hover();
const out: string[] = [];
for (const t of d.ticks) {
const y = yToPx(t);
if (showGrid()) out.push(`<line x1="${l.left}" x2="${l.left + l.plotW}" y1="${y}" y2="${y}" stroke="var(--color-line)" stroke-width="1"/>`);
if (showAxes()) out.push(`<text x="${l.left - 8}" y="${y}" text-anchor="end" dominant-baseline="middle" fill="var(--color-ink-faint)" style="font-size:11px;font-variant-numeric:tabular-nums">${esc(p.fmt(t))}</text>`);
}
const by = baselineY();
out.push(`<line x1="${l.left}" x2="${l.left + l.plotW}" y1="${by}" y2="${by}" stroke="var(--color-line-strong)" stroke-width="1"/>`);
if (showAxes()) {
labels().forEach((lab, i) =>
out.push(`<text x="${bandCenter(i)}" y="${p.height - 8}" text-anchor="middle" fill="var(--color-ink-faint)" style="font-size:11px">${esc(lab)}</text>`));
}
// crosshair (line/area only — a bar reader aims at a bar, not a hairline)
if (p.props.tooltip !== false && hv !== null && !isBar()) {
const x = bandCenter(hv);
out.push(`<line x1="${x}" x2="${x}" y1="${l.top}" y2="${l.top + l.plotH}" stroke="var(--color-line-strong)" stroke-width="1"/>`);
}
for (const b of bars()) {
const op = hv === null || hv === b.catIdx ? 1 : 0.5;
out.push(`<path d="${columnPath(b.x, b.w, b.yBase, b.yVal, b.round ? BAR_RADIUS : 0)}" fill="${esc(p.colorOf(b.seriesIdx))}" fill-opacity="${op}"/>`);
}
for (const pth of paths()) {
if (p.props.kind === "area") out.push(`<path d="${pth.area}" fill="${esc(p.colorOf(pth.seriesIdx))}" fill-opacity="0.1"/>`);
}
for (const pth of paths()) {
out.push(`<path d="${pth.line}" fill="none" stroke="${esc(p.colorOf(pth.seriesIdx))}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>`);
}
// hover markers on line/area, at the snapped index
if (p.props.tooltip !== false && hv !== null && !isBar()) {
for (const pth of paths()) {
const pt = pth.pts[hv];
if (pt) out.push(`<circle cx="${pt[0]}" cy="${pt[1]}" r="${MARK_R}" fill="${esc(p.colorOf(pth.seriesIdx))}" stroke="var(--color-surface)" stroke-width="2"/>`);
}
}
return out.join("");
});
const onMove = (e: PointerEvent) => {
if (p.props.tooltip === false) return;
const rect = (e.currentTarget as SVGElement).getBoundingClientRect();
const idx = clamp(Math.floor((e.clientX - rect.left - layout().left) / bandW()), 0, Math.max(0, n() - 1));
setHover(idx);
setPointerY(e.clientY - rect.top);
};
return (
<>
<svg width={p.width} height={p.height} viewBox={`0 0 ${p.width} ${p.height}`} class="block overflow-visible"
role="img" innerHTML={body()} onpointermove={onMove} onpointerleave={() => setHover(null)} />
<Show when={p.props.tooltip !== false && hover() !== null}>
<CartesianTooltip
props={p.props} colorOf={p.colorOf} fmt={p.fmt}
index={hover()!} label={labels()[hover()!] ?? ""}
anchorX={bandCenter(hover()!)} anchorY={pointerY()} width={p.width} height={p.height} />
</Show>
</>
);
}
interface BarMark { x: number; w: number; yBase: number; yVal: number; seriesIdx: number; catIdx: number; value: number; round: boolean; }
interface LineMark { seriesIdx: number; line: string; area: string; pts: [number, number][]; }
function CartesianTooltip(p: {
props: ChartProps; colorOf: (i: number) => string; fmt: (v: number) => string;
index: number; label: string; anchorX: number; anchorY: number; width: number; height: number;
}): JSXElement {
const flipLeft = () => p.anchorX > p.width / 2;
const style = () => ({
left: `${p.anchorX}px`,
top: `${clamp(p.anchorY, 8, p.height - 8)}px`,
transform: `translate(${flipLeft() ? "calc(-100% - 12px)" : "12px"}, -50%)`,
});
return (
<div class="pointer-events-none absolute z-10 min-w-32 max-w-64 rounded-default border border-line bg-surface px-3 py-2 text-xs shadow-lg"
style={style()}>
<div class="mb-1 font-medium text-ink">{p.label}</div>
<For each={p.props.series}>{(s, i) => (
<div class="flex items-center gap-2 leading-relaxed">
<span class="inline-block h-2.5 w-2.5 shrink-0 rounded-xs" style={{ "background-color": p.colorOf(i()) }} />
<span class="text-ink-muted">{s.name}</span>
<span class="ml-auto font-semibold text-ink" style={{ "font-variant-numeric": "tabular-nums" }}>
{p.fmt(s.data[p.index] ?? 0)}
</span>
</div>
)}</For>
</div>
);
}
// ── radial (pie / donut) ──────────────────────────────────────────────────────────
function RadialChart(p: SubProps): JSXElement {
const [hover, setHover] = createSignal<number | null>(null);
const [pointer, setPointer] = createSignal<[number, number]>([0, 0]);
const values = () => p.props.series[0]?.data ?? [];
const labels = () => p.props.labels ?? values().map((_, i) => String(i + 1));
const total = () => values().reduce((a, v) => a + Math.max(0, v), 0);
const geo = () => {
const cx = p.width / 2, cy = p.height / 2;
const rOut = Math.max(0, Math.min(p.width, p.height) / 2 - 8);
const rIn = p.props.kind === "donut" ? rOut * (p.props.donutRatio ?? 0.6) : 0;
return { cx, cy, rOut, rIn };
};
// Slices with their angular spans. A lone value becomes a full ring (drawn as a
// circle, since an arc from 0° to 360° collapses).
const slices = createMemo(() => {
const t = total();
const out: { idx: number; a0: number; a1: number; value: number }[] = [];
let a = 0;
values().forEach((v, i) => {
const sweep = t > 0 ? (Math.max(0, v) / t) * 360 : 0;
out.push({ idx: i, a0: a, a1: a + sweep, value: Math.max(0, v) });
a += sweep;
});
return out;
});
const body = createMemo(() => {
const g = geo(), hv = hover();
const out: string[] = [];
const positive = slices().filter((s) => s.value > 0);
if (positive.length === 1) {
// one value: a full ring, since a 360° arc collapses to nothing
const s = positive[0];
out.push(`<circle cx="${g.cx}" cy="${g.cy}" r="${g.rOut}" fill="${esc(p.colorOf(s.idx))}"/>`);
if (g.rIn > 0) out.push(`<circle cx="${g.cx}" cy="${g.cy}" r="${g.rIn}" fill="var(--color-surface)"/>`);
} else {
for (const s of slices()) {
if (s.a1 <= s.a0) continue;
const op = hv === null || hv === s.idx ? 1 : 0.55;
out.push(`<path d="${slicePathD(g.cx, g.cy, g.rOut, g.rIn, s.a0, s.a1)}" fill="${esc(p.colorOf(s.idx))}" fill-opacity="${op}" stroke="var(--color-surface)" stroke-width="${SEG_GAP}"/>`);
}
}
return out.join("");
});
const onMove = (e: PointerEvent) => {
if (p.props.tooltip === false) return;
const rect = (e.currentTarget as SVGElement).getBoundingClientRect();
const g = geo();
const px = e.clientX - rect.left, py = e.clientY - rect.top;
const dx = px - g.cx, dy = py - g.cy;
const dist = Math.hypot(dx, dy);
if (dist > g.rOut || (g.rIn > 0 && dist < g.rIn)) { setHover(null); return; }
// pointOnCircle maps deg (from 12 o'clock, clockwise) to (cos(deg-90), sin(deg-90));
// invert it: the pointer's slice angle is atan2(dy,dx) shifted back by 90°.
let deg = (Math.atan2(dy, dx) * 180 / Math.PI + 90 + 360) % 360;
const s = slices().find((s) => s.value > 0 && deg >= s.a0 && deg < s.a1);
setHover(s ? s.idx : null);
setPointer([px, py]);
};
return (
<>
<svg width={p.width} height={p.height} viewBox={`0 0 ${p.width} ${p.height}`} class="block" role="img"
innerHTML={body()} onpointermove={onMove} onpointerleave={() => setHover(null)} />
<Show when={p.props.tooltip !== false && hover() !== null}>
<div class="pointer-events-none absolute z-10 min-w-28 max-w-64 rounded-default border border-line bg-surface px-3 py-2 text-xs shadow-lg"
style={{
left: `${clamp(pointer()[0], 8, p.width - 8)}px`,
top: `${clamp(pointer()[1], 8, p.height - 8)}px`,
transform: "translate(-50%, calc(-100% - 12px))",
}}>
<div class="flex items-center gap-2">
<span class="inline-block h-2.5 w-2.5 shrink-0 rounded-xs" style={{ "background-color": p.colorOf(hover()!) }} />
<span class="text-ink-muted">{labels()[hover()!] ?? ""}</span>
</div>
<div class="mt-1 flex items-baseline gap-2">
<span class="font-semibold text-ink" style={{ "font-variant-numeric": "tabular-nums" }}>
{p.fmt(values()[hover()!] ?? 0)}
</span>
<span class="text-ink-faint">
{total() > 0 ? ((Math.max(0, values()[hover()!] ?? 0) / total()) * 100).toFixed(1) + "%" : ""}
</span>
</div>
</div>
</Show>
</>
);
}
// ── legend ─────────────────────────────────────────────────────────────────────
function Legend(p: { props: ChartProps; colorOf: (i: number) => string }): JSXElement {
// Pie/donut identity is the SLICE; cartesian identity is the SERIES. A line keys with
// a short stroke, a fill (bar/area/slice) with a swatch — the legend mirrors the mark.
const isRadial = p.props.kind === "pie" || p.props.kind === "donut";
const isLine = p.props.kind === "line";
const items = () => isRadial
? (p.props.labels ?? p.props.series[0]?.data.map((_, i) => String(i + 1)) ?? []).map((name, i) => ({ name, i }))
: p.props.series.map((s, i) => ({ name: s.name, i }));
return (
<div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5">
<For each={items()}>{(it) => (
<div class="flex items-center gap-1.5">
<Show when={isLine} fallback={
<span class="inline-block h-2.5 w-2.5 rounded-xs" style={{ "background-color": p.colorOf(it.i) }} />
}>
<span class="inline-block h-0.5 w-4 rounded-full" style={{ "background-color": p.colorOf(it.i) }} />
</Show>
<span class="text-xs text-ink-soft">{it.name}</span>
</div>
)}</For>
</div>
);
}