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

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

@@ -0,0 +1,137 @@
+import { SvelteSet } from 'svelte/reactivity'
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').LegendItem} LegendItem
+ * @typedef {import('./types').LegendData} LegendData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+const LEGEND_DEFAULTS = { title: '', align: 'right', shape: 'rect', markerSize: 10 }
+
+/**
+ * Compute the x-position for legend alignment
+ * @param {string} align
+ * @param {number} innerWidth
+ * @param {number} approximateWidth
+ * @returns {number}
+ */
+function legendX(align, innerWidth, approximateWidth) {
+	if (align === 'right') return innerWidth - approximateWidth
+	if (align === 'center') return (innerWidth - approximateWidth) / 2
+	return 0
+}
+
+/**
+ * @param {Array} colorValues
+ * @param {Function} colorScale
+ * @param {{ shape: string, markerSize: number, titleOffset: number }} style
+ * @returns {LegendItem[]}
+ */
+function buildLegendItems(colorValues, colorScale, style) {
+	const { shape, markerSize, titleOffset } = style
+	return colorValues.map((value, index) => ({
+		value,
+		color: colorScale(value),
+		y: index * (markerSize + 5) + titleOffset,
+		shape,
+		markerSize
+	}))
+}
+
+/**
+ * @param {Array} colorValues
+ * @param {number} markerSize
+ * @returns {number}
+ */
+function approximateLegendWidth(colorValues, markerSize) {
+	return Math.max(...colorValues.map((v) => v.toString().length)) * 8 + markerSize + 10
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ dimensions: Object, title: string, align: string, shape: string, markerSize: number }}
+ */
+function parseLegendOptions(options) {
+	const merged = Object.assign({}, LEGEND_DEFAULTS, options || {})
+	return {
+		dimensions: merged.dimensions,
+		title: merged.title,
+		align: merged.align,
+		shape: merged.shape,
+		markerSize: merged.markerSize
+	}
+}
+
+/**
+ * @param {Object|undefined} dimensions
+ * @returns {number}
+ */
+function innerWidth(dimensions) {
+	return dimensions ? dimensions.innerWidth : 0
+}
+
+/**
+ * Creates legend data for rendering
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.color - Color field
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.color - Color scale
+ * @param {Object} options - Legend options including dimensions
+ * @param {Object} options.dimensions - Chart dimensions
+ * @param {string} [options.title=''] - Legend title
+ * @param {string} [options.align='right'] - Legend alignment ('left', 'center', or 'right')
+ * @param {string} [options.shape='rect'] - Legend marker shape ('rect' or 'circle')
+ * @param {number} [options.markerSize=10] - Size of legend markers
+ * @returns {LegendData} Legend rendering data
+ */
+export function createLegend(data, fields, scales, options) {
+	if (!data || !fields.color || !scales.color) {
+		return { items: [], title: '', transform: 'translate(0, 0)' }
+	}
+
+	const { dimensions, title, align, shape, markerSize } = parseLegendOptions(options)
+	const colorValues = [...new SvelteSet(data.map((d) => d[fields.color]))]
+	const titleOffset = title ? 15 : 0
+	const style = { shape, markerSize, titleOffset }
+	const items = buildLegendItems(colorValues, scales.color, style)
+	const approxWidth = approximateLegendWidth(colorValues, markerSize)
+	const x = legendX(align, innerWidth(dimensions), approxWidth)
+
+	return { items, title, transform: `translate(${x}, 0)` }
+}
+
+/**
+ * Filter data based on legend selection
+ *
+ * @param {Array} data - Chart data
+ * @param {string} colorField - Field used for color mapping
+ * @param {Array} selectedValues - Selected legend values
+ * @returns {Array} Filtered data
+ */
+export function filterByLegend(data, colorField, selectedValues) {
+	if (!selectedValues || selectedValues.length === 0) {
+		return data
+	}
+
+	return data.filter((d) => selectedValues.includes(d[colorField]))
+}
+
+/**
+ * Create attributes for legend items
+ *
+ * @param {LegendItem} item - Legend item
+ * @returns {Object} Attributes for the legend item
+ */
+export function createLegendItemAttributes(item) {
+	return {
+		'data-plot-legend-item': '',
+		transform: `translate(0, ${item.y})`,
+		role: 'img',
+		'aria-label': `Legend item for ${item.value}`
+	}
+}

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

