@spatika/react 1.4.0 → 1.5.0

package/src/lib/chart-export.ts

@@ -1,99 +0,0 @@
-/**
- * Serialize a live chart SVG and download SVG / PNG.
- * Computed CSS (theme variables) is baked in so the file looks the same outside the app.
- */
-
-function bakeComputedStyles(live: SVGSVGElement, clone: SVGSVGElement) {
-  const liveNodes = [live, ...Array.from(live.querySelectorAll("*"))];
-  const cloneNodes = [clone, ...Array.from(clone.querySelectorAll("*"))];
-  for (let i = 0; i < liveNodes.length; i++) {
-    const source = liveNodes[i];
-    const target = cloneNodes[i] as SVGElement | undefined;
-    if (!source || !target || !(source instanceof Element)) continue;
-    const style = getComputedStyle(source);
-    if (style.fill && style.fill !== "none") target.setAttribute("fill", style.fill);
-    if (style.stroke && style.stroke !== "none") target.setAttribute("stroke", style.stroke);
-    if (style.strokeWidth) target.setAttribute("stroke-width", style.strokeWidth);
-    if (style.opacity && style.opacity !== "1") target.setAttribute("opacity", style.opacity);
-    if (style.fontSize) target.setAttribute("font-size", style.fontSize);
-    if (style.fontWeight) target.setAttribute("font-weight", style.fontWeight);
-    if (style.fontFamily) target.setAttribute("font-family", style.fontFamily);
-  }
-}
-
-export function serializeChartSvg(svg: SVGSVGElement): string {
-  const clone = svg.cloneNode(true) as SVGSVGElement;
-  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  clone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
-  if (!clone.getAttribute("viewBox")) {
-    const width = svg.clientWidth || Number(svg.getAttribute("width")) || 320;
-    const height = svg.clientHeight || Number(svg.getAttribute("height")) || 240;
-    clone.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  }
-  bakeComputedStyles(svg, clone);
-  return `<?xml version="1.0" encoding="UTF-8"?>${new XMLSerializer().serializeToString(clone)}`;
-}
-
-function triggerDownload(blob: Blob, filename: string) {
-  const href = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = href;
-  link.download = filename;
-  link.rel = "noopener";
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  window.setTimeout(() => URL.revokeObjectURL(href), 1_000);
-}
-
-export function downloadChartSvg(svg: SVGSVGElement, filename = "chart.svg") {
-  const blob = new Blob([serializeChartSvg(svg)], { type: "image/svg+xml;charset=utf-8" });
-  triggerDownload(blob, filename);
-}
-
-export async function chartSvgToPngBlob(svg: SVGSVGElement): Promise<Blob> {
-  const xml = serializeChartSvg(svg);
-  const width = Math.max(1, svg.clientWidth || Number(svg.getAttribute("width")) || 320);
-  const height = Math.max(1, svg.clientHeight || Number(svg.getAttribute("height")) || 240);
-  const blob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  try {
-    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => resolve(img);
-      img.onerror = () => reject(new Error("Failed to rasterize chart SVG"));
-      img.src = url;
-    });
-    const canvas = document.createElement("canvas");
-    canvas.width = Math.round(width * 2);
-    canvas.height = Math.round(height * 2);
-    const ctx = canvas.getContext("2d");
-    if (!ctx) throw new Error("Canvas is unavailable");
-    const surface = svg.parentElement;
-    ctx.fillStyle = surface ? getComputedStyle(surface).backgroundColor || "#ffffff" : "#ffffff";
-    if (ctx.fillStyle === "rgba(0, 0, 0, 0)" || ctx.fillStyle === "transparent") ctx.fillStyle = "#ffffff";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const png = await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob((next) => (next ? resolve(next) : reject(new Error("PNG export failed"))), "image/png");
-    });
-    return png;
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-export async function downloadChartPng(svg: SVGSVGElement, filename = "chart.png") {
-  const blob = await chartSvgToPngBlob(svg);
-  triggerDownload(blob, filename);
-}
-
-export async function exportChart(
-  svg: SVGSVGElement | null | undefined,
-  format: "svg" | "png",
-  filename?: string,
-) {
-  if (!svg) return;
-  if (format === "svg") downloadChartSvg(svg, filename ?? "chart.svg");
-  else await downloadChartPng(svg, filename ?? "chart.png");
-}

package/src/lib/charts-platform.test.ts

