@rokkit/chart 1.0.0-next.15 → 1.0.0-next.151

package/dist/lib/plot/types.d.ts

@@ -0,0 +1,89 @@
+export type GeomSpec = {
+    /**
+     * - Geom type: 'bar'|'line'|'area'|'point'|'box'|'violin'|'arc' or custom
+     */
+    type: string;
+    x?: string | undefined;
+    y?: string | undefined;
+    color?: string | undefined;
+    fill?: string | undefined;
+    size?: string | undefined;
+    symbol?: string | undefined;
+    pattern?: string | undefined;
+    /**
+     * - Built-in or helpers.stats key
+     */
+    stat?: string | undefined;
+    options?: Record<string, unknown> | undefined;
+};
+export type PlotSpec = {
+    data: Record<string, unknown>[];
+    x?: string | undefined;
+    y?: string | undefined;
+    color?: string | undefined;
+    fill?: string | undefined;
+    size?: string | undefined;
+    symbol?: string | undefined;
+    pattern?: string | undefined;
+    theta?: string | undefined;
+    labels?: Record<string, string> | undefined;
+    xDomain?: unknown[] | undefined;
+    yDomain?: number[] | undefined;
+    xLabel?: string | undefined;
+    yLabel?: string | undefined;
+    axisOrigin?: [number, number] | undefined;
+    colorScale?: "diverging" | "sequential" | "categorical" | undefined;
+    colorScheme?: string | undefined;
+    colorMidpoint?: number | undefined;
+    colorDomain?: unknown[] | undefined;
+    geoms: GeomSpec[];
+    facet?: {
+        by: string;
+        cols?: number;
+        scales?: "fixed" | "free" | "free_x" | "free_y";
+    } | undefined;
+    animate?: {
+        by: string;
+        duration?: number;
+        loop?: boolean;
+    } | undefined;
+    grid?: boolean | undefined;
+    legend?: boolean | undefined;
+    tooltip?: boolean | undefined;
+    title?: string | undefined;
+    preset?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    mode?: "light" | "dark" | undefined;
+};
+export type PlotHelpers = {
+    stats?: Record<string, (values: unknown[]) => unknown> | undefined;
+    format?: Record<string, (v: unknown) => string> | undefined;
+    tooltip?: ((d: Record<string, unknown>) => string) | undefined;
+    /**
+     * Svelte components keyed by type name
+     */
+    geoms?: Record<string, unknown> | undefined;
+    /**
+     * d3 scale override
+     */
+    colorScale?: unknown;
+    preset?: {
+        colors: string[];
+        patterns: string[];
+        symbols: string[];
+    } | undefined;
+    presets?: Record<string, {
+        colors: string[];
+        patterns: string[];
+        symbols: string[];
+    }> | undefined;
+    /**
+     * custom SVG pattern components keyed by name
+     */
+    patterns?: Record<string, unknown> | undefined;
+    /**
+     * custom symbol shape components keyed by name
+     */
+    symbols?: Record<string, unknown> | undefined;
+};

package/dist/lib/scales.svelte.d.ts

@@ -0,0 +1,35 @@
+export function createScales(data: any, dimensions: any, options: any): {
+    xScale?: undefined;
+    yScale?: undefined;
+    colorScale?: undefined;
+} | {
+    xScale: any;
+    yScale: any;
+    colorScale: Object | null;
+};
+/**
+ * Calculates the actual chart dimensions after applying margins
+ *
+ * @param {number} width
+ * @param {number} height
+ * @param {Object} margin
+ * @returns {Object} Dimensions with calculated inner width and height
+ */
+export function calculateChartDimensions(width: number, height: number, margin: Object): Object;
+/**
+ * Gets the axis origin value
+ *
+ * @param {Object} scale D3 scale
+ * @returns {number} Origin value
+ */
+export function getOriginValue(scale: Object): number;
+/**
+ * Creates axis ticks
+ *
+ * @param {Object} scale D3 scale
+ * @param {string} axis Axis type ('x' or 'y')
+ * @param {number} count Number of ticks
+ * @param {number} fontSize Font size for determining tick density
+ * @returns {Array} Array of tick objects
+ */
+export function createTicks(scale: Object, axis: string, count?: number, fontSize?: number): any[];

