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

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

@@ -0,0 +1,270 @@
+// import { scaleBand } from 'd3-scale'
+
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').TickData} TickData
+ * @typedef {import('./types').AxisData} AxisData
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+const IDENTITY = (v) => v
+
+/**
+ * @param {Object} xScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function xTicksFromContinuous(xScale, tickCount) {
+	return tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks()
+}
+
+/**
+ * @param {Array} domain
+ * @param {number} tickCount
+ * @returns {Array}
+ */
+function downsampleDomain(domain, tickCount) {
+	const step = Math.max(1, Math.floor(domain.length / tickCount))
+	return domain.filter((_, i) => i % step === 0)
+}
+
+/**
+ * @param {Object} xScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function xTicksFromBand(xScale, tickCount) {
+	const domain = xScale.domain()
+	if (tickCount === null || tickCount >= domain.length) return domain
+	return downsampleDomain(domain, tickCount)
+}
+
+/**
+ * @param {Object} xScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function resolveXTicks(xScale, tickCount) {
+	return xScale.ticks ? xTicksFromContinuous(xScale, tickCount) : xTicksFromBand(xScale, tickCount)
+}
+
+/**
+ * @param {Object} xScale
+ * @param {unknown} value
+ * @returns {number}
+ */
+function xPosition(xScale, value) {
+	return xScale.bandwidth ? xScale(value) + xScale.bandwidth() / 2 : xScale(value)
+}
+
+/**
+ * @param {Object} scale
+ * @param {Array} values
+ * @param {Function} formatter
+ * @param {(scale: Object, v: unknown) => number} getPosition
+ * @returns {Array}
+ */
+function mapTicks(scale, values, formatter, getPosition) {
+	return values.map((value) => ({
+		value,
+		position: getPosition(scale, value),
+		formattedValue: formatter(value)
+	}))
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ tickCount: number|null, formatter: Function, label: string }}
+ */
+function parseAxisOptions(options) {
+	const opts = options || {}
+	return {
+		tickCount: opts.tickCount !== undefined ? opts.tickCount : null,
+		formatter: opts.tickFormat ? opts.tickFormat : IDENTITY,
+		label: opts.label ? opts.label : ''
+	}
+}
+
+/**
+ * Creates x-axis tick data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createXAxis(scales, dimensions, options) {
+	if (!scales.x) return { ticks: [] }
+	const { tickCount, formatter, label } = parseAxisOptions(options)
+	const ticks = mapTicks(scales.x, resolveXTicks(scales.x, tickCount), formatter, xPosition)
+	return {
+		ticks,
+		label,
+		transform: `translate(0, ${dimensions.innerHeight})`,
+		labelTransform: `translate(${dimensions.innerWidth / 2}, 35)`
+	}
+}
+
+/**
+ * @param {Object} yScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function yTicksFromDomain(yScale, tickCount) {
+	const domain = yScale.domain()
+	if (tickCount === null || domain.length <= tickCount) return domain
+	return downsampleDomain(domain, tickCount)
+}
+
+/**
+ * @param {Object} yScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function resolveYTicks(yScale, tickCount) {
+	if (yScale.ticks) return tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks()
+	if (yScale.domain) return yTicksFromDomain(yScale, tickCount)
+	return []
+}
+
+/**
+ * @param {Object} scale
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+function yPositionPassthrough(scale, value) {
+	return scale(value)
+}
+
+/**
+ * Creates y-axis tick data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createYAxis(scales, dimensions, options) {
+	if (!scales.y) return { ticks: [] }
+	const { tickCount, formatter, label } = parseAxisOptions(options)
+	const ticks = mapTicks(
+		scales.y,
+		resolveYTicks(scales.y, tickCount),
+		formatter,
+		yPositionPassthrough
+	)
+	return {
+		ticks,
+		label,
+		transform: 'translate(0, 0)',
+		labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
+	}
+}
+
+/**
+ * @param {Object} scales
+ * @param {Object} dimensions
+ * @param {number|null} xTickCount
+ * @returns {Array}
+ */
+function buildXLines(scales, dimensions, xTickCount) {
+	return createXAxis(scales, dimensions, { tickCount: xTickCount }).ticks.map((tick) => ({
+		x1: tick.position,
+		y1: 0,
+		x2: tick.position,
+		y2: dimensions.innerHeight
+	}))
+}
+
+/**
+ * @param {Object} scales
+ * @param {Object} dimensions
+ * @param {number|null} yTickCount
+ * @returns {Array}
+ */
+function buildYLines(scales, dimensions, yTickCount) {
+	return createYAxis(scales, dimensions, { tickCount: yTickCount }).ticks.map((tick) => ({
+		x1: 0,
+		y1: tick.position,
+		x2: dimensions.innerWidth,
+		y2: tick.position
+	}))
+}
+
+/**
+ * @param {Object} opts
+ * @returns {{ direction: string, xTickCount: number|null, yTickCount: number|null }}
+ */
+function parseGridOptions(opts) {
+	const o = opts || {}
+	return {
+		direction: o.direction !== undefined ? o.direction : 'both',
+		xTickCount: o.xTickCount !== undefined ? o.xTickCount : null,
+		yTickCount: o.yTickCount !== undefined ? o.yTickCount : null
+	}
+}
+
+/**
+ * @param {string} direction
+ * @returns {{ showX: boolean, showY: boolean }}
+ */
+function gridDirections(direction) {
+	return {
+		showX: direction === 'x' || direction === 'both',
+		showY: direction === 'y' || direction === 'both'
+	}
+}
+
+/**
+ * Creates grid line data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Grid options
+ * @param {string} [options.direction='both'] - Grid direction ('x', 'y', or 'both')
+ * @param {number} [options.xTickCount] - Number of x-axis ticks
+ * @param {number} [options.yTickCount] - Number of y-axis ticks
+ * @returns {Object} Grid rendering data
+ */
+export function createGrid(scales, dimensions, options) {
+	const { direction, xTickCount, yTickCount } = parseGridOptions(options)
+	const { showX, showY } = gridDirections(direction)
+	return {
+		xLines: showX && scales.x ? buildXLines(scales, dimensions, xTickCount) : [],
+		yLines: showY && scales.y ? buildYLines(scales, dimensions, yTickCount) : []
+	}
+}
+
+/**
+ * Creates DOM attributes for a tick element
+ *
+ * @param {TickData} tick - Tick data
+ * @param {string} axis - Axis type ('x' or 'y')
+ * @returns {Object} Attributes for the tick
+ */
+export function createTickAttributes(tick, axis) {
+	if (axis === 'x') {
+		return {
+			'data-plot-tick': 'major',
+			transform: `translate(${tick.position}, 0)`,
+			'text-anchor': 'middle'
+		}
+	} else {
+		return {
+			'data-plot-tick': 'major',
+			transform: `translate(0, ${tick.position})`,
+			'text-anchor': 'end',
+			'dominant-baseline': 'middle'
+		}
+	}
+}

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,229 @@
+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 }[] }[]}
+ */
+export function buildLegendGroups(channels, colorMap, patternMap, symbolMap) {
+  const cf = channels.fill ?? channels.color
+  const { pattern: pf, symbol: sf } = channels
+  const byField = new Map()
+
+  if (cf) {
+    byField.set(cf, { aesthetics: ['color'], keys: [...colorMap.keys()] })
+  }
+  if (pf) {
+    if (byField.has(pf)) {
+      byField.get(pf).aesthetics.push('pattern')
+    } else {
+      byField.set(pf, { aesthetics: ['pattern'], keys: [...patternMap.keys()] })
+    }
+  }
+  if (sf) {
+    if (byField.has(sf)) {
+      byField.get(sf).aesthetics.push('symbol')
+    } else {
+      byField.set(sf, { aesthetics: ['symbol'], keys: [...symbolMap.keys()] })
+    }
+  }
+
+  return [...byField.entries()].map(([field, { aesthetics, keys }]) => ({
+    field,
+    items: keys.filter((k) => k !== null && k !== undefined).map((key) => ({
+      label: String(key),
+      fill: aesthetics.includes('color') ? (colorMap.get(key)?.fill ?? null) : null,
+      stroke: aesthetics.includes('color') ? (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
+    }))
+  })).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 Map()
+  )
+
+  /** @type {Map<unknown, string>} */
+  patternMap = $derived(
+    this.#channels.pattern
+      ? assignPatterns(distinct(this.#rawData, this.#channels.pattern))
+      : new Map()
+  )
+
+  /**
+   * 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 Set()
+    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 Map()
+  )
+
+  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
+  }
+}