@rokkit/chart 1.3.7 → 1.3.9

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

@@ -1,177 +0,0 @@
-/**
- * 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/chartProps.js

@@ -1,76 +0,0 @@
-/**
- * Shared JSDoc type definitions for chart component props.
- * Import these in chart components with:
- *   @type {import('./lib/plot/chartProps.js').ChartProps}
- */
-
-/**
- * @typedef {Object} ChartProps
- * Common props shared by all high-level chart wrappers.
- *
- * @property {Object[]} [data=[]]        - Data array to visualize
- * @property {string}   [x]              - Field name for the X axis
- * @property {string}   [y]              - Field name for the Y axis
- * @property {string}   [fill]           - Field name for fill color grouping (alias for color)
- * @property {string}   [color]          - Field name for color grouping
- * @property {string}   [pattern]        - Field name for pattern fill grouping
- * @property {string}   [stat='identity']- Aggregation stat: 'identity' | 'sum' | 'mean' | 'count' | 'min' | 'max' | 'median' | 'boxplot'
- * @property {number}   [width=600]      - SVG width in pixels
- * @property {number}   [height=400]     - SVG height in pixels
- * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
- * @property {boolean}  [grid=true]      - Whether to show grid lines
- * @property {boolean}  [legend=false]   - Whether to show the legend
- */
-
-/**
- * @typedef {Object} BarChartProps
- * @extends ChartProps
- * @property {boolean} [stack=false]     - Stack bars (true) or group them (false)
- */
-
-/**
- * @typedef {Object} PieChartProps
- * @property {Object[]} [data=[]]        - Data array to visualize
- * @property {string}   [label]          - Field name for slice labels (drives color key)
- * @property {string}   [y]              - Field name for slice values (theta)
- * @property {string}   [fill]           - Alternative to label for color grouping
- * @property {number}   [innerRadius=0]  - Inner radius as fraction of outer (0=pie, 0.5=donut)
- * @property {string}   [stat='sum']     - Aggregation stat (default sum for pie charts)
- * @property {number}   [width=400]      - SVG width in pixels
- * @property {number}   [height=400]     - SVG height in pixels
- * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
- * @property {boolean}  [legend=false]   - Whether to show the legend
- */
-
-/**
- * @typedef {Object} BoxViolinChartProps
- * @property {Object[]} [data=[]]        - Data array to visualize
- * @property {string}   [x]              - Field name for the category axis (groups)
- * @property {string}   [y]              - Field name for the value axis (raw observations)
- * @property {string}   [fill]           - 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
- * @property {number}   [width=600]      - SVG width in pixels
- * @property {number}   [height=400]     - SVG height in pixels
- * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
- * @property {boolean}  [grid=true]      - Whether to show grid lines
- * @property {boolean}  [legend=false]   - Whether to show the legend
- */
-
-/**
- * @typedef {Object} ScatterBubbleChartProps
- * @property {Object[]} [data=[]]        - Data array to visualize
- * @property {string}   [x]              - Field name for X position
- * @property {string}   [y]              - Field name for Y position
- * @property {string}   [color]          - Field name for color grouping
- * @property {string}   [size]           - Field name for point radius (BubbleChart: required)
- * @property {number}   [width=600]      - SVG width in pixels
- * @property {number}   [height=400]     - SVG height in pixels
- * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
- * @property {boolean}  [grid=true]      - Whether to show grid lines
- * @property {boolean}  [legend=false]   - Whether to show the legend
- */
-
-/**
- * @typedef {Object} LineAreaChartProps
- * @extends ChartProps
- * @property {string}   [curve]          - Line interpolation: 'linear' | 'smooth' | 'step'
- */

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

