@rokkit/chart 1.0.0-next.147 → 1.0.0-next.149

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

@@ -0,0 +1,177 @@
+/**
+ * Common props shared by all high-level chart wrappers.
+ */
+export type ChartProps = {
+    /**
+     * - Data array to visualize
+     */
+    data?: Object[] | undefined;
+    /**
+     * - Field name for the X axis
+     */
+    x?: string | undefined;
+    /**
+     * - Field name for the Y axis
+     */
+    y?: string | undefined;
+    /**
+     * - Field name for fill color grouping (alias for color)
+     */
+    fill?: string | undefined;
+    /**
+     * - Field name for color grouping
+     */
+    color?: string | undefined;
+    /**
+     * - Field name for pattern fill grouping
+     */
+    pattern?: string | undefined;
+    /**
+     * - Aggregation stat: 'identity' | 'sum' | 'mean' | 'count' | 'min' | 'max' | 'median' | 'boxplot'
+     */
+    stat?: string | undefined;
+    /**
+     * - SVG width in pixels
+     */
+    width?: number | undefined;
+    /**
+     * - SVG height in pixels
+     */
+    height?: number | undefined;
+    /**
+     * - Color mode: 'light' | 'dark'
+     */
+    mode?: string | undefined;
+    /**
+     * - Whether to show grid lines
+     */
+    grid?: boolean | undefined;
+    /**
+     * - Whether to show the legend
+     */
+    legend?: boolean | undefined;
+};
+export type BarChartProps = Object;
+export type PieChartProps = {
+    /**
+     * - Data array to visualize
+     */
+    data?: Object[] | undefined;
+    /**
+     * - Field name for slice labels (drives color key)
+     */
+    label?: string | undefined;
+    /**
+     * - Field name for slice values (theta)
+     */
+    y?: string | undefined;
+    /**
+     * - Alternative to label for color grouping
+     */
+    fill?: string | undefined;
+    /**
+     * - Inner radius as fraction of outer (0=pie, 0.5=donut)
+     */
+    innerRadius?: number | undefined;
+    /**
+     * - Aggregation stat (default sum for pie charts)
+     */
+    stat?: string | undefined;
+    /**
+     * - SVG width in pixels
+     */
+    width?: number | undefined;
+    /**
+     * - SVG height in pixels
+     */
+    height?: number | undefined;
+    /**
+     * - Color mode: 'light' | 'dark'
+     */
+    mode?: string | undefined;
+    /**
+     * - Whether to show the legend
+     */
+    legend?: boolean | undefined;
+};
+export type BoxViolinChartProps = {
+    /**
+     * - Data array to visualize
+     */
+    data?: Object[] | undefined;
+    /**
+     * - Field name for the category axis (groups)
+     */
+    x?: string | undefined;
+    /**
+     * - Field name for the value axis (raw observations)
+     */
+    y?: string | undefined;
+    /**
+     * - Field name for fill color; when different from x, sub-groups within each x-band (like grouped bars); lighter shade used for body, darker shade for whiskers/outline
+     */
+    fill?: string | undefined;
+    /**
+     * - SVG width in pixels
+     */
+    width?: number | undefined;
+    /**
+     * - SVG height in pixels
+     */
+    height?: number | undefined;
+    /**
+     * - Color mode: 'light' | 'dark'
+     */
+    mode?: string | undefined;
+    /**
+     * - Whether to show grid lines
+     */
+    grid?: boolean | undefined;
+    /**
+     * - Whether to show the legend
+     */
+    legend?: boolean | undefined;
+};
+export type ScatterBubbleChartProps = {
+    /**
+     * - Data array to visualize
+     */
+    data?: Object[] | undefined;
+    /**
+     * - Field name for X position
+     */
+    x?: string | undefined;
+    /**
+     * - Field name for Y position
+     */
+    y?: string | undefined;
+    /**
+     * - Field name for color grouping
+     */
+    color?: string | undefined;
+    /**
+     * - Field name for point radius (BubbleChart: required)
+     */
+    size?: string | undefined;
+    /**
+     * - SVG width in pixels
+     */
+    width?: number | undefined;
+    /**
+     * - SVG height in pixels
+     */
+    height?: number | undefined;
+    /**
+     * - Color mode: 'light' | 'dark'
+     */
+    mode?: string | undefined;
+    /**
+     * - Whether to show grid lines
+     */
+    grid?: boolean | undefined;
+    /**
+     * - Whether to show the legend
+     */
+    legend?: boolean | undefined;
+};
+export type LineAreaChartProps = Object;

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

