@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/stream-graph/stream-graph.js

@@ -0,0 +1,415 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId, useMemo, useRef, useState } from "react";
+import { AxisBottom, AxisLeft, estimateTextWidth, GridLines } from "../core/axes.js";
+import { buildCategoryAxis, fullCategoryLabel } from "../core/category-axis.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { ChartDataTable } from "../core/data-table.js";
+import {
+  formatPercent,
+  resolveAxisFormat,
+  resolveFormat
+} from "../core/format.js";
+import { ChartLegend } from "../core/legend.js";
+import { fadeIn, revealClip, useEntryAnimation } from "../core/motion.js";
+import { seriesColor } from "../core/palette.js";
+import { areaPath } from "../core/path.js";
+import { PlotOverlay } from "../core/plot-overlay.js";
+import { linearScale } from "../core/scales/linear.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import { resolveLabels } from "../core/types.js";
+import { useSeriesState } from "../core/use-series-state.js";
+import { streamLayout } from "./stream-layout.js";
+const MARGIN = { top: 10, right: 18, bottom: 30 };
+const StreamShape = memo(function StreamShape2({
+  stream,
+  curve,
+  dimmed,
+  selected
+}) {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: areaPath(stream.top, stream.bottom, curve),
+      strokeWidth: selected ? 1.5 : 0.75,
+      strokeLinejoin: "round",
+      className: "motion-safe:transition-[fill-opacity,stroke-opacity] motion-safe:duration-150",
+      style: {
+        fill: stream.color,
+        fillOpacity: dimmed ? 0.22 : selected ? 1 : 0.88,
+        stroke: "var(--surface)",
+        strokeOpacity: dimmed ? 0.4 : 0.9
+      }
+    }
+  );
+});
+function StreamGraph({
+  categories,
+  series,
+  title,
+  description,
+  height = 340,
+  aspectRatio,
+  offset = "wiggle",
+  order = "inside-out",
+  curve = "smooth",
+  streamLabels = true,
+  valueFormat,
+  xFormat,
+  xScale = "auto",
+  grid = true,
+  legend,
+  tooltip = true,
+  loading,
+  animate = true,
+  initialHidden,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = resolveLabels(labelOverrides);
+  const state = useSeriesState(initialHidden);
+  const colors = useMemo(() => series.map((item, i) => seriesColor(i, item.color)), [series]);
+  const fmt = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const hasData = series.some((item) => item.data.some((value) => value != null && value > 0));
+  const showLegend = legend ?? series.length > 1;
+  const legendNode = showLegend ? /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      items: series.map((item, i) => ({
+        id: item.id,
+        name: item.name,
+        color: colors[i],
+        shape: "square",
+        hidden: state.isHidden(item.id)
+      })),
+      onToggle: state.toggle,
+      onHighlight: state.setHighlighted
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      labels,
+      loading,
+      empty: !hasData,
+      skeleton: "line",
+      legend: legendNode,
+      className,
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: description ? `${title}. ${description}` : title,
+          categoryHeader: labels.category,
+          categories: categories.map(fullCategoryLabel),
+          columns: series.map((item) => ({
+            id: item.id,
+            name: item.name,
+            values: categories.map((_, i) => {
+              const value = item.data[i];
+              return value == null ? "" : (item.format ? resolveFormat(item.format) : fmt)(value);
+            })
+          }))
+        }
+      ),
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        StreamPlot,
+        {
+          width,
+          height: measuredHeight,
+          categories,
+          series,
+          colors,
+          hidden: state.hidden,
+          highlighted: state.highlighted,
+          offset,
+          order,
+          curve,
+          streamLabels,
+          fmt,
+          valueFormat,
+          xFormat,
+          xScale,
+          grid,
+          tooltip,
+          animate,
+          labels,
+          title
+        }
+      )
+    }
+  );
+}
+function StreamPlot({
+  width,
+  height,
+  categories,
+  series,
+  colors,
+  hidden,
+  highlighted,
+  offset,
+  order,
+  curve,
+  streamLabels,
+  fmt,
+  valueFormat,
+  xFormat,
+  xScale,
+  grid,
+  tooltip,
+  animate,
+  labels,
+  title
+}) {
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const svgRef = useRef(null);
+  const [active, setActive] = useState(null);
+  const [pointed, setPointed] = useState(null);
+  const showAxis = offset === "zero" || offset === "expand";
+  const left = showAxis ? 52 : 14;
+  const innerWidth = Math.max(40, width - left - MARGIN.right);
+  const innerHeight = height - MARGIN.top - MARGIN.bottom;
+  const visible = useMemo(() => series.filter((item) => !hidden.has(item.id)), [series, hidden]);
+  const model = useMemo(() => {
+    const layout2 = streamLayout(
+      visible.map((item) => item.data),
+      offset,
+      order
+    );
+    const axis2 = buildCategoryAxis(categories, innerWidth, {
+      mode: xScale === "point" ? "point" : "time",
+      format: xFormat
+    });
+    const [lo, hi] = layout2.domain;
+    const pad = (hi - lo) * 0.04;
+    const y2 = linearScale({
+      domain: [lo - pad, hi + pad],
+      range: [innerHeight, 0],
+      nice: showAxis,
+      tickCount: 5
+    });
+    const streams2 = visible.map((item, k) => {
+      const layer = layout2.layers[k];
+      const top = axis2.positions.map((x, i) => ({ x, y: y2.map(layer.y1[i]) }));
+      const bottom = axis2.positions.map((x, i) => ({ x, y: y2.map(layer.y0[i]) }));
+      let thickest = 0;
+      let thickness = 0;
+      top.forEach((point, i) => {
+        const t = bottom[i].y - point.y;
+        if (t > thickness) {
+          thickness = t;
+          thickest = i;
+        }
+      });
+      return {
+        series: item,
+        color: colors[series.indexOf(item)],
+        top,
+        bottom,
+        thickest,
+        thickness
+      };
+    });
+    const axisFormat = offset === "expand" ? (v) => formatPercent(v, { decimals: 0 }) : resolveAxisFormat(valueFormat);
+    const yTicks2 = showAxis ? y2.ticks().map((tick) => ({ key: tick, position: y2.map(tick), label: axisFormat(tick) })) : [];
+    const topToBottom2 = layout2.order.slice().reverse();
+    return { layout: layout2, axis: axis2, y: y2, streams: streams2, yTicks: yTicks2, topToBottom: topToBottom2 };
+  }, [
+    visible,
+    offset,
+    order,
+    categories,
+    innerWidth,
+    innerHeight,
+    xScale,
+    xFormat,
+    colors,
+    series,
+    showAxis,
+    valueFormat
+  ]);
+  const { layout, axis, y, streams, yTicks, topToBottom } = model;
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      const clip = root.querySelector("[data-reveal]");
+      if (clip) revealClip(clip, 1e3);
+      for (const label of root.querySelectorAll("[data-fade]")) fadeIn(label, 420, 750);
+    },
+    { disabled: !animate }
+  );
+  const focusId = pointed ?? highlighted;
+  const streamAt = (x, py) => {
+    const index = axis.indexAt(x);
+    if (index < 0) return null;
+    const value = y.invert(py);
+    for (let k = 0; k < visible.length; k += 1) {
+      const layer = layout.layers[k];
+      if (value >= layer.y0[index] && value <= layer.y1[index]) {
+        return visible[k].id;
+      }
+    }
+    return null;
+  };
+  const pick = (id, delta) => {
+    const ids = topToBottom.map((k) => visible[k].id);
+    if (!ids.length) return null;
+    if (id == null) return ids[delta > 0 ? 0 : ids.length - 1];
+    const next = ids.indexOf(id) + delta;
+    return next < 0 || next >= ids.length ? null : ids[next];
+  };
+  const rows = active != null ? topToBottom.map((k) => {
+    const item = visible[k];
+    const value = item.data[active] ?? 0;
+    const f = item.format ? resolveFormat(item.format) : fmt;
+    const total = layout.totals[active];
+    return {
+      id: item.id,
+      name: item.name,
+      value: f(value),
+      color: colors[series.indexOf(item)],
+      shape: "square",
+      note: total ? formatPercent(value / total, { decimals: 0 }) : void 0
+    };
+  }) : [];
+  if (rows.length && active != null) {
+    rows.push({
+      id: "__total",
+      name: labels.total,
+      value: fmt(layout.totals[active]),
+      color: "transparent",
+      emphasis: true
+    });
+  }
+  const focusedItem = visible.find((item) => item.id === focusId);
+  const valueText = active != null ? `${fullCategoryLabel(categories[active])}. ${focusedItem ? `${focusedItem.name}: ${fmt(focusedItem.data[active] ?? 0)}.` : visible.map((item) => `${item.name}: ${fmt(item.data[active] ?? 0)}`).join(", ")}` : labels.explore;
+  const activeX = active != null ? axis.positions[active] : null;
+  const activeStream = streams.find((stream) => stream.series.id === focusId);
+  const anchorY = active != null ? MARGIN.top + (activeStream ? (activeStream.top[active].y + activeStream.bottom[active].y) / 2 : innerHeight / 2) : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        width,
+        height,
+        className: "block overflow-visible",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `${uid}-reveal`, children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-reveal": "",
+              x: -6,
+              y: -24,
+              width: innerWidth + 12,
+              height: innerHeight + 48,
+              style: { transformBox: "fill-box", transformOrigin: "left center" }
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs("g", { transform: `translate(${left},${MARGIN.top})`, children: [
+            grid ? /* @__PURE__ */ jsx(GridLines, { ticks: showAxis ? yTicks : [], direction: "horizontal", length: innerWidth }) : null,
+            grid && !showAxis ? /* @__PURE__ */ jsx(GridLines, { ticks: axis.ticks, direction: "vertical", length: innerHeight }) : null,
+            showAxis ? /* @__PURE__ */ jsx(AxisLeft, { ticks: yTicks, offset: 0 }) : null,
+            /* @__PURE__ */ jsx(AxisBottom, { ticks: axis.ticks, offset: innerHeight }),
+            /* @__PURE__ */ jsx("g", { clipPath: `url(#${uid}-reveal)`, children: streams.map((stream) => /* @__PURE__ */ jsx(
+              StreamShape,
+              {
+                stream,
+                curve,
+                dimmed: focusId != null && focusId !== stream.series.id,
+                selected: focusId === stream.series.id
+              },
+              stream.series.id
+            )) }),
+            streamLabels ? streams.map((stream) => {
+              const text = stream.series.name;
+              const need = estimateTextWidth(text, 12) + 8;
+              if (stream.thickness < 17 || need > innerWidth * 0.5) return null;
+              const x = Math.min(
+                innerWidth - need / 2,
+                Math.max(need / 2, stream.top[stream.thickest]?.x ?? 0)
+              );
+              const cy = (stream.top[stream.thickest].y + stream.bottom[stream.thickest].y) / 2;
+              return /* @__PURE__ */ jsx(
+                "text",
+                {
+                  "data-fade": "",
+                  x,
+                  y: cy,
+                  dy: "0.34em",
+                  textAnchor: "middle",
+                  className: "pointer-events-none font-bold text-[12px]",
+                  strokeWidth: 3,
+                  strokeLinejoin: "round",
+                  style: {
+                    fill: "var(--ink)",
+                    stroke: "var(--surface)",
+                    strokeOpacity: 0.85,
+                    paintOrder: "stroke",
+                    opacity: focusId != null && focusId !== stream.series.id ? 0.3 : 1
+                  },
+                  children: text
+                },
+                stream.series.id
+              );
+            }) : null,
+            activeX != null ? /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: activeX,
+                x2: activeX,
+                y1: 0,
+                y2: innerHeight,
+                strokeDasharray: "3 4",
+                style: { stroke: "var(--chart-crosshair)" }
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlotOverlay,
+      {
+        left,
+        top: MARGIN.top,
+        width: innerWidth,
+        height: innerHeight,
+        label: labels.explore,
+        count: categories.length,
+        active,
+        valueText,
+        onActiveChange: (index) => {
+          setActive(index);
+          if (index == null) setPointed(null);
+        },
+        indexAt: ({ x, y: py }) => {
+          setPointed(streamAt(x, py));
+          return axis.indexAt(x);
+        },
+        onKey: (event) => {
+          if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return false;
+          setPointed(pick(pointed, event.key === "ArrowDown" ? 1 : -1));
+          return true;
+        }
+      }
+    ),
+    tooltip && active != null && rows.length ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: left + activeX,
+        y: anchorY,
+        containerWidth: width,
+        title: fullCategoryLabel(categories[active]),
+        rows
+      }
+    ) : null
+  ] });
+}
+export {
+  StreamGraph
+};

