@rokkit/chart 1.0.0-next.151 → 1.0.0-next.155

package/src/lib/brewing/patterns.js

@@ -5,20 +5,34 @@
  * @returns {string}
  */
 export function toPatternId(key) {
-  return `chart-pat-${String(key).replace(/\s+/g, '-').replace(/[^\w-]/g, '_')}`
+	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'
+	'diagonal',
+	'dots',
+	'triangles',
+	'hatch',
+	'lattice',
+	'swell',
+	'checkerboard',
+	'waves',
+	'petals',
+	'brick',
+	'diamonds',
+	'tile',
+	'scales',
+	'circles',
+	'pip',
+	'rings',
+	'chevrons',
+	'shards',
+	'wedge',
+	'argyle',
+	'shell'
 ]
 
 /**
@@ -27,5 +41,5 @@ export const PATTERN_ORDER = [
  * @returns {Map<unknown, string>}
  */
 export function assignPatterns(values) {
-  return new Map(values.map((v, i) => [v, PATTERN_ORDER[i % PATTERN_ORDER.length]]))
+	return new Map(values.map((v, i) => [v, PATTERN_ORDER[i % PATTERN_ORDER.length]]))
 }

package/src/lib/brewing/scales.js

@@ -9,21 +9,21 @@ import { max, extent } from 'd3-array'
  * @param {{ padding?: number }} opts
  */
 export function buildXScale(data, field, width, opts = {}) {
-  const values = [...new Set(data.map((d) => d[field]))]
-  const isNumeric = values.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && v !== ''))
-  if (isNumeric) {
-    const [minVal, maxVal] = extent(data, (d) => Number(d[field]))
-    return scaleLinear().domain([minVal, maxVal]).range([0, width]).nice()
-  }
-  return scaleBand()
-    .domain(values)
-    .range([0, width])
-    .padding(opts.padding ?? 0.2)
+	const values = [...new Set(data.map((d) => d[field]))]
+	const isNumeric = values.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && v !== ''))
+	if (isNumeric) {
+		const [minVal, maxVal] = extent(data, (d) => Number(d[field]))
+		return scaleLinear().domain([minVal, maxVal]).range([0, width]).nice()
+	}
+	return scaleBand()
+		.domain(values)
+		.range([0, width])
+		.padding(opts.padding ?? 0.2)
 }
 
 function maxFromLayer(layer) {
-  if (layer.data && layer.y) return max(layer.data, (d) => Number(d[layer.y])) ?? 0
-  return 0
+	if (layer.data && layer.y) return max(layer.data, (d) => Number(d[layer.y])) ?? 0
+	return 0
 }
 
 /**
@@ -34,9 +34,9 @@ function maxFromLayer(layer) {
  * @param {Array<{data?: Object[], y?: string}>} layers
  */
 export function buildYScale(data, field, height, layers = []) {
-  const dataMax = max(data, (d) => Number(d[field])) ?? 0
-  const maxVal = layers.reduce((m, layer) => Math.max(m, maxFromLayer(layer)), dataMax)
-  return scaleLinear().domain([0, maxVal]).range([height, 0]).nice()
+	const dataMax = max(data, (d) => Number(d[field])) ?? 0
+	const maxVal = layers.reduce((m, layer) => Math.max(m, maxFromLayer(layer)), dataMax)
+	return scaleLinear().domain([0, maxVal]).range([height, 0]).nice()
 }
 
 /**
@@ -46,6 +46,6 @@ export function buildYScale(data, field, height, layers = []) {
  * @param {number} maxRadius
  */
 export function buildSizeScale(data, field, maxRadius = 20) {
-  const maxVal = max(data, (d) => Number(d[field])) ?? 1
-  return scaleSqrt().domain([0, maxVal]).range([0, maxRadius])
+	const maxVal = max(data, (d) => Number(d[field])) ?? 1
+	return scaleSqrt().domain([0, maxVal]).range([0, maxRadius])
 }

package/src/lib/brewing/stats.js

