@spatika/react 1.4.0 → 1.5.0

package/src/composites/ScatterWebGL.tsx

@@ -1,79 +0,0 @@
-import { useEffect, useRef } from "react";
-import { createScatterGL, destroyScatterGL, drawScatterGL, type ScatterGL } from "../lib/webgl-scatter";
-import type { ChartLegendItem } from "./chart-ui";
-
-type ScatterSeriesLike = {
-  data: Array<{ x: number; y: number; z?: number }>;
-};
-
-export function ScatterWebGLLayer({
-  width,
-  height,
-  series,
-  meta,
-  hidden,
-  xAt,
-  yAt,
-  sizeAt,
-  bubble,
-  onUnavailable,
-}: {
-  width: number;
-  height: number;
-  series: ScatterSeriesLike[];
-  meta: ChartLegendItem[];
-  hidden: Set<string>;
-  xAt: (value: number) => number;
-  yAt: (value: number) => number;
-  sizeAt: (z: number) => number;
-  bubble: boolean;
-  onUnavailable?: () => void;
-}) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const gpuRef = useRef<ScatterGL | null>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const gpu = createScatterGL(canvas);
-    if (!gpu) {
-      onUnavailable?.();
-      return;
-    }
-    gpuRef.current = gpu;
-    return () => {
-      destroyScatterGL(gpu);
-      gpuRef.current = null;
-    };
-  }, [onUnavailable]);
-
-  useEffect(() => {
-    const gpu = gpuRef.current;
-    const canvas = canvasRef.current;
-    if (!gpu || !canvas) return;
-    const batches = series.flatMap((item, s) => {
-      const info = meta[s]!;
-      if (hidden.has(info.id)) return [];
-      return [
-        {
-          color: info.color,
-          positions: item.data.map((point) => ({
-            x: xAt(point.x),
-            y: yAt(point.y),
-            size: bubble ? sizeAt(point.z ?? 1) * 2 : 9,
-          })),
-        },
-      ];
-    });
-    drawScatterGL(gpu, canvas, width, height, batches);
-  });
-
-  return (
-    <canvas
-      ref={canvasRef}
-      className="spk-chart-webgl"
-      data-slot="scatter-webgl"
-      aria-hidden
-    />
-  );
-}

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

@@ -1,136 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { AreaChart, BarChart, LineChart } from "./cartesian-charts";
-
-const months = ["Jan", "Feb", "Mar"];
-
-describe("cartesian-charts", () => {
-  it("renders grouped bars for categorical series", () => {
-    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();
-    expect(document.querySelectorAll('[data-slot="bar-plot"] .spk-chart-mark').length).toBeGreaterThan(0);
-  });
-
-  it("renders line series from numeric data", () => {
-    const { container } = render(
-      <LineChart
-        width={360}
-        height={220}
-        xAxis={[{ data: months }]}
-        series={[{ label: "Revenue", data: [2, 4, 3] }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="line-plot"] path')).toBeTruthy();
-  });
-
-  it("stacks area series so later layers sit on earlier totals", () => {
-    const { container } = render(
-      <AreaChart
-        width={360}
-        height={220}
-        stacked
-        xAxis={[{ data: months }]}
-        series={[
-          { label: "v1", data: [2, 3, 4] },
-          { label: "v2", data: [1, 1, 2] },
-        ]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="area-plot"]')).toBeTruthy();
-    expect(container.querySelectorAll('[data-slot="area-plot"] path').length).toBeGreaterThanOrEqual(2);
-  });
-
-  it("fires onItemClick with the bar category and value", () => {
-    const onItemClick = vi.fn();
-    const { container } = render(
-      <BarChart
-        width={360}
-        height={220}
-        hideLegend
-        xAxis={[{ data: months }]}
-        series={[{ label: "Views", data: [4, 3, 5] }]}
-        onItemClick={onItemClick}
-      />,
-    );
-    const mark = container.querySelector(".spk-chart-mark--interactive");
-    expect(mark).toBeTruthy();
-    fireEvent.click(mark!);
-    expect(onItemClick).toHaveBeenCalledWith(
-      expect.objectContaining({ seriesLabel: "Views", dataIndex: 0, category: "Jan", value: 4 }),
-    );
-  });
-
-  it("colors individual bars from itemColors", () => {
-    const { container } = render(
-      <BarChart
-        width={360}
-        height={220}
-        hideLegend
-        xAxis={[{ data: months }]}
-        series={[{ label: "Growth", data: [2, -1, 3], itemColors: ["var(--chart-3)", "var(--chart-4)"] }]}
-      />,
-    );
-    const marks = container.querySelectorAll('[data-slot="bar-plot"] .spk-chart-mark');
-    expect(marks[0]?.getAttribute("fill")).toBe("var(--chart-3)");
-    expect(marks[1]?.getAttribute("fill")).toBe("var(--chart-4)");
-  });
-
-  it("renders a reference line and end labels on bars", () => {
-    const { container } = render(
-      <BarChart
-        width={360}
-        height={220}
-        hideLegend
-        showLabels
-        xAxis={[{ data: months }]}
-        series={[{ label: "Views", data: [4, 3, 5] }]}
-        referenceLines={[{ y: 4, label: "Target" }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="chart-reference-lines"]')).toBeTruthy();
-    expect(screen.getByText("Target")).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="bar-labels"]')).toBeTruthy();
-  });
-
-  it("fires onItemClick from horizontal bars", () => {
-    const onItemClick = vi.fn();
-    const { container } = render(
-      <BarChart
-        width={360}
-        height={220}
-        hideLegend
-        layout="horizontal"
-        xAxis={[{ data: months }]}
-        series={[{ label: "Views", data: [4, 3, 5] }]}
-        onItemClick={onItemClick}
-      />,
-    );
-    fireEvent.click(container.querySelector(".spk-chart-mark--interactive")!);
-    expect(onItemClick).toHaveBeenCalledWith(expect.objectContaining({ category: "Jan", value: 4 }));
-  });
-
-  it("renders a custom tooltip from hover", () => {
-    const { container } = render(
-      <BarChart
-        width={360}
-        height={220}
-        hideLegend
-        xAxis={[{ data: months }]}
-        series={[{ label: "Views", data: [4, 3, 5] }]}
-        renderTooltip={(hover) => <p>{hover.category} custom</p>}
-      />,
-    );
-    fireEvent.mouseEnter(container.querySelector(".spk-chart-mark")!);
-    expect(screen.getByText("Jan custom")).toBeInTheDocument();
-  });
-});