package/dist/charts/stream-graph/stream-layout.d.ts

@@ -0,0 +1,34 @@
+export type StreamOffset = "wiggle" | "silhouette" | "zero" | "expand";
+export type StreamOrder = "inside-out" | "ascending" | "none";
+export interface StreamLayer {
+    /** Lower edge per index, in value units. */
+    y0: number[];
+    /** Upper edge per index. */
+    y1: number[];
+}
+export interface StreamLayout {
+    /** One layer per input series, in input order. */
+    layers: StreamLayer[];
+    /** Bottom-to-top stacking order, as input indices. */
+    order: number[];
+    /** Lowest and highest edge over all indices. */
+    domain: [number, number];
+    /** Sum of the series at every index. */
+    totals: number[];
+}
+/**
+ * Stacking order. `inside-out` puts the streams that peak earliest/latest on
+ * the outside and the biggest in the middle, which keeps the silhouette calm;
+ * `ascending` puts the smallest total at the bottom.
+ */
+export declare function streamOrder(data: ReadonlyArray<ReadonlyArray<number>>, order: StreamOrder): number[];
+/**
+ * Baseline-shifted stacking for stream graphs. Negative and missing values
+ * count as zero. Offsets:
+ * - `zero`: ordinary stacked area from 0.
+ * - `silhouette`: centered, so the shape is symmetric around 0.
+ * - `wiggle`: baseline moves to minimize the slope of the streams (Byron and
+ *   Wattenberg), then the whole shape is re-centered around 0.
+ * - `expand`: shares of 100% from 0 to 1.
+ */
+export declare function streamLayout(series: ReadonlyArray<ReadonlyArray<number | null>>, offset?: StreamOffset, order?: StreamOrder): StreamLayout;