@@ -2,7 +2,7 @@ import { sum, mean, min, max, quantile, ascending } from 'd3-array'
 import { dataset } from '@rokkit/data'
 
 function sortedQuantile(values, p) {
-  return quantile([...values].sort(ascending), p)
+	return quantile([...values].sort(ascending), p)
 }
 
 /**
@@ -10,11 +10,11 @@ function sortedQuantile(values, p) {
  * @type {Record<string, (values: number[]) => number>}
  */
 export const STAT_FNS = {
-  sum,
-  mean,
-  min,
-  max,
-  count: (values) => values.length
+	sum,
+	mean,
+	min,
+	max,
+	count: (values) => values.length
 }
 
 /**
@@ -26,20 +26,28 @@ export const STAT_FNS = {
  * @returns {Object[]}
  */
 export function applyBoxStat(data, channels) {
-  const { x: xf, y: yf, color: cf } = channels
-  if (!xf || !yf) return data
-  const by = [xf, cf].filter(Boolean)
-  return dataset(data)
-    .groupBy(...by)
-    .summarize((row) => row[yf], {
-      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()
+	const { x: xf, y: yf, color: cf } = channels
+	if (!xf || !yf) return data
+	const by = [xf, cf].filter(Boolean)
+	return dataset(data)
+		.groupBy(...by)
+		.summarize((row) => row[yf], {
+			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()
 }
 
 /**
@@ -51,16 +59,16 @@ export function applyBoxStat(data, channels) {
  * @returns {Object[]}
  */
 function isIdentityOrEmpty(stat, by, value) {
-  return stat === 'identity' || by.length === 0 || value === null || value === undefined
+	return stat === 'identity' || by.length === 0 || value === null || value === undefined
 }
 
 export function applyAggregate(data, { by, value, stat }) {
-  if (isIdentityOrEmpty(stat, by, value)) return data
-  const fn = typeof stat === 'function' ? stat : STAT_FNS[stat]
-  if (fn === null || fn === undefined) return data
-  return dataset(data)
-    .groupBy(...by)
-    .summarize((row) => row[value], { [value]: fn })
-    .rollup()
-    .select()
+	if (isIdentityOrEmpty(stat, by, value)) return data
+	const fn = typeof stat === 'function' ? stat : STAT_FNS[stat]
+	if (fn === null || fn === undefined) return data
+	return dataset(data)
+		.groupBy(...by)
+		.summarize((row) => row[value], { [value]: fn })
+		.rollup()
+		.select()
 }

package/src/lib/brewing/symbols.js

@@ -6,5 +6,5 @@ export const SYMBOL_ORDER = ['circle', 'square', 'triangle', 'diamond', 'plus',
  * @returns {Map<unknown, string>}
  */
 export function assignSymbols(values) {
-  return new Map(values.map((v, i) => [v, SYMBOL_ORDER[i % SYMBOL_ORDER.length]]))
+	return new Map(values.map((v, i) => [v, SYMBOL_ORDER[i % SYMBOL_ORDER.length]]))
 }

package/src/lib/chart.js

@@ -59,7 +59,8 @@ class Chart {
 		this.color = opts.color || opts.fill
 		this.shape = opts.shape || opts.fill
 		this.padding = opts.padding !== undefined ? Number(opts.padding) : 32
-		this.spacing = (Number(opts.spacing) >= 0 && Number(opts.spacing) <= 0.5) ? Number(opts.spacing) : 0
+		this.spacing =
+			Number(opts.spacing) >= 0 && Number(opts.spacing) <= 0.5 ? Number(opts.spacing) : 0
 		this.margin = {
 			top: Number(opts.margin?.top) || 0,
 			left: Number(opts.margin?.left) || 0,

package/src/lib/keyboard-nav.js

@@ -0,0 +1,37 @@
+/**
+ * Svelte action: arrow key navigation between sibling data elements within a geom.
+ *
+ * When applied to a focusable SVG element with `enabled=true`, ArrowLeft/ArrowRight
+ * move focus between elements sharing the same `[data-plot-geom]` container.
+ *
+ * Usage: `<circle use:keyboardNav={keyboard} ...>`
+ *
+ * @param {Element} node
+ * @param {boolean} enabled
+ */
+export function keyboardNav(node, enabled) {
+	function handleKeydown(e) {
+		if (!enabled) return
+		if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+		const container = node.closest('[data-plot-geom]')
+		if (!container) return
+		const elements = [...container.querySelectorAll('[data-plot-element]')].filter(
+			(el) => /** @type {HTMLElement|SVGElement} */ (el).tabIndex >= 0
+		)
+		const idx = elements.indexOf(node)
+		if (idx === -1) return
+		const nextIdx =
+			e.key === 'ArrowRight' ? Math.min(idx + 1, elements.length - 1) : Math.max(idx - 1, 0)
+		if (nextIdx !== idx) {
+			e.preventDefault()
+			/** @type {HTMLElement|SVGElement} */ (elements[nextIdx]).focus()
+		}
+	}
+	node.addEventListener('keydown', handleKeydown)
+	return {
+		update(newEnabled) {
+			enabled = newEnabled
+		},
+		destroy: () => node.removeEventListener('keydown', handleKeydown)
+	}
+}

package/src/lib/plot/crossfilter.js

@@ -8,9 +8,9 @@
  * @returns {{ data: Object, dimmed: boolean }[]}
  */
 export function applyDimming(data, cf, channels) {
-  const fields = Object.values(channels).filter(Boolean)
-  return data.map((row) => {
-    const dimmed = fields.some((field) => cf.isDimmed(field, row[field]))
-    return { data: row, dimmed }
-  })
+	const fields = Object.values(channels).filter(Boolean)
+	return data.map((row) => {
+		const dimmed = fields.some((field) => cf.isDimmed(field, row[field]))
+		return { data: row, dimmed }
+	})
 }

package/src/lib/plot/facet.js

@@ -9,13 +9,13 @@ import { extent } from 'd3-array'
  * @returns {Map<unknown, Object[]>}
  */
 export function splitByField(data, field) {
-  const map = new Map()
-  for (const row of data) {
-    const key = row[field]
-    if (!map.has(key)) map.set(key, [])
-    map.get(key).push(row)
-  }
-  return map
+	const map = new Map()
+	for (const row of data) {
+		const key = row[field]
+		if (!map.has(key)) map.set(key, [])
+		map.get(key).push(row)
+	}
+	return map
 }
 
 /**
@@ -27,32 +27,32 @@ export function splitByField(data, field) {
  * @returns {Map<unknown, { xDomain: unknown[], yDomain: [number, number] }>}
  */
 export function getFacetDomains(panels, channels, scalesMode = 'fixed') {
-  const { x: xf, y: yf } = channels
-  const allData = [...panels.values()].flat()
+	const { x: xf, y: yf } = channels
+	const allData = [...panels.values()].flat()
 
-  // Determine if x is categorical (string) or numeric
-  const sampleXVal = allData.find(d => d[xf] !== null && d[xf] !== undefined)?.[xf]
-  const xIsCategorical = typeof sampleXVal === 'string'
+	// Determine if x is categorical (string) or numeric
+	const sampleXVal = allData.find((d) => d[xf] !== null && d[xf] !== undefined)?.[xf]
+	const xIsCategorical = typeof sampleXVal === 'string'
 
-  // Global domains (for fixed mode)
-  const globalXDomain = xIsCategorical
-    ? [...new Set(allData.map((d) => d[xf]))]
-    : extent(allData, (d) => Number(d[xf]))
-  const globalYDomain = extent(allData, (d) => Number(d[yf]))
+	// Global domains (for fixed mode)
+	const globalXDomain = xIsCategorical
+		? [...new Set(allData.map((d) => d[xf]))]
+		: extent(allData, (d) => Number(d[xf]))
+	const globalYDomain = extent(allData, (d) => Number(d[yf]))
 
-  const result = new Map()
-  for (const [key, rows] of panels.entries()) {
-    const freeX = scalesMode === 'free' || scalesMode === 'free_x'
-    const freeY = scalesMode === 'free' || scalesMode === 'free_y'
+	const result = new Map()
+	for (const [key, rows] of panels.entries()) {
+		const freeX = scalesMode === 'free' || scalesMode === 'free_x'
+		const freeY = scalesMode === 'free' || scalesMode === 'free_y'
 
-    const xDomain = freeX
-      ? (xIsCategorical ? [...new Set(rows.map((d) => d[xf]))] : extent(rows, (d) => Number(d[xf])))
-      : globalXDomain
-    const yDomain = freeY
-      ? extent(rows, (d) => Number(d[yf]))
-      : globalYDomain
+		const xDomain = freeX
+			? xIsCategorical
+				? [...new Set(rows.map((d) => d[xf]))]
+				: extent(rows, (d) => Number(d[xf]))
+			: globalXDomain
+		const yDomain = freeY ? extent(rows, (d) => Number(d[yf])) : globalYDomain
 
-    result.set(key, { xDomain, yDomain })
-  }
-  return result
+		result.set(key, { xDomain, yDomain })
+	}
+	return result
 }

package/src/lib/plot/frames.js

@@ -10,13 +10,13 @@ import { dataset } from '@rokkit/data'
  * @returns {Map<unknown, Object[]>}
  */
 export function extractFrames(data, timeField) {
-  const map = new Map()
-  for (const row of data) {
-    const key = row[timeField]
-    if (!map.has(key)) map.set(key, [])
-    map.get(key).push(row)
-  }
-  return map
+	const map = new Map()
+	for (const row of data) {
+		const key = row[timeField]
+		if (!map.has(key)) map.set(key, [])
+		map.get(key).push(row)
+	}
+	return map
 }
 
 /**
@@ -33,23 +33,23 @@ export function extractFrames(data, timeField) {
  * @returns {Object[]}
  */
 export function completeFrames(data, channels, byField) {
-  const { x: xf, y: yf, color: cf } = channels
-  const groupFields = [xf, ...(cf ? [cf] : [])].filter(Boolean)
+	const { x: xf, y: yf, color: cf } = channels
+	const groupFields = [xf, ...(cf ? [cf] : [])].filter(Boolean)
 
-  if (groupFields.length === 0) return data
+	if (groupFields.length === 0) return data
 
-  const nested = dataset(data)
-    .groupBy(...groupFields)
-    .alignBy(byField)
-    .usingTemplate({ [yf]: 0 })
-    .rollup()
-    .select()
+	const nested = dataset(data)
+		.groupBy(...groupFields)
+		.alignBy(byField)
+		.usingTemplate({ [yf]: 0 })
+		.rollup()
+		.select()
 
-  return nested.flatMap((row) => {
-    const groupKey = groupFields.reduce((acc, f) => ({ ...acc, [f]: row[f] }), {})
-    // strip the actual_flag marker added by alignBy
-    return row.children.map(({ actual_flag: _af, ...child }) => ({ ...groupKey, ...child }))
-  })
+	return nested.flatMap((row) => {
+		const groupKey = groupFields.reduce((acc, f) => ({ ...acc, [f]: row[f] }), {})
+		// strip the actual_flag marker added by alignBy
+		return row.children.map(({ actual_flag: _af, ...child }) => ({ ...groupKey, ...child }))
+	})
 }
 
 /**
@@ -66,15 +66,16 @@ export function completeFrames(data, channels, byField) {
  * @returns {{ xDomain: unknown[], yDomain: [number, number] }}
  */
 export function computeStaticDomains(data, channels) {
-  const { x: xf, y: yf } = channels
+	const { x: xf, y: yf } = channels
 
-  const sampleX = data[0]?.[xf]
-  const xDomain = typeof sampleX === 'string'
-    ? [...new Set(data.map((d) => d[xf]))]
-    : extent(data, (d) => Number(d[xf]))
+	const sampleX = data[0]?.[xf]
+	const xDomain =
+		typeof sampleX === 'string'
+			? [...new Set(data.map((d) => d[xf]))]
+			: extent(data, (d) => Number(d[xf]))
 
-  const [, yMax] = extent(data, (d) => Number(d[yf]))
-  const yDomain = [0, yMax ?? 0]
+	const [, yMax] = extent(data, (d) => Number(d[yf]))
+	const yDomain = [0, yMax ?? 0]
 
-  return { xDomain, yDomain }
+	return { xDomain, yDomain }
 }

package/src/lib/plot/helpers.js

@@ -1,14 +1,14 @@
 const BUILT_IN_GEOMS = new Set(['bar', 'line', 'area', 'point', 'box', 'violin', 'arc'])
 
 export function resolveFormat(field, helpers = {}) {
-  return helpers?.format?.[field] ?? ((v) => String(v))
+	return helpers?.format?.[field] ?? ((v) => String(v))
 }
 
 export function resolveTooltip(helpers = {}) {
-  return helpers?.tooltip ?? null
+	return helpers?.tooltip ?? null
 }
 
 export function resolveGeom(type, helpers = {}) {
-  if (BUILT_IN_GEOMS.has(type)) return null
-  return helpers?.geoms?.[type] ?? null
+	if (BUILT_IN_GEOMS.has(type)) return null
+	return helpers?.geoms?.[type] ?? null
 }

package/src/lib/plot/preset.js

@@ -1,53 +1,67 @@
-import palette from '../brewing/palette.json'
+import masterPalette from '../palette.json'
+import { defaultPreset } from '../preset.js'
 import { PATTERN_ORDER } from '../brewing/patterns.js'
 import { SYMBOL_ORDER } from '../brewing/symbols.js'
 
 /** @typedef {{ colors: string[], patterns: string[], symbols: string[] }} PlotPreset */
 
 export const DEFAULT_PRESET = {
-  colors:   palette.map((p) => p.shades.light.fill),
-  patterns: PATTERN_ORDER,
-  symbols:  SYMBOL_ORDER
+	colors: defaultPreset.colors.map((name) => {
+		const group = masterPalette[name]
+		return group?.[defaultPreset.shades.light.fill] ?? '#888'
+	}),
+	patterns: PATTERN_ORDER,
+	symbols: SYMBOL_ORDER
 }
 
 export const ACCESSIBLE_PRESET = {
-  colors:   ['#66c2a5','#fc8d62','#8da0cb','#e78ac3','#a6d854','#ffd92f','#e5c494','#b3b3b3'],
-  patterns: PATTERN_ORDER,
-  symbols:  SYMBOL_ORDER
+	colors: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', '#e5c494', '#b3b3b3'],
+	patterns: PATTERN_ORDER,
+	symbols: SYMBOL_ORDER
 }
 
 export const PRINT_PRESET = {
-  colors:   ['#f0f0f0','#bdbdbd','#969696','#737373','#525252','#252525','#000000'],
-  patterns: ['CrossHatch','DiagonalLines','Dots','Brick','Waves','Triangles','HorizontalLines'],
-  symbols:  SYMBOL_ORDER
+	colors: ['#f0f0f0', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
+	patterns: [
+		'CrossHatch',
+		'DiagonalLines',
+		'Dots',
+		'Brick',
+		'Waves',
+		'Triangles',
+		'HorizontalLines'
+	],
+	symbols: SYMBOL_ORDER
 }
 
 const BUILT_IN_PRESETS = {
-  default:    DEFAULT_PRESET,
-  accessible: ACCESSIBLE_PRESET,
-  print:      PRINT_PRESET
+	default: DEFAULT_PRESET,
+	accessible: ACCESSIBLE_PRESET,
+	print: PRINT_PRESET
 }
 
 export function resolvePreset(name, helpers = {}) {
-  let resolved = null
-
-  if (name && BUILT_IN_PRESETS[name]) {
-    resolved = BUILT_IN_PRESETS[name]
-  } else if (name && helpers?.presets?.[name]) {
-    resolved = helpers.presets[name]
-  } else if (name) {
-    // eslint-disable-next-line no-console
-    console.warn(`[Plot] Unknown preset "${name}" — falling back to default. Add it to helpers.presets to suppress this warning.`)
-    resolved = DEFAULT_PRESET
-  } else if (helpers?.preset) {
-    resolved = helpers.preset
-  } else {
-    resolved = DEFAULT_PRESET
-  }
-
-  return {
-    colors:   resolved.colors   ?? DEFAULT_PRESET.colors,
-    patterns: resolved.patterns ?? DEFAULT_PRESET.patterns,
-    symbols:  resolved.symbols  ?? DEFAULT_PRESET.symbols
-  }
+	let resolved = null
+
+	if (name && BUILT_IN_PRESETS[name]) {
+		resolved = BUILT_IN_PRESETS[name]
+	} else if (name && helpers?.presets?.[name]) {
+		resolved = helpers.presets[name]
+	} else if (name) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`[Plot] Unknown preset "${name}" — falling back to default. Add it to helpers.presets to suppress this warning.`
+		)
+		resolved = DEFAULT_PRESET
+	} else if (helpers?.preset) {
+		resolved = helpers.preset
+	} else {
+		resolved = DEFAULT_PRESET
+	}
+
+	return {
+		colors: resolved.colors ?? DEFAULT_PRESET.colors,
+		patterns: resolved.patterns ?? DEFAULT_PRESET.patterns,
+		symbols: resolved.symbols ?? DEFAULT_PRESET.symbols
+	}
 }