@rokkit/chart 1.0.0-next.99 → 1.0.2

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

@@ -0,0 +1,201 @@
+import { SvelteSet } from 'svelte/reactivity'
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').BarData} BarData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+const DEFAULT_COLOR = '#4682b4'
+
+/**
+ * @param {Object} d - data item
+ * @param {{ fields: Object, scales: Object, dimensions: Object, defaultColor: string }} ctx
+ * @returns {BarData}
+ */
+function buildBar(d, ctx) {
+	const { fields, scales, dimensions, defaultColor } = ctx
+	const { x: xField, y: yField, color: colorField } = fields
+	const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10
+	const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2
+	return {
+		data: d,
+		x: barX,
+		y: scales.y(d[yField]),
+		width: barWidth,
+		height: dimensions.innerHeight - scales.y(d[yField]),
+		color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
+	}
+}
+
+/**
+ * @param {Object} options
+ * @param {Object} fields
+ * @param {Object} scales
+ * @returns {{ ctx: Object }|null} null if input is invalid
+ */
+function parseBarsInput(options, fields, scales) {
+	if (!scales.x || !scales.y) return null
+	const opts = options || {}
+	return {
+		fields,
+		scales,
+		dimensions: opts.dimensions,
+		defaultColor: opts.defaultColor !== undefined ? opts.defaultColor : DEFAULT_COLOR
+	}
+}
+
+/**
+ * Creates bar data for rendering
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.x - X-axis field
+ * @param {string} fields.y - Y-axis field
+ * @param {string} fields.color - Color field (optional)
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Function} scales.color - Color scale
+ * @param {Object} options - Options including dimensions and defaultColor
+ * @param {Object} options.dimensions - Chart dimensions
+ * @param {string} [options.defaultColor='#4682b4'] - Default color if no color scale
+ * @returns {BarData[]} Bar data for rendering
+ */
+export function createBars(data, fields, scales, options) {
+	if (!data || !data.length) return []
+	const ctx = parseBarsInput(options, fields, scales)
+	if (!ctx) return []
+	return data.map((d) => buildBar(d, ctx))
+}
+
+/**
+ * Filter bars based on a selection criteria
+ *
+ * @param {BarData[]} bars - Bar data array
+ * @param {Object} selection - Selection criteria
+ * @returns {BarData[]} Filtered bars
+ */
+export function filterBars(bars, selection) {
+	if (!selection) return bars
+
+	return bars.filter((bar) => {
+		for (const [key, value] of Object.entries(selection)) {
+			if (bar.data[key] !== value) return false
+		}
+		return true
+	})
+}
+
+/**
+ * @param {Object} item - data item
+ * @param {Object} scales - chart scales
+ * @param {{ yField: string, colorField: string, group: unknown, barX: number, barWidth: number, dimensions: Object }} ctx
+ * @returns {BarData}
+ */
+function buildGroupBar(item, scales, ctx) {
+	const { yField, colorField, group, barX, barWidth, dimensions } = ctx
+	return {
+		data: item,
+		group,
+		x: barX,
+		y: scales.y(item[yField]),
+		width: barWidth,
+		height: dimensions.innerHeight - scales.y(item[yField]),
+		color: scales.color ? scales.color(item[colorField]) : DEFAULT_COLOR
+	}
+}
+
+/**
+ * @param {Object} scales
+ * @param {{ groupItems: Array, groupField: string, group: unknown, i: number, yField: string, colorField: string, barWidth: number, padding: number, dimensions: Object, xPos: number }} ctx
+ * @returns {BarData|null}
+ */
+function buildOneGroupBar(scales, ctx) {
+	const {
+		groupItems,
+		groupField,
+		group,
+		i,
+		yField,
+		colorField,
+		barWidth,
+		padding,
+		dimensions,
+		xPos
+	} = ctx
+	const item = groupItems.find((d) => d[groupField] === group)
+	if (!item) return null
+	const barX = xPos + i * (barWidth + padding)
+	return buildGroupBar(item, scales, { yField, colorField, group, barX, barWidth, dimensions })
+}
+
+/**
+ * @param {Object} fields
+ * @param {Object} options
+ * @returns {{ xField: string, yField: string, groupField: string, colorField: string, dimensions: Object, padding: number }}
+ */
+function parseGroupedBarsConfig(fields, options) {
+	const opts = options || {}
+	return {
+		xField: fields.x,
+		yField: fields.y,
+		groupField: fields.group,
+		colorField: fields.color !== undefined ? fields.color : fields.group,
+		dimensions: opts.dimensions,
+		padding: opts.padding !== undefined ? opts.padding : 0.1
+	}
+}
+
+/**
+ * Creates a grouped bars layout
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {Object} scales - Chart scales
+ * @param {Object} options - Options including dimensions and padding
+ * @param {Object} options.dimensions - Chart dimensions
+ * @param {number} [options.padding=0.1] - Padding between bars in a group
+ * @returns {Object} Grouped bar data
+ */
+export function createGroupedBars(data, fields, scales, options) {
+	if (!data || !data.length || !fields.group) return { groups: [], bars: [] }
+
+	const { xField, yField, groupField, colorField, dimensions, padding } = parseGroupedBarsConfig(
+		fields,
+		options
+	)
+
+	const groups = [...new SvelteSet(data.map((d) => d[groupField]))]
+	const xValues = [...new SvelteSet(data.map((d) => d[xField]))]
+
+	const xScale = scales.x
+	const groupWidth = xScale.bandwidth ? xScale.bandwidth() : 20
+	const barWidth = (groupWidth - padding * (groups.length - 1)) / groups.length
+
+	const bars = []
+	xValues.forEach((xValue) => {
+		const groupItems = data.filter((d) => d[xField] === xValue)
+		const xPos = xScale(xValue)
+		groups.forEach((group, i) => {
+			const ctx = {
+				groupItems,
+				groupField,
+				group,
+				i,
+				yField,
+				colorField,
+				barWidth,
+				padding,
+				dimensions,
+				xPos
+			}
+			const bar = buildOneGroupBar(scales, ctx)
+			if (bar) bars.push(bar)
+		})
+	})
+
+	return { groups, bars }
+}

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

