@spatika/react 1.4.0 → 1.6.0

package/src/composites/chart-interaction.ts

@@ -1,136 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
-
-export type ChartTooltipItem = {
-  color: string;
-  label: string;
-  value: string;
-};
-
-export type ChartHover = {
-  x: number;
-  y: number;
-  title?: string;
-  items: ChartTooltipItem[];
-  dataIndex?: number;
-  seriesId?: string;
-  category?: string | number | Date;
-} | null;
-
-/** Payload fired when a chart mark (bar, slice, point, cell) is activated. */
-export type ChartItemEvent = {
-  seriesId: string;
-  seriesLabel: string;
-  dataIndex: number;
-  category: string | number | Date;
-  value: number | null;
-  color: string;
-};
-
-/** Geometry plus item identity, used by `renderMark` on line and area series. */
-export type ChartMarkRenderContext = ChartItemEvent & {
-  x: number;
-  y: number;
-};
-
-/**
- * Overlay guide on a cartesian plot.
- * Set `y` for a horizontal value line, or `xIndex` for a vertical category line.
- */
-export type ChartReferenceLine = {
-  y?: number;
-  xIndex?: number;
-  yAxisId?: string;
-  color?: string;
-  label?: string;
-  strokeDasharray?: string;
-};
-
-export type ChartTooltipRenderer = (hover: NonNullable<ChartHover>) => ReactNode;
-
-export type ChartMarkBind = {
-  className: string;
-  role?: "button";
-  tabIndex?: number;
-  "aria-label"?: string;
-  onClick?: (event: { stopPropagation(): void }) => void;
-  onKeyDown?: (event: { key: string; preventDefault(): void }) => void;
-  onMouseEnter?: (event: { nativeEvent: { offsetX: number; offsetY: number } }) => void;
-  onMouseLeave?: () => void;
-};
-
-/** Per-category color, falling back to the series token. */
-export function seriesItemColor(
-  color: string,
-  itemColors: Array<string | null | undefined> | undefined,
-  index: number,
-): string {
-  return itemColors?.[index] || color;
-}
-
-export function chartItemAriaLabel(event: ChartItemEvent): string {
-  const category = String(event.category);
-  if (event.seriesLabel && event.seriesLabel !== category) {
-    return `${event.seriesLabel} ${category}`;
-  }
-  return category;
-}
-
-/**
- * Pointer, keyboard, and hover bindings for an SVG mark.
- * Adds a button role only when `onItemClick` is set so legends stay the sole named buttons.
- */
-export function bindChartMark({
-  event,
-  hover,
-  onItemClick,
-  setHover,
-  clearHover,
-  onHighlight,
-}: {
-  event: ChartItemEvent;
-  hover: Pick<NonNullable<ChartHover>, "title" | "items"> & Partial<NonNullable<ChartHover>>;
-  onItemClick?: (event: ChartItemEvent) => void;
-  setHover: (hover: ChartHover) => void;
-  clearHover: () => void;
-  onHighlight?: (item: { seriesId: string; dataIndex: number } | null) => void;
-}): ChartMarkBind {
-  const clickable = Boolean(onItemClick);
-  const applyHover = (x: number, y: number) => {
-    onHighlight?.({ seriesId: event.seriesId, dataIndex: event.dataIndex });
-    setHover({
-      x: hover.x ?? x,
-      y: hover.y ?? y,
-      title: hover.title,
-      items: hover.items,
-      dataIndex: event.dataIndex,
-      seriesId: event.seriesId,
-      category: event.category,
-    });
-  };
-  return {
-    className: cn("spk-chart-mark", clickable && "spk-chart-mark--interactive"),
-    role: clickable ? "button" : undefined,
-    tabIndex: clickable ? 0 : undefined,
-    "aria-label": clickable ? chartItemAriaLabel(event) : undefined,
-    onClick: clickable
-      ? (native) => {
-          native.stopPropagation();
-          onItemClick?.(event);
-        }
-      : undefined,
-    onKeyDown: clickable
-      ? (native) => {
-          if (native.key === "Enter" || native.key === " ") {
-            native.preventDefault();
-            onItemClick?.(event);
-          }
-        }
-      : undefined,
-    onMouseEnter: (native) => applyHover(native.nativeEvent.offsetX, native.nativeEvent.offsetY),
-    onMouseLeave: () => {
-      onHighlight?.(null);
-      clearHover();
-    },
-  };
-}

package/src/composites/chart-ui.tsx