package/dist/lib/swatch.d.ts

@@ -0,0 +1,12 @@
+export namespace swatch {
+    export { palette };
+    export namespace keys {
+        export let gray: string[];
+        export let color: string[];
+        export { shapes as symbol };
+        export { PATTERN_ORDER as pattern };
+    }
+}
+import palette from './palette.json';
+import { shapes } from '../symbols';
+import { PATTERN_ORDER } from './brewing/patterns.js';

package/dist/lib/ticks.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @typedef {Object} TickSteps
+ * @property {number} major - count of major ticks
+ * @property {number} minor - count of minor ticks
+ */
+/**
+ * Generate an array of ticks for a given axis and the tick type
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ * @param {string}    type  - The type of tick to generate
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function ticksByType(lower: number, upper: number, steps: TickSteps, type: string): any[];
+/**
+ * Generate an array of ticks for a given axis
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function getTicks(lower: number, upper: number, steps?: TickSteps): any[];
+export type TickSteps = {
+    /**
+     * - count of major ticks
+     */
+    major: number;
+    /**
+     * - count of minor ticks
+     */
+    minor: number;
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Creates appropriate scales based on data and dimensions
+ *
+ * @param {Array} data The dataset
+ * @param {Object} dimensions Chart dimensions
+ * @param {Object} [options] Additional options
+ * @param {string} options.xKey Field to use for x-axis
+ * @param {string} options.yKey Field to use for y-axis
+ * @param {string} [options.colorKey] Field to use for color mapping
+ * @returns {Object} Object containing xScale, yScale, and colorScale
+ */
+export function createScales(data: any[], dimensions: Object, options?: {
+    xKey: string;
+    yKey: string;
+    colorKey?: string | undefined;
+}): Object;
+/**
+ * Calculates the actual chart dimensions after applying margins
+ *
+ * @param {Object} dimensions Original dimensions
+ * @returns {Object} Dimensions with calculated inner width and height
+ */
+export function calculateChartDimensions(dimensions: Object): Object;
+/**
+ * Normalizes data for use with D3 charts
+ *
+ * @param {Array|Object} inputData Raw data or dataset object
+ * @returns {Array} Normalized data array
+ */
+export function normalizeData(inputData: any[] | Object): any[];
+/**
+ * Generates a unique ID for SVG elements
+ *
+ * @param {string} prefix Prefix for the ID
+ * @returns {string} A unique ID
+ */
+export function uniqueId(prefix?: string): string;
+/**
+ * Formats tooltip content for a data point
+ *
+ * @param {Object} d Data point
+ * @param {Object} options Tooltip format options
+ * @returns {string} Formatted tooltip HTML content
+ */
+export function formatTooltipContent(d: Object, options?: Object): string;
+/**
+ * Generates a tooltip formatter function
+ *
+ * @param {Object} options Tooltip format options
+ * @returns {Function} A function that formats tooltip content
+ */
+export function createTooltipFormatter(options?: Object): Function;
+/**
+ * Calculates the transform attribute for SVG elements
+ *
+ * @param {number} x X position
+ * @param {number} y Y position
+ * @returns {string} Transform attribute value
+ */
+export function transform(x: number, y: number): string;
+export function scaledPathCollection(paths: any): {};

package/dist/lib/xscale.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Builds an appropriate D3 x-axis scale based on value types.
+ * Returns scaleTime for Date values, scaleLinear for numeric values,
+ * or scaleBand for categorical values.
+ *
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
+ */
+export function buildXScale(xValues: any[], dimensions: Object, padding: number): any | any;

package/dist/patterns/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PatternDef } from "./PatternDef.svelte";
+export { default as DefinePatterns } from "./DefinePatterns.svelte";
+export { PATTERNS } from "./patterns.js";
+export { scaleMark, resolveMarkAttrs } from "./scale.js";

