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

package/src/lib/plot/scales.js

@@ -2,55 +2,80 @@ import { scaleBand, scaleLinear } from 'd3-scale'
 import { extent } from 'd3-array'
 
 export function inferFieldType(data, field) {
-  const values = data.map((d) => d[field]).filter((v) => v !== null && v !== undefined)
-  if (values.length === 0) return 'band'
-  const isNumeric = values.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && String(v).trim() !== ''))
-  return isNumeric ? 'continuous' : 'band'
+	const values = data.map((d) => d[field]).filter((v) => v !== null && v !== undefined)
+	if (values.length === 0) return 'band'
+	const isNumeric = values.every(
+		(v) => typeof v === 'number' || (!isNaN(Number(v)) && String(v).trim() !== '')
+	)
+	return isNumeric ? 'continuous' : 'band'
 }
 
 export function inferOrientation(xType, yType) {
-  if (xType === 'band' && yType === 'continuous') return 'vertical'
-  if (yType === 'band' && xType === 'continuous') return 'horizontal'
-  return 'none'
+	if (xType === 'band' && yType === 'continuous') return 'vertical'
+	if (yType === 'band' && xType === 'continuous') return 'horizontal'
+	return 'none'
 }
 
 export function buildUnifiedXScale(datasets, field, width, opts = {}) {
-  const allValues = datasets.flatMap((d) => d.map((r) => r[field]))
-  const isNumeric = allValues.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && String(v).trim() !== ''))
-
-  // opts.band forces scaleBand even for numeric data (e.g. bar charts with year on X).
-  if (opts.domain) {
-    const domainIsNumeric = opts.domain.every((v) => typeof v === 'number')
-    if (!opts.band && (domainIsNumeric || isNumeric)) {
-      return scaleLinear().domain(opts.domain).range([0, width]).nice()
-    }
-    return scaleBand().domain(opts.domain).range([0, width]).padding(opts.padding ?? 0.2)
-  }
-
-  if (isNumeric && !opts.band) {
-    const numericValues = allValues.map(Number)
-    const [minVal, maxVal] = extent(numericValues)
-    const domainMin = (opts.includeZero ?? false) ? 0 : (minVal ?? 0)
-    return scaleLinear().domain([domainMin, maxVal ?? 0]).range([0, width]).nice()
-  }
-
-  const domain = [...new Set(allValues)].filter((v) => v !== null && v !== undefined)
-  return scaleBand().domain(domain).range([0, width]).padding(opts.padding ?? 0.2)
+	const allValues = datasets.flatMap((d) => d.map((r) => r[field]))
+	const isNumeric = allValues.every(
+		(v) => typeof v === 'number' || (!isNaN(Number(v)) && String(v).trim() !== '')
+	)
+
+	// opts.band forces scaleBand even for numeric data (e.g. bar charts with year on X).
+	if (opts.domain) {
+		const domainIsNumeric = opts.domain.every((v) => typeof v === 'number')
+		if (!opts.band && (domainIsNumeric || isNumeric)) {
+			return scaleLinear().domain(opts.domain).range([0, width]).nice()
+		}
+		return scaleBand()
+			.domain(opts.domain)
+			.range([0, width])
+			.padding(opts.padding ?? 0.2)
+	}
+
+	if (isNumeric && !opts.band) {
+		const numericValues = allValues.map(Number)
+		const [minVal, maxVal] = extent(numericValues)
+		const domainMin = (opts.includeZero ?? false) ? 0 : (minVal ?? 0)
+		return scaleLinear()
+			.domain([domainMin, maxVal ?? 0])
+			.range([0, width])
+			.nice()
+	}
+
+	const domain = [...new Set(allValues)].filter((v) => v !== null && v !== undefined)
+	return scaleBand()
+		.domain(domain)
+		.range([0, width])
+		.padding(opts.padding ?? 0.2)
 }
 
 export function buildUnifiedYScale(datasets, field, height, opts = {}) {
-  if (opts.domain) {
-    return scaleLinear().domain(opts.domain).range([height, 0]).nice()
-  }
-  const allValues = datasets.flatMap((d) => d.map((r) => Number(r[field]))).filter((v) => !isNaN(v))
-  const [minVal, maxVal] = extent(allValues)
-  const domainMin = (opts.includeZero ?? true) ? 0 : (minVal ?? 0)
-  return scaleLinear().domain([domainMin, maxVal ?? 0]).range([height, 0]).nice()
+	if (opts.domain) {
+		return scaleLinear().domain(opts.domain).range([height, 0]).nice()
+	}
+	const rawValues = datasets.flatMap((d) => d.map((r) => r[field])).filter((v) => v !== null && v !== undefined)
+	const isNumeric = rawValues.length > 0 && rawValues.every(
+		(v) => typeof v === 'number' || (!isNaN(Number(v)) && String(v).trim() !== '')
+	)
+	if (!isNumeric) {
+		// Categorical y-axis (e.g. horizontal bar chart) — use scaleBand
+		const domain = [...new Set(rawValues.map(String))]
+		return scaleBand().domain(domain).range([height, 0]).padding(0.2)
+	}
+	const numericValues = rawValues.map(Number)
+	const [minVal, maxVal] = extent(numericValues)
+	const domainMin = (opts.includeZero ?? true) ? 0 : (minVal ?? 0)
+	return scaleLinear()
+		.domain([domainMin, maxVal ?? 0])
+		.range([height, 0])
+		.nice()
 }
 
 export function inferColorScaleType(data, field, spec = {}) {
-  if (spec.colorScale) return spec.colorScale
-  if (spec.colorMidpoint !== undefined) return 'diverging'
-  const type = inferFieldType(data, field)
-  return type === 'continuous' ? 'sequential' : 'categorical'
+	if (spec.colorScale) return spec.colorScale
+	if (spec.colorMidpoint !== undefined) return 'diverging'
+	const type = inferFieldType(data, field)
+	return type === 'continuous' ? 'sequential' : 'categorical'
 }

