@rokkit/chart 1.0.0-next.99 → 1.0.1

package/src/geoms/lib/bars.js

@@ -0,0 +1,223 @@
+import { scaleBand } from 'd3-scale'
+import { stack } from 'd3-shape'
+import { toPatternId } from '../../lib/brewing/patterns.js'
+import { isLiteralColor } from '../../lib/brewing/colors.js'
+
+/**
+ * Returns a band scale suitable for bar x-positioning.
+ * When xScale is already a band scale, returns it unchanged.
+ * When xScale is a linear scale (numeric x field like year/month),
+ * derives a band scale from the distinct values in the data.
+ */
+function ensureBandX(xScale, data, xField) {
+	if (typeof xScale?.bandwidth === 'function') return xScale
+	const [r0, r1] = xScale.range()
+	const domain = [...new Set(data.map((d) => d[xField]))]
+	return scaleBand().domain(domain).range([r0, r1]).padding(0.2)
+}
+
+/**
+ * Returns the sub-band fields: distinct non-x fields among [color, pattern].
+ * These are the fields that cause multiple bars within a single x-band.
+ */
+function subBandFields(channels) {
+	const { x: xf, color: cf, pattern: pf } = channels
+	const seen = new Set()
+	const out = []
+	for (const f of [cf, pf]) {
+		if (f && f !== xf && !seen.has(f) && !isLiteralColor(f)) {
+			seen.add(f)
+			out.push(f)
+		}
+	}
+	return out
+}
+
+export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+
+	const bandScale = ensureBandX(xScale, data, xf)
+
+	// Sub-banding: only fields that differ from x drive grouping within a band
+	const subFields = subBandFields(channels)
+	const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
+	const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
+	const subScale =
+		subDomain.length > 1
+			? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
+			: null
+
+	// Baseline for bars: at y=0 when domain spans zero (supports negative bars),
+	// otherwise at the bottom of the chart area.
+	const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
+	const baseline =
+		yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
+			? (yScale(0) ?? innerHeight)
+			: innerHeight
+
+	return data.map((d, i) => {
+		const xVal = d[xf]
+		const colorKey = cf ? d[cf] : null
+		const patternKey = pf ? d[pf] : null
+		const subKey = getSubKey(d)
+
+		const colorEntry = colors?.get(colorKey) ??
+			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+
+		const bandX = bandScale(xVal) ?? 0
+		const subX = subScale && subKey ? (subScale(subKey) ?? 0) : 0
+		const barX = bandX + subX
+		const barWidth = subScale ? subScale.bandwidth() : bandScale.bandwidth()
+		const barY = yScale(d[yf]) ?? baseline
+
+		return {
+			data: d,
+			key: `${String(xVal)}::${subKey}::${i}`,
+			x: barX,
+			y: Math.min(barY, baseline),
+			width: barWidth,
+			height: Math.abs(baseline - barY),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			patternId
+		}
+	})
+}
+
+export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+
+	const bandScale = ensureBandX(xScale, data, xf)
+
+	// Stack dimension: first non-x grouping field (prefer pattern, then color)
+	const subFields = subBandFields(channels)
+	if (subFields.length === 0) {
+		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+	}
+	const stackField = subFields[0]
+
+	const xCategories = [...new Set(data.map((d) => d[xf]))]
+	const stackCategories = [...new Set(data.map((d) => d[stackField]))]
+
+	const lookup = new Map()
+	for (const d of data) {
+		if (!lookup.has(d[xf])) lookup.set(d[xf], {})
+		lookup.get(d[xf])[d[stackField]] = Number(d[yf])
+	}
+
+	const wide = xCategories.map((xVal) => {
+		const row = { [xf]: xVal }
+		for (const sk of stackCategories) row[sk] = lookup.get(xVal)?.[sk] ?? 0
+		return row
+	})
+
+	const stackGen = stack().keys(stackCategories)
+	const layers = stackGen(wide)
+
+	const bars = []
+	for (const layer of layers) {
+		const stackKey = layer.key
+
+		for (const point of layer) {
+			const [y0, y1] = point
+			const xVal = point.data[xf]
+
+			// Color lookup: cf may equal xf (= xVal) or stackField (= stackKey)
+			const colorKey = cf ? (cf === xf ? xVal : cf === stackField ? stackKey : null) : null
+			const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+
+			// Pattern lookup: pf may equal xf (= xVal) or stackField (= stackKey)
+			const patternKey = pf ? (pf === xf ? xVal : pf === stackField ? stackKey : null) : null
+			const patternId =
+				patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+					? toPatternId(String(patternKey))
+					: null
+
+			bars.push({
+				data: point.data,
+				key: `${String(xVal)}::${String(stackKey)}`,
+				x: bandScale(xVal) ?? 0,
+				y: yScale(y1),
+				width: bandScale.bandwidth(),
+				height: yScale(y0) - yScale(y1),
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke,
+				patternId
+			})
+		}
+	}
+	return bars
+}
+
+export function buildHorizontalBars(data, channels, xScale, yScale, colors, _innerHeight) {
+	const { x: xf, y: yf, color: cf } = channels
+	const isBand = typeof yScale?.bandwidth === 'function'
+
+	if (!isBand) {
+		// Linear y-scale: rank-based bar chart race.
+		// Each row has a numeric _rank that tweens smoothly between frames.
+		// No sub-grouping — each rank position holds exactly one entity.
+		const [r0, r1] = yScale.range() // [innerHeight, 0]
+		const [d0, d1] = yScale.domain() // [0, N-1]
+		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
+		const barH = step * 0.9
+
+		return data.map((d) => {
+			const rankVal = Number(d[yf])
+			const colorKey = cf ? d[cf] : null
+			const colorEntry =
+				colors?.get(colorKey) ??
+				colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+
+			const centerY = yScale(rankVal) ?? 0
+			return {
+				data: d,
+				// Key by entity name (_entity) so Svelte reuses elements as rank tweens
+				key: `${String(d._entity ?? d[yf])}::${String(colorKey ?? '')}`,
+				x: 0,
+				y: centerY - barH / 2,
+				width: xScale(d[xf]) ?? 0,
+				height: barH,
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke,
+				patternId: null
+			}
+		})
+	}
+
+	// Band scale: standard grouped horizontal bars.
+	// Only create sub-bands when multiple entities share the same y-band (true grouping).
+	const yVals = new Set(data.map((d) => d[yf]))
+	const colorKeys = cf && !isLiteralColor(cf) ? [...new Set(data.map((d) => d[cf]))] : []
+	const hasSubBands = colorKeys.length > 1 && data.length > yVals.size
+	const subScale = hasSubBands
+		? scaleBand().domain(colorKeys).range([0, yScale.bandwidth()]).padding(0.05)
+		: null
+
+	return data.map((d) => {
+		const yVal = d[yf]
+		const colorKey = cf ? d[cf] : null
+		const colorEntry =
+			colors?.get(colorKey) ??
+			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+
+		const bandY = yScale(yVal) ?? 0
+		const subY = subScale ? (subScale(colorKey) ?? 0) : 0
+
+		return {
+			data: d,
+			key: `${String(yVal)}::${String(colorKey ?? '')}`,
+			x: 0,
+			y: bandY + subY,
+			width: xScale(d[xf]) ?? 0,
+			height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			patternId: null
+		}
+	})
+}

