@rokkit/chart 1.0.0-next.99 → 1.0.2

package/src/lib/brewing/marks/points.js

@@ -0,0 +1,105 @@
+import {
+	symbol,
+	symbolCircle,
+	symbolSquare,
+	symbolTriangle,
+	symbolDiamond,
+	symbolCross,
+	symbolStar
+} from 'd3-shape'
+import { defaultPreset } from '../../preset.js'
+
+const SYMBOL_TYPES = [
+	symbolCircle,
+	symbolSquare,
+	symbolTriangle,
+	symbolDiamond,
+	symbolCross,
+	symbolStar
+]
+const SYMBOL_NAMES = ['circle', 'square', 'triangle', 'diamond', 'cross', 'star']
+
+/**
+ * Returns a Map assigning shape names to distinct values, cycling through available shapes.
+ * @param {unknown[]} values
+ * @param {typeof defaultPreset} preset
+ * @returns {Map<unknown, string>}
+ */
+export function assignSymbols(values, preset = defaultPreset) {
+	const names = preset.symbols
+	return new Map(values.map((v, i) => [v, names[i % names.length]]))
+}
+
+/**
+ * Builds an SVG path string for a given shape name and radius.
+ * @param {string} shapeName
+ * @param {number} r
+ * @returns {string}
+ */
+export function buildSymbolPath(shapeName, r) {
+	const idx = SYMBOL_NAMES.indexOf(shapeName)
+	const type = idx >= 0 ? SYMBOL_TYPES[idx] : symbolCircle
+	return (
+		symbol()
+			.type(type)
+			.size(Math.PI * r * r)() ?? ''
+	)
+}
+
+/**
+ * Returns a stable pseudo-random offset for a given index.
+ * Uses a linear congruential generator seeded by index — no external dependency,
+ * stable across re-renders.
+ * @param {number} i - row index (seed)
+ * @param {number} range - total spread (jitter is ±range/2)
+ * @returns {number}
+ */
+export function jitterOffset(i, range) {
+	const r = ((i * 1664525 + 1013904223) >>> 0) / 0xffffffff
+	return (r - 0.5) * range
+}
+
+/**
+ * Builds point geometry for scatter/bubble charts.
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string, size?: string, symbol?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {Function|null} sizeScale
+ * @param {Map<unknown, string>|null} symbolMap  — maps symbol field value → shape name
+ * @param {number} defaultRadius
+ * @param {{ width?: number, height?: number }|null} jitter
+ */
+export function buildPoints(
+	data,
+	channels,
+	xScale,
+	yScale,
+	colors,
+	sizeScale,
+	symbolMap,
+	defaultRadius = 5,
+	jitter = null
+) {
+	const { x: xf, y: yf, color: cf, size: sf, symbol: symf } = channels
+	return data.map((d, i) => {
+		const colorKey = cf ? d[cf] : null
+		const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#444' }
+		const r = sf && sizeScale ? sizeScale(d[sf]) : defaultRadius
+		const shapeName = symf && symbolMap ? (symbolMap.get(d[symf]) ?? 'circle') : null
+		const symbolPath = shapeName ? buildSymbolPath(shapeName, r) : null
+		const jx = jitter?.width ? jitterOffset(i, jitter.width) : 0
+		const jy = jitter?.height ? jitterOffset(i + 100000, jitter.height) : 0
+		return {
+			data: d,
+			cx: xScale(d[xf]) + jx,
+			cy: yScale(d[yf]) + jy,
+			r,
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			symbolPath,
+			key: colorKey
+		}
+	})
+}

package/src/lib/brewing/marks/violins.js

