@pibbl/core 0.0.2 → 0.0.3-alpha.90.1

package/dist/features/viz/lib/graph/hierarchy.d.ts

@@ -0,0 +1,21 @@
+import type { Accessor, Bounds, HierarchyAccessors, LabelGeometry, PartitionAccessors, Size, VizKey } from "./types.js";
+export interface HierarchyRecord<D> {
+    readonly datum: D;
+    readonly key: VizKey;
+    readonly parent: HierarchyRecord<D> | null;
+    readonly children: readonly HierarchyRecord<D>[];
+    readonly depth: number;
+    readonly collapsed: boolean;
+    readonly hiddenChildren: number;
+    readonly value: number;
+    readonly isLeaf: boolean;
+}
+export declare function hierarchy<D>(root: D, options: HierarchyAccessors<D>, name: string, value?: PartitionAccessors<D>["value"]): HierarchyRecord<D>;
+export declare function finiteGap(value: number | undefined, fallback: number, name: string): number;
+export declare function finiteSize<D>(datum: D, size: Size | ((datum: D) => Size) | undefined, name: string): Size;
+export declare function hierarchyLabel<D>(datum: D, accessor: Accessor<D, string> | undefined, bounds: Bounds, fallbackText?: string): LabelGeometry;
+/** Build a visible partition label that retains the measured value and its declared unit. */
+export declare function partitionLabel<D>(record: HierarchyRecord<D>, options: PartitionAccessors<D>, bounds: Bounds): LabelGeometry;
+/** Return whether a partition has enough physical room for a single label line. */
+export declare function partitionLabelFits(label: LabelGeometry, bounds: Bounds): boolean;
+export declare function checkedBounds(bounds: Bounds, name: string): Bounds;

package/dist/features/viz/lib/graph/hierarchy.js

@@ -0,0 +1,112 @@
+import { readAccessor, validateBounds } from "./shared.js";
+function key(datum, accessor, name) {
+  const value = readAccessor(datum, accessor);
+  if (typeof value !== "string" && (typeof value !== "number" || !Number.isFinite(value)))
+    throw new TypeError(`${name}: key must be a string or finite number.`);
+  return value;
+}
+function hierarchy(root, options, name, value) {
+  const known = /* @__PURE__ */ new Set();
+  const active = /* @__PURE__ */ new Set();
+  const visit = (datum, parent, depth) => {
+    if (active.has(datum))
+      throw new Error(`${name}: hierarchy contains a cycle.`);
+    const id = key(datum, options.keyBy, name);
+    if (known.has(id)) throw new Error(`${name}: duplicate key ${String(id)}.`);
+    known.add(id);
+    active.add(datum);
+    const rawChildren = readAccessor(datum, options.childrenBy);
+    if (rawChildren != null && !Array.isArray(rawChildren))
+      throw new TypeError(
+        `${name}: childrenBy must return an array, null, or undefined.`
+      );
+    const collapsed = options.collapsed?.(datum) === true;
+    const draft = {
+      datum,
+      key: id,
+      parent,
+      children: [],
+      depth,
+      collapsed,
+      hiddenChildren: rawChildren?.length ?? 0,
+      value: 0,
+      isLeaf: !rawChildren?.length
+    };
+    const children = (rawChildren ?? []).map(
+      (child) => visit(child, draft, depth + 1)
+    );
+    active.delete(datum);
+    const ownValue = children.length === 0 && value !== void 0 ? readAccessor(datum, value) : 0;
+    if (!Number.isFinite(ownValue) || ownValue < 0)
+      throw new RangeError(
+        `${name}: leaf value for ${String(id)} must be finite and nonnegative.`
+      );
+    const total = children.length === 0 ? ownValue : children.reduce((sum, child) => sum + child.value, 0);
+    if (!Number.isFinite(total))
+      throw new RangeError(
+        `${name}: aggregate quantity overflow; totals must remain finite.`
+      );
+    return Object.freeze({
+      ...draft,
+      children: Object.freeze(children),
+      hiddenChildren: collapsed ? children.length : 0,
+      value: total,
+      isLeaf: children.length === 0
+    });
+  };
+  return visit(root, null, 0);
+}
+function finiteGap(value, fallback, name) {
+  const resolved = value ?? fallback;
+  if (!Number.isFinite(resolved) || resolved < 0)
+    throw new RangeError(`${name} must be finite and nonnegative.`);
+  return resolved;
+}
+function finiteSize(datum, size, name) {
+  const resolved = typeof size === "function" ? size(datum) : size ?? { width: 160, height: 56 };
+  if (!Number.isFinite(resolved.width) || !Number.isFinite(resolved.height) || resolved.width <= 0 || resolved.height <= 0)
+    throw new RangeError(
+      `${name}: nodeSize must have finite positive width and height.`
+    );
+  return resolved;
+}
+function hierarchyLabel(datum, accessor, bounds, fallbackText = "") {
+  const text = accessor === void 0 ? fallbackText : String(readAccessor(datum, accessor));
+  return Object.freeze({
+    text,
+    bounds: Object.freeze(bounds),
+    rotationDegrees: 0
+  });
+}
+function partitionLabel(record, options, bounds) {
+  const base = hierarchyLabel(record.datum, options.label, bounds);
+  const quantity = options.formatValue?.(record.value) ?? String(record.value);
+  return Object.freeze({
+    ...base,
+    text: base.text ? `${base.text} \xB7 ${quantity} ${options.unit}` : `${quantity} ${options.unit}`
+  });
+}
+function partitionLabelFits(label, bounds) {
+  void label;
+  return bounds.height >= 18 && bounds.width >= 48;
+}
+function checkedBounds(bounds, name) {
+  try {
+    return validateBounds(bounds);
+  } catch (error) {
+    throw new RangeError(
+      `${name}: ${error instanceof Error ? error.message : "invalid bounds"}`,
+      { cause: error }
+    );
+  }
+}
+export {
+  checkedBounds,
+  finiteGap,
+  finiteSize,
+  hierarchy,
+  hierarchyLabel,
+  partitionLabel,
+  partitionLabelFits
+};
+//# sourceMappingURL=hierarchy.js.map

