@rokkit/chart 1.0.0-next.16 → 1.0.0-next.160

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

@@ -0,0 +1,221 @@
+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)
+	} else if (domain[0] instanceof Date) {
+		return scaleTime()
+			.domain([min(domain), max(domain)])
+			.range(range)
+			.nice()
+	}
+
+	return scaleLinear()
+		.domain([min([0, ...domain]), max([0, ...domain])])
+		.range(range)
+		.nice()
+}
+
+class Chart {
+	// data = []
+	// width = 512
+	// height = 512
+	// origin = { x: 0, y: 0 }
+	// range = {
+	// 	x: [0, this.width],
+	// 	y: [this.height, 0]
+	// }
+	// x
+	// y
+	// stat = 'identity'
+	// scale
+	// fill
+	// color
+	// value
+	// shape
+	// valueFormat
+	// valueLabel
+	// domain
+	// margin
+	// spacing
+	// padding
+	// flipCoords = false
+
+	#initFields(opts) {
+		this.width = Number(opts.width) || 2048
+		this.height = Number(opts.height) || 2048
+		this.flipCoords = opts.flipCoords || false
+		this.x = opts.x
+		this.y = opts.y
+		this.value = opts.value || opts.y
+		this.valueLabel = opts.valueLabel || this.value
+		this.valueFormat = opts.valueFormat || ((d) => d)
+		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 = {
+			top: Number(opts.margin?.top) || 0,
+			left: Number(opts.margin?.left) || 0,
+			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]))]
+		}
+		if (this.flipCoords) {
+			this.domain = { y: this.domain.x, x: this.domain.y }
+		}
+	}
+
+	#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],
+			// fill: d[this.fill],
+			color: d[this.color]
+			// shape: d[this.shape]
+		}))
+	}
+
+	constructor(data, opts) {
+		this.#initFields(opts)
+		this.#initDomain(data)
+		this.#initData(data)
+		this.refresh()
+	}
+
+	padding(value) {
+		this.padding = value
+		return this.refresh()
+	}
+
+	margin(value) {
+		this.margin = value
+		return this.refresh()
+	}
+
+	refresh() {
+		this.range = {
+			x: [this.margin.left + this.padding, this.width - this.margin.right - this.padding],
+			y: [this.height - this.padding - this.margin.bottom, this.margin.top + this.padding]
+		}
+
+		const scale = {
+			x: getScale(this.domain.x, this.range.x, this.spacing),
+			y: getScale(this.domain.y, this.range.y, this.spacing)
+		}
+
+		// scale['value'] = this.value === this.x ? scale.x : scale.y
+
+		this.origin = {
+			x: getOriginValue(scale.x),
+			y: getOriginValue(scale.y)
+		}
+
+		this.scale = scale
+
+		return this
+	}
+
+	// get scale() {
+	// 	return this.scale
+	// }
+	// get origin() {
+	// 	return this.origin
+	// }
+	// get margin() {
+	// 	return this.margin
+	// }
+	// get range() {
+	// 	const [x1, x2] = this.scale.x.range()
+	// 	const [y1, y2] = this.scale.y.range()
+
+	// 	return { x1, y1, x2, y2 }
+	// }
+	// get data() {
+	// 	// aggregate data group by x,y,fill,shape, color
+	// 	// stat = [min, max, avg, std, q1, q3, median, sum, count, box, all]
+
+	// 	return this.data
+	// }
+	// get width() {
+	// 	return this.width
+	// }
+	// get height() {
+	// 	return this.height
+	// }
+	// set width(value) {
+	// 	this.width = value
+	// }
+	// set height(value) {
+	// 	this.height = value
+	// }
+	// get domain() {
+	// 	return this.domain
+	// }
+	// get flipCoords() {
+	// 	return this.flipCoords
+	// }
+	aggregate(value, stat) {
+		this.value = value
+		this.stat = stat
+
+		// this.data = nest(this.data)
+	}
+
+	ticks(axis, count, fontSize = 8) {
+		const scale = this.scale[axis]
+		const [minRange, maxRange] = scale.range()
+		let ticks = []
+		let offset = 0
+
+		count = count || Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 8 : 8)))
+
+		if (scale.ticks) {
+			ticks = scale.ticks(Math.round(count))
+		} else {
+			offset = scale.bandwidth() / 2
+			count = Math.min(Math.round(count), scale.domain().length)
+
+			ticks = scale.domain()
+			if (count < scale.domain().length) {
+				const diff = scale.domain().length - count
+				ticks = ticks.filter((d, i) => i % diff === 0)
+			}
+		}
+
+		ticks = ticks
+			.map((t) => ({
+				label: t,
+				pos: scale(t)
+			}))
+			.map(({ label, pos }) => ({
+				label,
+				offset: {
+					x: axis === 'x' ? offset : 0,
+					y: axis === 'y' ? offset : 0
+				},
+				x: axis === 'x' ? pos : this.origin.x,
+				y: axis === 'y' ? pos : this.origin.y
+			}))
+
+		return ticks
+	}
+}
+
+export function chart(data, aes) {
+	return new Chart(data, aes)
+}