@@ -1,35 +0,0 @@
-export function createScales(data: any, dimensions: any, options: any): {
-    xScale?: undefined;
-    yScale?: undefined;
-    colorScale?: undefined;
-} | {
-    xScale: import("d3-scale").ScaleBand<any> | import("d3-scale").ScaleContinuousNumeric<any, any, never>;
-    yScale: import("d3-scale").ScaleLinear<number, number, never>;
-    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/scales.svelte.js

@@ -1,151 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity'
-import { scaleLinear, scaleOrdinal } from 'd3-scale'
-import { schemeCategory10 } from 'd3-scale-chromatic'
-import { min, max } from 'd3-array'
-import { buildXScale } from './xscale.js'
-
-/**
- * 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
- * @param {number} [options.padding=0.2] Padding for band scales
- * @returns {Object} Object containing xScale, yScale, and colorScale
- */
-/**
- * @param {Array} data
- * @param {string} colorKey
- * @returns {Object}
- */
-function buildColorScale(data, colorKey) {
-	const uniqueCategories = [...new SvelteSet(data.map((d) => d[colorKey]))]
-	return scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
-}
-
-/**
- * @param {Object} options
- * @returns {{ xKey: string, yKey: string, colorKey: string|undefined, padding: number }}
- */
-function parseScaleOptions(options) {
-	const opts = options || {}
-	return {
-		xKey: opts.xKey,
-		yKey: opts.yKey,
-		colorKey: opts.colorKey,
-		padding: opts.padding !== undefined ? opts.padding : 0.2
-	}
-}
-
-export function createScales(data, dimensions, options) {
-	if (!data || !data.length) return {}
-
-	const { xKey, yKey, colorKey, padding } = parseScaleOptions(options)
-	const xValues = data.map((d) => d[xKey])
-	const yValues = data.map((d) => d[yKey])
-	const colorScale = colorKey ? buildColorScale(data, colorKey) : null
-
-	return {
-		xScale: buildXScale(xValues, dimensions, padding),
-		yScale: scaleLinear()
-			.domain([0, max(yValues) * 1.1])
-			.nice()
-			.range([dimensions.innerHeight, 0]),
-		colorScale
-	}
-}
-
-/**
- * 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, height, margin) {
-	return {
-		width,
-		height,
-		margin,
-		innerWidth: width - margin.left - margin.right,
-		innerHeight: height - margin.top - margin.bottom
-	}
-}
-
-/**
- * Gets the axis origin value
- *
- * @param {Object} scale D3 scale
- * @returns {number} Origin value
- */
-export function getOriginValue(scale) {
-	return scale.ticks ? scale(Math.max(0, min(scale.domain()))) : scale.range()[0]
-}
-
-/**
- * Resolve tick values for a band scale, applying downsampling when needed
- * @param {Object} scale
- * @param {number} count
- * @returns {{ ticks: Array, offset: number }}
- */
-function bandTicks(scale, count) {
-	const offset = scale.bandwidth() / 2
-	const domain = scale.domain()
-	const cappedCount = Math.min(Math.round(count), domain.length)
-	const step = Math.ceil(domain.length / cappedCount)
-	const ticks = cappedCount < domain.length ? domain.filter((_, i) => i % step === 0) : domain
-	return { ticks, offset }
-}
-
-/**
- * @param {number} rangeSize
- * @param {string} axis
- * @param {number} fontSize
- * @returns {number}
- */
-function defaultTickCount(rangeSize, axis, fontSize) {
-	const divisor = fontSize * (axis === 'y' ? 3 : 6)
-	return Math.abs(rangeSize / divisor)
-}
-
-/**
- * @param {Array} ticks
- * @param {Object} scale
- * @param {number} offset
- * @param {boolean} isXAxis
- * @returns {Array}
- */
-function formatTicks(ticks, scale, offset, isXAxis) {
-	const pos = isXAxis ? offset : 0
-	return ticks.map((t) => ({ value: t, position: scale(t) + pos }))
-}
-
-/**
- * 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, axis, count = null, fontSize = 12) {
-	const [minRange, maxRange] = scale.range()
-	const tickCount = count ?? defaultTickCount(maxRange - minRange, axis, fontSize)
-
-	let ticks, offset
-	if (scale.ticks) {
-		ticks = scale.ticks(Math.round(tickCount))
-		offset = 0
-	} else {
-		const band = bandTicks(scale, tickCount)
-		ticks = band.ticks
-		offset = band.offset
-	}
-
-	return formatTicks(ticks, scale, offset, axis === 'x')
-}

package/dist/lib/ticks.d.ts

@@ -1,36 +0,0 @@
-/**
- * @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/ticks.js

@@ -1,46 +0,0 @@
-/**
- * @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, upper, steps, type) {
-	if (steps <= 0) return []
-	return Array.from({ length: Math.floor((upper - lower) / steps) + 1 }, (_, i) => ({
-		position: i * steps,
-		label: i * steps,
-		type
-	})).filter((tick) => tick.position > lower && tick.position < upper)
-}
-
-/**
- * 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, upper, steps = { major: 10, minor: 0 }) {
-	const majorTicks = ticksByType(lower, upper, steps.major, 'major')
-	const minorTicks = ticksByType(lower, upper, steps.minor, 'minor').filter(
-		(tick) => !majorTicks.find((major) => major.position === tick.position)
-	)
-	const end = [
-		{ position: upper, label: upper, type: 'end' },
-		{ position: lower, label: lower, type: 'end' }
-	]
-
-	return [...minorTicks, ...majorTicks, ...end].sort((a, b) => a.position - b.position)
-}