@@ -0,0 +1,43 @@
+import { pie, arc } from 'd3-shape'
+import { toPatternId } from '../../brewing/patterns.js'
+
+/**
+ * Builds arc geometry for pie/donut charts.
+ * @param {Object[]} data
+ * @param {{ color: string, y: string, pattern?: string }} channels
+ * @param {Map} colors
+ * @param {number} width
+ * @param {number} height
+ * @param {{ innerRadius?: number }} opts
+ * @param {Map<unknown, string>} [patterns]
+ */
+export function buildArcs(data, channels, colors, width, height, opts = {}, patterns) {
+	const { color: lf, y: yf } = channels
+	const radius = Math.min(width, height) / 2
+	const innerRadius = opts.innerRadius ?? 0
+	const pieGen = pie().value((d) => Number(d[yf]))
+	const arcGen = arc().innerRadius(innerRadius).outerRadius(radius)
+	const slices = pieGen(data)
+	const total = slices.reduce((s, sl) => s + (sl.endAngle - sl.startAngle), 0)
+	// Label radius: midpoint between inner and outer (or 70% out for solid pie)
+	const labelRadius = innerRadius > 0 ? (innerRadius + radius) / 2 : radius * 0.65
+	const labelArc = arc().innerRadius(labelRadius).outerRadius(labelRadius)
+	return slices.map((slice) => {
+		const key = slice.data[lf]
+		const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#fff' }
+		const patternId =
+			key !== null && key !== undefined && patterns?.has(key) ? toPatternId(String(key)) : null
+		const pct = Math.round(((slice.endAngle - slice.startAngle) / total) * 100)
+		const [cx, cy] = labelArc.centroid(slice)
+		return {
+			d: arcGen(slice),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			key,
+			patternId,
+			pct,
+			centroid: [cx, cy],
+			data: slice.data
+		}
+	})
+}

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

@@ -0,0 +1,72 @@
+import { area, curveCatmullRom, curveStep } from 'd3-shape'
+import { toPatternId } from '../patterns.js'
+
+/**
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, fill?: string, pattern?: string }} channels
+ *   `fill` is the primary aesthetic — drives grouping and interior color.
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @param {Map} [patternMap]
+ */
+export function buildAreas(data, channels, xScale, yScale, colors, curve, patternMap) {
+	const { x: xf, y: yf, pattern: pf } = channels
+	const cf = channels.fill // fill is the primary aesthetic for area charts
+	const innerHeight = yScale.range()[0]
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+	const makeGen = () => {
+		const gen = area()
+			.x(xPos)
+			.y0(innerHeight)
+			.y1((d) => yScale(d[yf]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+	if (!cf) {
+		const colorEntry = colors?.values().next().value ?? { fill: '#888', stroke: '#444' }
+		return [
+			{
+				d: makeGen()(data),
+				fill: colorEntry.fill,
+				stroke: 'none',
+				colorKey: null,
+				patternKey: null,
+				patternId: null
+			}
+		]
+	}
+	const groups = groupBy(data, cf)
+	return [...groups.entries()].map(([key, rows]) => {
+		const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#444' }
+		const patternKey = pf ? (pf === cf ? key : rows[0]?.[pf]) : null
+		const patternName =
+			patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
+		const compositePatternKey =
+			cf && pf && cf !== pf && patternKey !== null && patternKey !== undefined
+				? `${key}::${patternKey}`
+				: patternKey
+		return {
+			d: makeGen()(rows),
+			fill: colorEntry.fill,
+			stroke: 'none',
+			key,
+			colorKey: key,
+			patternKey,
+			patternId: patternName ? toPatternId(compositePatternKey) : null
+		}
+	})
+}
+
+function groupBy(arr, field) {
+	const map = new Map()
+	for (const item of arr) {
+		const key = item[field]
+		if (!map.has(key)) map.set(key, [])
+		map.get(key).push(item)
+	}
+	return map
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, fill?: string, color?: string, pattern?: string }} channels
+ *   `fill` drives the bar interior color. `color` drives the border stroke; falls back to fill.
+ * @param {import('d3-scale').ScaleBand|import('d3-scale').ScaleLinear} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map} colors - value→{fill,stroke}
+ * @param {Map} [patternMap] - value→patternName
+ * @returns {Array}
+ */
+import { toPatternId } from '../patterns.js'
+
+export function buildBars(data, channels, xScale, yScale, colors, patternMap) {
+	const { x: xf, y: yf, fill: ff, color: cf, pattern: pf } = channels
+	const barWidth = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
+	const innerHeight = yScale.range()[0]
+
+	return data.map((d) => {
+		const xVal = d[xf]
+		const fillKey = ff ? d[ff] : xVal // fill channel drives interior color
+		const strokeKey = cf ? d[cf] : null // color channel drives border; null = no border
+		const colorEntry = colors?.get(fillKey) ?? { fill: '#888', stroke: '#444' }
+		const strokeEntry = colors?.get(strokeKey) ?? colorEntry
+		const patternKey = pf ? d[pf] : null
+		const patternName =
+			patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
+		// When fill and pattern are different fields, bars need a composite pattern def id
+		// so each (region, category) pair gets its uniquely colored+textured pattern.
+		const compositePatternKey =
+			ff && pf && ff !== pf && patternKey !== null && patternKey !== undefined
+				? `${d[ff]}::${patternKey}`
+				: patternKey
+		const barX = typeof xScale.bandwidth === 'function' ? xScale(xVal) : xScale(xVal) - barWidth / 2
+		const barY = yScale(d[yf])
+		return {
+			data: d,
+			key: `${xVal}::${fillKey ?? ''}::${patternKey ?? ''}`,
+			x: barX,
+			y: barY,
+			width: barWidth,
+			height: innerHeight - barY,
+			fill: colorEntry.fill,
+			stroke: strokeKey !== null ? strokeEntry.stroke : null,
+			colorKey: fillKey,
+			patternKey,
+			patternId: patternName ? toPatternId(compositePatternKey) : null
+		}
+	})
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Builds box geometry for box plot charts.
+ * Input data rows must already contain { q1, median, q3, iqr_min, iqr_max } —
+ * computed by applyBoxStat before reaching this function.
+ *
+ * When `fill` differs from `x`, boxes are sub-grouped within each x-band
+ * (one narrower box per fill value per x category, like grouped bars).
+ * Box body uses the lighter fill shade; whiskers and median use the darker stroke shade.
+ *
+ * @param {Object[]} data - Pre-aggregated rows with quartile fields
+ * @param {{ x: string, fill?: string }} channels
+ *   `fill` drives the box and whisker color (defaults to x-field).
+ * @param {import('d3-scale').ScaleBand} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map<unknown, {fill:string, stroke:string}>} colors
+ * @returns {Array}
+ */
+export function buildBoxes(data, channels, xScale, yScale, colors) {
+	const { x: xf, fill: ff } = channels
+	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
+	const grouped = ff && ff !== xf
+
+	if (grouped) {
+		const fillValues = [...new Set(data.map((d) => d[ff]))]
+		const n = fillValues.length
+		const subBandWidth = bw / n
+		const boxWidth = subBandWidth * 0.75
+		const whiskerWidth = subBandWidth * 0.4
+
+		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' }
+
+			return {
+				data: d,
+				cx,
+				q1: yScale(d.q1),
+				median: yScale(d.median),
+				q3: yScale(d.q3),
+				iqr_min: yScale(d.iqr_min),
+				iqr_max: yScale(d.iqr_max),
+				width: boxWidth,
+				whiskerWidth,
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke
+			}
+		})
+	}
+
+	// Non-grouped: one box per x category
+	const boxWidth = bw * 0.6
+	const whiskerWidth = bw * 0.3
+
+	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)
+		return {
+			data: d,
+			cx,
+			q1: yScale(d.q1),
+			median: yScale(d.median),
+			q3: yScale(d.q3),
+			iqr_min: yScale(d.iqr_min),
+			iqr_max: yScale(d.iqr_max),
+			width: boxWidth,
+			whiskerWidth,
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke
+		}
+	})
+}

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