package/src/index.js

@@ -1,3 +1,82 @@
+import Root from './Plot/Root.svelte'
+import Axis from './Plot/Axis.svelte'
+import Bar from './Plot/Bar.svelte'
+import Grid from './Plot/Grid.svelte'
+import Legend from './Plot/Legend.svelte'
+import Line from './Plot/Line.svelte'
+import Area from './Plot/Area.svelte'
+import Point from './Plot/Point.svelte'
+import Arc from './Plot/Arc.svelte'
+
+// Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
+export const Plot = {
+	Root,
+	Axis,
+	Bar,
+	Grid,
+	Legend,
+	Line,
+	Area,
+	Point,
+	Arc
+}
+
+/** @deprecated Use Plot instead */
+export const PlotLayers = Plot
+
+// New Plot system
+export { default as PlotChart } from './Plot.svelte'
+export { default as ChartProvider } from './ChartProvider.svelte'
+export { default as ChartLegend } from './ChartLegend.svelte'
+export { default as ChartExporter } from './ChartExporter.svelte'
+export { createChartPreset, defaultPreset } from './lib/preset.js'
+
+// Facets and Animation
+export { default as FacetPlot } from './FacetPlot.svelte'
+export { default as AnimatedPlot } from './AnimatedPlot.svelte'
+
+// Geom components (for declarative use inside PlotChart)
+export { default as GeomBar } from './geoms/Bar.svelte'
+export { default as GeomLine } from './geoms/Line.svelte'
+export { default as GeomArea } from './geoms/Area.svelte'
+export { default as GeomPoint } from './geoms/Point.svelte'
+export { default as GeomArc } from './geoms/Arc.svelte'
+export { default as GeomBox } from './geoms/Box.svelte'
+export { default as GeomViolin } from './geoms/Violin.svelte'
+export { default as GeomHeatmap } from './geoms/Heatmap.svelte'
+export { default as GeomCandlestick } from './geoms/Candlestick.svelte'
+export { default as GeomWaterfall } from './geoms/Waterfall.svelte'
+export { default as GeomHexbin } from './geoms/Hexbin.svelte'
+export { default as GeomRibbon } from './geoms/Ribbon.svelte'
+
+// Export standalone components
 export { default as Chart } from './Chart.svelte'
