@rokkit/chart 1.0.0-next.98 → 1.0.1

package/src/lib/plot/types.js

@@ -0,0 +1,65 @@
+// packages/chart/src/lib/plot/types.js
+// JSDoc typedefs for the Plot system. No runtime code.
+
+/**
+ * @typedef {Object} GeomSpec
+ * @property {string} type - Geom type: 'bar'|'line'|'area'|'point'|'box'|'violin'|'arc' or custom
+ * @property {string} [x]
+ * @property {string} [y]
+ * @property {string} [color]
+ * @property {string} [fill]
+ * @property {string} [size]
+ * @property {string} [symbol]
+ * @property {string} [pattern]
+ * @property {string} [stat] - Built-in or helpers.stats key
+ * @property {Record<string, unknown>} [options]
+ */
+
+/**
+ * @typedef {Object} PlotSpec
+ * @property {Record<string, unknown>[]} data
+ * @property {string} [x]
+ * @property {string} [y]
+ * @property {string} [color]
+ * @property {string} [fill]
+ * @property {string} [size]
+ * @property {string} [symbol]
+ * @property {string} [pattern]
+ * @property {string} [theta]
+ * @property {Record<string, string>} [labels]
+ * @property {unknown[]} [xDomain]
+ * @property {number[]} [yDomain]
+ * @property {string} [xLabel]
+ * @property {string} [yLabel]
+ * @property {[number, number]} [axisOrigin]
+ * @property {'categorical'|'sequential'|'diverging'} [colorScale]
+ * @property {string} [colorScheme]
+ * @property {number} [colorMidpoint]
+ * @property {unknown[]} [colorDomain]
+ * @property {GeomSpec[]} geoms
+ * @property {{ by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' }} [facet]
+ * @property {{ by: string, duration?: number, loop?: boolean }} [animate]
+ * @property {boolean} [grid]
+ * @property {boolean} [legend]
+ * @property {boolean} [tooltip]
+ * @property {string} [title]
+ * @property {string} [preset]
+ * @property {number} [width]
+ * @property {number} [height]
+ * @property {'light'|'dark'} [mode]
+ */
+
+/**
+ * @typedef {Object} PlotHelpers
+ * @property {Record<string, (values: unknown[]) => unknown>} [stats]
+ * @property {Record<string, (v: unknown) => string>} [format]
+ * @property {(d: Record<string, unknown>) => string} [tooltip]
+ * @property {Record<string, unknown>} [geoms]  Svelte components keyed by type name
+ * @property {unknown} [colorScale]  d3 scale override
+ * @property {{ colors: string[], patterns: string[], symbols: string[] }} [preset]
+ * @property {Record<string, { colors: string[], patterns: string[], symbols: string[] }>} [presets]
+ * @property {Record<string, unknown>} [patterns]  custom SVG pattern components keyed by name
+ * @property {Record<string, unknown>} [symbols]   custom symbol shape components keyed by name
+ */
+
+export {}

package/src/lib/preset.js

@@ -0,0 +1,41 @@
+// packages/chart/src/lib/preset.js
+
+export const defaultPreset = {
+  colors: ['blue', 'emerald', 'rose', 'amber', 'violet', 'sky', 'pink', 'teal',
+           'orange', 'indigo', 'lime', 'cyan', 'gold', 'lavender'],
+  shades: {
+    light: { fill: '300', stroke: '700' },
+    dark:  { fill: '500', stroke: '200' }
+  },
+  opacity: {
+    area:   0.6,
+    box:    0.5,
+    violin: 0.5,
+    point:  0.8
+  },
+  patterns: ['diagonal', 'dots', 'triangles', 'hatch', 'lattice', 'swell',
+             'checkerboard', 'waves', 'petals', 'brick', 'diamonds', 'tile',
+             'scales', 'circles', 'pip', 'rings', 'chevrons', 'shards',
+             'wedge', 'argyle', 'shell'],
+  symbols: ['circle', 'square', 'triangle', 'diamond', 'cross', 'star']
+}
+
+/**
+ * Creates a chart preset by deep-merging overrides with the default preset.
+ * All fields are optional. `opacity` is merged key-by-key so partial overrides work.
+ * @param {Partial<typeof defaultPreset>} [overrides]
+ * @returns {typeof defaultPreset}
+ */
+export function createChartPreset(overrides = {}) {
+  return {
+    ...defaultPreset,
+    ...overrides,
+    shades: overrides.shades
+      ? {
+          light: { ...defaultPreset.shades.light, ...overrides.shades.light },
+          dark:  { ...defaultPreset.shades.dark,  ...overrides.shades.dark  }
+        }
+      : defaultPreset.shades,
+    opacity: { ...defaultPreset.opacity, ...overrides.opacity }
+  }
+}