@@ -1,93 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { featureId, fitFeatures, geoPath, mercator } from "./geo";
-import { ellipseSlicePath, isoBoxFaces, isoPoint } from "./iso";
-import {
-  nearestScatterHit,
-  parseCssColor,
-  shouldUseWebGL,
-  WEBGL_AUTO_THRESHOLD,
-} from "./webgl-scatter";
-
-describe("geo", () => {
-  it("projects the equator to the mercator midpoint", () => {
-    const [x, y] = mercator([0, 0]);
-    expect(x).toBeCloseTo(0.5);
-    expect(y).toBeCloseTo(0.5);
-  });
-
-  it("builds a closed polygon path fitted to a viewport", () => {
-    const features = [
-      {
-        type: "Feature" as const,
-        id: "box",
-        properties: { name: "Box" },
-        geometry: {
-          type: "Polygon" as const,
-          coordinates: [
-            [
-              [0, 0],
-              [10, 0],
-              [10, 10],
-              [0, 10],
-              [0, 0],
-            ],
-          ],
-        },
-      },
-    ];
-    const project = fitFeatures(features, 200, 100, 10);
-    const d = geoPath(features[0]!.geometry, project);
-    expect(d.startsWith("M")).toBe(true);
-    expect(d.includes("Z")).toBe(true);
-    expect(featureId(features[0]!)).toBe("box");
-  });
-});
-
-describe("iso", () => {
-  it("projects isometric points with y up", () => {
-    const origin = isoPoint(0, 0, 0, 40, 80);
-    const raised = isoPoint(0, 10, 0, 40, 80);
-    expect(raised.y).toBeLessThan(origin.y);
-  });
-
-  it("emits three faces for a box", () => {
-    const faces = isoBoxFaces(0, 0, 0, 10, 20, 8, 40, 80);
-    expect(faces.front.startsWith("M")).toBe(true);
-    expect(faces.top).not.toEqual(faces.front);
-    expect(faces.side).not.toEqual(faces.top);
-  });
-
-  it("draws an elliptical pie slice", () => {
-    const d = ellipseSlicePath(50, 40, 30, 12, 0, 90);
-    expect(d.includes("A30 12")).toBe(true);
-  });
-});
-
-describe("webgl scatter helpers", () => {
-  it("parses hex and rgb colors", () => {
-    expect(parseCssColor("#ff0000")).toEqual([1, 0, 0, 1]);
-    expect(parseCssColor("rgb(0, 128, 255)")).toEqual([0, 128 / 255, 1, 1]);
-    expect(parseCssColor("not-a-color")).toBeNull();
-  });
-
-  it("selects webgl for auto clouds above the threshold", () => {
-    expect(shouldUseWebGL("svg", 10_000)).toBe(false);
-    expect(shouldUseWebGL("webgl", 3)).toBe(true);
-    expect(shouldUseWebGL("auto", WEBGL_AUTO_THRESHOLD)).toBe(true);
-    expect(shouldUseWebGL("auto", 10)).toBe(false);
-  });
-
-  it("finds the nearest point within the hit radius", () => {
-    const hit = nearestScatterHit(
-      [
-        { x: 10, y: 10, r: 4, seriesIndex: 0, pointIndex: 0 },
-        { x: 40, y: 40, r: 4, seriesIndex: 1, pointIndex: 2 },
-      ],
-      41,
-      39,
-    );
-    expect(hit?.seriesIndex).toBe(1);
-    expect(hit?.pointIndex).toBe(2);
-    expect(nearestScatterHit([{ x: 0, y: 0, r: 2, seriesIndex: 0, pointIndex: 0 }], 80, 80)).toBeNull();
-  });
-});

package/src/lib/charts.test.ts