package/dist/patterns/patterns.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Unified pattern library.
+ *
+ * Each entry is an array of mark descriptors.  All geometry is in normalized
+ * 0–1 coordinates; the renderer scales by `size` at paint time.
+ *
+ * Mark types
+ * ----------
+ * circle   { cx, cy, r }
+ * line     { x1, y1, x2, y2 }           coordinates may exceed 0–1 for seamless tiling
+ * polygon  { points: [x,y][] }
+ * rect     { x, y, w, h }
+ * path     { d: [cmd, ...args][] }       SVG path commands as nested arrays (H/V take one arg)
+ *
+ * Appearance
+ * ----------
+ * fill: true      → element uses fill color (stroke: none)
+ * fill: false     → element uses stroke color (fill: none)   ← default
+ * fillOpacity: n  → applied as fill-opacity on filled marks
+ * opacity: n      → applied as opacity on any mark
+ */
+/** @typedef {{ type: 'circle',  cx: number, cy: number, r: number,              fill?: boolean, fillOpacity?: number, opacity?: number }} CircleMark */
+/** @typedef {{ type: 'line',    x1: number, y1: number, x2: number, y2: number, fill?: false,   strokeWidth?: number }} LineMark */
+/** @typedef {{ type: 'polygon', points: [number,number][],                       fill?: boolean, fillOpacity?: number, opacity?: number }} PolygonMark */
+/** @typedef {{ type: 'rect',    x: number,  y: number,  w: number,  h: number,  fill?: boolean, fillOpacity?: number, opacity?: number }} RectMark */
+/** @typedef {{ type: 'path',    d: (string|number)[][],                          fill?: boolean, fillOpacity?: number, opacity?: number }} PathMark */
+/** @typedef {CircleMark | LineMark | PolygonMark | RectMark | PathMark} PatternMark */
+/** @type {Record<string, PatternMark[]>} */
+export const PATTERNS: Record<string, PatternMark[]>;
+export type CircleMark = {
+    type: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type LineMark = {
+    type: "line";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    fill?: false;
+    strokeWidth?: number;
+};
+export type PolygonMark = {
+    type: "polygon";
+    points: [number, number][];
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type RectMark = {
+    type: "rect";
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type PathMark = {
+    type: "path";
+    d: (string | number)[][];
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type PatternMark = CircleMark | LineMark | PolygonMark | RectMark | PathMark;

package/dist/patterns/scale.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Scale all geometric coordinates in a mark by `size`.
+ * Renames rect `w`/`h` to `width`/`height` and converts polygon/path to strings.
+ * @param {PatternMark} mark
+ * @param {number} size
+ * @returns {object}
+ */
+export function scaleMark(mark: PatternMark, size: number): object;
+/**
+ * Resolve a scaled mark into SVG-ready `{ type, attrs }`.
+ * `attrs` can be spread directly onto the SVG element.
+ *
+ * Per-mark overrides respected:
+ *   mark.strokeWidth  → `stroke-width` (takes precedence over `thickness`)
+ *   mark.fillOpacity  → `fill-opacity`
+ *   mark.opacity      → `opacity`
+ *
+ * @param {object} scaledMark  Output of scaleMark
+ * @param {{ fill: string, stroke: string, thickness: number }} appearance
+ * @returns {{ type: string, attrs: object }}
+ */
+export function resolveMarkAttrs(scaledMark: object, { fill, stroke, thickness }: {
+    fill: string;
+    stroke: string;
+    thickness: number;
+}): {
+    type: string;
+    attrs: object;
+};
+import type { PatternMark } from './patterns.js';

package/dist/symbols/constants/index.d.ts

@@ -0,0 +1 @@
+export const namedShapes: {};

package/dist/symbols/index.d.ts

@@ -0,0 +1,5 @@
+export const shapes: string[];
+export const components: {
+    default: import("svelte/legacy").LegacyComponentType;
+    'rounded-square': import("svelte/legacy").LegacyComponentType;
+};

package/package.json

@@ -1,63 +1,59 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.15",
-  "description": "Components for making interactive charts.",
+  "version": "1.0.0-next.151",
+  "type": "module",
+  "description": "Data-driven chart components",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jerrythomas/rokkit.git"
+  },
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "main": "src/index.js",
-  "svelte": "src/index.js",
-  "module": "src/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
+  "npm": {
+    "publish": false
+  },
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/ui": "~0.12.10",
-    "eslint": "^8.33.0",
-    "js-yaml": "^4.1.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "~0.19.1",
-    "shared-config": "1.0.0",
-    "eslint-config-shared": "1.0.0"
-  },
-  "dependencies": {
-    "d3-array": "^3.2.2",
-    "d3-collection": "^1.0.7",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "date-fns": "^2.29.3",
-    "ramda": "^0.28.0",
-    "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.15"
+  "scripts": {
+    "prepublishOnly": "cp ../../LICENSE . && bun clean && bun tsc --project tsconfig.build.json",
+    "postpublish": "rm -f LICENSE",
+    "clean": "rm -rf dist",
+    "build": "bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
     "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "dist/**/*.d.ts",
+    "README.md",
+    "package.json",
+    "LICENSE"
   ],
   "exports": {
-    "./src": "./src",
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./src/index.js"
-    }
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    },
+    "./patterns": "./src/patterns/index.js",
+    "./symbols": "./src/symbols/index.js",
+    "./symbols/*": "./src/symbols/*",
+    "./patterns/*": "./src/patterns/*",
+    "./charts/*": "./src/charts/*"
   },
-  "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
-    "test:ci": "vitest run",
-    "test:ui": "vitest --ui",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+  "dependencies": {
+    "@rokkit/core": "latest",
+    "@rokkit/data": "latest",
+    "@rokkit/states": "latest",
+    "d3-array": "^3.2.4",
+    "d3-axis": "^3.0.0",
+    "d3-format": "^3.1.2",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-transition": "^3.0.1",
+    "ramda": "^0.32.0"
   }
-}
+}