@@ -1,336 +0,0 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-  type RefObject,
-} from "react";
-import { cn } from "../lib/cn";
-import {
-  DEFAULT_CHART_MARGIN,
-  chartColor,
-  formatAxisValue,
-  formatChartNumber,
-  type ChartAxisConfig,
-  type ChartMargin,
-} from "../lib/charts";
-import {
-  type ChartHover,
-  type ChartTooltipRenderer,
-} from "./chart-interaction";
-
-export type { ChartHover, ChartTooltipItem } from "./chart-interaction";
-
-export type ChartLegendItem = {
-  id: string;
-  label: string;
-  color: string;
-};
-
-export type ChartFrameProps = {
-  slot: string;
-  className?: string;
-  width?: number;
-  height?: number;
-  /** When true, plot height follows the parent instead of the numeric `height`. */
-  fillHeight?: boolean;
-  margin?: ChartMargin;
-  legend?: ChartLegendItem[];
-  hiddenIds?: Set<string>;
-  onToggleSeries?: (id: string) => void;
-  hover?: ChartHover;
-  renderTooltip?: ChartTooltipRenderer;
-  "aria-label"?: string;
-  children: (plot: { width: number; height: number; m: Required<ChartMargin> }) => ReactNode;
-};
-
-export function resolveMargin(margin?: ChartMargin): Required<ChartMargin> {
-  return {
-    top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
-    right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
-    bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
-    left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
-  };
-}
-
-function useElementSize(
-  ref: RefObject<HTMLElement | null>,
-  fallbackWidth: number,
-  fallbackHeight: number,
-) {
-  const [size, setSize] = useState({ width: fallbackWidth, height: fallbackHeight });
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const apply = () => {
-      setSize({
-        width: el.clientWidth || fallbackWidth,
-        height: el.clientHeight || fallbackHeight,
-      });
-    };
-    apply();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(apply);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [fallbackWidth, fallbackHeight, ref]);
-
-  return size;
-}
-
-export function ChartFrame({
-  slot,
-  className,
-  width,
-  height = 280,
-  fillHeight = false,
-  margin,
-  legend,
-  hiddenIds,
-  onToggleSeries,
-  hover,
-  renderTooltip,
-  "aria-label": ariaLabel,
-  children,
-}: ChartFrameProps) {
-  const surfaceRef = useRef<HTMLDivElement>(null);
-  const measured = useElementSize(surfaceRef, width ?? 320, height);
-  const plotWidth = width ?? measured.width;
-  const plotHeight = fillHeight ? measured.height : height;
-  const m = resolveMargin(margin);
-
-  return (
-    <div
-      data-slot={slot}
-      className={cn("spk-chart", fillHeight && "spk-chart--fill", className)}
-      role="img"
-      aria-label={ariaLabel}
-    >
-      {legend?.length ? (
-        <ChartLegend items={legend} hiddenIds={hiddenIds} onToggle={onToggleSeries} />
-      ) : null}
-      <div
-        ref={surfaceRef}
-        className="spk-chart-surface"
-        style={fillHeight ? undefined : { height: plotHeight }}
-      >
-        {plotWidth > 0 && plotHeight > 0 ? children({ width: plotWidth, height: plotHeight, m }) : null}
-        <ChartTooltip hover={hover ?? null} boundsWidth={plotWidth} render={renderTooltip} />
-      </div>
-    </div>
-  );
-}
-
-export function ChartLegend({
-  items,
-  hiddenIds,
-  onToggle,
-}: {
-  items: ChartLegendItem[];
-  hiddenIds?: Set<string>;
-  onToggle?: (id: string) => void;
-}) {
-  return (
-    <div className="spk-chart-legend">
-      {items.map((item) => (
-        <button
-          key={item.id}
-          type="button"
-          className="spk-chart-legend-item"
-          data-hidden={hiddenIds?.has(item.id) ? "true" : undefined}
-          onClick={() => onToggle?.(item.id)}
-        >
-          <span className="spk-chart-swatch" style={{ background: item.color }} />
-          {item.label}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export function ChartTooltip({
-  hover,
-  boundsWidth,
-  render,
-}: {
-  hover: ChartHover;
-  boundsWidth: number;
-  render?: ChartTooltipRenderer;
-}) {
-  if (!hover || !hover.items.length) return null;
-  const custom = render?.(hover);
-  if (render && custom == null) return null;
-  const left = clampTooltip(hover.x, boundsWidth);
-  return (
-    <div className="spk-chart-tooltip" style={{ left, top: hover.y }} role="tooltip">
-      {render ? (
-        custom
-      ) : (
-        <>
-          {hover.title ? <p className="spk-chart-tooltip-title">{hover.title}</p> : null}
-          <ul>
-            {hover.items.map((item) => (
-              <li key={item.label}>
-                <span className="spk-chart-swatch" style={{ background: item.color }} />
-                <span>{item.label}</span>
-                <strong>{item.value}</strong>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </div>
-  );
-}
-
-function clampTooltip(x: number, width: number) {
-  return clampNum(x, 72, Math.max(72, width - 72));
-}
-
-function clampNum(value: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, value));
-}
-
-export function CartesianGrid({
-  ticks,
-  scale,
-  left,
-  right,
-  top,
-  bottom,
-}: {
-  ticks: number[];
-  scale: (value: number) => number;
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
-}) {
-  return (
-    <g data-slot="chart-grid">
-      {ticks.map((tick) => (
-        <line
-          key={tick}
-          className="spk-chart-grid"
-          x1={left}
-          x2={right}
-          y1={scale(tick)}
-          y2={scale(tick)}
-        />
-      ))}
-      <line className="spk-chart-axis" x1={left} x2={right} y1={bottom} y2={bottom} />
-      <line className="spk-chart-axis" x1={left} x2={left} y1={top} y2={bottom} />
-    </g>
-  );
-}
-
-export function ValueAxis({
-  ticks,
-  scale,
-  left,
-  width,
-}: {
-  ticks: number[];
-  scale: (value: number) => number;
-  left: number;
-  width?: number;
-}) {
-  return (
-    <g data-slot="chart-y-axis">
-      {ticks.map((tick) => (
-        <text
-          key={tick}
-          className="spk-chart-tick"
-          x={left - 8}
-          y={scale(tick)}
-          textAnchor="end"
-          dominantBaseline="middle"
-        >
-          {formatChartNumber(tick)}
-        </text>
-      ))}
-      {width ? (
-        <text
-          className="spk-chart-axis-label"
-          x={12}
-          y={width / 2}
-          transform={`rotate(-90 12 ${width / 2})`}
-          textAnchor="middle"
-        />
-      ) : null}
-    </g>
-  );
-}
-
-export function CategoryAxis({
-  labels,
-  position,
-  y,
-}: {
-  labels: Array<string | number | Date>;
-  position: (index: number) => number;
-  y: number;
-}) {
-  const maxLabels = labels.length > 12 ? Math.ceil(labels.length / 8) : 1;
-  return (
-    <g data-slot="chart-x-axis">
-      {labels.map((label, index) => {
-        if (index % maxLabels !== 0) return null;
-        return (
-          <text
-            key={`${index}-${String(label)}`}
-            className="spk-chart-tick"
-            x={position(index)}
-            y={y + 16}
-            textAnchor="middle"
-          >
-            {formatAxisValue(label)}
-          </text>
-        );
-      })}
-    </g>
-  );
-}
-
-export function useHiddenSeries(ids: string[]) {
-  const [hidden, setHidden] = useState<Set<string>>(new Set());
-  const toggle = (id: string) => {
-    setHidden((current) => {
-      const next = new Set(current);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-  const visible = ids.filter((id) => !hidden.has(id));
-  return { hidden, toggle, visible };
-}
-
-export function seriesMeta(
-  series: Array<{ id?: string; label?: string; color?: string }>,
-  colors?: string[],
-): ChartLegendItem[] {
-  return series.map((item, index) => ({
-    id: item.id ?? item.label ?? `series-${index}`,
-    label: item.label ?? item.id ?? `Series ${index + 1}`,
-    color: item.color ?? chartColor(index, colors),
-  }));
-}
-
-export function useChartHover() {
-  const [hover, setHover] = useState<ChartHover>(null);
-  return { hover, setHover, clear: () => setHover(null) };
-}
-
-export function categoryLabels(axis?: ChartAxisConfig, length = 0): Array<string | number | Date> {
-  if (axis?.data?.length) return axis.data;
-  return Array.from({ length }, (_, i) => i + 1);
-}
-
-export function formatSeriesValue(value: number | [number, number] | undefined) {
-  if (value == null) return "—";
-  if (Array.isArray(value)) return `${formatChartNumber(value[0])} – ${formatChartNumber(value[1])}`;
-  return formatChartNumber(value);
-}
-

package/src/composites/charts-3d.test.tsx

@@ -1,25 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { BarChart3D, PieChart3D } from "./charts-3d";
-
-describe("charts-3d", () => {
-  it("renders isometric bars and an extruded pie", () => {
-    const { container } = render(
-      <div>
-        <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" }] }]}
-        />
-      </div>,
-    );
-    expect(container.querySelector('[data-slot="bar-chart-3d"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="pie-chart-3d"]')).toBeTruthy();
-  });
-});