@spatika/react 1.1.0 → 1.2.0

package/src/index.ts

@@ -7,7 +7,7 @@
  *   import "@spatika/tokens/styles.css";
  */
 
-export { cn } from "./lib/cn";
+export { Portal, type PortalProps } from "./lib/portal";
 export {
   OVERLAY_Z_INDEX,
   fixedLayerStyle,
@@ -90,14 +90,113 @@ export { Badge, badgeVariants } from "./primitives/Badge";
 export { Input } from "./primitives/Input";
 export { Textarea } from "./primitives/Textarea";
 export { Label } from "./primitives/Label";
-export { Separator } from "./primitives/Separator";
+export { Separator, Separator as Divider } from "./primitives/Separator";
 export { Skeleton } from "./primitives/Skeleton";
 export { Checkbox } from "./primitives/Checkbox";
 export { Switch } from "./primitives/Switch";
 export { RadioGroup, RadioGroupItem } from "./primitives/RadioGroup";
-export { Progress } from "./primitives/Progress";
+export { Progress, LinearProgress, type ProgressProps } from "./primitives/Progress";
+export { CircularProgress, type CircularProgressProps } from "./primitives/CircularProgress";
 export { Slider } from "./primitives/Slider";
-export { Avatar, AvatarImage, AvatarFallback, InitialsAvatar } from "./primitives/Avatar";
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  InitialsAvatar,
+  AvatarGroup,
+  type AvatarGroupProps,
+} from "./primitives/Avatar";
+export { ButtonGroup, buttonGroupVariants, type ButtonGroupProps } from "./primitives/ButtonGroup";
+export { Fab, fabVariants, type FabProps } from "./primitives/Fab";
+export { IconButton, iconButtonVariants, type IconButtonProps } from "./primitives/IconButton";
+export { Link, linkVariants, type LinkProps } from "./primitives/Link";
+export { Backdrop, type BackdropProps } from "./primitives/Backdrop";
+export { Collapse, type CollapseProps } from "./primitives/Collapse";
+export { ClickAwayListener, type ClickAwayListenerProps } from "./primitives/ClickAwayListener";
+export { Typography, typographyVariants, type TypographyProps } from "./primitives/Typography";
+export { Paper, paperVariants, type PaperProps } from "./primitives/Paper";
+export { Stack, type StackProps } from "./primitives/Stack";
+export { Container, containerVariants, type ContainerProps } from "./primitives/Container";
+export {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  type ListProps,
+  type ListItemProps,
+  type ListItemButtonProps,
+  type ListItemTextProps,
+} from "./primitives/List";
+export {
+  Stepper,
+  Step,
+  StepLabel,
+  StepContent,
+  StepConnector,
+  type StepperProps,
+  type StepProps,
+  type StepLabelProps,
+} from "./primitives/Stepper";
+export {
+  ToggleButton,
+  ToggleButtonGroup,
+  toggleButtonVariants,
+  type ToggleButtonProps,
+  type ToggleButtonGroupProps,
+} from "./primitives/ToggleButton";
+export { TextField, type TextFieldProps } from "./primitives/TextField";
+export { Autocomplete, type AutocompleteProps, type AutocompleteOption } from "./primitives/Autocomplete";
+export { FormControlLabel, type FormControlLabelProps } from "./primitives/FormControlLabel";
+export {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormGroup,
+  type FormControlProps,
+} from "./primitives/FormControl";
+export {
+  InputAdornment,
+  OutlinedInput,
+  FilledInput,
+  type InputAdornmentProps,
+  type OutlinedInputProps,
+} from "./primitives/InputAdornment";
+export { Box, Grid, type BoxProps, type GridProps } from "./primitives/Grid";
+export {
+  ImageList,
+  ImageListItem,
+  ImageListItemBar,
+  type ImageListProps,
+  type ImageListItemProps,
+  type ImageListItemBarProps,
+} from "./primitives/ImageList";
+export { Rating, StarRating, type RatingProps } from "./primitives/StarRating";
+export { Snackbar, SnackbarContent, type SnackbarProps } from "./primitives/Snackbar";
+export { MobileStepper, type MobileStepperProps } from "./primitives/MobileStepper";
+export { Modal, type ModalProps } from "./primitives/Modal";
+export { Fade, Grow, Slide, Zoom, type TransitionProps, type SlideProps } from "./primitives/transitions";
+export { AppBar, appBarVariants, type AppBarProps } from "./primitives/AppBar";
+export {
+  BottomNavigation,
+  BottomNavigationAction,
+  type BottomNavigationProps,
+  type BottomNavigationActionProps,
+} from "./primitives/BottomNavigation";
+export { Masonry, type MasonryProps } from "./primitives/Masonry";
+export { Menu, MenuList, MenuItem, MenuAnchor, type MenuProps, type MenuItemProps } from "./primitives/Menu";
+export { TransferList, type TransferListProps } from "./primitives/TransferList";
+export { ButtonBase, type ButtonBaseProps } from "./primitives/ButtonBase";
+export { NoSsr, type NoSsrProps } from "./primitives/NoSsr";
+export { TextareaAutosize, type TextareaAutosizeProps } from "./primitives/TextareaAutosize";
+export { TablePagination, type TablePaginationProps } from "./primitives/TablePagination";
+export {
+  SpeedDial,
+  SpeedDialAction,
+  type SpeedDialProps,
+  type SpeedDialActionProps,
+} from "./primitives/SpeedDial";
 export {
   Select,
   SelectContent,
@@ -186,8 +285,14 @@ export {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
+  AccordionActions,
+  AccordionSummary,
+  AccordionDetails,
+  type AccordionProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
 } from "./primitives/Accordion";
-export { StarRating } from "./primitives/StarRating";
 
 export { GlassCard, glassCardVariants, type GlassCardProps } from "./composites/GlassCard";
 export { SurfaceCard, surfaceCardVariants, type SurfaceCardProps } from "./composites/SurfaceCard";
@@ -243,6 +348,8 @@ export {
   CardDescription,
   CardContent,
   CardFooter,
+  CardActionArea,
+  CardMedia,
   type CardProps,
 } from "./composites/Card";
 export { AppHeader, type AppHeaderProps } from "./composites/AppHeader";
@@ -376,3 +483,168 @@ export {
   DataTableToolbar,
   type DataTableToolbarProps,
 } from "./composites/DataTableToolbar";
+export {
+  EventCalendar,
+  type EventCalendarProps,
+} from "./composites/EventCalendar";
+export {
+  EventTimeline,
+  type EventTimelineProps,
+} from "./composites/EventTimeline";
+export {
+  EventEditor,
+  type EventEditorDraft,
+} from "./composites/EventEditor";
+export {
+  DEFAULT_SCHEDULER_PREFERENCES,
+  SCHEDULER_COLOR_TONES,
+} from "./lib/scheduler";
+export type {
+  CalendarView,
+  SchedulerColorTone,
+  SchedulerEvent,
+  SchedulerPreferences,
+  SchedulerResource,
+  TimelineScale,
+} from "./lib/scheduler";
+export {
+  CHART_COLOR_VARS,
+  chartColor,
+  formatChartNumber,
+  seriesDataFromDataset,
+  axisDataFromDataset,
+  clampZoom,
+  DEFAULT_ZOOM,
+} from "./lib/charts";
+export type {
+  ChartAxisConfig,
+  ChartCurve,
+  ChartDataset,
+  ChartInteraction,
+  ChartMargin,
+  ChartZoom,
+  HighlightScope,
+  SankeyLink,
+  SankeyNode,
+  TreeNode,
+} from "./lib/charts";
+export { serializeChartSvg, exportChart, downloadChartSvg, downloadChartPng } from "./lib/chart-export";
+export {
+  ChartContainer,
+  ChartSurface,
+  ChartsGrid,
+  ChartsXAxis,
+  ChartsYAxis,
+  ChartsLegend,
+  ChartsToolbar,
+  ChartsBrush,
+  BarPlot,
+  LinePlot,
+  AreaPlot,
+  ScatterPlot,
+  useChartContext,
+} from "./composites/chart-composition";
+export type {
+  ChartContainerProps,
+  ComposedSeries,
+  ComposedSeriesType,
+  HighlightedItem,
+} from "./composites/chart-composition";
+export {
+  AreaChart,
+  BarChart,
+  BoxPlotChart,
+  BubbleChart,
+  CandlestickChart,
+  LineChart,
+  OhlcChart,
+  RangeAreaChart,
+  RangeBarChart,
+  ScatterChart,
+  SparkLineChart,
+  WaterfallChart,
+} from "./composites/cartesian-charts";
+export type {
+  BarChartProps,
+  BoxPlotChartProps,
+  CandleDatum,
+  CandlestickChartProps,
+  CartesianChartProps,
+  LineChartProps,
+  NumericSeries,
+  RangeAreaChartProps,
+  RangeBarChartProps,
+  RangeSeries,
+  ScatterChartProps,
+  ScatterPoint,
+  ScatterRenderer,
+  ScatterSeries,
+  SparkLineChartProps,
+  WaterfallChartProps,
+} from "./composites/cartesian-charts";
+export {
+  Gauge,
+  LinearGauge,
+  PieChart,
+  PolarLineChart,
+  RadarChart,
+  RadialBarChart,
+  RadialLineChart,
+} from "./composites/radial-charts";
+export type {
+  GaugeProps,
+  GaugeSection,
+  LinearGaugeProps,
+  PieChartProps,
+  PieDatum,
+  PieSeries,
+  RadarChartProps,
+  RadarSeries,
+  RadialBarChartProps,
+  RadialLineChartProps,
+} from "./composites/radial-charts";
+export {
+  ChordChart,
+  FunnelChart,
+  Heatmap,
+  PyramidChart,
+  SankeyChart,
+  SunburstChart,
+  Treemap,
+} from "./composites/flow-charts";
+export type {
+  ChordChartProps,
+  FunnelChartProps,
+  FunnelDatum,
+  FunnelLabelPosition,
+  FunnelSeries,
+  HeatDatum,
+  HeatmapProps,
+  SankeyChartProps,
+  SunburstChartProps,
+  TreemapProps,
+} from "./composites/flow-charts";
+export { MapChart } from "./composites/MapChart";
+export type { MapChartProps, MapShapeDatum } from "./composites/MapChart";
+export { BarChart3D, PieChart3D } from "./composites/charts-3d";
+export type { BarChart3DProps, PieChart3DProps } from "./composites/charts-3d";
+export { ChartDataGrid, renderChartCell } from "./composites/ChartDataGrid";
+export type {
+  ChartDataGridProps,
+  ChartDataGridRow,
+  ChartGridColumn,
+  ChartGridColumnType,
+} from "./composites/ChartDataGrid";
+export {
+  mercator,
+  equirectangular,
+  geoPath,
+  fitFeatures,
+  featureId,
+} from "./lib/geo";
+export type {
+  GeoJsonFeature,
+  GeoJsonFeatureCollection,
+  GeoJsonGeometry,
+  GeoProjectionKind,
+} from "./lib/geo";

package/src/lib/chart-export.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { serializeChartSvg } from "./chart-export";
+
+describe("chart export", () => {
+  it("serializes an SVG with an XML header", () => {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("width", "120");
+    svg.setAttribute("height", "80");
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("width", "120");
+    rect.setAttribute("height", "80");
+    rect.setAttribute("fill", "var(--chart-1)");
+    svg.appendChild(rect);
+    document.body.appendChild(svg);
+    const xml = serializeChartSvg(svg);
+    expect(xml).toContain("<?xml");
+    expect(xml).toContain("<svg");
+    svg.remove();
+  });
+});

package/src/lib/chart-export.ts

@@ -0,0 +1,99 @@
+/**
+ * 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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,132 @@
+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);
+  });
+});