package/dist/features/viz/lib/graph/hierarchy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/features/viz/lib/graph/hierarchy.ts"],
+  "sourcesContent": ["import type {\n  Accessor,\n  Bounds,\n  HierarchyAccessors,\n  LabelGeometry,\n  PartitionAccessors,\n  Size,\n  VizKey,\n} from \"./types.js\";\nimport { readAccessor, validateBounds } from \"./shared.js\";\n\nexport interface HierarchyRecord<D> {\n  readonly datum: D;\n  readonly key: VizKey;\n  readonly parent: HierarchyRecord<D> | null;\n  readonly children: readonly HierarchyRecord<D>[];\n  readonly depth: number;\n  readonly collapsed: boolean;\n  readonly hiddenChildren: number;\n  readonly value: number;\n  readonly isLeaf: boolean;\n}\n\nfunction key<D>(datum: D, accessor: Accessor<D, VizKey>, name: string): VizKey {\n  const value = readAccessor(datum, accessor);\n  if (\n    typeof value !== \"string\" &&\n    (typeof value !== \"number\" || !Number.isFinite(value))\n  )\n    throw new TypeError(`${name}: key must be a string or finite number.`);\n  return value;\n}\n\nexport function hierarchy<D>(\n  root: D,\n  options: HierarchyAccessors<D>,\n  name: string,\n  value?: PartitionAccessors<D>[\"value\"],\n): HierarchyRecord<D> {\n  const known = new Set<VizKey>();\n  const active = new Set<D>();\n  const visit = (\n    datum: D,\n    parent: HierarchyRecord<D> | null,\n    depth: number,\n  ): HierarchyRecord<D> => {\n    if (active.has(datum))\n      throw new Error(`${name}: hierarchy contains a cycle.`);\n    const id = key(datum, options.keyBy, name);\n    if (known.has(id)) throw new Error(`${name}: duplicate key ${String(id)}.`);\n    known.add(id);\n    active.add(datum);\n    const rawChildren = readAccessor(datum, options.childrenBy);\n    if (rawChildren != null && !Array.isArray(rawChildren))\n      throw new TypeError(\n        `${name}: childrenBy must return an array, null, or undefined.`,\n      );\n    const collapsed = options.collapsed?.(datum) === true;\n    const draft = {\n      datum,\n      key: id,\n      parent,\n      children: [] as HierarchyRecord<D>[],\n      depth,\n      collapsed,\n      hiddenChildren: rawChildren?.length ?? 0,\n      value: 0,\n      isLeaf: !rawChildren?.length,\n    };\n    const children = (rawChildren ?? []).map((child) =>\n      visit(child, draft as HierarchyRecord<D>, depth + 1),\n    );\n    active.delete(datum);\n    const ownValue =\n      children.length === 0 && value !== undefined\n        ? readAccessor(datum, value)\n        : 0;\n    if (!Number.isFinite(ownValue) || ownValue < 0)\n      throw new RangeError(\n        `${name}: leaf value for ${String(id)} must be finite and nonnegative.`,\n      );\n    const total =\n      children.length === 0\n        ? ownValue\n        : children.reduce((sum, child) => sum + child.value, 0);\n    if (!Number.isFinite(total))\n      throw new RangeError(\n        `${name}: aggregate quantity overflow; totals must remain finite.`,\n      );\n    return Object.freeze({\n      ...draft,\n      children: Object.freeze(children),\n      hiddenChildren: collapsed ? children.length : 0,\n      value: total,\n      isLeaf: children.length === 0,\n    });\n  };\n  return visit(root, null, 0);\n}\n\nexport function finiteGap(\n  value: number | undefined,\n  fallback: number,\n  name: string,\n): number {\n  const resolved = value ?? fallback;\n  if (!Number.isFinite(resolved) || resolved < 0)\n    throw new RangeError(`${name} must be finite and nonnegative.`);\n  return resolved;\n}\n\nexport function finiteSize<D>(\n  datum: D,\n  size: Size | ((datum: D) => Size) | undefined,\n  name: string,\n): Size {\n  const resolved =\n    typeof size === \"function\"\n      ? size(datum)\n      : (size ?? { width: 160, height: 56 });\n  if (\n    !Number.isFinite(resolved.width) ||\n    !Number.isFinite(resolved.height) ||\n    resolved.width <= 0 ||\n    resolved.height <= 0\n  )\n    throw new RangeError(\n      `${name}: nodeSize must have finite positive width and height.`,\n    );\n  return resolved;\n}\n\nexport function hierarchyLabel<D>(\n  datum: D,\n  accessor: Accessor<D, string> | undefined,\n  bounds: Bounds,\n  fallbackText = \"\",\n): LabelGeometry {\n  const text =\n    accessor === undefined\n      ? fallbackText\n      : String(readAccessor(datum, accessor));\n  return Object.freeze({\n    text,\n    bounds: Object.freeze(bounds),\n    rotationDegrees: 0,\n  });\n}\n\n/** Build a visible partition label that retains the measured value and its declared unit. */\nexport function partitionLabel<D>(\n  record: HierarchyRecord<D>,\n  options: PartitionAccessors<D>,\n  bounds: Bounds,\n): LabelGeometry {\n  const base = hierarchyLabel(record.datum, options.label, bounds);\n  const quantity = options.formatValue?.(record.value) ?? String(record.value);\n  return Object.freeze({\n    ...base,\n    text: base.text\n      ? `${base.text} \u00B7 ${quantity} ${options.unit}`\n      : `${quantity} ${options.unit}`,\n  });\n}\n\n/** Return whether a partition has enough physical room for a single label line. */\nexport function partitionLabelFits(\n  label: LabelGeometry,\n  bounds: Bounds,\n): boolean {\n  void label;\n  return bounds.height >= 18 && bounds.width >= 48;\n}\n\nexport function checkedBounds(bounds: Bounds, name: string): Bounds {\n  try {\n    return validateBounds(bounds);\n  } catch (error) {\n    throw new RangeError(\n      `${name}: ${error instanceof Error ? error.message : \"invalid bounds\"}`,\n      { cause: error },\n    );\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/features/viz/lib/graph/icicle.d.ts

@@ -0,0 +1,16 @@
+import type { PartitionCellGeometry } from "./types.js";
+import { type PibblNode } from "@pibbl/core";
+import type { IcicleOptions, IcicleProps, PartitionCellProps, PartitionLayout } from "./types.js";
+/** Lay out hierarchy values in depth rows.
+ * @param root - Hierarchy root.
+ * @param options - Accessors, units, and finite bounds.
+ * @returns Immutable partition geometry. @see {@link PartitionLayout} */
+export declare function layoutIcicle<D>(root: D, options: IcicleOptions<D>): PartitionLayout<D>;
+/** Paint one icicle partition cell.
+ * @param props - Cell geometry, paint, events, and optional children.
+ * @returns Canvas composition. @see {@link PartitionCellGeometry} */
+export declare function IcicleCell<D>(props: PartitionCellProps<D>): PibblNode;
+/** Render hierarchy values as depth-aligned bands.
+ * @param props - Reactive hierarchy data and presentation.
+ * @returns Canvas composition. @see {@link layoutIcicle} */
+export declare function Icicle<D>(props: IcicleProps<D>): PibblNode;

package/dist/features/viz/lib/graph/icicle.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import {
+  Group,
+  Rectangle,
+  resolveSignalValue
+} from "@pibbl/core";
+import {
+  defaultGraphLabelStyle,
+  GraphLabel,
+  resolveMarkStyle,
+  useGraphFrame
+} from "./shared.js";
+import { defaultPartitionCellStyle } from "./treemap.js";
+import {
+  checkedBounds,
+  finiteGap,
+  hierarchy,
+  partitionLabel,
+  partitionLabelFits
+} from "./hierarchy.js";
+function layoutIcicle(root, options) {
+  const bounds = checkedBounds(options.bounds, "layoutIcicle");
+  const gap = finiteGap(options.cellGap, 1, "layoutIcicle cellGap");
+  const levelGap = finiteGap(options.levelGap, 3, "layoutIcicle levelGap");
+  const tree = hierarchy(root, options, "layoutIcicle", options.value);
+  const depths = [];
+  const visit = (record) => {
+    depths[record.depth] = 1;
+    for (const child of record.children) visit(child);
+  };
+  visit(tree);
+  const visibleLevels = tree.isLeaf ? 1 : Math.max(1, depths.length - 1);
+  const levelHeight = (bounds.height - Math.max(0, visibleLevels - 1) * levelGap) / visibleLevels;
+  if (levelHeight < 0)
+    throw new RangeError("layoutIcicle: bounds are too short for levelGap.");
+  const cells = [];
+  const add = (record, x, width, rootItem, parentKey) => {
+    const visibleDepth = rootItem ? 0 : record.depth - 1;
+    const y = bounds.y + visibleDepth * (levelHeight + levelGap);
+    const box = Object.freeze({
+      x: x + gap / 2,
+      y,
+      width: Math.max(0, width - gap),
+      height: levelHeight
+    });
+    if (!rootItem || record.isLeaf)
+      cells.push(
+        Object.freeze({
+          key: record.key,
+          datum: record.datum,
+          parentKey,
+          depth: rootItem ? 0 : record.depth - 1,
+          value: record.value,
+          fraction: tree.value === 0 ? 0 : record.value / tree.value,
+          isLeaf: record.isLeaf,
+          collapsed: record.collapsed,
+          bounds: box,
+          label: (() => {
+            const label = partitionLabel(record, options, {
+              x: box.x + 12,
+              y: box.y + 8,
+              width: Math.max(0, box.width - 24),
+              height: Math.max(0, box.height - 16)
+            });
+            return partitionLabelFits(label, box) ? label : null;
+          })()
+        })
+      );
+    if (record.collapsed) return;
+    const total = record.children.reduce((sum, child) => sum + child.value, 0);
+    let cursor = x;
+    for (const child of record.children) {
+      const span = total === 0 ? width / record.children.length : width * child.value / total;
+      add(child, cursor, span, false, rootItem ? null : record.key);
+      cursor += span;
+    }
+  };
+  add(tree, bounds.x, bounds.width, true, null);
+  return Object.freeze({
+    bounds,
+    rootKey: tree.key,
+    total: tree.value,
+    unit: options.unit,
+    cells: Object.freeze(cells)
+  });
+}
+function IcicleCell(props) {
+  const { bounds } = props.cell;
+  const { children, style, ...events } = props;
+  return /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        ...events,
+        style: {
+          ...resolveSignalValue(style),
+          left: bounds.x,
+          top: bounds.y,
+          width: bounds.width,
+          height: bounds.height
+        }
+      }
+    ),
+    children
+  ] });
+}
+function Icicle(props) {
+  const frame = useGraphFrame(props.style);
+  const root = resolveSignalValue(props.root);
+  if (frame.bounds.width === 0 || frame.bounds.height === 0)
+    return /* @__PURE__ */ jsx(Group, { style: frame.groupStyle, children: null });
+  const layout = layoutIcicle(root, {
+    ...props,
+    bounds: frame.bounds,
+    cellGap: frame.style.cellGap,
+    levelGap: frame.style.levelGap
+  });
+  const labelStyle = resolveSignalValue(props.labelStyle);
+  return /* @__PURE__ */ jsx(Group, { style: frame.groupStyle, children: layout.cells.map(
+    (cell) => props.renderCell ? /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onCellClick?.(cell, event),
+        children: props.renderCell(cell)
+      },
+      cell.key
+    ) : /* @__PURE__ */ jsx(
+      IcicleCell,
+      {
+        cell,
+        style: {
+          ...defaultPartitionCellStyle(cell),
+          ...resolveMarkStyle(cell, props.cellStyle)
+        },
+        onClick: (event) => props.onCellClick?.(cell, event),
+        children: cell.label && /* @__PURE__ */ jsx(
+          GraphLabel,
+          {
+            label: cell.label,
+            style: { ...defaultGraphLabelStyle(cell.label), ...labelStyle }
+          }
+        )
+      },
+      cell.key
+    )
+  ) });
+}
+export {
+  Icicle,
+  IcicleCell,
+  layoutIcicle
+};
+//# sourceMappingURL=icicle.js.map