package/src/AnimatedPlot.svelte

@@ -0,0 +1,215 @@
+<script>
+  import { onMount, onDestroy } from 'svelte'
+  import { extractFrames, completeFrames, computeStaticDomains } from './lib/plot/frames.js'
+  import { applyGeomStat } from './lib/plot/stat.js'
+  import Timeline from './Plot/Timeline.svelte'
+  import PlotChart from './Plot.svelte'
+
+  /**
+   * @type {{
+   *   data: Object[],
+   *   animate: { by: string, duration?: number, loop?: boolean },
+   *   x?: string,
+   *   y?: string,
+   *   color?: string,
+   *   geoms?: import('./lib/plot/types.js').GeomSpec[],
+   *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   grid?: boolean,
+   *   legend?: boolean,
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    data = [],
+    animate,
+    x,
+    y,
+    color,
+    geoms = [],
+    helpers = {},
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false,
+    children
+  } = $props()
+
+  // Pre-aggregate and complete frames when any geom has a non-identity stat:
+  //   1. applyGeomStat: aggregate data by (x, color?, by) → one row per combination
+  //   2. completeFrames: alignBy(by) ensures all frame values appear for every (x, color?)
+  //      group, filling missing rows with y=0 so bars animate smoothly
+  // Geoms are returned with stat: 'identity' so PlotChart renders the pre-aggregated values as-is.
+  const prepared = $derived.by(() => {
+    const firstNonIdentity = geoms.find((g) => g.stat && g.stat !== 'identity')
+    if (!firstNonIdentity) return { data, geoms }
+
+    const aggChannels = { y }
+    if (x) aggChannels.x = x
+    if (color) aggChannels.color = color
+    aggChannels.frame = animate.by  // 'frame' is not a value channel, so it becomes a group-by
+
+    const aggregated = applyGeomStat(
+      data,
+      { stat: firstNonIdentity.stat, channels: aggChannels },
+      helpers
+    )
+    const completeData = completeFrames(aggregated, { x, y, color }, animate.by)
+
+    return { data: completeData, geoms: geoms.map((g) => ({ ...g, stat: 'identity' })) }
+  })
+
+  // Extract frames and compute stable domains from the full prepared dataset
+  const rawFrames = $derived(extractFrames(prepared.data, animate.by))
+  const frameKeys = $derived([...rawFrames.keys()])
+
+  const channels = $derived({ x, y, color })
+  const staticDomains = $derived(
+    x && y ? computeStaticDomains(prepared.data, channels) : { xDomain: undefined, yDomain: undefined }
+  )
+
+  // Playback state
+  let currentIndex = $state(0)
+  let playing      = $state(false)
+  let speed        = $state(1)
+
+  // Current frame data — already complete (all x/color combos present)
+  const currentFrameData = $derived.by(() => {
+    const key = frameKeys[currentIndex]
+    return rawFrames.get(key) ?? []
+  })
+
+  // Reduced motion preference
+  let prefersReducedMotion = $state(false)
+  onMount(() => {
+    if (typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    prefersReducedMotion = mq.matches
+    const handler = (e) => { prefersReducedMotion = e.matches }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  })
+
+  // Animation loop
+  const baseDuration = $derived(animate.duration ?? 800)
+  const msPerFrame   = $derived(Math.round(baseDuration / speed))
+  let lastTime = 0
+  let rafId = 0
+
+  function advanceFrame() {
+    currentIndex = currentIndex + 1
+    if (currentIndex >= frameKeys.length) {
+      if (animate.loop ?? false) currentIndex = 0
+      else playing = false
+    }
+  }
+
+  function tick(time) {
+    if (!playing) return
+    if (time - lastTime >= msPerFrame) {
+      lastTime = time
+      advanceFrame()
+      if (!playing) return
+    }
+    rafId = requestAnimationFrame(tick)
+  }
+
+  $effect(() => {
+    // Reading msPerFrame here makes it a tracked dependency — effect re-runs on speed changes,
+    // which resets lastTime=0 to re-anchor frame pacing.
+    const _ms = msPerFrame
+    if (playing && !prefersReducedMotion) {
+      lastTime = 0
+      rafId = requestAnimationFrame(tick)
+    } else {
+      cancelAnimationFrame(rafId)
+    }
+    return () => cancelAnimationFrame(rafId)
+  })
+
+  // Reduced motion: step frames on interval instead
+  let reducedInterval = 0
+  $effect(() => {
+    if (!playing || !prefersReducedMotion) {
+      clearInterval(reducedInterval)
+      return
+    }
+    reducedInterval = setInterval(() => {
+      currentIndex = currentIndex + 1
+      if (currentIndex >= frameKeys.length) {
+        if (animate.loop ?? false) currentIndex = 0
+        else { playing = false; clearInterval(reducedInterval) }
+      }
+    }, msPerFrame)
+    return () => clearInterval(reducedInterval)
+  })
+
+  onDestroy(() => {
+    cancelAnimationFrame(rafId)
+    clearInterval(reducedInterval)
+  })
+
+  $effect(() => {
+    const len = frameKeys.length
+    if (currentIndex >= len && len > 0) {
+      currentIndex = len - 1
+      playing = false
+    } else if (len === 0) {
+      currentIndex = 0
+      playing = false
+    }
+  })
+
+  function handlePlay()  { playing = true }
+  function handlePause() { playing = false }
+  function handleScrub(index) {
+    playing = false
+    currentIndex = index
+  }
+  function handleSpeed(s) { speed = s }
+
+  // Build spec for the current frame, with static domain overrides
+  const frameSpec = $derived({
+    data: currentFrameData,
+    x, y, color,
+    geoms: prepared.geoms,
+    xDomain: staticDomains.xDomain,
+    yDomain: staticDomains.yDomain
+  })
+</script>
+
+<div data-plot-animated>
+  <PlotChart
+    spec={frameSpec}
+    {helpers}
+    {width}
+    {height}
+    {mode}
+    {grid}
+    {legend}
+  >
+    {@render children?.()}
+  </PlotChart>
+
+  <Timeline
+    {frameKeys}
+    {currentIndex}
+    {playing}
+    {speed}
+    onplay={handlePlay}
+    onpause={handlePause}
+    onscrub={handleScrub}
+    onspeed={handleSpeed}
+  />
+</div>
+
+<style>
+  [data-plot-animated] {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+</style>