@spatika/react 1.4.0 → 1.6.0

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);
-}

package/src/composites/charts.test.tsx

@@ -1,254 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-import { ChartContainer } from "./chart-composition";
-import { BarChart, LineChart, ScatterChart, SparkLineChart, WaterfallChart } from "./cartesian-charts";
-import { Gauge, LinearGauge, PieChart, RadarChart } from "./radial-charts";
-import { FunnelChart, Heatmap, SankeyChart, Treemap } from "./flow-charts";
-import { MapChart } from "./MapChart";
-import { BarChart3D, PieChart3D } from "./charts-3d";
-import { ChartDataGrid } from "./ChartDataGrid";
-
-const months = ["Jan", "Feb", "Mar"];
-
-describe("charts", () => {
-  it("renders a grouped bar chart and shows a tooltip on hover", async () => {
-    const user = userEvent.setup();
-    render(
-      <BarChart
-        width={360}
-        height={220}
-        xAxis={[{ data: months }]}
-        series={[
-          { label: "Views", data: [4, 3, 5] },
-          { label: "Signups", data: [1, 2, 2] },
-        ]}
-      />,
-    );
-    expect(screen.getByRole("img", { name: /bar chart/i })).toBeInTheDocument();
-    const marks = document.querySelectorAll('[data-slot="bar-plot"] .spk-chart-mark');
-    expect(marks.length).toBeGreaterThan(0);
-    await user.hover(marks[0]!);
-    expect(screen.getByRole("tooltip")).toBeInTheDocument();
-  });
-
-  it("hides a line series from the legend", async () => {
-    const user = userEvent.setup();
-    render(
-      <LineChart
-        width={360}
-        height={220}
-        xAxis={[{ data: months }]}
-        series={[
-          { label: "Revenue", data: [2, 4, 3] },
-          { label: "Cost", data: [1, 1, 2] },
-        ]}
-      />,
-    );
-    const paths = () => document.querySelectorAll('[data-slot="line-plot"] path');
-    const before = paths().length;
-    await user.click(screen.getByRole("button", { name: "Cost" }));
-    expect(paths().length).toBeLessThan(before);
-  });
-
-  it("renders pie, gauge, radar, scatter, sparkline, and linear gauge", () => {
-    const { container } = render(
-      <div>
-        <PieChart
-          width={200}
-          height={200}
-          series={[{ data: [{ value: 10, label: "A" }, { value: 20, label: "B" }] }]}
-        />
-        <Gauge value={40} width={160} height={120} />
-        <Gauge
-          width={160}
-          height={120}
-          startAngle={-90}
-          endAngle={90}
-          sections={[
-            { value: 40, label: "v5" },
-            { value: 35, label: "v6" },
-            { value: 25, label: "v7" },
-          ]}
-        />
-        <LinearGauge value={25} width={200} />
-        <RadarChart
-          width={220}
-          height={220}
-          radar={{ metrics: ["A", "B", "C"] }}
-          series={[{ label: "One", data: [3, 5, 4] }]}
-        />
-        <ScatterChart
-          width={220}
-          height={180}
-          series={[{ label: "Pts", data: [{ x: 1, y: 2, id: 1 }] }]}
-        />
-        <SparkLineChart data={[1, 4, 2, 6]} width={160} height={48} />
-      </div>,
-    );
-    expect(container.querySelector('[data-slot="pie-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="gauge"]')).toBeTruthy();
-    expect(screen.getByRole("button", { name: "v5" })).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="linear-gauge"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="radar-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="scatter-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="sparkline"]')).toBeTruthy();
-  });
-
-  it("renders heatmap, funnel, sankey, treemap, and waterfall", () => {
-    const { container } = render(
-      <div>
-        <Heatmap
-          width={240}
-          height={160}
-          xAxis={[{ data: ["A", "B"] }]}
-          yAxis={[{ data: ["1"] }]}
-          series={[{ data: [{ x: 0, y: 0, value: 2 }, { x: 1, y: 0, value: 5 }] }]}
-        />
-        <FunnelChart
-          width={240}
-          height={180}
-          series={[{ data: [{ label: "Visit", value: 10 }, { label: "Paid", value: 3 }] }]}
-        />
-        <SankeyChart
-          width={280}
-          height={180}
-          series={{
-            data: [{ id: "a" }, { id: "b" }],
-            links: [{ source: "a", target: "b", value: 4 }],
-          }}
-        />
-        <Treemap
-          width={240}
-          height={160}
-          series={[{ data: [{ label: "A", value: 8 }, { label: "B", value: 4 }] }]}
-        />
-        <WaterfallChart
-          width={280}
-          height={180}
-          xAxis={[{ data: ["Start", "Up", "End"] }]}
-          series={[{ data: [10, 4, null] }]}
-        />
-      </div>,
-    );
-    expect(container.querySelector('[data-slot="heatmap"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="funnel-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="sankey-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="treemap"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="waterfall-chart"]')).toBeTruthy();
-  });
-
-  it("composes bar and line plots from a dataset with a toolbar", async () => {
-    const user = userEvent.setup();
-    const { container } = render(
-      <ChartContainer
-        width={360}
-        height={220}
-        zoom
-        showToolbar
-        dataset={[
-          { month: "Jan", views: 4, conv: 1 },
-          { month: "Feb", views: 6, conv: 2 },
-          { month: "Mar", views: 5, conv: 2 },
-        ]}
-        xAxis={[{ dataKey: "month" }]}
-        yAxis={[{ id: "left" }, { id: "right", position: "right" }]}
-        series={[
-          { type: "bar", dataKey: "views", label: "Views" },
-          { type: "line", dataKey: "conv", label: "Conv", yAxisId: "right" },
-        ]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="bar-plot"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="line-plot"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="chart-y-axis-right"]')).toBeTruthy();
-    expect(screen.getByRole("toolbar", { name: "Chart tools" })).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(container.querySelector("svg")).toBeTruthy();
-  });
-
-  it("renders a map, isometric 3d charts, and a sparkline bar", () => {
-    const { container } = render(
-      <div>
-        <MapChart
-          width={240}
-          height={160}
-          geoData={{
-            type: "FeatureCollection",
-            features: [
-              {
-                type: "Feature",
-                id: "a",
-                properties: { name: "A" },
-                geometry: {
-                  type: "Polygon",
-                  coordinates: [
-                    [
-                      [0, 0],
-                      [4, 0],
-                      [4, 3],
-                      [0, 3],
-                      [0, 0],
-                    ],
-                  ],
-                },
-              },
-            ],
-          }}
-          series={[{ data: [{ id: "a", value: 12, label: "A" }] }]}
-        />
-        <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" }] }]}
-        />
-        <SparkLineChart data={[1, 3, 2, 5]} plotType="bar" width={120} height={36} />
-        <ScatterChart
-          width={200}
-          height={140}
-          renderer="webgl"
-          series={[{ label: "Pts", data: [{ x: 1, y: 2, id: 1 }] }]}
-        />
-      </div>,
-    );
-    expect(container.querySelector('[data-slot="map-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="map-chart"] path')).toBeTruthy();
-    expect(container.querySelector('[data-slot="bar-chart-3d"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="pie-chart-3d"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="sparkline"] rect')).toBeTruthy();
-    expect(container.querySelector('[data-slot="scatter-chart"]')).toBeTruthy();
-  });
-
-  it("highlights a chart bar from a selected grid row", async () => {
-    const user = userEvent.setup();
-    const { container } = render(
-      <ChartDataGrid
-        height={140}
-        categoryField="name"
-        valueField="views"
-        rows={[
-          { id: "web", name: "Web", views: 10, trend: [1, 2, 3] },
-          { id: "ios", name: "iOS", views: 6, trend: [2, 2, 1] },
-        ]}
-        columns={[
-          { field: "name", headerName: "Channel" },
-          { field: "views", headerName: "Views", type: "number" },
-          { field: "trend", headerName: "Trend", type: "sparkline" },
-        ]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="chart-data-grid"]')).toBeTruthy();
-    const row = container.querySelector(
-      '[data-slot="chart-data-grid"] tbody [data-slot="table-row"]:nth-child(2)',
-    );
-    expect(row).toBeTruthy();
-    await user.click(row!);
-    expect(row).toHaveAttribute("data-state", "selected");
-  });
-});

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

@@ -1,98 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { FunnelChart, Heatmap } from "./flow-charts";
-
-describe("FunnelChart", () => {
-  it("renders a comparison overlay with inside and outside value labels", () => {
-    render(
-      <FunnelChart
-        width={280}
-        height={200}
-        valueFormatter={(value) => `${value}%`}
-        series={[
-          {
-            label: "2000",
-            data: [
-              { label: "Primary", value: 85 },
-              { label: "Secondary", value: 50 },
-            ],
-          },
-          {
-            label: "2020",
-            data: [
-              { label: "Primary", value: 90 },
-              { label: "Secondary", value: 67 },
-            ],
-          },
-        ]}
-      />,
-    );
-    expect(screen.getByRole("img", { name: /funnel chart/i })).toBeInTheDocument();
-    expect(screen.getByText("85%")).toBeInTheDocument();
-    expect(screen.getByText("90%")).toBeInTheDocument();
-    expect(screen.getByText("67%")).toBeInTheDocument();
-    expect(document.querySelectorAll('[data-slot="funnel-chart"] path').length).toBe(4);
-  });
-
-  it("keeps stage names on a single funnel when the legend is hidden", () => {
-    render(
-      <FunnelChart
-        width={240}
-        height={160}
-        hideLegend
-        series={[{ data: [{ label: "Visit", value: 10 }, { label: "Paid", value: 3 }] }]}
-      />,
-    );
-    expect(screen.getByText("Visit")).toBeInTheDocument();
-    expect(screen.getByText("Paid")).toBeInTheDocument();
-  });
-});
-
-describe("Heatmap", () => {
-  it("draws a color scale for the value domain", () => {
-    const { container } = render(
-      <Heatmap
-        width={240}
-        height={160}
-        xAxis={[{ data: ["A", "B"] }]}
-        yAxis={[{ data: ["1"] }]}
-        series={[{ data: [{ x: 0, y: 0, value: 2 }, { x: 1, y: 0, value: 8 }] }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="heatmap-color-scale"]')).toBeTruthy();
-    expect(screen.getByText("8")).toBeInTheDocument();
-  });
-
-  it("hides the color scale when hideLegend is set", () => {
-    const { container } = render(
-      <Heatmap
-        width={240}
-        height={160}
-        hideLegend
-        xAxis={[{ data: ["A"] }]}
-        yAxis={[{ data: ["1"] }]}
-        series={[{ data: [{ x: 0, y: 0, value: 4 }] }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="heatmap-color-scale"]')).toBeNull();
-  });
-
-  it("fires onItemClick and can label cells", () => {
-    const onItemClick = vi.fn();
-    const { container } = render(
-      <Heatmap
-        width={240}
-        height={160}
-        hideLegend
-        showCellLabels
-        xAxis={[{ data: ["A"] }]}
-        yAxis={[{ data: ["1"] }]}
-        series={[{ data: [{ x: 0, y: 0, value: 4 }] }]}
-        onItemClick={onItemClick}
-      />,
-    );
-    expect(screen.getByText("4")).toBeInTheDocument();
-    fireEvent.click(container.querySelector(".spk-chart-mark--interactive")!);
-    expect(onItemClick).toHaveBeenCalledWith(expect.objectContaining({ value: 4, category: "A · 1" }));
-  });
-});