@@ -0,0 +1,90 @@
+import { line, curveCatmullRom } from 'd3-shape'
+
+// Relative widths at each stat anchor (fraction of max half-width)
+const DENSITY_AT = { iqr_min: 0.08, q1: 0.55, median: 1.0, q3: 0.55, iqr_max: 0.08 }
+const ANCHOR_ORDER = ['iqr_max', 'q3', 'median', 'q1', 'iqr_min']
+
+/**
+ * Builds a closed violin shape path for each group.
+ * Input rows must have { q1, median, q3, iqr_min, iqr_max } from applyBoxStat.
+ *
+ * When `fill` differs from `x`, violins are sub-grouped within each x-band
+ * (one narrower violin per fill value per x category, like grouped bars).
+ * Violin body uses the lighter fill shade; outline uses the darker stroke shade.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, fill?: string }} channels
+ *   `fill` drives violin interior and outline (defaults to x-field).
+ * @param {import('d3-scale').ScaleBand} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map} colors
+ * @returns {Array}
+ */
+export function buildViolins(data, channels, xScale, yScale, colors) {
+	const { x: xf, fill: ff } = channels
+	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 40
+	const grouped = ff && ff !== xf
+
+	const pathGen = line()
+		.x((pt) => pt.x)
+		.y((pt) => pt.y)
+		.curve(curveCatmullRom.alpha(0.5))
+
+	if (grouped) {
+		const fillValues = [...new Set(data.map((d) => d[ff]))]
+		const n = fillValues.length
+		const subBandWidth = bw / n
+		const halfMax = subBandWidth * 0.45
+
+		return data.map((d) => {
+			const fillVal = d[ff]
+			const subIndex = fillValues.indexOf(fillVal)
+			const bandStart = xScale(d[xf]) ?? 0
+			const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2
+			const colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
+
+			const rightPts = ANCHOR_ORDER.map((key) => ({
+				x: cx + halfMax * DENSITY_AT[key],
+				y: yScale(d[key])
+			}))
+			const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
+				x: cx - halfMax * DENSITY_AT[key],
+				y: yScale(d[key])
+			}))
+
+			return {
+				data: d,
+				cx,
+				d: pathGen([...rightPts, ...leftPts, rightPts[0]]),
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke
+			}
+		})
+	}
+
+	// Non-grouped: one violin per x category
+	const halfMax = bw * 0.45
+
+	return data.map((d) => {
+		const fillKey = ff ? d[ff] : d[xf]
+		const colorEntry = colors?.get(fillKey) ?? { fill: '#aaa', stroke: '#666' }
+		const cx = (xScale(d[xf]) ?? 0) + (typeof xScale.bandwidth === 'function' ? bw / 2 : 0)
+
+		const rightPts = ANCHOR_ORDER.map((key) => ({
+			x: cx + halfMax * DENSITY_AT[key],
+			y: yScale(d[key])
+		}))
+		const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
+			x: cx - halfMax * DENSITY_AT[key],
+			y: yScale(d[key])
+		}))
+
+		return {
+			data: d,
+			cx,
+			d: pathGen([...rightPts, ...leftPts, rightPts[0]]),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke
+		}
+	})
+}

package/src/lib/brewing/patterns.js

@@ -0,0 +1,45 @@
+/**
+ * Converts a data key to a safe SVG element ID for pattern references.
+ * Spaces and non-word characters are replaced to avoid broken url(#...) refs.
+ * @param {unknown} key
+ * @returns {string}
+ */
+export function toPatternId(key) {
+	return `chart-pat-${String(key)
+		.replace(/\s+/g, '-')
+		.replace(/[^\w-]/g, '_')}`
+}
+
+// Keys must match the keys in packages/chart/src/patterns/patterns.js
+export const PATTERN_ORDER = [
+	'diagonal',
+	'dots',
+	'triangles',
+	'hatch',
+	'lattice',
+	'swell',
+	'checkerboard',
+	'waves',
+	'petals',
+	'brick',
+	'diamonds',
+	'tile',
+	'scales',
+	'circles',
+	'pip',
+	'rings',
+	'chevrons',
+	'shards',
+	'wedge',
+	'argyle',
+	'shell'
+]
+
+/**
+ * Assigns patterns from PATTERN_ORDER to an array of distinct values.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignPatterns(values) {
+	return new Map(values.map((v, i) => [v, PATTERN_ORDER[i % PATTERN_ORDER.length]]))
+}

package/src/lib/brewing/scales.js

@@ -0,0 +1,51 @@
+import { scaleBand, scaleLinear, scaleSqrt } from 'd3-scale'
+import { max, extent } from 'd3-array'
+
+/**
+ * Builds an x scale (band for categorical, linear for numeric).
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} width - inner width (pixels)
+ * @param {{ padding?: number }} opts
+ */
+export function buildXScale(data, field, width, opts = {}) {
+	const values = [...new Set(data.map((d) => d[field]))]
+	const isNumeric = values.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && v !== ''))
+	if (isNumeric) {
+		const [minVal, maxVal] = extent(data, (d) => Number(d[field]))
+		return scaleLinear().domain([minVal, maxVal]).range([0, width]).nice()
+	}
+	return scaleBand()
+		.domain(values)
+		.range([0, width])
+		.padding(opts.padding ?? 0.2)
+}
+
+function maxFromLayer(layer) {
+	if (layer.data && layer.y) return max(layer.data, (d) => Number(d[layer.y])) ?? 0
+	return 0
+}
+
+/**
+ * Builds a y linear scale from 0 to max, extended by any layer overrides.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} height - inner height (pixels)
+ * @param {Array<{data?: Object[], y?: string}>} layers
+ */
+export function buildYScale(data, field, height, layers = []) {
+	const dataMax = max(data, (d) => Number(d[field])) ?? 0
+	const maxVal = layers.reduce((m, layer) => Math.max(m, maxFromLayer(layer)), dataMax)
+	return scaleLinear().domain([0, maxVal]).range([height, 0]).nice()
+}
+
+/**
+ * Builds a sqrt scale for bubble/point size.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} maxRadius
+ */
+export function buildSizeScale(data, field, maxRadius = 20) {
+	const maxVal = max(data, (d) => Number(d[field])) ?? 1
+	return scaleSqrt().domain([0, maxVal]).range([0, maxRadius])
+}

