@spatika/react 1.3.1 → 1.5.0

package/src/composites/chart-ui.tsx

@@ -1,328 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,318 +0,0 @@
-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);
-}