-export { default as Symbol } from './Symbol.svelte'
-export * from './plots'
+export { default as Sparkline } from './Sparkline.svelte'
+export { default as BarChart } from './charts/BarChart.svelte'
+export { default as LineChart } from './charts/LineChart.svelte'
+export { default as AreaChart } from './charts/AreaChart.svelte'
+export { default as PieChart } from './charts/PieChart.svelte'
+export { default as ScatterPlot } from './charts/ScatterPlot.svelte'
+export { default as BoxPlot } from './charts/BoxPlot.svelte'
+export { default as ViolinPlot } from './charts/ViolinPlot.svelte'
+export { default as BubbleChart } from './charts/BubbleChart.svelte'
+
+// Export state and types
+export { PlotState } from './PlotState.svelte.js'
+
+// Export utilities
+export { ChartBrewer } from './lib/brewing/index.svelte.js'
+export * from './lib/brewing/index.svelte.js'
+export { buildSequentialScale, buildDivergingScale } from './lib/brewing/colors.js'
+export { CartesianBrewer } from './lib/brewing/CartesianBrewer.svelte.js'
+export { PieBrewer } from './lib/brewing/PieBrewer.svelte.js'
+export { QuartileBrewer } from './lib/brewing/QuartileBrewer.svelte.js'
+export { BoxBrewer } from './lib/brewing/BoxBrewer.svelte.js'
+export { ViolinBrewer } from './lib/brewing/ViolinBrewer.svelte.js'
+
+// CrossFilter system
+export { createCrossFilter } from './crossfilter/createCrossFilter.svelte.js'
+export { default as CrossFilter } from './crossfilter/CrossFilter.svelte'
+export { default as FilterBar } from './crossfilter/FilterBar.svelte'
+export { default as FilterSlider } from './crossfilter/FilterSlider.svelte'
+export { default as FilterHistogram } from './crossfilter/FilterHistogram.svelte'

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

@@ -0,0 +1,14 @@
+import { QuartileBrewer } from './QuartileBrewer.svelte.js'
+import { buildBoxes } from './marks/boxes.js'
+
+/**
+ * Brewer for box plots.
+ * fill = box interior color, color = whisker/outline stroke.
+ */
+export class BoxBrewer extends QuartileBrewer {
+	boxes = $derived(
+		this.xScale && this.yScale
+			? buildBoxes(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+			: []
+	)
+}

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

@@ -0,0 +1,21 @@
+import { SvelteSet } from 'svelte/reactivity'
+import { ChartBrewer } from './brewer.svelte.js'
+import { applyAggregate } from './stats.js'
+
+/**
+ * Brewer for cartesian charts (Bar, Line, Area).
+ * Groups by x (and fill/color if set) and applies the given stat.
+ */
+export class CartesianBrewer extends ChartBrewer {
+	transform(data, channels, stat) {
+		if (stat === 'identity' || !channels.x || !channels.y) return data
+		// Group by all mapped aesthetic dimensions so they survive aggregation.
+		// e.g. x=region, fill=region, pattern=quarter → by=['region','quarter']
+		const by = [
+			...new SvelteSet(
+				[channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean)
+			)
+		]
+		return applyAggregate(data, { by, value: channels.y, stat })
+	}
+}

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

@@ -0,0 +1,14 @@
+import { ChartBrewer } from './brewer.svelte.js'
+import { applyAggregate } from './stats.js'
+
+/**
+ * Brewer for pie charts. Always aggregates by the label field.
+ * 'identity' is not meaningful for pie charts — falls back to 'sum'.
+ */
+export class PieBrewer extends ChartBrewer {
+	transform(data, channels, stat) {
+		if (!channels.label || !channels.y) return data
+		const effectiveStat = stat === 'identity' ? 'sum' : (stat ?? 'sum')
+		return applyAggregate(data, { by: [channels.label], value: channels.y, stat: effectiveStat })
+	}
+}

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

@@ -0,0 +1,51 @@
+import { quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+import { ChartBrewer } from './brewer.svelte.js'
+import { buildXScale, buildYScale } from './scales.js'
+
+function sortedQuantile(values, p) {
+	return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Shared base for box and violin plots.
+ * Groups by x + fill (primary) or x + color (fallback) and computes quartile statistics.
+ * Subclasses add their mark-specific $derived (boxes, violins, etc.).
+ */
+export class QuartileBrewer extends ChartBrewer {
+	transform(data, channels) {
+		if (!channels.x || !channels.y) return data
+		const by = [channels.x, channels.fill ?? channels.color].filter(Boolean)
+		return dataset(data)
+			.groupBy(...by)
+			.summarize((row) => row[channels.y], {
+				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()
+	}
+
+	xScale = $derived(
+		this.channels.x && this.processedData.length > 0
+			? buildXScale(this.processedData, this.channels.x, this.innerWidth)
+			: null
+	)
+
+	yScale = $derived(
+		this.channels.y && this.processedData.length > 0
+			? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
+			: null
+	)
+}

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

@@ -0,0 +1,14 @@
+import { QuartileBrewer } from './QuartileBrewer.svelte.js'
+import { buildViolins } from './marks/violins.js'
+
+/**
+ * Brewer for violin plots.
+ * fill = violin body color, color = outline stroke.
+ */
+export class ViolinBrewer extends QuartileBrewer {
+	violins = $derived(
+		this.xScale && this.yScale
+			? buildViolins(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+			: []
+	)
+}

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'
+		}
+	}
+}