package/src/lib/plot/stat.js

@@ -2,12 +2,12 @@ import { sum, mean, min, max, median } from 'd3-array'
 import { applyAggregate, applyBoxStat } from '../brewing/stats.js'
 
 const BUILT_IN_STATS = {
-  sum,
-  mean,
-  min,
-  max,
-  count: (values) => values.length,
-  median
+	sum,
+	mean,
+	min,
+	max,
+	count: (values) => values.length,
+	median
 }
 
 /**
@@ -19,14 +19,14 @@ const BUILT_IN_STATS = {
  * @returns {Function}
  */
 export function resolveStat(name, helpers = {}) {
-  if (name === 'identity') return (data) => data
-  if (BUILT_IN_STATS[name]) return BUILT_IN_STATS[name]
-  if (helpers?.stats?.[name]) return helpers.stats[name]
-  // eslint-disable-next-line no-console
-  console.warn(
-    `[Plot] Unknown stat "${name}" — falling back to identity. Add it to helpers.stats to suppress this warning.`
-  )
-  return (data) => data
+	if (name === 'identity') return (data) => data
+	if (BUILT_IN_STATS[name]) return BUILT_IN_STATS[name]
+	if (helpers?.stats?.[name]) return helpers.stats[name]
+	// eslint-disable-next-line no-console
+	console.warn(
+		`[Plot] Unknown stat "${name}" — falling back to identity. Add it to helpers.stats to suppress this warning.`
+	)
+	return (data) => data
 }
 
 /**
@@ -39,16 +39,16 @@ export function resolveStat(name, helpers = {}) {
  * @returns {string[]}
  */
 export function inferGroupByFields(channels, valueFields) {
-  const seen = new Set()
-  const result = []
-  for (const [key, field] of Object.entries(channels)) {
-    if (!field) continue
-    if (valueFields.includes(key) || valueFields.includes(field)) continue
-    if (seen.has(field)) continue
-    seen.add(field)
-    result.push(field)
-  }
-  return result
+	const seen = new Set()
+	const result = []
+	for (const [key, field] of Object.entries(channels)) {
+		if (!field) continue
+		if (valueFields.includes(key) || valueFields.includes(field)) continue
+		if (seen.has(field)) continue
+		seen.add(field)
+		result.push(field)
+	}
+	return result
 }
 
 /**
@@ -61,32 +61,32 @@ export function inferGroupByFields(channels, valueFields) {
  * @returns {Object[]}
  */
 export function applyGeomStat(data, geomConfig, helpers = {}) {
-  const { stat = 'identity', channels = {} } = geomConfig
-  if (stat === 'identity') return data
-  if (stat === 'boxplot') return applyBoxStat(data, channels)
+	const { stat = 'identity', channels = {} } = geomConfig
+	if (stat === 'identity') return data
+	if (stat === 'boxplot') return applyBoxStat(data, channels)
 
-  const statFn = resolveStat(stat, helpers)
+	const statFn = resolveStat(stat, helpers)
 
-  const VALUE_CHANNEL_KEYS = ['y', 'size', 'theta']
-  const groupByFields = inferGroupByFields(channels, VALUE_CHANNEL_KEYS)
-  const primaryKey = VALUE_CHANNEL_KEYS.find((k) => channels[k])
-  if (!primaryKey) return data
+	const VALUE_CHANNEL_KEYS = ['y', 'size', 'theta']
+	const groupByFields = inferGroupByFields(channels, VALUE_CHANNEL_KEYS)
+	const primaryKey = VALUE_CHANNEL_KEYS.find((k) => channels[k])
+	if (!primaryKey) return data
 
-  let result = applyAggregate(data, {
-    by: groupByFields,
-    value: channels[primaryKey],
-    stat: statFn
-  })
+	let result = applyAggregate(data, {
+		by: groupByFields,
+		value: channels[primaryKey],
+		stat: statFn
+	})
 
-  for (const key of VALUE_CHANNEL_KEYS.filter((k) => k !== primaryKey && channels[k])) {
-    const extra = applyAggregate(data, { by: groupByFields, value: channels[key], stat: statFn })
-    const index = new Map(extra.map((r) => [groupByFields.map((f) => r[f]).join('|'), r]))
-    result = result.map((r) => {
-      const mapKey = groupByFields.map((f) => r[f]).join('|')
-      const extraRow = index.get(mapKey)
-      return extraRow ? { ...r, [channels[key]]: extraRow[channels[key]] } : r
-    })
-  }
+	for (const key of VALUE_CHANNEL_KEYS.filter((k) => k !== primaryKey && channels[k])) {
+		const extra = applyAggregate(data, { by: groupByFields, value: channels[key], stat: statFn })
+		const index = new Map(extra.map((r) => [groupByFields.map((f) => r[f]).join('|'), r]))
+		result = result.map((r) => {
+			const mapKey = groupByFields.map((f) => r[f]).join('|')
+			const extraRow = index.get(mapKey)
+			return extraRow ? { ...r, [channels[key]]: extraRow[channels[key]] } : r
+		})
+	}
 
-  return result
+	return result
 }

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/patterns/DefinePatterns.svelte

@@ -1,32 +1,32 @@
 <script>
-  import { getContext } from 'svelte'
-  import { toPatternId } from '../lib/brewing/patterns.js'
-  import { PATTERNS } from './patterns.js'
-  import PatternDef from './PatternDef.svelte'
+	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()
+	/** @type {{ patterns?: Record<string, import('./patterns.js').PatternMark[]> }} */
+	let { patterns = PATTERNS } = $props()
 
-  const state = getContext('plot-state')
+	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
-  })
+	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>
+	<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/README.md

@@ -0,0 +1,3 @@
+# Patterns
+
+These patterns are inspired from https://superdesigner.co/tools/svg-backgrounds