@spatika/react 1.3.1 → 1.5.0

package/src/composites/MapChart.tsx

@@ -1,130 +0,0 @@
-import { chartColor, formatChartNumber, type ChartMargin } from "../lib/charts";
-import {
-  featureId,
-  fitFeatures,
-  geoPath,
-  type GeoJsonFeatureCollection,
-  type GeoProjectionKind,
-} from "../lib/geo";
-import { ChartFrame, useChartHover } from "./chart-ui";
-
-export type MapShapeDatum = {
-  id: string | number;
-  value: number;
-  label?: string;
-  color?: string;
-};
-
-export type MapChartProps = {
-  geoData: GeoJsonFeatureCollection;
-  series?: Array<{ data: MapShapeDatum[] }>;
-  idProperty?: string;
-  projection?: GeoProjectionKind;
-  height?: number;
-  width?: number;
-  colors?: string[];
-  hideLegend?: boolean;
-  margin?: ChartMargin;
-  className?: string;
-};
-
-export function MapChart({
-  geoData,
-  series,
-  idProperty = "id",
-  projection = "mercator",
-  height = 280,
-  width,
-  colors,
-  hideLegend,
-  margin,
-  className,
-}: MapChartProps) {
-  const features = geoData.features ?? [];
-  const data = series?.[0]?.data ?? [];
-  const byId = new Map(data.map((item) => [String(item.id), item]));
-  const values = data.map((item) => item.value);
-  const min = values.length ? Math.min(...values) : 0;
-  const max = values.length ? Math.max(...values) : 1;
-  const { hover, setHover, clear } = useChartHover();
-  const legend = hideLegend
-    ? undefined
-    : data.slice(0, 8).map((item, i) => ({
-        id: String(item.id),
-        label: item.label ?? String(item.id),
-        color: item.color ?? choroplethFill(item.value, min, max, i, colors),
-      }));
-
-  return (
-    <ChartFrame
-      slot="map-chart"
-      className={className}
-      width={width}
-      height={height}
-      margin={margin ?? { top: 8, right: 8, bottom: 8, left: 8 }}
-      legend={legend}
-      hover={hover}
-      aria-label="Map chart"
-    >
-      {({ width: w, height: h, m }) => {
-        const pad = Math.min(m.left, m.right, m.top, m.bottom);
-        const project = fitFeatures(features, w, h, pad, projection);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {features.map((feature, i) => {
-              if (!feature.geometry) return null;
-              const id = featureId(feature, idProperty) || String(i);
-              const datum = byId.get(id);
-              const label =
-                datum?.label ??
-                (feature.properties?.name != null ? String(feature.properties.name) : id);
-              const fill = datum
-                ? (datum.color ?? choroplethFill(datum.value, min, max, i, colors))
-                : "color-mix(in srgb, var(--muted) 55%, transparent)";
-              const d = geoPath(feature.geometry, project);
-              if (!d) return null;
-              return (
-                <path
-                  key={id}
-                  d={d}
-                  fill={fill}
-                  className="spk-chart-map-region spk-chart-mark"
-                  onMouseEnter={(event) =>
-                    setHover({
-                      x: event.nativeEvent.offsetX,
-                      y: event.nativeEvent.offsetY,
-                      title: label,
-                      items: datum
-                        ? [
-                            {
-                              color: fill,
-                              label: label,
-                              value: formatChartNumber(datum.value),
-                            },
-                          ]
-                        : [{ color: fill, label: label, value: "—" }],
-                    })
-                  }
-                  onMouseLeave={clear}
-                />
-              );
-            })}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-function choroplethFill(
-  value: number,
-  min: number,
-  max: number,
-  index: number,
-  colors?: string[],
-): string {
-  const t = max === min ? 0.6 : (value - min) / (max - min);
-  const base = chartColor(index, colors);
-  const mix = Math.round(28 + t * 72);
-  return `color-mix(in srgb, ${base} ${mix}%, var(--muted))`;
-}

package/src/composites/ScatterWebGL.test.tsx

@@ -1,25 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { ScatterWebGLLayer } from "./ScatterWebGL";
-
-describe("ScatterWebGLLayer", () => {
-  it("renders a canvas layer and reports when WebGL is unavailable", () => {
-    const onUnavailable = vi.fn();
-    const { container } = render(
-      <ScatterWebGLLayer
-        width={120}
-        height={80}
-        series={[{ data: [{ x: 1, y: 2 }] }]}
-        meta={[{ id: "a", label: "A", color: "#2563eb" }]}
-        hidden={new Set()}
-        xAt={(value) => value}
-        yAt={(value) => value}
-        sizeAt={(z) => z}
-        bubble={false}
-        onUnavailable={onUnavailable}
-      />,
-    );
-    expect(container.querySelector('[data-slot="scatter-webgl"]')).toBeTruthy();
-    expect(onUnavailable).toHaveBeenCalled();
-  });
-});

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,52 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } 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);
-  });
-});