@jcsoftdev/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,437 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { estimateTextWidth } from "../core/axes.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { inkOn, tint } from "../core/color-scale.js";
+import { resolveFormat } from "../core/format.js";
+import {
+  descendants,
+  partitionLayout,
+  projectSpan,
+  sectorPath
+} from "../core/hierarchy.js";
+import {
+  branchColor,
+  describeNode,
+  HIERARCHY_FRAME_CLASS,
+  HierarchyHeader,
+  HierarchyLegend,
+  HierarchyTable,
+  hierarchyKey,
+  levelStrength,
+  nodePath,
+  nodeTooltipRows,
+  resolveHierarchyLabels
+} from "../core/hierarchy-chart.js";
+import { EASE_OUT, useEntryAnimation } from "../core/motion.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import { useAnimatedView, useDrill } from "../core/use-drill.js";
+function SunburstChart({
+  title,
+  data,
+  height = 360,
+  aspectRatio,
+  valueFormat,
+  half = false,
+  levels = 3,
+  drillDown = true,
+  breadcrumb = true,
+  legend = true,
+  tooltip = true,
+  centerLabel = true,
+  segmentLabels = true,
+  gap = 1.5,
+  sort = true,
+  animate = true,
+  loading,
+  labels: labelsProp,
+  onFocusChange,
+  onNodeClick,
+  className
+}) {
+  const labels = resolveHierarchyLabels(labelsProp);
+  const format = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const drill = useDrill(data, sort, onFocusChange);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      labels,
+      loading,
+      empty: drill.root.value <= 0,
+      skeleton: "ring",
+      className: cn(HIERARCHY_FRAME_CLASS, className),
+      legend: breadcrumb && drillDown ? /* @__PURE__ */ jsx(HierarchyHeader, { path: drill.path, onSelect: drill.drill, labels }) : null,
+      footer: legend ? /* @__PURE__ */ jsx(HierarchyLegend, { focus: drill.focus }) : null,
+      table: /* @__PURE__ */ jsx(HierarchyTable, { root: drill.root, caption: title, format, labels }),
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        SunburstPlot,
+        {
+          width,
+          height: measuredHeight,
+          title,
+          drill,
+          format,
+          labels,
+          half,
+          levels: Math.max(1, Math.round(levels)),
+          drillDown,
+          tooltip,
+          centerLabel,
+          segmentLabels,
+          gap,
+          animate,
+          onNodeClick
+        }
+      )
+    }
+  );
+}
+const TAU = Math.PI * 2;
+const MIN_RING = 30;
+function truncate(text, maxWidth, fontSize) {
+  if (estimateTextWidth(text, fontSize) <= maxWidth) return text;
+  const chars = Math.max(1, Math.floor(maxWidth / (fontSize * 0.58)) - 1);
+  return `${text.slice(0, chars)}\u2026`;
+}
+function holePath(cx, cy, r, half) {
+  if (!half) return `M${cx - r},${cy}a${r},${r} 0 1 0 ${2 * r},0a${r},${r} 0 1 0 ${-2 * r},0z`;
+  return `M${cx - r},${cy}A${r},${r} 0 0 1 ${cx + r},${cy}z`;
+}
+function labelRoom(radius, top, half) {
+  if (!half) return radius * 1.7;
+  return Math.max(0, 2 * Math.sqrt(Math.max(0, radius * radius - top * top)) - 6);
+}
+function fitLabel(text, maxWidth, size, minSize) {
+  let fontSize = size;
+  while (fontSize > minSize && estimateTextWidth(text, fontSize) > maxWidth) fontSize -= 0.5;
+  return { text: truncate(text, maxWidth, fontSize), size: fontSize };
+}
+function SunburstPlot({
+  width,
+  height,
+  title,
+  drill,
+  format,
+  labels,
+  half,
+  levels,
+  drillDown,
+  tooltip,
+  centerLabel,
+  segmentLabels,
+  gap,
+  animate,
+  onNodeClick
+}) {
+  const { root, focus } = drill;
+  const spans = useMemo(() => partitionLayout(root), [root]);
+  const nodes = useMemo(() => descendants(root).slice(1), [root]);
+  const focusSpan = spans.get(focus.id) ?? { x0: 0, x1: 1 };
+  const view = useAnimatedView(
+    { x0: focusSpan.x0, x1: focusSpan.x1, depth: focus.depth },
+    { disabled: !animate }
+  );
+  const sweep = half ? Math.PI : TAU;
+  const origin = half ? -Math.PI / 2 : 0;
+  const size = half ? Math.max(0, Math.min(width / 2, height - 30)) : Math.max(0, Math.min(width, height)) / 2;
+  const cx = width / 2;
+  const outer = Math.max(0, size - 4);
+  const cy = half ? (height + outer) / 2 : height / 2;
+  const visibleLevels = Math.max(1, Math.min(levels, Math.floor(outer * 0.72 / MIN_RING)));
+  const center = outer * (half ? visibleLevels > 2 ? 0.36 : 0.4 : visibleLevels > 2 ? 0.26 : 0.32);
+  const ring = (outer - center) / visibleLevels;
+  const arcs = useMemo(() => {
+    const radius = (level) => level <= 1 ? center : Math.min(outer, center + (level - 1) * ring);
+    const out = [];
+    for (const node of nodes) {
+      const span = spans.get(node.id);
+      if (!span) continue;
+      const projected = projectSpan(span, node.depth, view);
+      const r0 = radius(projected.level);
+      const r1 = radius(projected.level + 1);
+      const a0 = origin + Math.max(0, Math.min(1, projected.x0)) * sweep;
+      const a1 = origin + Math.max(0, Math.min(1, projected.x1)) * sweep;
+      if (r1 - r0 < 0.5 || a1 - a0 < 1e-4) continue;
+      out.push({ node, r0, r1, a0, a1 });
+    }
+    return out;
+  }, [nodes, spans, view, center, ring, outer, origin, sweep]);
+  const [hover, setHover] = useState(null);
+  const [hoverCenter, setHoverCenter] = useState(false);
+  const [active, setActive] = useState(null);
+  const svgRef = useRef(null);
+  useEntryAnimation(
+    svgRef,
+    (element) => {
+      const group = element.querySelector("[data-rings]");
+      group?.animate(
+        [
+          { opacity: 0, transform: "rotate(-24deg) scale(0.82)" },
+          { opacity: 1, transform: "rotate(0deg) scale(1)" }
+        ],
+        { duration: 760, easing: EASE_OUT, fill: "backwards" }
+      );
+    },
+    { disabled: !animate }
+  );
+  const hole = Math.max(0, center - gap - 2);
+  const nameY = half ? cy - 26 : cy - 4;
+  const valueY = half ? cy - 8 : cy + 16;
+  const nameFit = fitLabel(focus.name, labelRoom(hole, cy - nameY + 10, half), 12, half ? 9 : 12);
+  const valueFit = fitLabel(
+    format(focus.value),
+    labelRoom(hole, cy - valueY + 14, half),
+    17,
+    half ? 11 : 17
+  );
+  const children = focus.children;
+  const hit = (x, y) => {
+    const dx = x - cx;
+    const dy = y - cy;
+    const r = Math.hypot(dx, dy);
+    if (half && dy > 0) return null;
+    if (r <= center) return "center";
+    const raw = Math.atan2(dx, -dy);
+    const angle = half ? raw : (raw + TAU) % TAU;
+    for (let i = arcs.length - 1; i >= 0; i--) {
+      const arc = arcs[i];
+      if (r >= arc.r0 && r <= arc.r1 && angle >= arc.a0 && angle <= arc.a1) return arc;
+    }
+    return null;
+  };
+  const local = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - box.left, y: event.clientY - box.top };
+  };
+  const open = (node) => {
+    if (drillDown && node.children.length > 0) {
+      drill.drill(node.id);
+      setHover(null);
+      setActive((current) => current == null ? null : 0);
+    } else {
+      onNodeClick?.(node);
+    }
+  };
+  const onPointerMove = (event) => {
+    const { x, y } = local(event);
+    const target = hit(x, y);
+    setHoverCenter(target === "center");
+    setHover(target && target !== "center" ? { arc: target, x, y } : null);
+  };
+  const onPointerUp = (event) => {
+    const { x, y } = local(event);
+    const target = hit(x, y);
+    if (target === "center") {
+      if (drillDown) drill.up();
+    } else if (target) {
+      open(target.node);
+    }
+  };
+  const onKeyDown = (event) => {
+    const next = hierarchyKey(event.key, active, children.length);
+    if (next === void 0) return;
+    event.preventDefault();
+    if (next === "up") {
+      if (drillDown && drill.up()) setActive(0);
+      else setActive(null);
+    } else if (next === "drill") {
+      const node = active != null ? children[active] : void 0;
+      if (node) open(node);
+    } else {
+      setActive(next);
+      setHover(null);
+    }
+  };
+  const activeNode = active != null ? children[active] : void 0;
+  const activeArc = activeNode ? arcs.find((arc) => arc.node === activeNode) : void 0;
+  const lit = hover?.arc.node ?? activeNode ?? null;
+  const litPath = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (let current = lit; current; current = current.parent) ids.add(current.id);
+    return ids;
+  }, [lit]);
+  const shown = hover ? { node: hover.arc.node, x: hover.x, y: hover.y } : activeArc ? (() => {
+    const mid = (activeArc.a0 + activeArc.a1) / 2;
+    const r = (activeArc.r0 + activeArc.r1) / 2;
+    return { node: activeArc.node, x: cx + r * Math.sin(mid), y: cy - r * Math.cos(mid) };
+  })() : null;
+  const clickable = hover && (drillDown && hover.arc.node.children.length > 0 || onNodeClick) || hoverCenter && drillDown && focus.parent;
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        width,
+        height,
+        className: "block overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxs("g", { "data-rings": "", style: { transformOrigin: `${cx}px ${cy}px` }, children: [
+            arcs.map((arc) => {
+              const base = branchColor(arc.node, focus);
+              const strength = levelStrength(arc.node, focus);
+              const dimmed = lit != null && !litPath.has(arc.node.id) && arc.node.depth > focus.depth;
+              const padAngle = gap / Math.max(arc.r0, 1);
+              return /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: sectorPath(cx, cy, arc.r0 + gap / 2, arc.r1 - gap / 2, arc.a0, arc.a1, padAngle),
+                  style: {
+                    fill: tint(base, strength),
+                    opacity: dimmed ? 0.38 : 1,
+                    transition: "opacity 150ms ease-out"
+                  }
+                },
+                arc.node.id
+              );
+            }),
+            segmentLabels ? arcs.map((arc) => /* @__PURE__ */ jsx(
+              SegmentLabel,
+              {
+                arc,
+                cx,
+                cy,
+                ink: inkOn(levelStrength(arc.node, focus)),
+                dimmed: lit != null && !litPath.has(arc.node.id)
+              },
+              arc.node.id
+            )) : null
+          ] }),
+          activeArc ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: sectorPath(cx, cy, activeArc.r0, activeArc.r1, activeArc.a0, activeArc.a1),
+              strokeWidth: 2,
+              className: "pointer-events-none",
+              style: { fill: "none", stroke: "var(--ink)" }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: holePath(cx, cy, Math.max(0, center - gap - 2), half),
+              style: {
+                fill: hoverCenter && focus.parent && drillDown ? "var(--surface-2)" : "var(--surface)",
+                transition: "fill 150ms ease-out"
+              }
+            }
+          ),
+          centerLabel && center > 24 ? /* @__PURE__ */ jsxs("g", { className: "pointer-events-none select-none", textAnchor: "middle", children: [
+            focus.parent && drillDown ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: `M${cx - 5},${half ? cy - 42 : cy - 22}l5,-5l5,5`,
+                fill: "none",
+                strokeWidth: 1.8,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: { stroke: "var(--ink-3)" }
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cx,
+                y: nameY,
+                fontSize: nameFit.size,
+                className: "font-semibold",
+                style: { fill: "var(--ink-3)" },
+                children: nameFit.text
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cx,
+                y: valueY,
+                fontSize: valueFit.size,
+                className: "font-bold tabular-nums",
+                style: { fill: "var(--ink)" },
+                children: valueFit.text
+              }
+            )
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": labels.explore,
+        "aria-valuemin": 1,
+        "aria-valuemax": Math.max(1, children.length),
+        "aria-valuenow": (active ?? 0) + 1,
+        "aria-valuetext": activeNode ? describeNode(activeNode, focus, format) : `${focus.name}: ${format(focus.value)}`,
+        onKeyDown,
+        onFocus: (event) => {
+          if (event.currentTarget.matches(":focus-visible")) setActive((current) => current ?? 0);
+        },
+        onBlur: () => setActive(null),
+        onPointerMove,
+        onPointerUp,
+        onPointerLeave: () => {
+          setHover(null);
+          setHoverCenter(false);
+        },
+        className: cn(
+          "absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+          clickable ? "cursor-pointer" : "cursor-default"
+        )
+      }
+    ),
+    tooltip && shown ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: shown.x,
+        y: shown.y,
+        containerWidth: width,
+        title: shown.node.parent && shown.node.parent !== focus ? nodePath(shown.node.parent, focus) : focus.name,
+        rows: nodeTooltipRows(shown.node, focus, format, labels, branchColor(shown.node, focus))
+      }
+    ) : null
+  ] });
+}
+function SegmentLabel({
+  arc,
+  cx,
+  cy,
+  ink,
+  dimmed
+}) {
+  const thickness = arc.r1 - arc.r0;
+  const mid = (arc.a0 + arc.a1) / 2;
+  const r = (arc.r0 + arc.r1) / 2;
+  const arcLength = (arc.a1 - arc.a0) * r;
+  const name = arc.node.name;
+  const textWidth = estimateTextWidth(name, 11);
+  const radial = arcLength >= 14 && thickness >= textWidth + 10;
+  const tangential = !radial && thickness >= 15 && arcLength >= textWidth + 12;
+  if (!radial && !tangential) return null;
+  const degrees = (mid * 180 / Math.PI % 360 + 360) % 360;
+  const rotate = radial ? degrees < 180 ? degrees - 90 : degrees + 90 : degrees > 90 && degrees < 270 ? degrees - 180 : degrees;
+  const x = cx + r * Math.sin(mid);
+  const y = cy - r * Math.cos(mid);
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x,
+      y,
+      transform: `rotate(${rotate.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)})`,
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      className: "pointer-events-none select-none font-semibold text-[11px]",
+      style: { fill: ink, opacity: dimmed ? 0.4 : 1, transition: "opacity 150ms ease-out" },
+      children: name
+    }
+  );
+}
+export {
+  SunburstChart
+};

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

