<notatio-bar-chart-3d>

Parse a JSON attribute defensively -- an empty/invalid value reads as undefined. */ function parseJson(value: string): unknown { const text = value.trim(); if (!text) return undefined; try { return JSON.parse(text); } catch { return undefined; } }

const isNumber = (v: unknown): v is number => typeof v === "number" && Number.isFinite(v);

/** A rectangular matrix of heights; a flat list reads as a single row. */ function toMatrix(data: unknown): number[][] | undefined { if (!Array.isArray(data) || data.length === 0) return undefined; if (data.every(isNumber)) return [data as number[]]; if (!data.every((r) => Array.isArray(r))) return undefined; // A null (or any non-number) reads as a hole, not as a dropped cell, so // rows keep their length and the grid stays rectangular. const rows = (data as unknown[][]).map((r) => r.map((v) => (isNumber(v) ? v : Number.NaN))); return rows.every((r) => r.length === rows[0].length && r.length > 0) ? rows : undefined; }

/** A comma-separated label list; empty reads as undefined. */ function toLabels(raw: string): string[] | undefined { const parts = raw .split(",") .map((s) => s.trim()) .filter((s) => s.length > 0); return parts.length > 0 ? parts : undefined; }

/** <notatio-bar-chart-3d data="[[1,2],[3,4]]"> -- a matrix of heights as 3-D bars (Wolfram's BarChart3D), orthographically projected. data[j][i] is the bar in row j, column i; a flat list reads as a single row. Each bar shows its top face and the two sides that turn toward the viewer, shaded by height, painted back-to-front. row-labels / col-labels take comma-separated categories drawn at the near floor edges.

The view is fixed by azimuth / elevation, so the figure is a pure function of its attributes and renders identically under SSR.

Stories in the playground·packages/notatio-lit/src/notatio-bar-chart-3d.ts· in Vue: <BarChart3D>

Attributes

Attribute	Type	Default	Notes
data	string	""
azimuth	number	30
elevation	number	25
zoom	number	1
gap	number	-1
axes	string	"true"
zrange	string	""
row-labels property rowLabels	string	""
col-labels property colLabels	string	""
label	string	""