package/dist/features/viz/lib/graph/icicle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/features/viz/lib/graph/icicle.tsx"],
+  "sourcesContent": ["import {\n  Group,\n  Rectangle,\n  resolveSignalValue,\n  type PibblNode,\n} from \"@pibbl/core\";\nimport {\n  defaultGraphLabelStyle,\n  GraphLabel,\n  resolveMarkStyle,\n  useGraphFrame,\n} from \"./shared.js\";\nimport { defaultPartitionCellStyle } from \"./treemap.js\";\nimport type {\n  IcicleOptions,\n  IcicleProps,\n  IcicleStyle,\n  PartitionCellGeometry,\n  PartitionCellProps,\n  PartitionLayout,\n} from \"./types.js\";\nimport {\n  checkedBounds,\n  finiteGap,\n  hierarchy,\n  partitionLabel,\n  partitionLabelFits,\n  type HierarchyRecord,\n} from \"./hierarchy.js\";\n\n/** Lay out hierarchy values in depth rows.\n * @param root - Hierarchy root.\n * @param options - Accessors, units, and finite bounds.\n * @returns Immutable partition geometry. @see {@link PartitionLayout} */\nexport function layoutIcicle<D>(\n  root: D,\n  options: IcicleOptions<D>,\n): PartitionLayout<D> {\n  const bounds = checkedBounds(options.bounds, \"layoutIcicle\");\n  const gap = finiteGap(options.cellGap, 1, \"layoutIcicle cellGap\");\n  const levelGap = finiteGap(options.levelGap, 3, \"layoutIcicle levelGap\");\n  const tree = hierarchy(root, options, \"layoutIcicle\", options.value);\n  const depths: number[] = [];\n  const visit = (record: HierarchyRecord<D>) => {\n    depths[record.depth] = 1;\n    for (const child of record.children) visit(child);\n  };\n  visit(tree);\n  const visibleLevels = tree.isLeaf ? 1 : Math.max(1, depths.length - 1);\n  const levelHeight =\n    (bounds.height - Math.max(0, visibleLevels - 1) * levelGap) / visibleLevels;\n  if (levelHeight < 0)\n    throw new RangeError(\"layoutIcicle: bounds are too short for levelGap.\");\n  const cells: PartitionCellGeometry<D>[] = [];\n  const add = (\n    record: HierarchyRecord<D>,\n    x: number,\n    width: number,\n    rootItem: boolean,\n    parentKey: PartitionCellGeometry<D>[\"parentKey\"],\n  ) => {\n    const visibleDepth = rootItem ? 0 : record.depth - 1;\n    const y = bounds.y + visibleDepth * (levelHeight + levelGap);\n    const box = Object.freeze({\n      x: x + gap / 2,\n      y,\n      width: Math.max(0, width - gap),\n      height: levelHeight,\n    });\n    if (!rootItem || record.isLeaf)\n      cells.push(\n        Object.freeze({\n          key: record.key,\n          datum: record.datum,\n          parentKey,\n          depth: rootItem ? 0 : record.depth - 1,\n          value: record.value,\n          fraction: tree.value === 0 ? 0 : record.value / tree.value,\n          isLeaf: record.isLeaf,\n          collapsed: record.collapsed,\n          bounds: box,\n          label: (() => {\n            const label = partitionLabel(record, options, {\n              x: box.x + 12,\n              y: box.y + 8,\n              width: Math.max(0, box.width - 24),\n              height: Math.max(0, box.height - 16),\n            });\n            return partitionLabelFits(label, box) ? label : null;\n          })(),\n        }),\n      );\n    if (record.collapsed) return;\n    const total = record.children.reduce((sum, child) => sum + child.value, 0);\n    let cursor = x;\n    for (const child of record.children) {\n      const span =\n        total === 0\n          ? width / record.children.length\n          : (width * child.value) / total;\n      add(child, cursor, span, false, rootItem ? null : record.key);\n      cursor += span;\n    }\n  };\n  add(tree, bounds.x, bounds.width, true, null);\n  return Object.freeze({\n    bounds,\n    rootKey: tree.key,\n    total: tree.value,\n    unit: options.unit,\n    cells: Object.freeze(cells),\n  });\n}\n\n/** Paint one icicle partition cell.\n * @param props - Cell geometry, paint, events, and optional children.\n * @returns Canvas composition. @see {@link PartitionCellGeometry} */\nexport function IcicleCell<D>(props: PartitionCellProps<D>): PibblNode {\n  const { bounds } = props.cell;\n  const { children, style, ...events } = props;\n  return (\n    <Group>\n      <Rectangle\n        {...events}\n        style={{\n          ...resolveSignalValue(style),\n          left: bounds.x,\n          top: bounds.y,\n          width: bounds.width,\n          height: bounds.height,\n        }}\n      />\n      {children}\n    </Group>\n  );\n}\n\n/** Render hierarchy values as depth-aligned bands.\n * @param props - Reactive hierarchy data and presentation.\n * @returns Canvas composition. @see {@link layoutIcicle} */\nexport function Icicle<D>(props: IcicleProps<D>): PibblNode {\n  const frame = useGraphFrame<IcicleStyle>(props.style);\n  const root = resolveSignalValue(props.root);\n  if (frame.bounds.width === 0 || frame.bounds.height === 0)\n    return <Group style={frame.groupStyle}>{null}</Group>;\n  const layout = layoutIcicle(root, {\n    ...props,\n    bounds: frame.bounds,\n    cellGap: frame.style.cellGap,\n    levelGap: frame.style.levelGap,\n  });\n  const labelStyle = resolveSignalValue(props.labelStyle);\n  return (\n    <Group style={frame.groupStyle}>\n      {layout.cells.map((cell) =>\n        props.renderCell ? (\n          <Group\n            key={cell.key}\n            onClick={(event) => props.onCellClick?.(cell, event)}\n          >\n            {props.renderCell(cell)}\n          </Group>\n        ) : (\n          <IcicleCell\n            key={cell.key}\n            cell={cell}\n            style={{\n              ...defaultPartitionCellStyle(cell),\n              ...resolveMarkStyle(cell, props.cellStyle),\n            }}\n            onClick={(event) => props.onCellClick?.(cell, event)}\n          >\n            {cell.label && (\n              <GraphLabel\n                label={cell.label}\n                style={{ ...defaultGraphLabelStyle(cell.label), ...labelStyle }}\n              />\n            )}\n          </IcicleCell>\n        ),\n      )}\n    </Group>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/features/viz/lib/graph/matrix.d.ts

@@ -0,0 +1,30 @@
+import type { PibblNode } from "@pibbl/core";
+import type { AdjacencyMatrixProps, MatrixCellGeometry, MatrixCellProps, MatrixData, MatrixLayout, MatrixOptions, NodeStyle } from "./types.js";
+/** Computes ordered cells for an explicit row/column relation matrix.
+ * @param data - Explicit rows, columns, and ordered relations. See {@link MatrixData}.
+ * @param options - Typed accessors, dimensions, labels, and unit. See {@link MatrixOptions}.
+ * @returns Immutable cell and label geometry. See {@link MatrixLayout}.
+ */
+export declare function layoutMatrix<R, C, E>(data: MatrixData<R, C, E>, options: MatrixOptions<R, C, E>): MatrixLayout<R, C, E>;
+/** Default cell paint for custom matrix compositions.
+ * @param cell - Cell geometry.
+ * @param range - Observed numeric extent.
+ * @returns Resolved cell paint.
+ * @see {@link MatrixCell}
+ */
+export declare function defaultMatrixCellStyle<R, C, E>(cell: MatrixCellGeometry<R, C, E>, range: Readonly<{
+    minimum: number;
+    maximum: number;
+}>): NodeStyle;
+/** Draw one supplied matrix cell geometry.
+ * @param argument - Cell props.
+ * @returns Canvas node.
+ * @see {@link MatrixCellProps}
+ */
+export declare function MatrixCell<R, C, E>({ cell, style: input, children, ...events }: MatrixCellProps<R, C, E>): PibblNode;
+/** Render an ordered relation matrix with default marks and labels.
+ * @param props - Matrix data and presentation.
+ * @returns Canvas node.
+ * @see {@link layoutMatrix}
+ */
+export declare function AdjacencyMatrix<R, C, E>(props: AdjacencyMatrixProps<R, C, E>): PibblNode;

package/dist/features/viz/lib/graph/matrix.js

@@ -0,0 +1,243 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import { Group, Rectangle, resolveSignalValue } from "@pibbl/core";
+import {
+  defaultGraphLabelStyle,
+  GraphLabel,
+  resolveMarkStyle,
+  useGraphFrame
+} from "./shared.js";
+function value(accessor, datum) {
+  return typeof accessor === "function" ? accessor(datum) : datum[accessor];
+}
+function finite(input, name, nonnegative = false) {
+  if (!Number.isFinite(input) || nonnegative && input < 0)
+    throw new RangeError(
+      `layoutMatrix: ${name} must be finite${nonnegative ? " and nonnegative" : ""}.`
+    );
+  return input;
+}
+function bounds(input) {
+  finite(input.x, "bounds.x");
+  finite(input.y, "bounds.y");
+  finite(input.width, "bounds.width", true);
+  finite(input.height, "bounds.height", true);
+}
+function label(text, x, y, width, height, rotationDegrees = 0) {
+  return Object.freeze({
+    text,
+    bounds: Object.freeze({ x, y, width, height }),
+    rotationDegrees
+  });
+}
+function layoutMatrix(data, options) {
+  bounds(options.bounds);
+  const gap = finite(options.cellGap ?? 2, "cellGap", true);
+  const rowLabelWidth = finite(
+    options.rowLabelWidth ?? 96,
+    "rowLabelWidth",
+    true
+  );
+  const columnLabelHeight = finite(
+    options.columnLabelHeight ?? 54,
+    "columnLabelHeight",
+    true
+  );
+  const rowKeys = /* @__PURE__ */ new Map(), columnKeys = /* @__PURE__ */ new Map();
+  for (const row of data.rows) {
+    const key = value(options.rowKey, row);
+    if (rowKeys.has(key))
+      throw new Error(`layoutMatrix: duplicate row key ${String(key)}.`);
+    rowKeys.set(key, row);
+  }
+  for (const column of data.columns) {
+    const key = value(options.columnKey, column);
+    if (columnKeys.has(key))
+      throw new Error(`layoutMatrix: duplicate column key ${String(key)}.`);
+    columnKeys.set(key, column);
+  }
+  const width = Math.max(
+    0,
+    (options.bounds.width - rowLabelWidth - Math.max(0, data.columns.length - 1) * gap) / Math.max(1, data.columns.length)
+  );
+  const height = Math.max(
+    0,
+    (options.bounds.height - columnLabelHeight - Math.max(0, data.rows.length - 1) * gap) / Math.max(1, data.rows.length)
+  );
+  const grouped = /* @__PURE__ */ new Map();
+  for (const relation of data.relations) {
+    const source = value(options.source, relation), target = value(options.target, relation);
+    if (!rowKeys.has(source))
+      throw new RangeError(
+        `layoutMatrix: source ${String(source)} is not a row key.`
+      );
+    if (!columnKeys.has(target))
+      throw new RangeError(
+        `layoutMatrix: target ${String(target)} is not a column key.`
+      );
+    const amount = value(options.value, relation);
+    finite(amount, "relation value");
+    const key = `${typeof source}:${String(source)}\0${typeof target}:${String(target)}`;
+    const records = grouped.get(key);
+    if (records) records.push(relation);
+    else grouped.set(key, [relation]);
+  }
+  const cells = [];
+  const rowLabels = data.rows.map(
+    (row, index) => label(
+      options.rowLabel ? value(options.rowLabel, row) : String(value(options.rowKey, row)),
+      options.bounds.x,
+      options.bounds.y + columnLabelHeight + index * (height + gap),
+      rowLabelWidth - gap,
+      height
+    )
+  );
+  const columnLabels = data.columns.map(
+    (column, index) => label(
+      options.columnLabel ? value(options.columnLabel, column) : String(value(options.columnKey, column)),
+      options.bounds.x + rowLabelWidth + index * (width + gap),
+      options.bounds.y,
+      width,
+      columnLabelHeight - gap
+    )
+  );
+  for (let r = 0; r < data.rows.length; r++)
+    for (let c = 0; c < data.columns.length; c++) {
+      const row = data.rows[r], column = data.columns[c], rowKey = value(options.rowKey, row), columnKey = value(options.columnKey, column);
+      const records = grouped.get(
+        `${typeof rowKey}:${String(rowKey)}\0${typeof columnKey}:${String(columnKey)}`
+      ) ?? [];
+      const total = records.reduce(
+        (sum, record) => sum + value(options.value, record),
+        0
+      );
+      finite(total, "cell aggregate");
+      const cellBounds = Object.freeze({
+        x: options.bounds.x + rowLabelWidth + c * (width + gap),
+        y: options.bounds.y + columnLabelHeight + r * (height + gap),
+        width,
+        height
+      });
+      cells.push(
+        Object.freeze({
+          row,
+          column,
+          rowKey,
+          columnKey,
+          records: Object.freeze(records),
+          value: records.length ? total : null,
+          bounds: cellBounds,
+          label: records.length ? label(
+            options.formatValue ? options.formatValue(total) : `${total} ${options.unit}`,
+            cellBounds.x,
+            cellBounds.y,
+            width,
+            height
+          ) : null
+        })
+      );
+    }
+  return Object.freeze({
+    bounds: Object.freeze({ ...options.bounds }),
+    unit: options.unit,
+    cells: Object.freeze(cells),
+    rowLabels: Object.freeze(rowLabels),
+    columnLabels: Object.freeze(columnLabels)
+  });
+}
+function defaultMatrixCellStyle(cell, range) {
+  const value2 = cell.value ?? 0, span = range.maximum - range.minimum;
+  const alpha = cell.value === null ? 0.05 : span <= 0 ? 0.8 : 0.16 + 0.74 * Math.max(0, Math.min(1, (value2 - range.minimum) / span));
+  return { fill: `rgba(15, 118, 110, ${alpha})`, cornerRadius: 2 };
+}
+function MatrixCell({
+  cell,
+  style: input,
+  children,
+  ...events
+}) {
+  const style = resolveSignalValue(input) ?? {};
+  return /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        ...events,
+        style: {
+          ...style,
+          left: cell.bounds.x,
+          top: cell.bounds.y,
+          width: cell.bounds.width,
+          height: cell.bounds.height
+        }
+      }
+    ),
+    children
+  ] });
+}
+function AdjacencyMatrix(props) {
+  const frame = useGraphFrame(props.style);
+  if (!frame.bounds.width || !frame.bounds.height)
+    return /* @__PURE__ */ jsx(Group, { style: frame.groupStyle, children: null });
+  const data = resolveSignalValue(props.data);
+  const style = frame.style;
+  const layout = layoutMatrix(data, {
+    ...props,
+    bounds: frame.bounds,
+    cellGap: style.cellGap,
+    rowLabelWidth: style.rowLabelWidth,
+    columnLabelHeight: style.columnLabelHeight
+  });
+  const values = layout.cells.map((cell) => cell.value).filter((entry) => entry !== null);
+  const minimum = Math.min(...values, 0), maximum = Math.max(...values, 1);
+  return /* @__PURE__ */ jsxs(Group, { style: frame.groupStyle, children: [
+    layout.cells.map((cell) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onCellClick?.(cell, event),
+        children: props.renderCell ? props.renderCell(cell) : /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(
+            MatrixCell,
+            {
+              cell,
+              keyboardFocusable: Boolean(props.onCellClick),
+              style: {
+                ...defaultMatrixCellStyle(cell, { minimum, maximum }),
+                ...resolveMarkStyle(cell, props.cellStyle)
+              }
+            }
+          ),
+          cell.label && /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: cell.label,
+              style: {
+                ...defaultGraphLabelStyle(cell.label),
+                fill: cell.value !== null && (cell.value - minimum) / (maximum - minimum || 1) >= 0.5 ? "#ffffff" : "#123c34",
+                textAlign: "center",
+                ...resolveSignalValue(props.labelStyle)
+              }
+            }
+          )
+        ] })
+      },
+      JSON.stringify([cell.rowKey, cell.columnKey])
+    )),
+    layout.rowLabels.concat(layout.columnLabels).map((entry, index) => /* @__PURE__ */ jsx(
+      GraphLabel,
+      {
+        label: entry,
+        style: {
+          ...defaultGraphLabelStyle(entry),
+          ...resolveSignalValue(props.labelStyle)
+        }
+      },
+      `axis-${index}`
+    ))
+  ] });
+}
+export {
+  AdjacencyMatrix,
+  MatrixCell,
+  defaultMatrixCellStyle,
+  layoutMatrix
+};
+//# sourceMappingURL=matrix.js.map