@@ -0,0 +1,2 @@
+export * from "./timeline-chart.js";
+export * from "./timeline-lanes.js";

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

@@ -0,0 +1,2 @@
+export * from "./timeline-chart.js";
+export * from "./timeline-lanes.js";

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

@@ -0,0 +1,70 @@
+import { type ChartLabels } from "../core/types.js";
+export interface TimelineRow {
+    id: string;
+    /** Row title, e.g. the barber's name. */
+    label: string;
+}
+export interface TimelineItem {
+    id: string;
+    rowId: string;
+    start: Date | number;
+    end: Date | number;
+    /** Text inside the bar when it fits, e.g. the client's name. */
+    label?: string;
+    /** Group id (status); picks the color and the legend entry. */
+    group?: string;
+    /** Second line in the tooltip, e.g. the service. */
+    detail?: string;
+}
+export interface TimelineGroup {
+    id: string;
+    name: string;
+    /** CSS color; defaults to the palette slot. */
+    color?: string;
+}
+export interface TimelineTexts {
+    group: string;
+    row: string;
+    time: string;
+    duration: string;
+    now: string;
+    /** Short unit for minutes, "min". */
+    minutes: string;
+    hours: string;
+}
+export interface TimelineChartProps {
+    rows: readonly TimelineRow[];
+    items: readonly TimelineItem[];
+    groups?: readonly TimelineGroup[];
+    /** Accessible name of the chart. */
+    title: string;
+    description?: string;
+    /** Visible time window; by default the items rounded out to whole hours. */
+    domain?: readonly [Date | number, Date | number];
+    /** A "now" marker. "auto" uses the current time; false hides it. */
+    now?: Date | number | "auto" | false;
+    /**
+     * By default the height follows the lanes. `"fill"` stretches the lanes to
+     * the height of the parent; `aspectRatio` does the same from the width.
+     */
+    height?: "fill";
+    /** Width / height ratio; stretches the lanes to fit it. */
+    aspectRatio?: number;
+    /** Height of one lane (a bar) in pixels, 28 by default (the minimum when stretching is 14). */
+    laneHeight?: number;
+    grid?: boolean;
+    legend?: boolean;
+    tooltip?: boolean;
+    loading?: boolean;
+    animate?: boolean;
+    initialHidden?: readonly string[];
+    texts?: Partial<TimelineTexts>;
+    labels?: Partial<ChartLabels>;
+    className?: string;
+}
+/**
+ * Gantt-style time ranges: one row per resource, one bar per item. Bars that
+ * overlap inside a row are stacked into lanes, so nothing is hidden. Colors
+ * come from groups (statuses), and an optional marker shows the current time.
+ */
+export declare function TimelineChart({ rows, items, groups, title, description, domain, now, height: heightMode, aspectRatio, laneHeight, grid, legend, tooltip, loading, animate, initialHidden, texts: textOverrides, labels: labelOverrides, className, }: TimelineChartProps): import("react").JSX.Element;