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

update heatmap, add wasm charts

Browse Source
This commit is contained in:
Max Amundsen
2026-07-16 14:55:16 -04:00
parent 2477c2d6a2
commit 093bad311e
13 changed files with 1949 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
go/jsruntime/uikit/USHeatmap.tsx
View File

@@ -75,8 +75,9 @@ export interface USHeatmapProps {
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.
pointColor?: string; // default var(--color-chart-1) (blue).
pointRadius?: number; // fixed dot radius (default 5); the MAXIMUM radius when proportional.
pointOpacity?: number; // dot fill opacity (default 0.85), so the state beneath still reads.
// 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;
@@ -146,7 +147,7 @@ export function USHeatmap(props: USHeatmapProps): JSXElement {
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}"/>`);
out.push(`<circle data-pt="${m.idx}" cx="${m.xy[0]}" cy="${m.xy[1]}" r="${isHover ? r + 2 : r}" fill="${pc}" fill-opacity="${props.pointOpacity ?? POINT_OPACITY}"/>`);
}
return out.join("");
});