package/src/lib/scales.svelte.js

@@ -0,0 +1,151 @@
+import { SvelteSet } from 'svelte/reactivity'
+import { scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { min, max } from 'd3-array'
+import { buildXScale } from './xscale.js'
+
+/**
+ * Creates appropriate scales based on data and dimensions
+ *
+ * @param {Array} data The dataset
+ * @param {Object} dimensions Chart dimensions
+ * @param {Object} options Additional options
+ * @param {string} options.xKey Field to use for x-axis
+ * @param {string} options.yKey Field to use for y-axis
+ * @param {string} [options.colorKey] Field to use for color mapping
+ * @param {number} [options.padding=0.2] Padding for band scales
+ * @returns {Object} Object containing xScale, yScale, and colorScale
+ */
+/**
+ * @param {Array} data
+ * @param {string} colorKey
+ * @returns {Object}
+ */
+function buildColorScale(data, colorKey) {
+	const uniqueCategories = [...new SvelteSet(data.map((d) => d[colorKey]))]
+	return scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ xKey: string, yKey: string, colorKey: string|undefined, padding: number }}
+ */
+function parseScaleOptions(options) {
+	const opts = options || {}
+	return {
+		xKey: opts.xKey,
+		yKey: opts.yKey,
+		colorKey: opts.colorKey,
+		padding: opts.padding !== undefined ? opts.padding : 0.2
+	}
+}
+
+export function createScales(data, dimensions, options) {
+	if (!data || !data.length) return {}
+
+	const { xKey, yKey, colorKey, padding } = parseScaleOptions(options)
+	const xValues = data.map((d) => d[xKey])
+	const yValues = data.map((d) => d[yKey])
+	const colorScale = colorKey ? buildColorScale(data, colorKey) : null
+
+	return {
+		xScale: buildXScale(xValues, dimensions, padding),
+		yScale: scaleLinear()
+			.domain([0, max(yValues) * 1.1])
+			.nice()
+			.range([dimensions.innerHeight, 0]),
+		colorScale
+	}
+}
+
+/**
+ * Calculates the actual chart dimensions after applying margins
+ *
+ * @param {number} width
+ * @param {number} height
+ * @param {Object} margin
+ * @returns {Object} Dimensions with calculated inner width and height
+ */
+export function calculateChartDimensions(width, height, margin) {
+	return {
+		width,
+		height,
+		margin,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
+}
+
+/**
+ * Gets the axis origin value
+ *
+ * @param {Object} scale D3 scale
+ * @returns {number} Origin value
+ */
+export function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, min(scale.domain()))) : scale.range()[0]
+}
+
+/**
+ * Resolve tick values for a band scale, applying downsampling when needed
+ * @param {Object} scale
+ * @param {number} count
+ * @returns {{ ticks: Array, offset: number }}
+ */
+function bandTicks(scale, count) {
+	const offset = scale.bandwidth() / 2
+	const domain = scale.domain()
+	const cappedCount = Math.min(Math.round(count), domain.length)
+	const step = Math.ceil(domain.length / cappedCount)
+	const ticks = cappedCount < domain.length ? domain.filter((_, i) => i % step === 0) : domain
+	return { ticks, offset }
+}
+
+/**
+ * @param {number} rangeSize
+ * @param {string} axis
+ * @param {number} fontSize
+ * @returns {number}
+ */
+function defaultTickCount(rangeSize, axis, fontSize) {
+	const divisor = fontSize * (axis === 'y' ? 3 : 6)
+	return Math.abs(rangeSize / divisor)
+}
+
+/**
+ * @param {Array} ticks
+ * @param {Object} scale
+ * @param {number} offset
+ * @param {boolean} isXAxis
+ * @returns {Array}
+ */
+function formatTicks(ticks, scale, offset, isXAxis) {
+	const pos = isXAxis ? offset : 0
+	return ticks.map((t) => ({ value: t, position: scale(t) + pos }))
+}
+
+/**
+ * Creates axis ticks
+ *
+ * @param {Object} scale D3 scale
+ * @param {string} axis Axis type ('x' or 'y')
+ * @param {number} count Number of ticks
+ * @param {number} fontSize Font size for determining tick density
+ * @returns {Array} Array of tick objects
+ */
+export function createTicks(scale, axis, count = null, fontSize = 12) {
+	const [minRange, maxRange] = scale.range()
+	const tickCount = count ?? defaultTickCount(maxRange - minRange, axis, fontSize)
+
+	let ticks, offset
+	if (scale.ticks) {
+		ticks = scale.ticks(Math.round(tickCount))
+		offset = 0
+	} else {
+		const band = bandTicks(scale, tickCount)
+		ticks = band.ticks
+		offset = band.offset
+	}
+
+	return formatTicks(ticks, scale, offset, axis === 'x')
+}