package/src/lib/brewing/scales.svelte.js

@@ -0,0 +1,82 @@
+import { SvelteSet } from 'svelte/reactivity'
+import { min, max } from 'd3-array'
+import { scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import {} from './types.js'
+import { buildXScale } from '../xscale.js'
+
+/**
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * @param {Array} data
+ * @param {string} colorField
+ * @returns {import('d3-scale').ScaleOrdinal}
+ */
+function buildColorScale(data, colorField) {
+	const colorValues = [...new SvelteSet(data.map((d) => d[colorField]))]
+	return scaleOrdinal().domain(colorValues).range(schemeCategory10)
+}
+
+/**
+ * @param {Array} data
+ * @param {string} yField
+ * @param {Object} dimensions
+ * @returns {import('d3-scale').ScaleContinuousNumeric}
+ */
+function buildYScale(data, yField, dimensions) {
+	const yValues = data.map((d) => d[yField])
+	return scaleLinear()
+		.domain([0, max(yValues) * 1.1])
+		.nice()
+		.range([dimensions.innerHeight, 0])
+}
+
+/**
+ * @param {Array} data
+ * @param {ScaleFields} fields
+ * @returns {boolean}
+ */
+function hasRequiredFields(data, fields) {
+	return Boolean(data && data.length && fields.x && fields.y)
+}
+
+/**
+ * Creates scales based on data, fields, and dimensions
+ *
+ * @param {Array} data - Chart data
+ * @param {ScaleFields} fields - Field mappings
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Scale options
+ * @param {number} [options.padding=0.2] - Padding for band scales
+ * @returns {ChartScales} Chart scales
+ */
+export function createScales(data, fields, dimensions, options = {}) {
+	if (!hasRequiredFields(data, fields)) return { x: null, y: null, color: null }
+
+	const padding = options.padding ?? 0.2
+	const xValues = data.map((d) => d[fields.x])
+
+	return {
+		x: buildXScale(xValues, dimensions, padding),
+		y: buildYScale(data, fields.y, dimensions),
+		color: fields.color ? buildColorScale(data, fields.color) : null
+	}
+}
+
+/**
+ * Gets the origin coordinates for the axes
+ *
+ * @param {ChartScales} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @returns {Object} Origin coordinates
+ */
+export function getOrigin(scales, dimensions) {
+	return {
+		x: scales.y ? scales.y(0) : dimensions.innerHeight,
+		y: scales.x ? (scales.x.ticks ? scales.x(Math.max(0, min(scales.x.domain()))) : 0) : 0
+	}
+}

package/src/lib/brewing/stats.js

@@ -0,0 +1,74 @@
+import { sum, mean, min, max, quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+
+function sortedQuantile(values, p) {
+	return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Built-in reduction functions. Each receives an array of numeric values.
+ * @type {Record<string, (values: number[]) => number>}
+ */
+export const STAT_FNS = {
+	sum,
+	mean,
+	min,
+	max,
+	count: (values) => values.length
+}
+
+/**
+ * Computes box plot quartile statistics grouped by x (and optionally color).
+ * Output rows have { q1, median, q3, iqr_min, iqr_max } replacing the raw y values.
+ *
+ * @param {Object[]} data
+ * @param {{ x?: string, y?: string, color?: string }} channels
+ * @returns {Object[]}
+ */
+export function applyBoxStat(data, channels) {
+	const { x: xf, y: yf, color: cf } = channels
+	if (!xf || !yf) return data
+	const by = [xf, cf].filter(Boolean)
+	return dataset(data)
+		.groupBy(...by)
+		.summarize((row) => row[yf], {
+			q1: (v) => sortedQuantile(v, 0.25),
+			median: (v) => sortedQuantile(v, 0.5),
+			q3: (v) => sortedQuantile(v, 0.75),
+			iqr_min: (v) => {
+				const q1 = sortedQuantile(v, 0.25)
+				const q3 = sortedQuantile(v, 0.75)
+				return q1 - 1.5 * (q3 - q1)
+			},
+			iqr_max: (v) => {
+				const q1 = sortedQuantile(v, 0.25)
+				const q3 = sortedQuantile(v, 0.75)
+				return q3 + 1.5 * (q3 - q1)
+			}
+		})
+		.rollup()
+		.select()
+}
+
+/**
+ * Aggregates data by one or more grouping fields, reducing the value field
+ * using the given stat. Accepts a built-in name or a custom function.
+ *
+ * @param {Object[]} data
+ * @param {{ by: string[], value: string, stat: string|Function }} opts
+ * @returns {Object[]}
+ */
+function isIdentityOrEmpty(stat, by, value) {
+	return stat === 'identity' || by.length === 0 || value === null || value === undefined
+}
+
+export function applyAggregate(data, { by, value, stat }) {
+	if (isIdentityOrEmpty(stat, by, value)) return data
+	const fn = typeof stat === 'function' ? stat : STAT_FNS[stat]
+	if (fn === null || fn === undefined) return data
+	return dataset(data)
+		.groupBy(...by)
+		.summarize((row) => row[value], { [value]: fn })
+		.rollup()
+		.select()
+}

package/src/lib/brewing/symbols.js

@@ -0,0 +1,10 @@
+export const SYMBOL_ORDER = ['circle', 'square', 'triangle', 'diamond', 'plus', 'cross', 'star']
+
+/**
+ * Assigns shapes from SYMBOL_ORDER to an array of distinct values.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignSymbols(values) {
+	return new Map(values.map((v, i) => [v, SYMBOL_ORDER[i % SYMBOL_ORDER.length]]))
+}

package/src/lib/brewing/types.js

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

package/src/lib/chart.js

@@ -1,6 +1,10 @@
 import { min, max } from 'd3-array'
 import { scaleBand, scaleLinear, scaleTime } from 'd3-scale'
 
+function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
+}
+
 function getScale(domain, range, padding = 0) {
 	if (domain.some(isNaN)) {
 		return scaleBand().domain(domain).range(range).padding(padding)
@@ -42,7 +46,7 @@ class Chart {
 	// padding
 	// flipCoords = false
 
-	constructor(data, opts) {
+	#initFields(opts) {
 		this.width = Number(opts.width) || 2048
 		this.height = Number(opts.height) || 2048
 		this.flipCoords = opts.flipCoords || false
@@ -54,9 +58,7 @@ class Chart {
 		this.fill = opts.fill || opts.x
 		this.color = opts.color || opts.fill
 		this.shape = opts.shape || opts.fill
-
 		this.padding = opts.padding !== undefined ? Number(opts.padding) : 32
-
 		this.spacing =
 			Number(opts.spacing) >= 0 && Number(opts.spacing) <= 0.5 ? Number(opts.spacing) : 0
 		this.margin = {
@@ -65,6 +67,10 @@ class Chart {
 			right: Number(opts.margin?.right) || 0,
 			bottom: Number(opts.margin?.bottom) || 0
 		}
+		this.stat = opts.stat || 'identity'
+	}
+
+	#initDomain(data) {
 		this.domain = {
 			x: [...new Set(data.map((d) => d[this.x]))],
 			y: [...new Set(data.map((d) => d[this.y]))]
@@ -72,8 +78,9 @@ class Chart {
 		if (this.flipCoords) {
 			this.domain = { y: this.domain.x, x: this.domain.y }
 		}
-		this.stat = opts.stat || 'identity'
+	}
 
+	#initData(data) {
 		this.data = data.map((d) => ({
 			x: this.flipCoords ? d[this.y] : d[this.x],
 			y: this.flipCoords ? d[this.x] : d[this.y],
@@ -81,7 +88,12 @@ class Chart {
 			color: d[this.color]
 			// shape: d[this.shape]
 		}))
+	}
 
+	constructor(data, opts) {
+		this.#initFields(opts)
+		this.#initDomain(data)
+		this.#initData(data)
 		this.refresh()
 	}
 
@@ -204,10 +216,6 @@ class Chart {
 	}
 }
 
-function getOriginValue(scale) {
-	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
-}
-
 export function chart(data, aes) {
 	return new Chart(data, aes)
 }