package/src/lib/context.js

@@ -0,0 +1,131 @@
+import { getContext, setContext } from 'svelte'
+import { writable, derived } from 'svelte/store'
+import * as d3 from 'd3'
+
+const CHART_CONTEXT = 'chart-context'
+
+const DEFAULT_OPTIONS = {
+	width: 600,
+	height: 400,
+	margin: { top: 20, right: 30, bottom: 40, left: 50 },
+	padding: { top: 0, right: 0, bottom: 0, left: 0 },
+	responsive: true,
+	animationDuration: 300,
+	data: []
+}
+
+/**
+ * @param {Object} config
+ * @returns {import('svelte/store').Writable}
+ */
+function createDimensionsStore(config) {
+	return writable({
+		width: config.width,
+		height: config.height,
+		margin: { ...config.margin },
+		padding: { ...config.padding }
+	})
+}
+
+/**
+ * @param {import('svelte/store').Writable} dimensions
+ * @returns {import('svelte/store').Readable}
+ */
+function createInnerDimensions(dimensions) {
+	return derived(dimensions, ($d) => ({
+		width: $d.width - $d.margin.left - $d.margin.right - $d.padding.left - $d.padding.right,
+		height: $d.height - $d.margin.top - $d.margin.bottom - $d.padding.top - $d.padding.bottom
+	}))
+}
+
+/**
+ * @param {import('svelte/store').Writable} plots
+ * @returns {(plot: unknown) => () => void}
+ */
+function makeAddPlot(plots) {
+	return function addPlot(plot) {
+		plots.update((currentPlots) => [...currentPlots, plot])
+		return () => {
+			plots.update((currentPlots) => currentPlots.filter((p) => p !== plot))
+		}
+	}
+}
+
+/**
+ * @param {import('svelte/store').Writable} data
+ * @param {import('svelte/store').Readable} innerDimensions
+ * @returns {(xKey: string, yKey: string, colorKey?: string|null) => import('svelte/store').Readable}
+ */
+function makeUpdateScales(data, innerDimensions) {
+	return function updateScales(xKey, yKey, colorKey = null) {
+		return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
+			if (!$data || $data.length === 0) return null
+
+			const xScale = d3
+				.scaleBand()
+				.domain($data.map((d) => d[xKey]))
+				.range([0, $innerDimensions.width])
+				.padding(0.2)
+
+			const yScale = d3
+				.scaleLinear()
+				.domain([0, d3.max($data, (d) => d[yKey])])
+				.nice()
+				.range([$innerDimensions.height, 0])
+
+			let colorScale = null
+			if (colorKey) {
+				const uniqueCategories = [...new Set($data.map((d) => d[colorKey]))]
+				colorScale = d3.scaleOrdinal().domain(uniqueCategories).range(d3.schemeCategory10)
+			}
+
+			return { xScale, yScale, colorScale }
+		})
+	}
+}
+
+/**
+ * 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 = {}) {
+	const config = { ...DEFAULT_OPTIONS, ...options }
+
+	const dimensions = createDimensionsStore(config)
+	const data = writable(config.data)
+	const scales = writable({})
+	const innerDimensions = createInnerDimensions(dimensions)
+	const plots = writable([])
+	const axes = writable({ x: null, y: null })
+	const legend = writable({ enabled: false, items: [] })
+
+	const addPlot = makeAddPlot(plots)
+	const updateScales = makeUpdateScales(data, innerDimensions)
+
+	const chartContext = {
+		dimensions,
+		innerDimensions,
+		data,
+		scales,
+		plots,
+		axes,
+		legend,
+		addPlot,
+		updateScales
+	}
+
+	setContext(CHART_CONTEXT, chartContext)
+
+	return chartContext
+}
+
+/**
+ * Gets chart context provided by parent component
+ *
+ * @returns {Object} Chart context
+ */
+export function getChartContext() {
+	return getContext(CHART_CONTEXT)
+}