package/dist/charts/stream-graph/stream-layout.js

@@ -0,0 +1,89 @@
+const sum = (values) => values.reduce((acc, v) => acc + v, 0);
+function streamOrder(data, order) {
+  const indices = data.map((_, i) => i);
+  if (order === "none") return indices;
+  if (order === "ascending") {
+    return indices.sort((a, b) => sum(data[a]) - sum(data[b]) || a - b);
+  }
+  const peak = (i) => {
+    const values = data[i];
+    let best = 0;
+    for (let k = 1; k < values.length; k += 1)
+      if (values[k] > values[best]) best = k;
+    return best;
+  };
+  const sorted = indices.sort((a, b) => peak(a) - peak(b) || a - b);
+  const tops = [];
+  const bottoms = [];
+  let topSum = 0;
+  let bottomSum = 0;
+  for (const i of sorted) {
+    const total = sum(data[i]);
+    if (topSum < bottomSum) {
+      tops.push(i);
+      topSum += total;
+    } else {
+      bottoms.push(i);
+      bottomSum += total;
+    }
+  }
+  return bottoms.reverse().concat(tops);
+}
+function streamLayout(series, offset = "wiggle", order = "inside-out") {
+  const length = Math.max(0, ...series.map((data2) => data2.length));
+  const data = series.map(
+    (values) => Array.from({ length }, (_, i) => Math.max(0, values[i] ?? 0))
+  );
+  const totals = Array.from({ length }, (_, i) => sum(data.map((values) => values[i])));
+  const stack = streamOrder(data, order);
+  const n = stack.length;
+  const scale = (i) => offset === "expand" ? 1 / (totals[i] || 1) : 1;
+  const base = new Array(length).fill(0);
+  if (offset === "silhouette") {
+    for (let i = 0; i < length; i += 1) base[i] = -totals[i] / 2;
+  } else if (offset === "wiggle") {
+    for (let j = 1; j < length; j += 1) {
+      let shift = 0;
+      stack.forEach((index, k) => {
+        const values = data[index];
+        shift += (n - k) * (values[j] - values[j - 1]);
+      });
+      base[j] = base[j - 1] - shift / (n + 1);
+    }
+    if (length) {
+      const mid = sum(base.map((b, i) => b + totals[i] / 2)) / length;
+      for (let i = 0; i < length; i += 1) base[i] = base[i] - mid;
+    }
+  }
+  const layers = series.map(() => ({ y0: [], y1: [] }));
+  const running = base.map((b, i) => b * scale(i));
+  for (const index of stack) {
+    const values = data[index];
+    const layer = layers[index];
+    for (let i = 0; i < length; i += 1) {
+      const start = running[i];
+      const end = start + values[i] * scale(i);
+      layer.y0.push(start);
+      layer.y1.push(end);
+      running[i] = end;
+    }
+  }
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const layer of layers) {
+    for (let i = 0; i < length; i += 1) {
+      lo = Math.min(lo, layer.y0[i]);
+      hi = Math.max(hi, layer.y1[i]);
+    }
+  }
+  return {
+    layers,
+    order: stack,
+    domain: lo === Number.POSITIVE_INFINITY ? [0, 1] : [lo, hi],
+    totals
+  };
+}
+export {
+  streamLayout,
+  streamOrder
+};

