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

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

@@ -0,0 +1,162 @@
+export type ChartMargin = {
+    /**
+     * - Top margin
+     */
+    top: number;
+    /**
+     * - Right margin
+     */
+    right: number;
+    /**
+     * - Bottom margin
+     */
+    bottom: number;
+    /**
+     * - Left margin
+     */
+    left: number;
+};
+export type ChartDimensions = {
+    /**
+     * - Total chart width
+     */
+    width: number;
+    /**
+     * - Total chart height
+     */
+    height: number;
+    /**
+     * - Chart margins
+     */
+    margin: ChartMargin;
+    /**
+     * - Chart width without margins
+     */
+    innerWidth: number;
+    /**
+     * - Chart height without margins
+     */
+    innerHeight: number;
+};
+export type ChartScales = {
+    /**
+     * - X-axis scale function
+     */
+    x: Function;
+    /**
+     * - Y-axis scale function
+     */
+    y: Function;
+    /**
+     * - Color scale function
+     */
+    color: Function;
+};
+export type ScaleFields = {
+    /**
+     * - X-axis field
+     */
+    x: string;
+    /**
+     * - Y-axis field
+     */
+    y: string;
+    /**
+     * - Color field
+     */
+    color: string;
+};
+export type TickData = {
+    /**
+     * - Tick value
+     */
+    value: any;
+    /**
+     * - Tick position in pixels
+     */
+    position: number;
+    /**
+     * - Formatted tick label
+     */
+    formattedValue: string;
+};
+export type AxisData = {
+    /**
+     * - Tick data
+     */
+    ticks: TickData[];
+    /**
+     * - Axis label
+     */
+    label: string;
+    /**
+     * - SVG transform attribute value
+     */
+    transform: string;
+    /**
+     * - SVG transform for the label
+     */
+    labelTransform: string;
+};
+export type BarData = {
+    /**
+     * - Original data point
+     */
+    data: Object;
+    /**
+     * - X position
+     */
+    x: number;
+    /**
+     * - Y position
+     */
+    y: number;
+    /**
+     * - Width of the bar
+     */
+    width: number;
+    /**
+     * - Height of the bar
+     */
+    height: number;
+    /**
+     * - Color of the bar
+     */
+    color: string;
+};
+export type LegendItem = {
+    /**
+     * - Legend item value
+     */
+    value: any;
+    /**
+     * - Item color
+     */
+    color: string;
+    /**
+     * - Y position
+     */
+    y: number;
+    /**
+     * - Shape type ('rect' or 'circle')
+     */
+    shape: string;
+    /**
+     * - Size of the marker
+     */
+    markerSize: number;
+};
+export type LegendData = {
+    /**
+     * - Legend items
+     */
+    items: LegendItem[];
+    /**
+     * - Legend title
+     */
+    title: string;
+    /**
+     * - SVG transform attribute value
+     */
+    transform: string;
+};

package/dist/lib/chart.d.ts

@@ -0,0 +1,40 @@
+export function chart(data: any, aes: any): Chart;
+declare class Chart {
+    constructor(data: any, opts: any);
+    width: number;
+    height: number;
+    flipCoords: any;
+    x: any;
+    y: any;
+    value: any;
+    valueLabel: any;
+    valueFormat: any;
+    fill: any;
+    color: any;
+    shape: any;
+    padding(value: any): this;
+    spacing: number;
+    margin(value: any): this;
+    domain: {
+        x: any[];
+        y: any[];
+    };
+    stat: any;
+    data: any;
+    refresh(): this;
+    range: {
+        x: any[];
+        y: any[];
+    } | undefined;
+    origin: {
+        x: any;
+        y: any;
+    } | undefined;
+    scale: {
+        x: any;
+        y: any;
+    } | undefined;
+    aggregate(value: any, stat: any): void;
+    ticks(axis: any, count: any, fontSize?: number): any;
+}
+export {};

package/dist/lib/context.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Creates chart context and provides it to child components
+ *
+ * @param {Object} options Initial chart options
+ * @returns {Object} Chart context with all stores and methods
+ */
+export function createChartContext(options?: Object): Object;
+/**
+ * Gets chart context provided by parent component
+ *
+ * @returns {Object} Chart context
+ */
+export function getChartContext(): Object;

package/dist/lib/grid.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @typedef GridPoint
+ * @property {number} x - x-coordinate of the point
+ * @property {number} y - y-coordinate of the point
+ * @property {number} r - radius of the point
+ */
+/**
+ * @typedef SwatchGrid
+ * @property {number}      width  - width of the grid
+ * @property {number}      height - height of the grid
+ * @property {GridPoint[]} data   - data points of the grid
+ */
+/**
+ * @tyoedef {Object} GridOptions
+ * @property {number} [pad=0]     - The padding between the items
+ * @property {number} [columns=0] - The number of columns
+ * @property {number} [rows=0]    - The number of rows
+ */
+/**
+ * Calculates a grid of centres to fit a list of items of `size` within the number of `columns` and `rows`.
+ *
+ * - Attempts to find a best fit square if both columns and rows are not specified
+ * - Value in columns is prioritized over rows for recalculating the grid
+ * - Supports padding between the items
+ *
+ * @param {number}      count   - number of items
+ * @param {number}      size    - size of the items
+ * @param {GridOptions} options - options for the grid
+ * @returns {SwatchGrid}
+ */
+export function swatchGrid(count: number, size: number, options: GridOptions): SwatchGrid;
+/**
+ * Spreads values as patterns with colors from a palette
+ *
+ * @param {number[]} values   - values to spread
+ * @param {string[]} patterns - patterns to spread
+ * @param {string[]} palette  - colors to spread
+ * @returns {Record<number, { id: string, pattern: string, color: string }>}
+ */
+export function spreadValuesAsPatterns(values: number[], patterns: string[], palette: string[]): Record<number, {
+    id: string;
+    pattern: string;
+    color: string;
+}>;
+export type GridPoint = {
+    /**
+     * - x-coordinate of the point
+     */
+    x: number;
+    /**
+     * - y-coordinate of the point
+     */
+    y: number;
+    /**
+     * - radius of the point
+     */
+    r: number;
+};
+export type SwatchGrid = {
+    /**
+     * - width of the grid
+     */
+    width: number;
+    /**
+     * - height of the grid
+     */
+    height: number;
+    /**
+     * - data points of the grid
+     */
+    data: GridPoint[];
+};

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[];