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

Update 3d chart mode, add US heatmap, move kjol-web -> kjol-website

Browse Source
This commit is contained in:
Max Amundsen
2026-07-16 12:40:49 -04:00
parent 550e97aa9b
commit 2477c2d6a2
75 changed files with 701 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
go/jsruntime/icons/README.md
View File

@@ -17,7 +17,7 @@ Only the styles in `jsbundler`'s `faStyleDirs` are read — currently `regular/`
<https://fontawesome.com/license>
This is a **subset**, not the full kit: the ~43 icons the `uikit/` components and
the `kjol-web` example actually reference, in `regular` and `solid`. The full kit
the `kjol-website` example actually reference, in `regular` and `solid`. The full kit
is ~81,000 files across 17 style directories and has no business in a shared
submodule.

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

@@ -164,6 +164,18 @@
--color-chart-6: #e34948; /* red */
--color-chart-7: #e87ba4; /* magenta */
--color-chart-8: #eb6834; /* orange */
/* Sequential ramp for the choropleth (uikit/USHeatmap): one hue, light→dark, six
steps low→high. Unlike the categorical slots it means MAGNITUDE, so it is a single
blue stepped by lightness. Dark mode re-points it below: on a near-black surface a
high value must read as BRIGHTER, not darker, so the ramp inverts its lightness
direction while keeping the same hue. */
--color-choropleth-1: #dbe9fb;
--color-choropleth-2: #b3d0f6;
--color-choropleth-3: #85b3ee;
--color-choropleth-4: #5591e4;
--color-choropleth-5: #2f6fca;
--color-choropleth-6: #124f8f;
}
/* ---------------------------------------------------------------------------
@@ -218,6 +230,15 @@
--color-chart-6: #e66767;
--color-chart-7: #d55181;
--color-chart-8: #d95926;
/* Same blue hue, stepped for the dark surface and inverted in direction: step 1 (low)
is the dimmest, step 6 (high) the brightest, so "more" reads as "brighter". */
--color-choropleth-1: #1b2a44;
--color-choropleth-2: #21406c;
--color-choropleth-3: #2c5f97;
--color-choropleth-4: #3f80c8;
--color-choropleth-5: #649de8;
--color-choropleth-6: #93c2f7;
}
/* The page's own background — painted before anything mounts, and behind it

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

@@ -41,25 +41,32 @@ export interface ChartProps {
// bar / area: stack the series instead of grouping them side by side.
stacked?: boolean;
// bar only: lay the bars horizontally — categories run down the y-axis, values along x.
horizontal?: 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;
// Give the chart depth: bars extrude, pie/donut tilt and gain a rim (line/area ignore
// it). An embellishment — flat reads more precisely — but sometimes wanted.
threeD?: boolean;
depth?: number; // 3D extrusion depth in px (default 16).
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.
// Format a value for the value-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.
yMin?: number; // pin the value domain instead of deriving it from the data.
yMax?: number;
}
@@ -77,6 +84,7 @@ const BAR_MAX_W = 24; // cap a bar's thickness; the band's leftover is de
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)
const DEFAULT_DEPTH = 16; // 3D extrusion depth
// ── number + geometry helpers ───────────────────────────────────────────────────
@@ -122,17 +130,29 @@ function niceScale(min: number, max: number, maxTicks = 5): { min: number; max:
return { min: niceMin, max: niceMax, ticks };
}
// 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`;
// A rectangle with a chosen subset of corners rounded — the data-end of a bar rounds,
// the baseline end stays square, and which end that is depends on orientation and sign.
function roundRectPath(x: number, y: number, w: number, h: number, r: number, side: BarSide): string {
const rr = Math.max(0, Math.min(r, w / 2, h / 2));
const tl = side === "top" || side === "left" ? rr : 0;
const tr = side === "top" || side === "right" ? rr : 0;
const br = side === "bottom" || side === "right" ? rr : 0;
const bl = side === "bottom" || side === "left" ? rr : 0;
return `M${x + tl},${y} L${x + w - tr},${y} Q${x + w},${y} ${x + w},${y + tr}` +
` L${x + w},${y + h - br} Q${x + w},${y + h} ${x + w - br},${y + h}` +
` L${x + bl},${y + h} Q${x},${y + h} ${x},${y + h - bl}` +
` L${x},${y + tl} Q${x},${y} ${x + tl},${y} Z`;
}
// A bar extruded up-and-right by (dx, dy): a right side face (darkened), a top face
// (lightened) and the front face. The overlays are flat black/white washes so the shading
// needs no colour maths on a CSS variable it cannot read at build time.
function bar3D(x: number, y: number, w: number, h: number, color: string, op: number, dx: number, dy: number): string {
const top = `M${x},${y} L${x + dx},${y - dy} L${x + w + dx},${y - dy} L${x + w},${y} Z`;
const right = `M${x + w},${y} L${x + w + dx},${y - dy} L${x + w + dx},${y + h - dy} L${x + w},${y + h} Z`;
return `<path d="${right}" fill="${color}" fill-opacity="${op}"/><path d="${right}" fill="#000" fill-opacity="${0.24 * op}"/>` +
`<path d="${top}" fill="${color}" fill-opacity="${op}"/><path d="${top}" fill="#fff" fill-opacity="${0.2 * op}"/>` +
`<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${color}" fill-opacity="${op}"/>`;
}
function linePathD(pts: [number, number][]): string {
@@ -157,22 +177,25 @@ function smoothPathD(pts: [number, number][]): string {
return d;
}
function pointOnCircle(cx: number, cy: number, r: number, deg: number): [number, number] {
// A point on a circle tilted about its horizontal axis by factor k (k=1 is upright): the
// vertical radius shrinks to k·r, so the circle reads as an ellipse seen at an angle.
function tiltPoint(cx: number, cy: number, r: number, deg: number, k: 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)];
return [cx + r * Math.cos(a), cy + k * 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 {
// One pie/donut slice from a0 to a1 degrees, tilted by k (k=1 upright). rIn === 0 gives a
// pie wedge. Uses elliptical arcs so the tilt is exact, not a polygon approximation.
function slicePathD(cx: number, cy: number, rOut: number, rIn: number, a0: number, a1: number, k = 1): string {
const large = a1 - a0 > 180 ? 1 : 0;
const [ox0, oy0] = pointOnCircle(cx, cy, rOut, a0);
const [ox1, oy1] = pointOnCircle(cx, cy, rOut, a1);
const [ox0, oy0] = tiltPoint(cx, cy, rOut, a0, k);
const [ox1, oy1] = tiltPoint(cx, cy, rOut, a1, k);
if (rIn <= 0) {
return `M${cx},${cy} L${ox0},${oy0} A${rOut},${rOut} 0 ${large} 1 ${ox1},${oy1} Z`;
return `M${cx},${cy} L${ox0},${oy0} A${rOut},${k * 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 [ix1, iy1] = tiltPoint(cx, cy, rIn, a1, k);
const [ix0, iy0] = tiltPoint(cx, cy, rIn, a0, k);
return `M${ox0},${oy0} A${rOut},${k * rOut} 0 ${large} 1 ${ox1},${oy1} L${ix1},${iy1} A${rIn},${k * rIn} 0 ${large} 0 ${ix0},${iy0} Z`;
}
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
@@ -223,16 +246,27 @@ interface SubProps {
fmt: (v: number) => string;
}
type BarSide = "top" | "bottom" | "left" | "right";
interface BarMark { x: number; y: number; w: number; h: number; side: BarSide; seriesIdx: number; catIdx: number; value: number; round: boolean; }
interface LineMark { seriesIdx: number; line: string; area: string; pts: [number, number][]; }
// ── cartesian (line / area / bar) ─────────────────────────────────────────────────
function CartesianChart(p: SubProps): JSXElement {
const [hover, setHover] = createSignal<number | null>(null);
const [pointerY, setPointerY] = createSignal(0);
const [pointer, setPointer] = createSignal<[number, number]>([0, 0]);
const horiz = () => p.props.kind === "bar" && !!p.props.horizontal;
// 3D extrudes bars only; on a line/area it reads as noise, so it is a no-op there.
const threeD = () => !!p.props.threeD && p.props.kind === "bar";
const depth = () => p.props.depth ?? DEFAULT_DEPTH;
const dx = () => (threeD() ? depth() * 0.7 : 0);
const dy = () => (threeD() ? depth() * 0.55 : 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
// The value 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;
@@ -258,15 +292,24 @@ function CartesianChart(p: SubProps): JSXElement {
return scale;
});
// Left margin follows the widest y tick, so labels never clip and never float.
// Margins: the value axis wants room for its ticks, the category axis for its labels —
// which sides those are on flips with orientation. 3D adds depth to the top and right,
// where bars extrude, so nothing clips.
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;
const valTickW = Math.max(...d.ticks.map((t) => p.fmt(t).length), 1) * 7 + 12;
const catLabelW = Math.max(...labels().map((s) => s.length), 1) * 7 + 12;
let left: number, bottom: number;
if (horiz()) {
left = showAxes ? Math.max(28, catLabelW) : 8; // category labels on the left
bottom = showAxes ? 28 : 8; // value ticks on the bottom
} else {
left = showAxes ? Math.max(28, valTickW) : 8; // value ticks on the left
bottom = showAxes ? 28 : 8; // category labels on the bottom
}
const top = 12 + dy();
const right = 12 + dx();
return {
left, top, right, bottom,
plotW: Math.max(0, p.width - left - right),
@@ -274,28 +317,33 @@ function CartesianChart(p: SubProps): JSXElement {
};
});
const yToPx = (v: number) => {
// valuePos: pixel along the VALUE axis (y for vertical, x for horizontal).
// catCenter: pixel of category i along the CATEGORY axis (x for vertical, y for horizontal).
const valuePos = (v: number) => {
const d = domain(), l = layout();
const t = (v - d.min) / (d.max - d.min || 1);
return l.top + l.plotH * (1 - t);
return horiz() ? l.left + l.plotW * t : 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));
const bandFull = () => (horiz() ? layout().plotH : layout().plotW) / Math.max(1, n());
const catStart = () => (horiz() ? layout().top : layout().left);
const catCenter = (i: number) => catStart() + bandFull() * (i + 0.5);
const baseValue = () => valuePos(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.
// Bars resolved to plain rectangles + which side is the (rounded) data-end, so the
// renderer draws vertical and horizontal bars the same way.
const bars = createMemo(() => {
if (p.props.kind !== "bar") return [] as BarMark[];
const out: BarMark[] = [];
const count = n(), bw = bandW(), base = baselineY();
const count = n(), bf = bandFull(), base = baseValue(), h = horiz();
const series = p.props.series;
// rect(bandOffset, thickness, valueA, valueB) → a rectangle in the right orientation.
const rect = (off: number, thick: number, va: number, vb: number): { x: number; y: number; w: number; h: number } =>
h ? { x: Math.min(va, vb), y: off, w: Math.abs(vb - va), h: thick }
: { x: off, y: Math.min(va, vb), w: thick, h: Math.abs(vb - va) };
if (p.props.stacked) {
const colW = Math.min(BAR_MAX_W, bw * 0.72);
const thick = Math.min(BAR_MAX_W, bf * 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.
const off = catStart() + bf * i + (bf - thick) / 2;
let lastPos = -1, lastNeg = -1;
for (let s = 0; s < series.length; s++) {
const v = series[s].data[i] ?? 0;
@@ -309,22 +357,25 @@ function CartesianChart(p: SubProps): JSXElement {
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 });
const inset = isEnd ? 0 : SEG_GAP; // 2px surface gap between segments
const vFrom = valuePos(from);
// pull the value end toward the baseline by the gap (except the outer end)
const vTo = valuePos(to) + (h ? (v >= 0 ? -inset : inset) : (v >= 0 ? inset : -inset));
const r = rect(off, thick, vFrom, vTo);
out.push({ ...r, side: barSide(h, v), 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));
const groupSize = Math.min(bf * 0.72, (BAR_MAX_W + SEG_GAP) * nS);
const each = Math.max(1, Math.min(BAR_MAX_W, groupSize / nS - SEG_GAP));
for (let i = 0; i < count; i++) {
const gx = layout().left + bw * i + (bw - groupW) / 2;
const g = catStart() + bf * i + (bf - groupSize) / 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 });
const off = g + s * (groupSize / nS) + (groupSize / nS - each) / 2;
const r = rect(off, each, base, valuePos(v));
out.push({ ...r, side: barSide(h, v), seriesIdx: s, catIdx: i, value: v, round: true });
}
}
}
@@ -334,7 +385,7 @@ function CartesianChart(p: SubProps): JSXElement {
// 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 count = n(), base = baseValue();
const smooth = p.props.curve === "smooth";
const stackAcc = new Array(count).fill(0);
return p.props.series.map((s, si) => {
@@ -344,8 +395,8 @@ function CartesianChart(p: SubProps): JSXElement {
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]);
pts.push([catCenter(i), valuePos(yTop)]);
lowerPts.push([catCenter(i), p.props.stacked ? valuePos(yBot) : base]);
if (p.props.stacked) stackAcc[i] = yTop;
}
const line = smooth ? smoothPathD(pts) : linePathD(pts);
@@ -362,34 +413,59 @@ function CartesianChart(p: SubProps): JSXElement {
// 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 l = layout(), d = domain(), hv = hover(), h = horiz();
const out: string[] = [];
// gridlines + value ticks (perpendicular to the value axis)
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 vp = valuePos(t);
if (showGrid()) {
out.push(h
? `<line x1="${vp}" x2="${vp}" y1="${l.top}" y2="${l.top + l.plotH}" stroke="var(--color-line)" stroke-width="1"/>`
: `<line x1="${l.left}" x2="${l.left + l.plotW}" y1="${vp}" y2="${vp}" stroke="var(--color-line)" stroke-width="1"/>`);
}
if (showAxes()) {
out.push(h
? `<text x="${vp}" y="${p.height - 8}" text-anchor="middle" fill="var(--color-ink-faint)" style="font-size:11px;font-variant-numeric:tabular-nums">${esc(p.fmt(t))}</text>`
: `<text x="${l.left - 8}" y="${vp}" 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"/>`);
// baseline (the value-0 line), a touch stronger than the grid
const bv = baseValue();
out.push(h
? `<line x1="${bv}" x2="${bv}" y1="${l.top}" y2="${l.top + l.plotH}" stroke="var(--color-line-strong)" stroke-width="1"/>`
: `<line x1="${l.left}" x2="${l.left + l.plotW}" y1="${bv}" y2="${bv}" stroke="var(--color-line-strong)" stroke-width="1"/>`);
// category labels (along the category axis)
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>`));
out.push(h
? `<text x="${l.left - 8}" y="${catCenter(i)}" text-anchor="end" dominant-baseline="middle" fill="var(--color-ink-faint)" style="font-size:11px">${esc(lab)}</text>`
: `<text x="${catCenter(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"/>`);
const c = catCenter(hv);
out.push(`<line x1="${c}" x2="${c}" 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}"/>`);
// bars — flat or extruded. 3D draws back-to-front so nearer bars overlap farther ones.
const bs = bars();
if (threeD()) {
for (const b of bs) {
const op = hv === null || hv === b.catIdx ? 1 : 0.5;
out.push(bar3D(b.x, b.y, b.w, b.h, esc(p.colorOf(b.seriesIdx)), op, dx(), dy()));
}
} else {
for (const b of bs) {
const op = hv === null || hv === b.catIdx ? 1 : 0.5;
out.push(`<path d="${roundRectPath(b.x, b.y, b.w, b.h, b.round ? BAR_RADIUS : 0, b.side)}" fill="${esc(p.colorOf(b.seriesIdx))}" fill-opacity="${op}"/>`);
}
}
// areas then lines (3D does not apply — depth reads as noise on a line).
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"/>`);
}
@@ -411,11 +487,15 @@ function CartesianChart(p: SubProps): JSXElement {
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);
const px = e.clientX - rect.left, py = e.clientY - rect.top;
const along = horiz() ? py - layout().top : px - layout().left;
setHover(clamp(Math.floor(along / bandFull()), 0, Math.max(0, n() - 1)));
setPointer([px, py]);
};
const anchorX = () => (horiz() ? pointer()[0] : catCenter(hover()!));
const anchorY = () => (horiz() ? catCenter(hover()!) : pointer()[1]);
return (
<>
<svg width={p.width} height={p.height} viewBox={`0 0 ${p.width} ${p.height}`} class="block overflow-visible"
@@ -424,14 +504,15 @@ function CartesianChart(p: SubProps): JSXElement {
<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} />
anchorX={anchorX()} anchorY={anchorY()} 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 barSide(horiz: boolean, v: number): BarSide {
return horiz ? (v >= 0 ? "right" : "left") : (v >= 0 ? "top" : "bottom");
}
function CartesianTooltip(p: {
props: ChartProps; colorOf: (i: number) => string; fmt: (v: number) => string;
@@ -466,19 +547,26 @@ function RadialChart(p: SubProps): JSXElement {
const [hover, setHover] = createSignal<number | null>(null);
const [pointer, setPointer] = createSignal<[number, number]>([0, 0]);
const threeD = () => !!p.props.threeD;
const depth = () => p.props.depth ?? DEFAULT_DEPTH;
const tilt = () => (threeD() ? 0.62 : 1); // vertical squash of the disc when tilted
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 k = tilt();
const cx = p.width / 2;
// tilting shrinks the disc's height to k·2r and adds `depth` below; keep it centred.
const rOut = Math.max(0, Math.min(p.width, p.height - (threeD() ? depth() : 0)) / 2 - 8);
const cy = p.height / 2 - (threeD() ? depth() / 2 : 0);
const rIn = p.props.kind === "donut" ? rOut * (p.props.donutRatio ?? 0.6) : 0;
return { cx, cy, rOut, rIn };
return { cx, cy, rOut, rIn, k };
};
// Slices with their angular spans. A lone value becomes a full ring (drawn as a
// circle, since an arc from 0° to 360° collapses).
// circle/ellipse, since an arc from 0° to 360° collapses).
const slices = createMemo(() => {
const t = total();
const out: { idx: number; a0: number; a1: number; value: number }[] = [];
@@ -491,20 +579,44 @@ function RadialChart(p: SubProps): JSXElement {
return out;
});
// The extruded rim under one slice: the front-facing part of its outer arc (angles
// 90°–270°, where the ellipse edge dips below centre) swept down by `depth`.
const wall = (g: ReturnType<typeof geo>, a0: number, a1: number): string => {
const w0 = Math.max(a0, 90), w1 = Math.min(a1, 270);
if (w1 <= w0) return "";
const [x0, y0] = tiltPoint(g.cx, g.cy, g.rOut, w0, g.k);
const [x1, y1] = tiltPoint(g.cx, g.cy, g.rOut, w1, g.k);
const large = w1 - w0 > 180 ? 1 : 0;
return `M${x0},${y0} A${g.rOut},${g.k * g.rOut} 0 ${large} 1 ${x1},${y1}` +
` L${x1},${y1 + depth()} A${g.rOut},${g.k * g.rOut} 0 ${large} 0 ${x0},${y0 + depth()} Z`;
};
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 single = positive.length === 1;
// 3D: draw every slice's rim first (the disc's thickness), then the top faces on top.
if (threeD()) {
for (const s of single ? positive : slices()) {
if (s.a1 <= s.a0) continue;
const d = single ? wall(g, 90, 270) : wall(g, s.a0, s.a1);
if (!d) continue;
const c = esc(p.colorOf(s.idx));
out.push(`<path d="${d}" fill="${c}"/><path d="${d}" fill="#000" fill-opacity="0.3"/>`);
}
}
if (single) {
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)"/>`);
out.push(`<path d="${slicePathD(g.cx, g.cy, g.rOut, 0, 0, 359.999, g.k)}" fill="${esc(p.colorOf(s.idx))}"/>`);
if (g.rIn > 0) out.push(`<ellipse cx="${g.cx}" cy="${g.cy}" rx="${g.rIn}" ry="${g.k * 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}"/>`);
out.push(`<path d="${slicePathD(g.cx, g.cy, g.rOut, g.rIn, s.a0, s.a1, g.k)}" fill="${esc(p.colorOf(s.idx))}" fill-opacity="${op}" stroke="var(--color-surface)" stroke-width="${SEG_GAP}"/>`);
}
}
return out.join("");
@@ -515,11 +627,9 @@ function RadialChart(p: SubProps): JSXElement {
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 dx = px - g.cx, dy = (py - g.cy) / g.k; // undo the tilt to test against a circle
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);

2
go/jsruntime/uikit/Theme.tsx
View File

@@ -7,7 +7,7 @@
// the kit are none the wiser.
//
// The storage key is deliberately the SAME one the Go/WASM kit uses
// (webui.ThemeBootScript, webui.themeStorageKey). Both layers of kjol-web are served
// (webui.ThemeBootScript, webui.themeStorageKey). Both layers of kjol-website are served
// from one origin, so they share a localStorage: choose dark in the /wasm section,
// walk over to /js, and it is still dark. Two front-ends, one preference.

234
go/jsruntime/uikit/USHeatmap.tsx Normal file
View File

@@ -0,0 +1,234 @@
import { createMemo, createSignal, For, Show, JSXElement } from "solid-js";
import { US_STATES, US_VIEWBOX } from "./usStates.ts";
// A choropleth of the 50 states + DC, plus optional lat/lng markers. Like uikit/Chart it
// draws SVG as an innerHTML string (the Go Solid compiler will not namespace control-flow
// SVG — see Chart.tsx). The state boundaries are pre-projected with d3's albersUsa into a
// 960×600 box (usStates.ts); the SAME projection is reimplemented below so that lat/lng
// points land exactly on top of the states. It is a faithful, dependency-free port —
// validated to 0px against d3-geo, Alaska and Hawaii insets included.
//
// The map scales by viewBox rather than by measurement (there is no axis text to keep
// crisp), so no ResizeObserver: viewBox 960×600 + a 960/600 aspect-ratio box fills the
// column. Hover reads e.target's data-attributes — the specific state path or point marker
// under the pointer — so no coordinate maths is needed to know what is being pointed at.
// ── the albersUsa projection (ported from d3-geo, scale 1280, translate [480,300]) ──────
const RAD = Math.PI / 180, TAU = 2 * Math.PI;
function conicEqualAreaRaw(y0: number, y1: number) {
const sy0 = Math.sin(y0), n = (sy0 + Math.sin(y1)) / 2;
const c = 1 + sy0 * (2 * n - sy0), r0 = Math.sqrt(c) / n;
return (lambda: number, phi: number): [number, number] => {
const r = Math.sqrt(c - 2 * n * Math.sin(phi)) / n;
return [r * Math.sin(lambda * n), r0 - r * Math.cos(lambda * n)];
};
}
// One conic-equal-area lobe. `center` is given in the rotated frame (near 0° lon), so it is
// not re-rotated; the input point is rotated by `rotateLon` before projecting.
function albersLobe(rotateLon: number, centerLon: number, centerLat: number, p0: number, p1: number, scale: number, tx: number, ty: number) {
const raw = conicEqualAreaRaw(p0 * RAD, p1 * RAD);
const rot = (lon: number) => { const l = (lon + rotateLon) * RAD; return ((l + Math.PI) % TAU + TAU) % TAU - Math.PI; };
const [cx, cy] = raw(centerLon * RAD, centerLat * RAD);
return (lon: number, lat: number): [number, number] => {
const [x, y] = raw(rot(lon), lat * RAD);
return [tx + scale * (x - cx), ty - scale * (y - cy)];
};
}
const K = 1280, TX = 480, TY = 300, EPS = 1e-6;
const _lower48 = albersLobe(96, -0.6, 38.7, 29.5, 45.5, K, TX, TY);
const _alaska = albersLobe(154, -2, 58.5, 55, 65, K * 0.35, TX - 0.307 * K, TY + 0.201 * K);
const _hawaii = albersLobe(157, -3, 19.9, 8, 18, K, TX - 0.205 * K, TY + 0.212 * K);
const inBox = (p: [number, number], x0: number, y0: number, x1: number, y1: number) =>
p[0] >= x0 && p[0] <= x1 && p[1] >= y0 && p[1] <= y1;
// Project [lng, lat] to the 960×600 map, choosing the lower-48 / Alaska / Hawaii lobe the
// way albersUsa does — by which one's clip box the point falls in. null if off-map.
export function projectUS(lng: number, lat: number): [number, number] | null {
let p = _lower48(lng, lat);
if (inBox(p, TX - 0.455 * K, TY - 0.238 * K, TX + 0.455 * K, TY + 0.238 * K)) return p;
p = _alaska(lng, lat);
if (inBox(p, TX - 0.425 * K + EPS, TY + 0.120 * K + EPS, TX - 0.214 * K - EPS, TY + 0.234 * K - EPS)) return p;
p = _hawaii(lng, lat);
if (inBox(p, TX - 0.214 * K + EPS, TY + 0.166 * K + EPS, TX - 0.115 * K - EPS, TY + 0.234 * K - EPS)) return p;
return null;
}
// ── the component ────────────────────────────────────────────────────────────────
export interface USHeatmapPoint {
lat: number;
lng: number;
value?: number;
label?: string;
}
export interface USHeatmapProps {
// State value map: USPS code (e.g. "CA", "TX", "DC") → number. States present are
// shaded on the sequential ramp; states absent are drawn in the no-data neutral.
data?: Record<string, number>;
// lat/lng markers, projected onto the map. Points outside the US are dropped.
points?: USHeatmapPoint[];
height?: number; // px; omit to size from the container width (960:600 aspect).
class?: string;
steps?: number; // choropleth buckets, 1–6 (default 6, the token count).
tooltip?: boolean;
valueFormat?: (v: number) => string;
pointColor?: string; // default var(--color-chart-1) (blue).
pointRadius?: number; // fixed dot radius (default 5); the MAXIMUM radius when proportional.
// Scale each dot's AREA by its value (radius ∝ √value) so a bigger dot means "more" —
// area, not radius, because the eye reads a circle by its area.
proportional?: boolean;
// Override a state's tooltip name (default the built-in full name).
stateName?: (code: string) => string;
}
const CHOROPLETH_STEPS = 6; // must match --color-choropleth-1..N in theme.css
const POINT_OPACITY = 0.85; // dots are slightly see-through so the state beneath still reads
const _intl = () => new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
let _fmt: Intl.NumberFormat | null = null;
const defaultFormat = (v: number) => (Number.isFinite(v) ? (_fmt ??= _intl()).format(v) : String(v));
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
const esc = (s: unknown) =>
String(s).replace(/[&<>"]/g, (c) => (c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;"));
type Hover =
| { kind: "state"; code: string }
| { kind: "point"; idx: number }
| null;
export function USHeatmap(props: USHeatmapProps): JSXElement {
let wrap: HTMLDivElement | undefined;
const [hover, setHover] = createSignal<Hover>(null);
const [pointer, setPointer] = createSignal<[number, number]>([0, 0]);
const fmt = (v: number) => (props.valueFormat ?? defaultFormat)(v);
const steps = () => clamp(props.steps ?? CHOROPLETH_STEPS, 1, CHOROPLETH_STEPS);
const stateName = (code: string) => (props.stateName ? props.stateName(code) : US_STATES[code]?.name ?? code);
// The value range across the states that have data, for quantising into ramp buckets.
const range = createMemo(() => {
const vals = Object.values(props.data ?? {}).filter((v) => Number.isFinite(v));
return vals.length ? { min: Math.min(...vals), max: Math.max(...vals), has: true } : { min: 0, max: 0, has: false };
});
const bucket = (v: number) => {
const r = range();
const t = r.max > r.min ? (v - r.min) / (r.max - r.min) : 1;
return clamp(Math.floor(t * steps()), 0, steps() - 1) + 1;
};
// projected markers (drop anything off-map), kept with their original index for hover.
const points = createMemo(() =>
(props.points ?? []).map((pt, idx) => ({ pt, idx, xy: projectUS(pt.lng, pt.lat) }))
.filter((m): m is { pt: USHeatmapPoint; idx: number; xy: [number, number] } => m.xy !== null));
const body = createMemo(() => {
const data = props.data ?? {};
const hv = hover();
const proportional = !!props.proportional;
const maxR = props.pointRadius ?? (proportional ? 16 : 5);
const minR = Math.min(3, maxR * 0.35);
const maxV = proportional ? Math.max(1, ...points().map((m) => Math.max(0, m.pt.value ?? 0))) : 1;
const radiusOf = (v: number | undefined) =>
proportional ? minR + (maxR - minR) * Math.sqrt(clamp((v ?? 0) / maxV, 0, 1)) : maxR;
const pc = esc(props.pointColor ?? "var(--color-chart-1)");
const out: string[] = [];
for (const code in US_STATES) {
const st = US_STATES[code];
const has = Object.prototype.hasOwnProperty.call(data, code) && Number.isFinite(data[code]);
const fill = has ? `var(--color-choropleth-${bucket(data[code])})` : "var(--color-surface-strong)";
const isHover = hv?.kind === "state" && hv.code === code;
out.push(`<path d="${st.d}" data-state="${code}" fill="${fill}" fill-opacity="${isHover ? 0.82 : 1}" stroke="var(--color-surface)" stroke-width="0.8"/>`);
}
for (const m of points()) {
const isHover = hv?.kind === "point" && hv.idx === m.idx;
const r = radiusOf(m.pt.value);
out.push(`<circle data-pt="${m.idx}" cx="${m.xy[0]}" cy="${m.xy[1]}" r="${isHover ? r + 2 : r}" fill="${pc}" fill-opacity="${POINT_OPACITY}"/>`);
}
return out.join("");
});
const onMove = (e: PointerEvent) => {
if (props.tooltip === false) return;
const t = e.target as Element;
const pIdx = t.getAttribute?.("data-pt");
const code = t.getAttribute?.("data-state");
if (pIdx != null) setHover({ kind: "point", idx: +pIdx });
else if (code != null) setHover({ kind: "state", code });
else setHover(null);
if (wrap) {
const r = wrap.getBoundingClientRect();
setPointer([e.clientX - r.left, e.clientY - r.top]);
}
};
const tip = createMemo(() => {
const hv = hover();
if (!hv) return null;
if (hv.kind === "point") {
const pt = (props.points ?? [])[hv.idx];
if (!pt) return null;
return {
title: pt.label ?? `${pt.lat.toFixed(2)}, ${pt.lng.toFixed(2)}`,
value: pt.value != null ? fmt(pt.value) : "",
swatch: props.pointColor ?? "var(--color-chart-1)",
};
}
const v = (props.data ?? {})[hv.code];
const has = v != null && Number.isFinite(v);
return {
title: stateName(hv.code),
value: has ? fmt(v) : "no data",
swatch: has ? `var(--color-choropleth-${bucket(v)})` : "var(--color-surface-strong)",
};
});
return (
<div ref={wrap} class={"relative w-full" + (props.class ? " " + props.class : "")}>
<svg viewBox={US_VIEWBOX} role="img" class="block w-full"
style={props.height ? { height: `${props.height}px` } : { "aspect-ratio": "960 / 600" }}
innerHTML={body()} onpointermove={onMove} onpointerleave={() => setHover(null)} />
<Show when={props.tooltip !== false && tip()}>
{(t) => (
<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, 100000)}px`,
top: `${Math.max(8, pointer()[1])}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": t().swatch }} />
<span class="font-medium text-ink">{t().title}</span>
</div>
<Show when={t().value}>
<div class="mt-1 font-semibold text-ink" style={{ "font-variant-numeric": "tabular-nums" }}>{t().value}</div>
</Show>
</div>
)}
</Show>
<Show when={range().has}>
<ChoroplethLegend min={range().min} max={range().max} steps={steps()} fmt={fmt} />
</Show>
</div>
);
}
function ChoroplethLegend(p: { min: number; max: number; steps: number; fmt: (v: number) => string }): JSXElement {
const swatches = () => Array.from({ length: p.steps }, (_, i) => i + 1);
return (
<div class="mt-3 flex items-center gap-2 text-xs text-ink-muted">
<span style={{ "font-variant-numeric": "tabular-nums" }}>{p.fmt(p.min)}</span>
<div class="flex overflow-hidden rounded-xs">
<For each={swatches()}>{(k) => (
<span class="h-3 w-6" style={{ "background-color": `var(--color-choropleth-${k})` }} />
)}</For>
</div>
<span style={{ "font-variant-numeric": "tabular-nums" }}>{p.fmt(p.max)}</span>
</div>
);
}

56
go/jsruntime/uikit/usStates.ts Normal file
View File

File diff suppressed because one or more lines are too long