@@ -0,0 +1,277 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+import { distinct, assignColors } from './colors.js'
+import { assignPatterns, toPatternId, PATTERN_ORDER } from './patterns.js'
+import { assignSymbols } from './symbols.js'
+import { buildXScale, buildYScale, buildSizeScale } from './scales.js'
+import { buildBars } from './marks/bars.js'
+import { buildLines } from './marks/lines.js'
+import { buildAreas } from './marks/areas.js'
+import { buildArcs } from './marks/arcs.js'
+import { buildPoints } from './marks/points.js'
+
+const DEFAULT_MARGIN = { top: 20, right: 20, bottom: 40, left: 50 }
+
+/**
+ * Groups aesthetic channel mappings by field name, merging aesthetics that
+ * share the same field into one legend section.
+ *
+ * @param {{ fill?: string, color?: string, pattern?: string, symbol?: string }} channels
+ *   `fill` takes precedence over `color` for polygon charts (bars, areas, pie slices).
+ * @param {Map<unknown, {fill:string, stroke:string}>} colorMap
+ * @param {Map<unknown, string>} patternMap
+ * @param {Map<unknown, string>} symbolMap
+ * @returns {{ field: string, items: { label: string, fill: string|null, stroke: string|null, patternId: string|null, shape: string|null }[] }[]}
+ */
+function addAesthetic(byField, field, aesthetic, keys) {
+	if (byField.has(field)) {
+		byField.get(field).aesthetics.push(aesthetic)
+	} else {
+		byField.set(field, { aesthetics: [aesthetic], keys })
+	}
+}
+
+function buildLegendItem(key, aesthetics, colorMap, patternMap, symbolMap) {
+	const hasColor = aesthetics.includes('color')
+	return {
+		label: String(key),
+		fill: hasColor ? (colorMap.get(key)?.fill ?? null) : null,
+		stroke: hasColor ? (colorMap.get(key)?.stroke ?? null) : null,
+		patternId: aesthetics.includes('pattern') && patternMap.has(key) ? toPatternId(key) : null,
+		shape: aesthetics.includes('symbol') ? (symbolMap.get(key) ?? 'circle') : null
+	}
+}
+
+export function buildLegendGroups(channels, colorMap, patternMap, symbolMap) {
+	const cf = channels.fill ?? channels.color
+	const { pattern: pf, symbol: sf } = channels
+	const byField = new SvelteMap()
+
+	if (cf) byField.set(cf, { aesthetics: ['color'], keys: [...colorMap.keys()] })
+	if (pf) addAesthetic(byField, pf, 'pattern', [...patternMap.keys()])
+	if (sf) addAesthetic(byField, sf, 'symbol', [...symbolMap.keys()])
+
+	return [...byField.entries()]
+		.map(([field, { aesthetics, keys }]) => ({
+			field,
+			items: keys
+				.filter((k) => k !== null && k !== undefined)
+				.map((key) => buildLegendItem(key, aesthetics, colorMap, patternMap, symbolMap))
+		}))
+		.filter((group) => group.items.length > 0)
+}
+
+export class ChartBrewer {
+	#rawData = $state([])
+	#channels = $state({})
+	#width = $state(600)
+	#height = $state(400)
+	#mode = $state('light')
+	#margin = $state(DEFAULT_MARGIN)
+	#layers = $state([])
+	#curve = $state(/** @type {'linear'|'smooth'|'step'|undefined} */ (undefined))
+	#stat = $state('identity')
+
+	/**
+	 * Override in subclasses to apply stat aggregation.
+	 * @param {Object[]} data
+	 * @param {Object} channels
+	 * @param {string|Function} stat
+	 * @returns {Object[]}
+	 */
+	transform(data, _channels, _stat) {
+		return data
+	}
+
+	/** Aggregated data — all derived marks read this, not #rawData */
+	processedData = $derived(this.transform(this.#rawData, this.#channels, this.#stat))
+
+	/** Exposes channels to subclasses for use in their own $derived properties */
+	get channels() {
+		return this.#channels
+	}
+
+	// Maps are built from rawData so the legend always reflects the full set of
+	// original values — independent of whichever stat aggregation is applied.
+	// e.g. pattern=quarter with stat=sum still shows all 8 quarters in the legend.
+
+	/** @type {Map<unknown, {fill:string,stroke:string}>} */
+	colorMap = $derived(
+		(this.#channels.fill ?? this.#channels.color)
+			? assignColors(
+					distinct(this.#rawData, this.#channels.fill ?? this.#channels.color),
+					this.#mode
+				)
+			: new SvelteMap()
+	)
+
+	/** @type {Map<unknown, string>} */
+	patternMap = $derived(
+		this.#channels.pattern
+			? assignPatterns(distinct(this.#rawData, this.#channels.pattern))
+			: new SvelteMap()
+	)
+
+	/**
+	 * Unified pattern defs for ChartPatternDefs.
+	 * When fill and pattern map the same field, pattern key = color key (simple case).
+	 * When they differ, each unique (fillKey, patternKey) pair gets its own pattern def
+	 * so bars/areas can have distinct colors per region AND distinct textures per category.
+	 * @type {Array<{ id: string, name: string, fill: string, stroke: string }>}
+	 */
+	patternDefs = $derived(
+		(() => {
+			const pf = this.#channels.pattern
+			const ff = this.#channels.fill ?? this.#channels.color
+			if (!pf || this.patternMap.size === 0) return []
+			if (!ff || pf === ff) {
+				// Same field: pattern key = fill key — simple 1:1 lookup
+				return Array.from(this.patternMap.entries()).map(([key, name]) => {
+					const color = this.colorMap.get(key) ?? { fill: '#ddd', stroke: '#666' }
+					return { id: toPatternId(key), name, fill: color.fill, stroke: color.stroke }
+				})
+			}
+			// Different fields: need two sets of defs in the SVG:
+			// 1. Simple defs (neutral background) — referenced by legend swatches via toPatternId(patternKey)
+			// 2. Composite defs (fill-colored background) — referenced by bars via toPatternId(fillKey::patternKey)
+			const defs = []
+			for (const [pk, name] of this.patternMap.entries()) {
+				defs.push({ id: toPatternId(pk), name, fill: '#ddd', stroke: '#666' })
+			}
+			const seenComposite = new SvelteSet()
+			for (const d of this.processedData) {
+				const fk = d[ff]
+				const pk = d[pf]
+				if (pk === null || pk === undefined) continue
+				const compositeKey = `${fk}::${pk}`
+				if (seenComposite.has(compositeKey)) continue
+				seenComposite.add(compositeKey)
+				const name = this.patternMap.get(pk) ?? PATTERN_ORDER[0]
+				const color = this.colorMap.get(fk) ?? { fill: '#ddd', stroke: '#666' }
+				defs.push({ id: toPatternId(compositeKey), name, fill: color.fill, stroke: color.stroke })
+			}
+			return defs
+		})()
+	)
+
+	/** @type {Map<unknown, string>} */
+	symbolMap = $derived(
+		this.#channels.symbol
+			? assignSymbols(distinct(this.#rawData, this.#channels.symbol))
+			: new SvelteMap()
+	)
+
+	get innerWidth() {
+		return this.#width - this.#margin.left - this.#margin.right
+	}
+	get innerHeight() {
+		return this.#height - this.#margin.top - this.#margin.bottom
+	}
+
+	xScale = $derived(
+		this.#channels.x ? buildXScale(this.processedData, this.#channels.x, this.innerWidth) : null
+	)
+
+	yScale = $derived(
+		this.#channels.y
+			? buildYScale(this.processedData, this.#channels.y, this.innerHeight, this.#layers)
+			: null
+	)
+
+	sizeScale = $derived(
+		this.#channels.size ? buildSizeScale(this.processedData, this.#channels.size) : null
+	)
+
+	bars = $derived(
+		this.xScale && this.yScale
+			? buildBars(
+					this.processedData,
+					this.#channels,
+					this.xScale,
+					this.yScale,
+					this.colorMap,
+					this.patternMap
+				)
+			: []
+	)
+
+	lines = $derived(
+		this.xScale && this.yScale
+			? buildLines(
+					this.processedData,
+					this.#channels,
+					this.xScale,
+					this.yScale,
+					this.colorMap,
+					this.#curve
+				)
+			: []
+	)
+
+	areas = $derived(
+		this.xScale && this.yScale
+			? buildAreas(
+					this.processedData,
+					this.#channels,
+					this.xScale,
+					this.yScale,
+					this.colorMap,
+					this.#curve,
+					this.patternMap
+				)
+			: []
+	)
+
+	arcs = $derived(
+		this.#channels.y
+			? buildArcs(this.processedData, this.#channels, this.colorMap, this.#width, this.#height)
+			: []
+	)
+
+	points = $derived(
+		this.xScale && this.yScale
+			? buildPoints(
+					this.processedData,
+					this.#channels,
+					this.xScale,
+					this.yScale,
+					this.colorMap,
+					this.sizeScale,
+					this.symbolMap
+				)
+			: []
+	)
+
+	legendGroups = $derived(
+		buildLegendGroups(this.#channels, this.colorMap, this.patternMap, this.symbolMap)
+	)
+
+	get margin() {
+		return this.#margin
+	}
+	get width() {
+		return this.#width
+	}
+	get height() {
+		return this.#height
+	}
+	get mode() {
+		return this.#mode
+	}
+
+	/**
+	 * @param {{ data?: Object[], channels?: Object, width?: number, height?: number, mode?: string, margin?: Object, layers?: Object[], curve?: string, stat?: string|Function }} opts
+	 *   Supported channel keys: `x`, `y`, `fill`, `color`, `pattern`, `symbol`, `size`, `label`.
+	 *   `frame` is reserved for future animation use (no-op).
+	 */
+	update(opts = {}) {
+		if (opts.data !== undefined) this.#rawData = opts.data
+		if (opts.channels !== undefined) this.#channels = opts.channels
+		if (opts.width !== undefined) this.#width = opts.width
+		if (opts.height !== undefined) this.#height = opts.height
+		if (opts.mode !== undefined) this.#mode = opts.mode
+		if (opts.margin !== undefined) this.#margin = { ...DEFAULT_MARGIN, ...opts.margin }
+		if (opts.layers !== undefined) this.#layers = opts.layers
+		if (opts.curve !== undefined) this.#curve = opts.curve
+		if (opts.stat !== undefined) this.#stat = opts.stat
+	}
+}

package/src/lib/brewing/colors.js

@@ -0,0 +1,157 @@
+import { scaleSequential, scaleDiverging } from 'd3-scale'
+import { extent } from 'd3-array'
+import * as chromatic from 'd3-scale-chromatic'
+import masterPalette from '../palette.json'
+import { defaultPreset } from '../preset.js'
+
+/**
+ * Returns true if the value looks like a CSS color literal (not a field name).
+ * Supports hex (#rgb, #rrggbb, #rrggbbaa), and functional notations (rgb, hsl, oklch, etc.).
+ * @param {unknown} value
+ * @returns {boolean}
+ */
+export function isLiteralColor(value) {
+	if (!value || typeof value !== 'string') return false
+	if (/^#([0-9a-fA-F]{3,8})$/.test(value)) return true
+	if (/^(rgb|rgba|hsl|hsla|oklch|oklab|hwb|lab|lch|color)\s*\(/i.test(value)) return true
+	return false
+}
+
+/**
+ * Extracts distinct values for a given field from the data array.
+ * @param {Object[]} data
+ * @param {string|null} field
+ * @returns {unknown[]}
+ */
+export function distinct(data, field) {
+	if (!field) return []
+	return [...new Set(data.map((d) => d[field]))].filter((v) => v !== null && v !== undefined)
+}
+
+/**
+ * Assigns palette colors to an array of distinct values.
+ * @param {unknown[]} values
+ * @param {'light'|'dark'} mode
+ * @param {typeof defaultPreset} preset
+ * @returns {Map<unknown, {fill: string, stroke: string}>}
+ */
+export function assignColors(values, mode = 'light', preset = defaultPreset) {
+	const { colors, shades } = preset
+	const { fill, stroke } = shades[mode]
+	return new Map(
+		values.map((v, i) => {
+			const colorName = colors[i % colors.length]
+			const group = masterPalette[colorName]
+			return [
+				v,
+				{
+					fill: group?.[fill] ?? '#888',
+					stroke: group?.[stroke] ?? '#444'
+				}
+			]
+		})
+	)
+}
+
+/**
+ * Named sequential color schemes from d3-scale-chromatic.
+ * Keys are lowercase user-facing names.
+ * @type {Record<string, (t: number) => string>}
+ */
+const SEQUENTIAL_SCHEMES = {
+	blues: chromatic.interpolateBlues,
+	greens: chromatic.interpolateGreens,
+	oranges: chromatic.interpolateOranges,
+	purples: chromatic.interpolatePurples,
+	reds: chromatic.interpolateReds,
+	greys: chromatic.interpolateGreys,
+	bugn: chromatic.interpolateBuGn,
+	bupu: chromatic.interpolateBuPu,
+	gnbu: chromatic.interpolateGnBu,
+	orrd: chromatic.interpolateOrRd,
+	pubu: chromatic.interpolatePuBu,
+	purd: chromatic.interpolatePuRd,
+	rdpu: chromatic.interpolateRdPu,
+	ylgn: chromatic.interpolateYlGn,
+	ylgnbu: chromatic.interpolateYlGnBu,
+	ylorbr: chromatic.interpolateYlOrBr,
+	ylorrd: chromatic.interpolateYlOrRd,
+	viridis: chromatic.interpolateViridis,
+	inferno: chromatic.interpolateInferno,
+	magma: chromatic.interpolateMagma,
+	plasma: chromatic.interpolatePlasma,
+	cividis: chromatic.interpolateCividis,
+	turbo: chromatic.interpolateTurbo,
+	warm: chromatic.interpolateWarm,
+	cool: chromatic.interpolateCool
+}
+
+/**
+ * Named diverging color schemes from d3-scale-chromatic.
+ * @type {Record<string, (t: number) => string>}
+ */
+const DIVERGING_SCHEMES = {
+	rdbu: chromatic.interpolateRdBu,
+	rdylbu: chromatic.interpolateRdYlBu,
+	rdylgn: chromatic.interpolateRdYlGn,
+	brbg: chromatic.interpolateBrBG,
+	piyg: chromatic.interpolatePiYG,
+	prgn: chromatic.interpolatePRGn,
+	puor: chromatic.interpolatePuOr,
+	rdgy: chromatic.interpolateRdGy,
+	spectral: chromatic.interpolateSpectral
+}
+
+/**
+ * Resolves a color scheme name to an interpolation function.
+ * Falls back to the first scheme in the given map if the name is unknown.
+ * @param {string|undefined} name
+ * @param {Record<string, (t: number) => string>} schemes
+ * @returns {(t: number) => string}
+ */
+function resolveScheme(name, schemes) {
+	if (!name) return Object.values(schemes)[0]
+	const key = name.toLowerCase().replace(/[-_\s]/g, '')
+	return schemes[key] ?? Object.values(schemes)[0]
+}
+
+/**
+ * Builds a sequential color scale for continuous numeric data.
+ * Maps data values to a gradient from light to dark.
+ *
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {Object} [opts]
+ * @param {string} [opts.colorScheme] - Named scheme (e.g. 'blues', 'viridis')
+ * @param {[number, number]} [opts.colorDomain] - Explicit [min, max]
+ * @returns {{ scale: (v: number) => string, domain: [number, number], type: 'sequential' }}
+ */
+export function buildSequentialScale(data, field, opts = {}) {
+	const values = data.map((d) => d[field]).filter((v) => v !== null && v !== undefined).map(Number)
+	const domain = opts.colorDomain ?? extent(values)
+	const interpolator = resolveScheme(opts.colorScheme, SEQUENTIAL_SCHEMES)
+	const scale = scaleSequential(interpolator).domain(domain)
+	return { scale, domain, type: 'sequential' }
+}
+
+/**
+ * Builds a diverging color scale for numeric data centered on a midpoint.
+ * Maps data values to a gradient diverging from a center color.
+ *
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {Object} [opts]
+ * @param {string} [opts.colorScheme] - Named scheme (e.g. 'rdbu', 'spectral')
+ * @param {number} [opts.colorMidpoint] - Center value (default 0)
+ * @param {[number, number, number]} [opts.colorDomain] - Explicit [min, mid, max]
+ * @returns {{ scale: (v: number) => string, domain: [number, number, number], type: 'diverging' }}
+ */
+export function buildDivergingScale(data, field, opts = {}) {
+	const values = data.map((d) => d[field]).filter((v) => v !== null && v !== undefined).map(Number)
+	const [min, max] = extent(values)
+	const mid = opts.colorMidpoint ?? 0
+	const domain = opts.colorDomain ?? [min ?? 0, mid, max ?? 0]
+	const interpolator = resolveScheme(opts.colorScheme, DIVERGING_SCHEMES)
+	const scale = scaleDiverging(interpolator).domain(domain)
+	return { scale, domain, type: 'diverging' }
+}

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

@@ -0,0 +1,56 @@
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').ChartMargin} ChartMargin
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Default chart margin
+ * @type {ChartMargin}
+ */
+export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 }
+
+/**
+ * Creates chart dimensions based on width, height and margins
+ *
+ * @param {number} width - Total chart width
+ * @param {number} height - Total chart height
+ * @param {ChartMargin} margin - Chart margins
+ * @returns {ChartDimensions} Chart dimensions
+ */
+export function createDimensions(width = 600, height = 400, margin = DEFAULT_MARGIN) {
+	return {
+		width,
+		height,
+		margin: { ...margin },
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
+}
+
+/**
+ * Updates existing dimensions with new values
+ *
+ * @param {ChartDimensions} dimensions - Current dimensions
+ * @param {Object} updates - Values to update
+ * @param {number} [updates.width] - New width
+ * @param {number} [updates.height] - New height
+ * @param {ChartMargin} [updates.margin] - New margin
+ * @returns {ChartDimensions} Updated dimensions
+ */
+export function updateDimensions(dimensions, updates = {}) {
+	const newDimensions = { ...dimensions }
+
+	if (updates.width !== undefined) newDimensions.width = updates.width
+	if (updates.height !== undefined) newDimensions.height = updates.height
+	if (updates.margin !== undefined) newDimensions.margin = { ...updates.margin }
+
+	// Recalculate inner dimensions
+	newDimensions.innerWidth =
+		newDimensions.width - newDimensions.margin.left - newDimensions.margin.right
+	newDimensions.innerHeight =
+		newDimensions.height - newDimensions.margin.top - newDimensions.margin.bottom
+
+	return newDimensions
+}