@spatika/react 1.1.0 → 1.3.0

package/src/composites/chart-ui.tsx

@@ -0,0 +1,328 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { cn } from "../lib/cn";
+import {
+  DEFAULT_CHART_MARGIN,
+  chartColor,
+  formatAxisValue,
+  formatChartNumber,
+  type ChartAxisConfig,
+  type ChartMargin,
+} from "../lib/charts";
+
+export type ChartTooltipItem = {
+  color: string;
+  label: string;
+  value: string;
+};
+
+export type ChartLegendItem = {
+  id: string;
+  label: string;
+  color: string;
+};
+
+export type ChartHover = {
+  x: number;
+  y: number;
+  title?: string;
+  items: ChartTooltipItem[];
+} | null;
+
+export type ChartFrameProps = {
+  slot: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  margin?: ChartMargin;
+  legend?: ChartLegendItem[];
+  hiddenIds?: Set<string>;
+  onToggleSeries?: (id: string) => void;
+  hover?: ChartHover;
+  "aria-label"?: string;
+  children: (plot: { width: number; height: number; m: Required<ChartMargin> }) => ReactNode;
+};
+
+export function resolveMargin(margin?: ChartMargin): Required<ChartMargin> {
+  return {
+    top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+    right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+    bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+    left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+  };
+}
+
+function useElementSize(
+  ref: RefObject<HTMLElement | null>,
+  fallbackWidth: number,
+  fallbackHeight: number,
+) {
+  const [size, setSize] = useState({ width: fallbackWidth, height: fallbackHeight });
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const apply = () => {
+      setSize({
+        width: el.clientWidth || fallbackWidth,
+        height: el.clientHeight || fallbackHeight,
+      });
+    };
+    apply();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(apply);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fallbackWidth, fallbackHeight, ref]);
+
+  return size;
+}
+
+export function ChartFrame({
+  slot,
+  className,
+  width,
+  height = 280,
+  margin,
+  legend,
+  hiddenIds,
+  onToggleSeries,
+  hover,
+  "aria-label": ariaLabel,
+  children,
+}: ChartFrameProps) {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const measured = useElementSize(surfaceRef, width ?? 320, height);
+  const plotWidth = width ?? measured.width;
+  const plotHeight = height;
+  const m = resolveMargin(margin);
+
+  return (
+    <div
+      data-slot={slot}
+      className={cn("spk-chart", className)}
+      role="img"
+      aria-label={ariaLabel}
+    >
+      {legend?.length ? (
+        <ChartLegend items={legend} hiddenIds={hiddenIds} onToggle={onToggleSeries} />
+      ) : null}
+      <div
+        ref={surfaceRef}
+        className="spk-chart-surface"
+        style={{ height: plotHeight }}
+      >
+        {plotWidth > 0 ? children({ width: plotWidth, height: plotHeight, m }) : null}
+        <ChartTooltip hover={hover ?? null} boundsWidth={plotWidth} />
+      </div>
+    </div>
+  );
+}
+
+export function ChartLegend({
+  items,
+  hiddenIds,
+  onToggle,
+}: {
+  items: ChartLegendItem[];
+  hiddenIds?: Set<string>;
+  onToggle?: (id: string) => void;
+}) {
+  return (
+    <div className="spk-chart-legend">
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          className="spk-chart-legend-item"
+          data-hidden={hiddenIds?.has(item.id) ? "true" : undefined}
+          onClick={() => onToggle?.(item.id)}
+        >
+          <span className="spk-chart-swatch" style={{ background: item.color }} />
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function ChartTooltip({
+  hover,
+  boundsWidth,
+}: {
+  hover: ChartHover;
+  boundsWidth: number;
+}) {
+  if (!hover || !hover.items.length) return null;
+  const left = clampTooltip(hover.x, boundsWidth);
+  return (
+    <div className="spk-chart-tooltip" style={{ left, top: hover.y }} role="tooltip">
+      {hover.title ? <p className="spk-chart-tooltip-title">{hover.title}</p> : null}
+      <ul>
+        {hover.items.map((item) => (
+          <li key={item.label}>
+            <span className="spk-chart-swatch" style={{ background: item.color }} />
+            <span>{item.label}</span>
+            <strong>{item.value}</strong>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function clampTooltip(x: number, width: number) {
+  return clampNum(x, 72, Math.max(72, width - 72));
+}
+
+function clampNum(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function CartesianGrid({
+  ticks,
+  scale,
+  left,
+  right,
+  top,
+  bottom,
+}: {
+  ticks: number[];
+  scale: (value: number) => number;
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}) {
+  return (
+    <g data-slot="chart-grid">
+      {ticks.map((tick) => (
+        <line
+          key={tick}
+          className="spk-chart-grid"
+          x1={left}
+          x2={right}
+          y1={scale(tick)}
+          y2={scale(tick)}
+        />
+      ))}
+      <line className="spk-chart-axis" x1={left} x2={right} y1={bottom} y2={bottom} />
+      <line className="spk-chart-axis" x1={left} x2={left} y1={top} y2={bottom} />
+    </g>
+  );
+}
+
+export function ValueAxis({
+  ticks,
+  scale,
+  left,
+  width,
+}: {
+  ticks: number[];
+  scale: (value: number) => number;
+  left: number;
+  width?: number;
+}) {
+  return (
+    <g data-slot="chart-y-axis">
+      {ticks.map((tick) => (
+        <text
+          key={tick}
+          className="spk-chart-tick"
+          x={left - 8}
+          y={scale(tick)}
+          textAnchor="end"
+          dominantBaseline="middle"
+        >
+          {formatChartNumber(tick)}
+        </text>
+      ))}
+      {width ? (
+        <text
+          className="spk-chart-axis-label"
+          x={12}
+          y={width / 2}
+          transform={`rotate(-90 12 ${width / 2})`}
+          textAnchor="middle"
+        />
+      ) : null}
+    </g>
+  );
+}
+
+export function CategoryAxis({
+  labels,
+  position,
+  y,
+}: {
+  labels: Array<string | number | Date>;
+  position: (index: number) => number;
+  y: number;
+}) {
+  const maxLabels = labels.length > 12 ? Math.ceil(labels.length / 8) : 1;
+  return (
+    <g data-slot="chart-x-axis">
+      {labels.map((label, index) => {
+        if (index % maxLabels !== 0) return null;
+        return (
+          <text
+            key={`${index}-${String(label)}`}
+            className="spk-chart-tick"
+            x={position(index)}
+            y={y + 16}
+            textAnchor="middle"
+          >
+            {formatAxisValue(label)}
+          </text>
+        );
+      })}
+    </g>
+  );
+}
+
+export function useHiddenSeries(ids: string[]) {
+  const [hidden, setHidden] = useState<Set<string>>(new Set());
+  const toggle = (id: string) => {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const visible = ids.filter((id) => !hidden.has(id));
+  return { hidden, toggle, visible };
+}
+
+export function seriesMeta(
+  series: Array<{ id?: string; label?: string; color?: string }>,
+  colors?: string[],
+): ChartLegendItem[] {
+  return series.map((item, index) => ({
+    id: item.id ?? item.label ?? `series-${index}`,
+    label: item.label ?? item.id ?? `Series ${index + 1}`,
+    color: item.color ?? chartColor(index, colors),
+  }));
+}
+
+export function useChartHover() {
+  const [hover, setHover] = useState<ChartHover>(null);
+  return { hover, setHover, clear: () => setHover(null) };
+}
+
+export function categoryLabels(axis?: ChartAxisConfig, length = 0): Array<string | number | Date> {
+  if (axis?.data?.length) return axis.data;
+  return Array.from({ length }, (_, i) => i + 1);
+}
+
+export function formatSeriesValue(value: number | [number, number] | undefined) {
+  if (value == null) return "—";
+  if (Array.isArray(value)) return `${formatChartNumber(value[0])} – ${formatChartNumber(value[1])}`;
+  return formatChartNumber(value);
+}
+

package/src/composites/charts-3d.test.tsx

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { BarChart3D, PieChart3D } from "./charts-3d";
+
+describe("charts-3d", () => {
+  it("renders isometric bars and an extruded pie", () => {
+    const { container } = render(
+      <div>
+        <BarChart3D
+          width={240}
+          height={160}
+          xAxis={[{ data: ["A", "B"] }]}
+          series={[{ label: "Views", data: [3, 5] }]}
+        />
+        <PieChart3D
+          width={200}
+          height={160}
+          series={[{ data: [{ value: 2, label: "A" }, { value: 3, label: "B" }] }]}
+        />
+      </div>,
+    );
+    expect(container.querySelector('[data-slot="bar-chart-3d"]')).toBeTruthy();
+    expect(container.querySelector('[data-slot="pie-chart-3d"]')).toBeTruthy();
+  });
+});

package/src/composites/charts-3d.tsx

@@ -0,0 +1,318 @@
+import {
+  extent,
+  formatChartNumber,
+  niceTicks,
+  pieSlices,
+  type ChartAxisConfig,
+  type ChartMargin,
+} from "../lib/charts";
+import { ellipseSlicePath, ellipseWallPath, isoBoxFaces, isoPoint } from "../lib/iso";
+import {
+  CartesianGrid,
+  ChartFrame,
+  categoryLabels,
+  formatSeriesValue,
+  seriesMeta,
+  useChartHover,
+  useHiddenSeries,
+} from "./chart-ui";
+import type { NumericSeries } from "./cartesian-charts";
+
+function box(width: number, height: number, m: Required<ChartMargin>) {
+  return {
+    left: m.left,
+    right: width - m.right,
+    top: m.top,
+    bottom: height - m.bottom,
+    iw: Math.max(1, width - m.left - m.right),
+    ih: Math.max(1, height - m.top - m.bottom),
+  };
+}
+
+export type BarChart3DProps = {
+  series: NumericSeries[];
+  xAxis?: ChartAxisConfig[];
+  yAxis?: ChartAxisConfig[];
+  height?: number;
+  width?: number;
+  colors?: string[];
+  hideLegend?: boolean;
+  hideGrid?: boolean;
+  margin?: ChartMargin;
+  className?: string;
+  depth?: number;
+};
+
+export function BarChart3D({
+  series,
+  xAxis,
+  yAxis,
+  height = 280,
+  width,
+  colors,
+  hideLegend,
+  hideGrid,
+  margin,
+  className,
+  depth = 14,
+}: BarChart3DProps) {
+  const meta = seriesMeta(series, colors);
+  const ids = meta.map((item) => item.id);
+  const { hidden, toggle } = useHiddenSeries(ids);
+  const { hover, setHover, clear } = useChartHover();
+  const categories = categoryLabels(xAxis?.[0], series[0]?.data?.length ?? 0);
+  const values = series.flatMap((item) => (item.data ?? []).map((v) => v ?? 0));
+  const domain: [number, number] = [
+    yAxis?.[0]?.min ?? Math.min(0, extent(values, 0.08)[0]),
+    yAxis?.[0]?.max ?? extent(values, 0.08)[1],
+  ];
+  const ticks = niceTicks(domain[0], domain[1], 4);
+
+  return (
+    <ChartFrame
+      slot="bar-chart-3d"
+      className={className}
+      width={width}
+      height={height}
+      margin={margin ?? { top: 24, right: 28, bottom: 40, left: 48 }}
+      legend={hideLegend ? undefined : meta}
+      hiddenIds={hidden}
+      onToggleSeries={toggle}
+      hover={hover}
+      aria-label="3D bar chart"
+    >
+      {({ width: w, height: h, m }) => {
+        const plot = box(w, h, m);
+        const originX = plot.left + plot.iw * 0.16;
+        const originY = plot.bottom - 6;
+        const visible = series
+          .map((item, s) => ({ item, info: meta[s]!, s }))
+          .filter(({ info }) => !hidden.has(info.id));
+        const n = Math.max(categories.length, 1);
+        const groupW = Math.max(18, (plot.iw * 0.72) / n);
+        const barW = Math.max(8, (groupW * 0.78) / Math.max(visible.length, 1));
+        const gap = Math.max(2, (groupW - barW * visible.length) / Math.max(visible.length + 1, 1));
+        const maxH = plot.ih * 0.78;
+        const yScale = (value: number) =>
+          ((value - domain[0]) / (domain[1] - domain[0] || 1)) * maxH;
+        const yAt = (value: number) => originY - yScale(value);
+
+        return (
+          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
+            {hideGrid ? null : (
+              <CartesianGrid
+                ticks={ticks}
+                scale={yAt}
+                left={plot.left}
+                right={plot.right}
+                top={plot.top}
+                bottom={plot.bottom}
+              />
+            )}
+            {ticks.map((tick) => (
+              <text key={tick} className="spk-chart-tick" x={plot.left - 8} y={yAt(tick)} textAnchor="end">
+                {formatChartNumber(tick)}
+              </text>
+            ))}
+            {categories.map((label, i) => {
+              const x0 = i * groupW;
+              const foot = isoPoint(x0 + groupW / 2, 0, depth, originX, originY);
+              return (
+                <text
+                  key={String(label)}
+                  className="spk-chart-tick"
+                  x={foot.x}
+                  y={plot.bottom + 16}
+                  textAnchor="middle"
+                >
+                  {String(label)}
+                </text>
+              );
+            })}
+            {categories.flatMap((_, i) =>
+              visible.map(({ item, info }, s) => {
+                const value = item.data?.[i] ?? 0;
+                const barH = Math.max(2, yScale(value));
+                const x = i * groupW + gap + s * (barW + gap * 0.2);
+                const faces = isoBoxFaces(x, 0, 0, barW, barH, depth, originX, originY);
+                const color = info.color;
+                return (
+                  <g
+                    key={`${info.id}-${i}`}
+                    className="spk-chart-mark"
+                    onMouseEnter={(event) =>
+                      setHover({
+                        x: event.nativeEvent.offsetX,
+                        y: event.nativeEvent.offsetY,
+                        title: String(categories[i]),
+                        items: [
+                          {
+                            color,
+                            label: info.label,
+                            value: formatSeriesValue(value),
+                          },
+                        ],
+                      })
+                    }
+                    onMouseLeave={clear}
+                  >
+                    <path d={faces.side} fill={`color-mix(in srgb, ${color} 78%, black)`} />
+                    <path d={faces.top} fill={`color-mix(in srgb, ${color} 72%, white)`} />
+                    <path d={faces.front} fill={color} />
+                  </g>
+                );
+              }),
+            )}
+          </svg>
+        );
+      }}
+    </ChartFrame>
+  );
+}
+
+export type PieChart3DProps = {
+  series: Array<{
+    data: Array<{ id?: string | number; value: number; label?: string; color?: string }>;
+    innerRadius?: number;
+    paddingAngle?: number;
+  }>;
+  height?: number;
+  width?: number;
+  colors?: string[];
+  hideLegend?: boolean;
+  margin?: ChartMargin;
+  className?: string;
+  thickness?: number;
+};
+
+export function PieChart3D({
+  series,
+  height = 280,
+  width,
+  colors,
+  hideLegend,
+  margin,
+  className,
+  thickness = 18,
+}: PieChart3DProps) {
+  const first = series[0] ?? { data: [] };
+  const meta = seriesMeta(
+    first.data.map((item, i) => ({
+      id: String(item.id ?? item.label ?? i),
+      label: item.label ?? `Slice ${i + 1}`,
+      color: item.color,
+    })),
+    colors,
+  );
+  const ids = meta.map((item) => item.id);
+  const { hidden, toggle } = useHiddenSeries(ids);
+  const { hover, setHover, clear } = useChartHover();
+
+  return (
+    <ChartFrame
+      slot="pie-chart-3d"
+      className={className}
+      width={width}
+      height={height}
+      margin={margin ?? { top: 12, right: 12, bottom: 20, left: 12 }}
+      legend={hideLegend ? undefined : meta}
+      hiddenIds={hidden}
+      onToggleSeries={toggle}
+      hover={hover}
+      aria-label="3D pie chart"
+    >
+      {({ width: w, height: h, m }) => {
+        const cx = w / 2;
+        const cy = (h - thickness) / 2;
+        const rx = Math.min(w - m.left - m.right, (h - m.top - m.bottom - thickness) * 1.7) / 2;
+        const ry = rx * 0.42;
+        const visible = first.data.map((item, i) => (hidden.has(meta[i]!.id) ? 0 : item.value));
+        const slices = pieSlices(visible, {
+          cx,
+          cy,
+          innerRadius: 0,
+          outerRadius: rx,
+          paddingAngle: first.paddingAngle,
+        });
+        const ordered = slices
+          .map((slice, i) => ({ slice, info: meta[i]!, item: first.data[i]! }))
+          .filter(({ info, slice }) => !hidden.has(info.id) && slice.path)
+          .sort((a, b) => ellipsePointY(cx, cy, rx, ry, a.slice.midAngle) - ellipsePointY(cx, cy, rx, ry, b.slice.midAngle));
+
+        return (
+          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
+            {ordered.map(({ slice, info, item }) => (
+              <g
+                key={`${info.id}-wall`}
+                className="spk-chart-mark"
+                onMouseEnter={(event) =>
+                  setHover({
+                    x: event.nativeEvent.offsetX,
+                    y: event.nativeEvent.offsetY,
+                    title: info.label,
+                    items: [
+                      {
+                        color: info.color,
+                        label: info.label,
+                        value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                      },
+                    ],
+                  })
+                }
+                onMouseLeave={clear}
+              >
+                <path
+                  d={ellipseWallPath(cx, cy, rx, ry, slice.startAngle, slice.endAngle, thickness)}
+                  fill={`color-mix(in srgb, ${info.color} 70%, black)`}
+                />
+              </g>
+            ))}
+            {ordered.map(({ slice, info, item }) => (
+              <g
+                key={info.id}
+                className="spk-chart-mark"
+                onMouseEnter={(event) =>
+                  setHover({
+                    x: event.nativeEvent.offsetX,
+                    y: event.nativeEvent.offsetY,
+                    title: info.label,
+                    items: [
+                      {
+                        color: info.color,
+                        label: info.label,
+                        value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                      },
+                    ],
+                  })
+                }
+                onMouseLeave={clear}
+              >
+                <path
+                  d={ellipseSlicePath(cx, cy, rx, ry, slice.startAngle, slice.endAngle)}
+                  fill={info.color}
+                />
+                {slice.percent > 0.08 ? (
+                  <text
+                    className="spk-chart-label"
+                    x={cx + Math.cos(((slice.midAngle - 90) * Math.PI) / 180) * rx * 0.55}
+                    y={cy + Math.sin(((slice.midAngle - 90) * Math.PI) / 180) * ry * 0.55}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    fill="var(--primary-foreground)"
+                  >
+                    {Math.round(slice.percent * 100)}%
+                  </text>
+                ) : null}
+              </g>
+            ))}
+          </svg>
+        );
+      }}
+    </ChartFrame>
+  );
+}
+
+function ellipsePointY(cx: number, cy: number, rx: number, ry: number, angleDeg: number) {
+  const rad = ((angleDeg - 90) * Math.PI) / 180;
+  return cy + ry * Math.sin(rad);
+}