package/src/lib/swatch.js

@@ -1,16 +1,13 @@
-import { writable } from 'svelte/store'
 import palette from './palette.json'
-// skipcq: JS-C1003 - Importing all patterns
-import * as patterns from '../patterns'
+import { PATTERN_ORDER } from './brewing/patterns.js'
 import { shapes } from '../symbols'
 
-export const swatch = writable({
+export const swatch = {
 	palette,
-	patterns,
 	keys: {
 		gray: ['gray'],
 		color: Object.keys(palette).filter((name) => name !== 'gray'),
 		symbol: shapes,
-		pattern: Object.keys(patterns)
+		pattern: PATTERN_ORDER
 	}
-})
+}

package/src/lib/utils.js

@@ -1,3 +1,145 @@
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { max } from 'd3-array'
+
+/**
+ * Creates appropriate scales based on data and dimensions
+ *
+ * @param {Array} data The dataset
+ * @param {Object} dimensions Chart dimensions
+ * @param {Object} [options] Additional options
+ * @param {string} options.xKey Field to use for x-axis
+ * @param {string} options.yKey Field to use for y-axis
+ * @param {string} [options.colorKey] Field to use for color mapping
+ * @returns {Object} Object containing xScale, yScale, and colorScale
+ */
+export function createScales(data, dimensions, options = {}) {
+	if (!data || data.length === 0) return {}
+
+	const { xKey, yKey, colorKey } = options
+
+	const xScale = scaleBand()
+		.domain(data.map((d) => d[xKey]))
+		.range([0, dimensions.width])
+		.padding(0.2)
+
+	const yScale = scaleLinear()
+		.domain([0, max(data, (d) => d[yKey]) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.height, 0])
+
+	let colorScale = null
+
+	if (colorKey) {
+		const uniqueCategories = [...new Set(data.map((d) => d[colorKey]))]
+		colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+	}
+
+	return { xScale, yScale, colorScale }
+}
+
+/**
+ * Calculates the actual chart dimensions after applying margins
+ *
+ * @param {Object} dimensions Original dimensions
+ * @returns {Object} Dimensions with calculated inner width and height
+ */
+export function calculateChartDimensions(dimensions) {
+	const { width, height, margin } = dimensions
+
+	return {
+		...dimensions,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
+}
+
+/**
+ * Normalizes data for use with D3 charts
+ *
+ * @param {Array|Object} inputData Raw data or dataset object
+ * @returns {Array} Normalized data array
+ */
+export function normalizeData(inputData) {
+	if (!inputData) return []
+
+	// If it's a dataset class instance, call select() to get the data
+	if (inputData.select && typeof inputData.select === 'function') {
+		return inputData.select()
+	}
+
+	// If it's already an array, return as is
+	if (Array.isArray(inputData)) {
+		return inputData
+	}
+
+	return []
+}
+
+/**
+ * Generates a unique ID for SVG elements
+ *
+ * @param {string} prefix Prefix for the ID
+ * @returns {string} A unique ID
+ */
+export function uniqueId(prefix = 'chart') {
+	return `${prefix}-${Math.random().toString(36).substring(2, 10)}`
+}
+
+/**
+ * Format a single key-value pair for tooltip
+ * @param {string} key
+ * @param {unknown} value
+ * @param {Function|undefined} formatter
+ * @returns {string}
+ */
+function formatField(key, value, formatter) {
+	const formatted = formatter ? formatter(value) : value
+	return `${key}: ${formatted}`
+}
+
+/**
+ * Formats tooltip content for a data point
+ *
+ * @param {Object} d Data point
+ * @param {Object} options Tooltip format options
+ * @returns {string} Formatted tooltip HTML content
+ */
+export function formatTooltipContent(d, options = {}) {
+	if (!d) return ''
+
+	const { xKey, yKey, xFormat, yFormat } = options
+
+	if (xKey && yKey) {
+		return [formatField(xKey, d[xKey], xFormat), formatField(yKey, d[yKey], yFormat)].join('<br>')
+	}
+
+	return Object.entries(d)
+		.map(([key, value]) => `${key}: ${value}`)
+		.join('<br>')
+}
+
+/**
+ * Generates a tooltip formatter function
+ *
+ * @param {Object} options Tooltip format options
+ * @returns {Function} A function that formats tooltip content
+ */
+export function createTooltipFormatter(options = {}) {
+	return (d) => formatTooltipContent(d, options)
+}
+
+/**
+ * Calculates the transform attribute for SVG elements
+ *
+ * @param {number} x X position
+ * @param {number} y Y position
+ * @returns {string} Transform attribute value
+ */
+export function transform(x, y) {
+	return `translate(${x}, ${y})`
+}
+
 import { scaledPath } from '@rokkit/core'
 
 export function scaledPathCollection(paths) {

package/src/lib/xscale.js

@@ -0,0 +1,31 @@
+import { scaleBand, scaleLinear, scaleTime } from 'd3-scale'
+import { min, max } from 'd3-array'
+
+/**
+ * Builds an appropriate D3 x-axis scale based on value types.
+ * Returns scaleTime for Date values, scaleLinear for numeric values,
+ * or scaleBand for categorical values.
+ *
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
+ */
+export function buildXScale(xValues, dimensions, padding) {
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	if (xIsDate) {
+		return scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	}
+	if (xIsNumeric) {
+		return scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	}
+	return scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+}

package/src/patterns/DefinePatterns.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { getContext } from 'svelte'
+	import { toPatternId } from '../lib/brewing/patterns.js'
+	import { PATTERNS } from './patterns.js'
+	import PatternDef from './PatternDef.svelte'
+
+	/** @type {{ patterns?: Record<string, import('./patterns.js').PatternMark[]> }} */
+	let { patterns = PATTERNS } = $props()
+
+	const state = getContext('plot-state')
+
+	const patternDefs = $derived.by(() => {
+		const defs = []
+		for (const [key, patternName] of (state.patterns ?? new Map()).entries()) {
+			const colorEntry = state.colors?.get(key) ?? { stroke: '#444' }
+			defs.push({
+				id: toPatternId(String(key)),
+				marks: patterns[patternName] ?? [],
+				stroke: colorEntry.stroke ?? '#444'
+			})
+		}
+		return defs
+	})
+</script>
+
+{#if patternDefs.length > 0}
+	<defs data-plot-pattern-defs>
+		{#each patternDefs as def (def.id)}
+			<PatternDef id={def.id} marks={def.marks} stroke={def.stroke} />
+		{/each}
+	</defs>
+{/if}

package/src/patterns/PatternDef.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { scaleMark, resolveMarkAttrs } from './scale.js'
+
+	/** @type {{ id: string, marks?: import('./patterns.js').PatternMark[], size?: number, stroke?: string, thickness?: number }} */
+	let { id, marks = [], size = 10, stroke = '#444', thickness = 0.5 } = $props()
+
+	const resolvedMarks = $derived(
+		marks.map((m) => resolveMarkAttrs(scaleMark(m, size), { fill: stroke, stroke, thickness }))
+	)
+</script>
+
+<pattern {id} patternUnits="userSpaceOnUse" width={size} height={size}>
+	<rect width={size} height={size} fill="none" />
+	{#each resolvedMarks as { type, attrs }, i (i)}
+		{#if type === 'line'}
+			<line {...attrs} />
+		{:else if type === 'circle'}
+			<circle {...attrs} />
+		{:else if type === 'rect'}
+			<rect {...attrs} />
+		{:else if type === 'polygon'}
+			<polygon {...attrs} />
+		{:else if type === 'path'}
+			<path {...attrs} />
+		{/if}
+	{/each}
+</pattern>

package/src/patterns/index.js

@@ -1,14 +1,4 @@
-export { default as Brick } from './Brick.svelte'
-export { default as Circles } from './Circles.svelte'
-export { default as Dots } from './Dots.svelte'
-export { default as CrossHatch } from './CrossHatch.svelte'
-export { default as Waves } from './Waves.svelte'
-// export { default as Squares } from './Squares.svelte'
-export { default as Tile } from './Tile.svelte'
-export { default as Triangles } from './Triangles.svelte'
-// export { default as Waves } from './Waves.svelte'
-// export { default as ZigZag } from './ZigZag.svelte'
-// export { default as Flower } from './Flower.svelte'
-// export { default as NamedPath } from './NamedPath.svelte'
-export { default as CurvedWave } from './CurvedWave.svelte'
-export { default as OutlineCircles } from './OutlineCircles.svelte'
+export { default as PatternDef } from './PatternDef.svelte'
+export { default as DefinePatterns } from './DefinePatterns.svelte'
+export { PATTERNS } from './patterns.js'
+export { scaleMark, resolveMarkAttrs } from './scale.js'