@@ -1,132 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  arcPath,
-  axisDataFromDataset,
-  boxPlotStats,
-  chartColor,
-  extent,
-  formatChartNumber,
-  funnelLayout,
-  linePath,
-  niceTicks,
-  pieSlices,
-  seriesDataFromDataset,
-  stackSeries,
-  squarify,
-  waterfallBars,
-  wheelZoom,
-} from "./charts";
-
-describe("chart math", () => {
-  it("builds nice ticks across a domain", () => {
-    const ticks = niceTicks(0, 100, 5);
-    expect(ticks[0]).toBe(0);
-    expect(ticks[ticks.length - 1]).toBeGreaterThanOrEqual(100);
-    expect(ticks.length).toBeGreaterThan(2);
-  });
-
-  it("stacks positive and negative series independently", () => {
-    const stacked = stackSeries([
-      [2, -1],
-      [3, -2],
-    ]);
-    expect(stacked[0]![0]).toEqual({ start: 0, end: 2 });
-    expect(stacked[1]![0]).toEqual({ start: 2, end: 5 });
-    expect(stacked[0]![1]).toEqual({ start: 0, end: -1 });
-    expect(stacked[1]![1]).toEqual({ start: -1, end: -3 });
-  });
-
-  it("lays out pie slices that sum to a full turn", () => {
-    const slices = pieSlices([1, 1, 2], {
-      cx: 50,
-      cy: 50,
-      innerRadius: 10,
-      outerRadius: 40,
-    });
-    expect(slices).toHaveLength(3);
-    expect(slices[2]!.percent).toBeCloseTo(0.5);
-    expect(slices.every((slice) => slice.path.length > 0)).toBe(true);
-  });
-
-  it("draws linear and monotone line paths", () => {
-    const pts = [
-      { x: 0, y: 10 },
-      { x: 10, y: 0 },
-      { x: 20, y: 8 },
-    ];
-    expect(linePath(pts, "linear")).toContain("L");
-    expect(linePath(pts, "monotone")).toContain("C");
-  });
-
-  it("computes box-plot fences and outliers", () => {
-    const stats = boxPlotStats([1, 2, 3, 4, 5, 100]);
-    expect(stats.median).toBe(3.5);
-    expect(stats.outliers).toEqual([100]);
-  });
-
-  it("builds waterfall running totals", () => {
-    const bars = waterfallBars([100, 20, -30, null]);
-    expect(bars[3]).toEqual({ index: 3, start: 0, end: 90, value: 90, total: true });
-  });
-
-  it("packs a treemap that fills the viewport", () => {
-    const rects = squarify(
-      [
-        { label: "A", value: 6 },
-        { label: "B", value: 4 },
-      ],
-      0,
-      0,
-      100,
-      50,
-    );
-    const area = rects.reduce((sum, rect) => sum + rect.w * rect.h, 0);
-    expect(area).toBeCloseTo(5000, 0);
-  });
-
-  it("lays out funnel rows from wide to narrow", () => {
-    const rows = funnelLayout(
-      [
-        { label: "A", value: 10 },
-        { label: "B", value: 5 },
-      ],
-      100,
-      80,
-    );
-    expect(rows[0]!.topRight - rows[0]!.topLeft).toBeGreaterThan(rows[1]!.topRight - rows[1]!.topLeft);
-  });
-
-  it("shares a max so comparison funnels stay on the same scale", () => {
-    const inner = funnelLayout([{ label: "A", value: 50 }], 100, 40, 6, 100);
-    const outer = funnelLayout([{ label: "A", value: 100 }], 100, 40, 6, 100);
-    expect(outer[0]!.topRight - outer[0]!.topLeft).toBe(100);
-    expect(inner[0]!.topRight - inner[0]!.topLeft).toBe(50);
-  });
-
-  it("zooms a window around an anchor", () => {
-    const next = wheelZoom({ x: [0, 1] }, 0.5, 0.5);
-    expect(next.x[1] - next.x[0]).toBeCloseTo(0.5);
-    expect(next.x[0]).toBeGreaterThan(0);
-    expect(next.x[1]).toBeLessThan(1);
-  });
-
-  it("reads series from a dataset", () => {
-    const dataset = [
-      { month: "Jan", views: 10 },
-      { month: "Feb", views: 20 },
-    ];
-    expect(seriesDataFromDataset(dataset, "views")).toEqual([10, 20]);
-    expect(axisDataFromDataset(dataset, "month")).toEqual(["Jan", "Feb"]);
-  });
-
-  it("formats compact numbers and cycles chart colors", () => {
-    expect(formatChartNumber(1500)).toBe("1.5k");
-    expect(chartColor(0)).toBe("var(--chart-1)");
-    expect(chartColor(5)).toBe("var(--chart-1)");
-    expect(extent([3, 3])).not.toEqual([3, 3]);
-  });
-
-  it("splits a full-circle arc into two sweeps", () => {
-    expect(arcPath(0, 0, 0, 10, 0, 360).split("A").length).toBeGreaterThan(2);
-  });
-});