@@ -0,0 +1,55 @@
+import { line, curveCatmullRom, curveStep } from 'd3-shape'
+
+/**
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @returns {{ d: string, fill: string, stroke: string, points: {x:number, y:number, data:Object}[], key?: unknown }[]}
+ */
+export function buildLines(data, channels, xScale, yScale, colors, curve) {
+	const { x: xf, y: yf, color: cf } = channels
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+	const makeGen = () => {
+		const gen = line()
+			.x(xPos)
+			.y((d) => yScale(d[yf]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+	const toPoints = (rows) => rows.map((d) => ({ x: xPos(d), y: yScale(d[yf]), data: d }))
+
+	const sortByX = (rows) => [...rows].sort((a, b) => xPos(a) - xPos(b))
+
+	if (!cf) {
+		const sorted = sortByX(data)
+		const stroke = colors?.values().next().value?.stroke ?? '#888'
+		return [{ d: makeGen()(sorted), fill: 'none', stroke, points: toPoints(sorted) }]
+	}
+	const groups = groupBy(data, cf)
+	return [...groups.entries()].map(([key, rows]) => {
+		const sorted = sortByX(rows)
+		const colorEntry = colors?.get(key) ?? { fill: 'none', stroke: '#888' }
+		return {
+			d: makeGen()(sorted),
+			fill: 'none',
+			stroke: colorEntry.stroke,
+			points: toPoints(sorted),
+			key
+		}
+	})
+}
+
+function groupBy(arr, field) {
+	const map = new Map()
+	for (const item of arr) {
+		const key = item[field]
+		if (!map.has(key)) map.set(key, [])
+		map.get(key).push(item)
+	}
+	return map
+}

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]]))
+}