package/dist/charts/sunburst-chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./sunburst-chart.js";

package/dist/charts/sunburst-chart/index.js

@@ -0,0 +1 @@
+export * from "./sunburst-chart.js";

package/dist/charts/sunburst-chart/sunburst-chart.d.ts

@@ -0,0 +1,44 @@
+import { type ValueFormat } from "../core/format.js";
+import { type HierarchyDatum, type HierarchyNode } from "../core/hierarchy.js";
+import { type HierarchyLabels } from "../core/hierarchy-chart.js";
+export interface SunburstChartProps {
+    /** Accessible name of the drawing and caption of the data table. */
+    title: string;
+    /** Root of the tree; its name and total sit in the center. */
+    data: HierarchyDatum;
+    /** Height of the drawing; the disc takes the smaller of width and height. */
+    height?: number | "fill";
+    /** Width / height ratio; sizes the drawing from the container width when `height` is not "fill". */
+    aspectRatio?: number;
+    valueFormat?: ValueFormat;
+    /** Half disc opening upwards (a 180 degree fan) instead of a full circle. */
+    half?: boolean;
+    /** Rings shown around the open node. */
+    levels?: number;
+    /** Click a segment to zoom into it, the center to zoom out. */
+    drillDown?: boolean;
+    breadcrumb?: boolean;
+    /** Read-only legend of the open level's branches. */
+    legend?: boolean;
+    tooltip?: boolean;
+    /** Name and total of the open node in the center. */
+    centerLabel?: boolean;
+    /** Labels along the segments where they fit. */
+    segmentLabels?: boolean;
+    /** Gap between segments in pixels (measured at the inner ring). */
+    gap?: number;
+    sort?: boolean;
+    animate?: boolean;
+    loading?: boolean;
+    labels?: Partial<HierarchyLabels>;
+    onFocusChange?: (node: HierarchyNode) => void;
+    /** Click on a segment that cannot be opened (a leaf). */
+    onNodeClick?: (node: HierarchyNode) => void;
+    className?: string;
+}
+/**
+ * Radial partition: the open node in the center, its descendants in rings,
+ * each slice proportional to value. Clicking a segment zooms into it with an
+ * animated transition; the center or Escape zooms back out.
+ */
+export declare function SunburstChart({ title, data, height, aspectRatio, valueFormat, half, levels, drillDown, breadcrumb, legend, tooltip, centerLabel, segmentLabels, gap, sort, animate, loading, labels: labelsProp, onFocusChange, onNodeClick, className, }: SunburstChartProps): import("react").JSX.Element;