@spatika/react 1.3.1 → 1.5.0

package/src/composites/flow-charts.tsx

@@ -1,607 +0,0 @@
-import { useId } from "react";
-import {
-  chartColor,
-  chordLayout,
-  formatChartNumber,
-  funnelLayout,
-  heatColor,
-  pyramidLayout,
-  sankeyLayout,
-  squarify,
-  sunburstLayout,
-  type ChartAxisConfig,
-  type ChartMargin,
-  type SankeyLink,
-  type SankeyNode,
-  type TreeNode,
-} from "../lib/charts";
-import {
-  ChartFrame,
-  categoryLabels,
-  seriesMeta,
-  useChartHover,
-  useHiddenSeries,
-} from "./chart-ui";
-
-export type HeatDatum = { x: number; y: number; value: number };
-
-export type HeatmapProps = {
-  xAxis?: ChartAxisConfig[];
-  yAxis?: ChartAxisConfig[];
-  series: Array<{ data: HeatDatum[] }>;
-  height?: number;
-  width?: number;
-  hideLegend?: boolean;
-  showColorScale?: boolean;
-  margin?: ChartMargin;
-  className?: string;
-};
-
-export function Heatmap({
-  xAxis,
-  yAxis,
-  series,
-  height = 280,
-  width,
-  hideLegend,
-  showColorScale,
-  margin,
-  className,
-}: HeatmapProps) {
-  const cells = series[0]?.data ?? [];
-  const xs = categoryLabels(xAxis?.[0], Math.max(...cells.map((c) => c.x), 0) + 1);
-  const ys = categoryLabels(yAxis?.[0], Math.max(...cells.map((c) => c.y), 0) + 1);
-  const values = cells.map((c) => c.value);
-  const min = Math.min(...values, 0);
-  const max = Math.max(...values, 1);
-  const { hover, setHover, clear } = useChartHover();
-  const reactId = useId().replace(/:/g, "");
-  const scaleId = `spk-heat-scale-${reactId}`;
-  const colorScale = showColorScale ?? !hideLegend;
-
-  return (
-    <ChartFrame
-      slot="heatmap"
-      className={className}
-      width={width}
-      height={height}
-      margin={margin ?? { top: colorScale ? 32 : 12, right: 12, bottom: 36, left: 72 }}
-      hover={hover}
-      aria-label="Heatmap"
-    >
-      {({ width: w, height: h, m }) => {
-        const iw = Math.max(1, w - m.left - m.right);
-        const ih = Math.max(1, h - m.top - m.bottom);
-        const cw = iw / Math.max(xs.length, 1);
-        const ch = ih / Math.max(ys.length, 1);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {colorScale ? (
-              <g className="spk-chart-color-scale" data-slot="heatmap-color-scale">
-                <defs>
-                  <linearGradient id={scaleId} x1="0" y1="0" x2="1" y2="0">
-                    <stop offset="0%" stopColor={heatColor(0)} />
-                    <stop offset="50%" stopColor={heatColor(0.5)} />
-                    <stop offset="100%" stopColor={heatColor(1)} />
-                  </linearGradient>
-                </defs>
-                <text className="spk-chart-muted" x={m.left} y={m.top - 16}>
-                  {formatChartNumber(min)}
-                </text>
-                <text
-                  className="spk-chart-muted"
-                  x={m.left + iw}
-                  y={m.top - 16}
-                  textAnchor="end"
-                >
-                  {formatChartNumber(max)}
-                </text>
-                <rect
-                  x={m.left}
-                  y={m.top - 12}
-                  width={iw}
-                  height={6}
-                  rx={3}
-                  fill={`url(#${scaleId})`}
-                />
-              </g>
-            ) : null}
-            {ys.map((label, y) => (
-              <text
-                key={`y-${String(label)}`}
-                className="spk-chart-tick"
-                x={m.left - 8}
-                y={m.top + y * ch + ch / 2}
-                textAnchor="end"
-                dominantBaseline="middle"
-              >
-                {String(label)}
-              </text>
-            ))}
-            {xs.map((label, x) => (
-              <text
-                key={`x-${String(label)}`}
-                className="spk-chart-tick"
-                x={m.left + x * cw + cw / 2}
-                y={h - m.bottom + 16}
-                textAnchor="middle"
-              >
-                {String(label)}
-              </text>
-            ))}
-            {cells.map((cell, i) => {
-              const t = (cell.value - min) / (max - min || 1);
-              return (
-                <rect
-                  key={i}
-                  x={m.left + cell.x * cw + 1.5}
-                  y={m.top + cell.y * ch + 1.5}
-                  width={Math.max(1, cw - 3)}
-                  height={Math.max(1, ch - 3)}
-                  rx={4}
-                  fill={heatColor(t)}
-                  className="spk-chart-mark"
-                  onMouseEnter={(event) =>
-                    setHover({
-                      x: event.nativeEvent.offsetX,
-                      y: event.nativeEvent.offsetY,
-                      title: `${xs[cell.x]} · ${ys[cell.y]}`,
-                      items: [
-                        {
-                          color: heatColor(t),
-                          label: "value",
-                          value: formatChartNumber(cell.value),
-                        },
-                      ],
-                    })
-                  }
-                  onMouseLeave={clear}
-                />
-              );
-            })}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-export type FunnelDatum = { id?: string; label: string; value: number; color?: string };
-
-export type FunnelSeries = {
-  id?: string;
-  label?: string;
-  data: FunnelDatum[];
-};
-
-export type FunnelLabelPosition = "inside" | "outside" | "both";
-
-export type FunnelChartProps = {
-  series: FunnelSeries[];
-  height?: number;
-  width?: number;
-  colors?: string[];
-  hideLegend?: boolean;
-  className?: string;
-  variant?: "funnel" | "pyramid";
-  gap?: number;
-  labelPosition?: FunnelLabelPosition;
-  valueFormatter?: (value: number, percent: number) => string;
-};
-
-export function FunnelChart({
-  series,
-  height = 300,
-  width,
-  colors,
-  hideLegend,
-  className,
-  variant = "funnel",
-  gap = 6,
-  labelPosition,
-  valueFormatter,
-}: FunnelChartProps) {
-  const stages = series[0]?.data ?? [];
-  const comparison = series.length > 1;
-  const position = labelPosition ?? (comparison ? "both" : "inside");
-  const formatValue =
-    valueFormatter ?? ((value: number) => formatChartNumber(value));
-  const meta = seriesMeta(
-    stages.map((item) => ({ id: item.id ?? item.label, label: item.label, color: item.color })),
-    colors,
-  );
-  const { hover, setHover, clear } = useChartHover();
-  const ids = meta.map((item) => item.id);
-  const { hidden, toggle } = useHiddenSeries(ids);
-  const showInside = position === "inside" || position === "both";
-  const showOutside = position === "outside" || position === "both";
-
-  return (
-    <ChartFrame
-      slot={variant === "pyramid" ? "pyramid-chart" : "funnel-chart"}
-      className={className}
-      width={width}
-      height={height}
-      margin={{
-        top: 8,
-        right: showOutside ? 56 : 8,
-        bottom: 8,
-        left: 8,
-      }}
-      legend={hideLegend ? undefined : meta}
-      hiddenIds={hidden}
-      onToggleSeries={toggle}
-      hover={hover}
-      aria-label={variant === "pyramid" ? "Pyramid chart" : "Funnel chart"}
-    >
-      {({ width: w, height: h, m }) => {
-        const visibleIndexes = stages
-          .map((_, i) => i)
-          .filter((i) => !hidden.has(meta[i]!.id));
-        const visibleSeries = series.map((item) => ({
-          ...item,
-          data: visibleIndexes.map((i) => item.data[i]).filter((row): row is FunnelDatum => row != null),
-        }));
-        const maxValue = Math.max(
-          ...visibleSeries.flatMap((item) => item.data.map((row) => row.value)),
-          1,
-        );
-        const innerW = w - m.left - m.right;
-        const innerH = h - m.top - m.bottom;
-        const layouts = visibleSeries.map((item) => {
-          const rows = item.data.map((row, i) => ({
-            ...row,
-            color: meta[visibleIndexes[i] ?? i]?.color,
-          }));
-          return variant === "pyramid"
-            ? pyramidLayout(rows, innerW, innerH)
-            : funnelLayout(rows, innerW, innerH, gap, maxValue);
-        });
-        const drawOrder = layouts.map((_, i) => i).sort((a, b) => (a === 0 ? 1 : b === 0 ? -1 : a - b));
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {drawOrder.flatMap((seriesIndex) => {
-              const layout = layouts[seriesIndex] ?? [];
-              const primary = seriesIndex === 0;
-              return layout.map((row, i) => {
-                const info = meta.find((item) => item.label === row.label) ?? meta[visibleIndexes[i] ?? i]!;
-                const d = `M${m.left + row.topLeft} ${m.top + row.y} L${m.left + row.topRight} ${m.top + row.y} L${m.left + row.bottomRight} ${m.top + row.y + row.height} L${m.left + row.bottomLeft} ${m.top + row.y + row.height} Z`;
-                const valueText = formatValue(row.value, row.percent);
-                const inside =
-                  showInside &&
-                  primary &&
-                  (hideLegend && !comparison ? row.label : valueText);
-                const outside = showOutside && !primary ? valueText : showOutside && !comparison ? valueText : null;
-                return (
-                  <g key={`${seriesIndex}-${row.label}`}>
-                    <path
-                      d={d}
-                      fill={info.color}
-                      fillOpacity={primary ? 1 : 0.14}
-                      stroke={primary ? "none" : info.color}
-                      strokeWidth={primary ? 0 : 1.75}
-                      className="spk-chart-mark"
-                      onMouseEnter={(event) =>
-                        setHover({
-                          x: event.nativeEvent.offsetX,
-                          y: event.nativeEvent.offsetY,
-                          title: row.label,
-                          items: [
-                            {
-                              color: info.color,
-                              label: visibleSeries[seriesIndex]?.label ?? row.label,
-                              value: formatChartNumber(row.value),
-                            },
-                          ],
-                        })
-                      }
-                      onMouseLeave={clear}
-                    />
-                    {inside ? (
-                      <text
-                        className="spk-chart-label"
-                        fill="var(--primary-foreground)"
-                        x={w / 2}
-                        y={m.top + row.y + row.height / 2}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        {inside}
-                      </text>
-                    ) : null}
-                    {outside ? (
-                      <text
-                        className="spk-chart-tick"
-                        x={m.left + Math.max(row.topRight, row.bottomRight) + 8}
-                        y={m.top + row.y + row.height / 2}
-                        dominantBaseline="middle"
-                      >
-                        {outside}
-                      </text>
-                    ) : null}
-                  </g>
-                );
-              });
-            })}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-export function PyramidChart(props: FunnelChartProps) {
-  return <FunnelChart {...props} variant="pyramid" />;
-}
-
-export type SankeyChartProps = {
-  series: { data: SankeyNode[]; links: SankeyLink[] };
-  height?: number;
-  width?: number;
-  colors?: string[];
-  className?: string;
-};
-
-export function SankeyChart({ series, height = 300, width, colors, className }: SankeyChartProps) {
-  const { hover, setHover, clear } = useChartHover();
-  return (
-    <ChartFrame
-      slot="sankey-chart"
-      className={className}
-      width={width}
-      height={height}
-      margin={{ top: 12, right: 88, bottom: 12, left: 12 }}
-      hover={hover}
-      aria-label="Sankey chart"
-    >
-      {({ width: w, height: h, m }) => {
-        const layout = sankeyLayout(series.data, series.links, w - m.left - m.right, h - m.top - m.bottom);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {layout.links.map((link, i) => (
-              <path
-                key={`${link.source}-${link.target}-${i}`}
-                d={link.path}
-                transform={`translate(${m.left} ${m.top})`}
-                fill={chartColor(i, colors)}
-                fillOpacity={0.28}
-                className="spk-chart-mark"
-                onMouseEnter={(event) =>
-                  setHover({
-                    x: event.nativeEvent.offsetX,
-                    y: event.nativeEvent.offsetY,
-                    title: `${link.source} → ${link.target}`,
-                    items: [
-                      {
-                        color: chartColor(i, colors),
-                        label: "flow",
-                        value: formatChartNumber(link.value),
-                      },
-                    ],
-                  })
-                }
-                onMouseLeave={clear}
-              />
-            ))}
-            {layout.nodes.map((node, i) => (
-              <g key={node.id} transform={`translate(${m.left} ${m.top})`}>
-                <rect
-                  x={node.x}
-                  y={node.y}
-                  width={node.width}
-                  height={node.height}
-                  rx={4}
-                  fill={node.color ?? chartColor(i, colors)}
-                />
-                <text
-                  className="spk-chart-tick"
-                  x={node.x + node.width + 6}
-                  y={node.y + node.height / 2}
-                  dominantBaseline="middle"
-                >
-                  {node.label}
-                </text>
-              </g>
-            ))}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-export type TreemapProps = {
-  series: Array<{ data: TreeNode[] }>;
-  height?: number;
-  width?: number;
-  colors?: string[];
-  className?: string;
-};
-
-export function Treemap({ series, height = 280, width, colors, className }: TreemapProps) {
-  const { hover, setHover, clear } = useChartHover();
-  const data = series[0]?.data ?? [];
-  return (
-    <ChartFrame
-      slot="treemap"
-      className={className}
-      width={width}
-      height={height}
-      margin={{ top: 4, right: 4, bottom: 4, left: 4 }}
-      hover={hover}
-      aria-label="Treemap"
-    >
-      {({ width: w, height: h, m }) => {
-        const rects = squarify(data, 0, 0, w - m.left - m.right, h - m.top - m.bottom);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {rects.map((rect, i) => (
-              <g key={rect.id} transform={`translate(${m.left} ${m.top})`}>
-                <rect
-                  x={rect.x + 1.5}
-                  y={rect.y + 1.5}
-                  width={Math.max(0, rect.w - 3)}
-                  height={Math.max(0, rect.h - 3)}
-                  rx={8}
-                  fill={rect.color ?? chartColor(i, colors)}
-                  className="spk-chart-mark"
-                  onMouseEnter={(event) =>
-                    setHover({
-                      x: event.nativeEvent.offsetX,
-                      y: event.nativeEvent.offsetY,
-                      title: rect.label,
-                      items: [
-                        {
-                          color: rect.color ?? chartColor(i, colors),
-                          label: rect.label,
-                          value: formatChartNumber(rect.value),
-                        },
-                      ],
-                    })
-                  }
-                  onMouseLeave={clear}
-                />
-                {rect.w > 56 && rect.h > 28 ? (
-                  <text
-                    className="spk-chart-label"
-                    x={rect.x + 10}
-                    y={rect.y + 20}
-                  >
-                    {rect.label}
-                  </text>
-                ) : null}
-              </g>
-            ))}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-export type SunburstChartProps = {
-  series: Array<{ data: TreeNode[] }>;
-  height?: number;
-  width?: number;
-  colors?: string[];
-  className?: string;
-};
-
-export function SunburstChart({ series, height = 300, width, colors, className }: SunburstChartProps) {
-  const { hover, setHover, clear } = useChartHover();
-  const data = series[0]?.data ?? [];
-  return (
-    <ChartFrame
-      slot="sunburst-chart"
-      className={className}
-      width={width}
-      height={height}
-      margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
-      hover={hover}
-      aria-label="Sunburst chart"
-    >
-      {({ width: w, height: h }) => {
-        const cx = w / 2;
-        const cy = h / 2;
-        const outer = Math.min(w, h) * 0.42;
-        const slices = sunburstLayout(data, cx, cy, outer * 0.22, outer);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {slices.map((slice, i) => (
-              <path
-                key={`${slice.id}-${i}`}
-                d={slice.path}
-                fill={slice.color ?? chartColor(slice.depth + i, colors)}
-                stroke="var(--background)"
-                strokeWidth={1.5}
-                className="spk-chart-mark"
-                onMouseEnter={(event) =>
-                  setHover({
-                    x: event.nativeEvent.offsetX,
-                    y: event.nativeEvent.offsetY,
-                    title: slice.label,
-                    items: [
-                      {
-                        color: slice.color ?? chartColor(i, colors),
-                        label: slice.label,
-                        value: formatChartNumber(slice.value),
-                      },
-                    ],
-                  })
-                }
-                onMouseLeave={clear}
-              />
-            ))}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-export type ChordChartProps = {
-  series: { data: string[]; matrix: number[][] };
-  height?: number;
-  width?: number;
-  colors?: string[];
-  className?: string;
-};
-
-export function ChordChart({ series, height = 300, width, colors, className }: ChordChartProps) {
-  const { hover, setHover, clear } = useChartHover();
-  const meta = seriesMeta(
-    series.data.map((label) => ({ id: label, label })),
-    colors,
-  );
-  return (
-    <ChartFrame
-      slot="chord-chart"
-      className={className}
-      width={width}
-      height={height}
-      margin={{ top: 24, right: 24, bottom: 24, left: 24 }}
-      legend={meta}
-      hover={hover}
-      aria-label="Chord chart"
-    >
-      {({ width: w, height: h }) => {
-        const cx = w / 2;
-        const cy = h / 2;
-        const outer = Math.min(w, h) * 0.38;
-        const inner = outer * 0.9;
-        const layout = chordLayout(series.data, series.matrix, cx, cy, inner, outer);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {layout.ribbons.map((ribbon, i) => (
-              <path
-                key={`${ribbon.source}-${ribbon.target}-${i}`}
-                d={ribbon.path}
-                fill={chartColor(ribbon.source, colors)}
-                fillOpacity={0.28}
-                className="spk-chart-mark"
-                onMouseEnter={(event) =>
-                  setHover({
-                    x: event.nativeEvent.offsetX,
-                    y: event.nativeEvent.offsetY,
-                    title: `${series.data[ribbon.source]} → ${series.data[ribbon.target]}`,
-                    items: [
-                      {
-                        color: chartColor(ribbon.source, colors),
-                        label: "flow",
-                        value: formatChartNumber(ribbon.value),
-                      },
-                    ],
-                  })
-                }
-                onMouseLeave={clear}
-              />
-            ))}
-            {layout.groups.map((group) => (
-              <path key={group.label} d={group.path} fill={chartColor(group.index, colors)} />
-            ))}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}

package/src/composites/radial-charts.test.tsx

@@ -1,74 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { Gauge, LinearGauge, PieChart, RadarChart } from "./radial-charts";
-
-describe("radial-charts", () => {
-  it("renders a pie chart from slice values", () => {
-    const { container } = render(
-      <PieChart
-        width={200}
-        height={200}
-        series={[{ data: [{ value: 10, label: "A" }, { value: 20, label: "B" }] }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="pie-chart"]')).toBeTruthy();
-    expect(screen.getByRole("button", { name: "A" })).toBeInTheDocument();
-  });
-
-  it("renders a single-value gauge with a percent label", () => {
-    render(<Gauge value={40} width={160} height={120} />);
-    expect(screen.getByRole("img", { name: "Gauge 40" })).toBeInTheDocument();
-    expect(screen.getByText("40%")).toBeInTheDocument();
-  });
-
-  it("renders a segmented gauge with a section legend", () => {
-    const { container } = render(
-      <Gauge
-        width={160}
-        height={120}
-        startAngle={-90}
-        endAngle={90}
-        sections={[
-          { value: 40, label: "v5" },
-          { value: 35, label: "v6" },
-          { value: 25, label: "v7" },
-        ]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="gauge"]')).toBeTruthy();
-    expect(screen.getByRole("button", { name: "v5" })).toBeInTheDocument();
-    expect(container.querySelectorAll('[data-slot="gauge"] path').length).toBe(3);
-  });
-
-  it("hides the section legend and accepts a text formatter", () => {
-    render(
-      <Gauge
-        value={72}
-        width={160}
-        height={120}
-        hideLegend
-        text={(value) => `${value} pts`}
-        sections={[{ value: 1, label: "hidden" }]}
-      />,
-    );
-    expect(screen.queryByRole("button", { name: "hidden" })).not.toBeInTheDocument();
-    expect(screen.getByText("72 pts")).toBeInTheDocument();
-  });
-
-  it("renders a linear gauge and a radar polygon", () => {
-    const { container } = render(
-      <div>
-        <LinearGauge value={25} width={200} />
-        <RadarChart
-          width={220}
-          height={220}
-          radar={{ metrics: ["A", "B", "C"] }}
-          series={[{ label: "One", data: [3, 5, 4] }]}
-        />
-      </div>,
-    );
-    expect(container.querySelector('[data-slot="linear-gauge"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="radar-chart"]')).toBeTruthy();
-    expect(screen.getByRole("button", { name: "One" })).toBeInTheDocument();
-  });
-});