@@ -0,0 +1,13 @@
+/**
+ * Applies dimming state to data rows using crossfilter instance.
+ * Maps each row to { data: row, dimmed: boolean }.
+ *
+ * @param {Object[]} data - raw data array
+ * @param {Object} cf - crossfilter instance (from createCrossFilter)
+ * @param {Object} channels - { x, y, color, ... } field name mapping
+ * @returns {{ data: Object, dimmed: boolean }[]}
+ */
+export function applyDimming(data: Object[], cf: Object, channels: Object): {
+    data: Object;
+    dimmed: boolean;
+}[];

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

@@ -0,0 +1,24 @@
+/**
+ * Splits data into a Map of panels keyed by facet field value.
+ * Preserves insertion order of first occurrence.
+ *
+ * @param {Object[]} data
+ * @param {string} field
+ * @returns {Map<unknown, Object[]>}
+ */
+export function splitByField(data: Object[], field: string): Map<unknown, Object[]>;
+/**
+ * Computes x/y domains for each panel.
+ *
+ * @param {Map<unknown, Object[]>} panels
+ * @param {{ x: string, y: string }} channels
+ * @param {'fixed'|'free'|'free_x'|'free_y'} scalesMode
+ * @returns {Map<unknown, { xDomain: unknown[], yDomain: [number, number] }>}
+ */
+export function getFacetDomains(panels: Map<unknown, Object[]>, channels: {
+    x: string;
+    y: string;
+}, scalesMode?: "fixed" | "free" | "free_x" | "free_y"): Map<unknown, {
+    xDomain: unknown[];
+    yDomain: [number, number];
+}>;

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

@@ -0,0 +1,47 @@
+/**
+ * Extracts animation frames from data, keyed by time field value.
+ * Preserves insertion order of time values.
+ *
+ * @param {Object[]} data
+ * @param {string} timeField
+ * @returns {Map<unknown, Object[]>}
+ */
+export function extractFrames(data: Object[], timeField: string): Map<unknown, Object[]>;
+/**
+ * Ensures all frame values (byField) appear for every (x, color?) combination.
+ * Uses dataset alignBy to fill missing frame-value combos with y=0 so bars
+ * animate smoothly rather than disappearing between frames.
+ *
+ * Call after pre-aggregation. The result can be split directly by extractFrames
+ * with no further per-frame normalization needed.
+ *
+ * @param {Object[]} data - pre-aggregated rows, one per (x, color?, byField)
+ * @param {{ x?: string, y: string, color?: string }} channels
+ * @param {string} byField - the frame field (e.g. 'year')
+ * @returns {Object[]}
+ */
+export function completeFrames(data: Object[], channels: {
+    x?: string;
+    y: string;
+    color?: string;
+}, byField: string): Object[];
+/**
+ * Computes static x/y domains from the full (pre-split) data array.
+ * These domains stay constant throughout the animation so values are
+ * always comparable across frames.
+ *
+ * NOTE: y domain is pinned to [0, max] — assumes bar chart semantics.
+ * Pass an explicit yDomain override for scatter/line charts where y can
+ * be negative.
+ *
+ * @param {Object[]} data - full dataset (before frame extraction)
+ * @param {{ x: string, y: string }} channels
+ * @returns {{ xDomain: unknown[], yDomain: [number, number] }}
+ */
+export function computeStaticDomains(data: Object[], channels: {
+    x: string;
+    y: string;
+}): {
+    xDomain: unknown[];
+    yDomain: [number, number];
+};

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

@@ -0,0 +1,3 @@
+export function resolveFormat(field: any, helpers?: {}): any;
+export function resolveTooltip(helpers?: {}): any;
+export function resolveGeom(type: any, helpers?: {}): any;

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

@@ -0,0 +1,29 @@
+export function resolvePreset(name: any, helpers?: {}): {
+    colors: any;
+    patterns: any;
+    symbols: any;
+};
+export namespace DEFAULT_PRESET {
+    export let colors: string[];
+    export { PATTERN_ORDER as patterns };
+    export { SYMBOL_ORDER as symbols };
+}
+export namespace ACCESSIBLE_PRESET {
+    let colors_1: string[];
+    export { colors_1 as colors };
+    export { PATTERN_ORDER as patterns };
+    export { SYMBOL_ORDER as symbols };
+}
+export namespace PRINT_PRESET {
+    let colors_2: string[];
+    export { colors_2 as colors };
+    export let patterns: string[];
+    export { SYMBOL_ORDER as symbols };
+}
+export type PlotPreset = {
+    colors: string[];
+    patterns: string[];
+    symbols: string[];
+};
+import { PATTERN_ORDER } from '../brewing/patterns.js';
+import { SYMBOL_ORDER } from '../brewing/symbols.js';

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

@@ -0,0 +1,5 @@
+export function inferFieldType(data: any, field: any): "continuous" | "band";
+export function inferOrientation(xType: any, yType: any): "none" | "vertical" | "horizontal";
+export function buildUnifiedXScale(datasets: any, field: any, width: any, opts?: {}): any;
+export function buildUnifiedYScale(datasets: any, field: any, height: any, opts?: {}): any;
+export function inferColorScaleType(data: any, field: any, spec?: {}): any;

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

@@ -0,0 +1,32 @@
+/**
+ * Resolves a stat name to an aggregation function.
+ * Checks built-ins first, then helpers.stats, then warns and falls back to identity.
+ *
+ * @param {string} name
+ * @param {Object} helpers
+ * @returns {Function}
+ */
+export function resolveStat(name: string, helpers?: Object): Function;
+/**
+ * Infers group-by fields from channels by excluding value fields.
+ * valueFields may contain channel keys (e.g. ['y', 'size']) OR field values (e.g. ['cty']).
+ * A channel's field is excluded if either the channel key OR the field value is in valueFields.
+ *
+ * @param {Record<string, string|undefined>} channels
+ * @param {string[]} valueFields
+ * @returns {string[]}
+ */
+export function inferGroupByFields(channels: Record<string, string | undefined>, valueFields: string[]): string[];
+/**
+ * Applies a stat aggregation to data based on a geom config.
+ * Returns data unchanged for identity stat.
+ *
+ * @param {Object[]} data
+ * @param {{ stat?: string, channels?: Record<string, string> }} geomConfig
+ * @param {Object} helpers
+ * @returns {Object[]}
+ */
+export function applyGeomStat(data: Object[], geomConfig: {
+    stat?: string;
+    channels?: Record<string, string>;
+}, helpers?: Object): Object[];

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

@@ -3,7 +3,7 @@ export function createScales(data: any, dimensions: any, options: any): {
     yScale?: undefined;
     colorScale?: undefined;
 } | {
-    xScale: Object;
+    xScale: any;
     yScale: any;
     colorScale: Object | null;
 };

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/utils.d.ts

@@ -58,3 +58,4 @@ export function createTooltipFormatter(options?: Object): Function;
  * @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

@@ -1,9 +1,4 @@
-export { default as Brick } from "./Brick.svelte";
-export { default as Circles } from "./Circles.svelte";
-export { default as Dots } from "./Dots.svelte";
-export { default as CrossHatch } from "./CrossHatch.svelte";
-export { default as Waves } from "./Waves.svelte";
-export { default as Tile } from "./Tile.svelte";
-export { default as Triangles } from "./Triangles.svelte";
-export { default as CurvedWave } from "./CurvedWave.svelte";
-export { default as OutlineCircles } from "./OutlineCircles.svelte";
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.147",
+  "version": "1.0.0-next.149",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {
@@ -35,18 +35,24 @@
       "types": "./dist/index.d.ts",
       "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/*"
   },
   "dependencies": {
     "@rokkit/core": "latest",
     "@rokkit/data": "latest",
     "@rokkit/states": "latest",
     "d3-array": "^3.2.4",
-    "d3-format": "^3.1.2",
     "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"
   }