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

package/src/crossfilter/FilterSlider.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { getContext } from 'svelte'
+
+  /**
+   * Dual range slider for a continuous crossfilter dimension.
+   * NOTE: Interim implementation using HTML range inputs.
+   * The spec calls for a Plot+Point+brush architecture, deferred until brush geom is implemented.
+   */
+  let { field, min, max, step = 0.1, label = '' } = $props()
+
+  const cf = getContext('crossfilter')
+
+  // Initialize from props; $effect keeps in sync when min/max change
+  let low  = $state(0)
+  let high = $state(100)
+
+  $effect(() => {
+    low = min ?? 0
+    high = max ?? 100
+  })
+
+  function handleLow(e) {
+    low = Math.min(Number(e.currentTarget.value), high)
+    cf?.setRange(field, [low, high])
+  }
+
+  function handleHigh(e) {
+    high = Math.max(Number(e.currentTarget.value), low)
+    cf?.setRange(field, [low, high])
+  }
+</script>
+
+<div data-filter-slider data-filter-field={field}>
+  {#if label}
+    <span data-filter-slider-label>{label}</span>
+  {/if}
+  <div data-filter-slider-inputs>
+    <input
+      type="range"
+      {min} {max} {step}
+      value={low}
+      oninput={handleLow}
+      aria-label="Minimum {label || field}"
+      data-filter-slider-low
+    />
+    <input
+      type="range"
+      {min} {max} {step}
+      value={high}
+      oninput={handleHigh}
+      aria-label="Maximum {label || field}"
+      data-filter-slider-high
+    />
+  </div>
+  <div data-filter-slider-display>
+    {low} – {high}
+  </div>
+</div>
+
+<style>
+  [data-filter-slider] {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+  }
+  [data-filter-slider-inputs] {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  [data-filter-slider-label] {
+    font-weight: 600;
+  }
+  [data-filter-slider-display] {
+    color: currentColor;
+    opacity: 0.7;
+  }
+</style>

package/src/crossfilter/createCrossFilter.svelte.js

@@ -0,0 +1,120 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+
+/**
+ * Creates a reactive cross-filter state object.
+ *
+ * Filter values follow the spec type:
+ *   FilterState = Map<string, Set<unknown> | [number, number]>
+ *   - categorical: raw Set of selected values
+ *   - continuous:  [min, max] tuple
+ *
+ * Exposes a `filters` getter so CrossFilter.svelte can bind to current state.
+ * Exposes a `version` counter that increments on every mutation, giving
+ * components a simple reactive signal to watch for filter changes.
+ *
+ * @returns {CrossFilter}
+ */
+
+function toggleCategoricalInMap(filters, dimension, value) {
+  const existing = filters.get(dimension)
+  const set = existing instanceof Set ? new SvelteSet(existing) : new SvelteSet()
+  if (set.has(value)) {
+    set.delete(value)
+  } else {
+    set.add(value)
+  }
+  if (set.size === 0) {
+    filters.delete(dimension)
+  } else {
+    filters.set(dimension, set)
+  }
+}
+
+export function createCrossFilter() {
+  // Map<dimension, Set<unknown> | [number, number]>
+  const filters = new SvelteMap()
+
+  // Simple counter incremented on every mutation. Components read cf.version
+  // inside $effect to reactively recompute when any filter changes.
+  let version = $state(0)
+
+  /**
+   * Returns true if any filter is active on this dimension.
+   * @param {string} dimension
+   */
+  function isFiltered(dimension) {
+    const f = filters.get(dimension)
+    if (!f) return false
+    if (f instanceof Set) return f.size > 0
+    return true  // range: always active if present
+  }
+
+  /**
+   * Returns true if a value on this dimension is NOT in the active filter.
+   * Returns false when no filter is active on this dimension.
+   *
+   * @param {string} dimension
+   * @param {unknown} value
+   */
+  function isDimmed(dimension, value) {
+    const f = filters.get(dimension)
+    if (!f) return false
+    if (f instanceof Set) {
+      return !f.has(value)
+    }
+    // [min, max] range
+    const [lo, hi] = f
+    return Number(value) < lo || Number(value) > hi
+  }
+
+  /**
+   * Toggles a categorical value for a dimension.
+   * Adds when absent, removes when present.
+   * Clears the dimension filter when the last value is removed.
+   *
+   * @param {string} dimension
+   * @param {unknown} value
+   */
+  function toggleCategorical(dimension, value) {
+    toggleCategoricalInMap(filters, dimension, value)
+    version++
+  }
+
+  /**
+   * Sets a continuous range filter for a dimension.
+   * @param {string} dimension
+   * @param {[number, number]} range
+   */
+  function setRange(dimension, range) {
+    filters.set(dimension, [range[0], range[1]])
+    version++
+  }
+
+  /**
+   * Clears the filter for a single dimension.
+   * @param {string} dimension
+   */
+  function clearFilter(dimension) {
+    filters.delete(dimension)
+    version++
+  }
+
+  /** Clears all active filters. */
+  function clearAll() {
+    filters.clear()
+    version++
+  }
+
+  return {
+    /** @readonly — reactive Map of current filter state */
+    get filters() { return filters },
+    /** @readonly — increments on every mutation; read inside $effect to react to any filter change */
+    get version() { return version },
+    isFiltered,
+    isDimmed,
+    toggleCategorical,
+    setRange,
+    clearFilter,
+    clearAll
+  }
+}

package/src/elements/Bar.svelte

@@ -1,35 +1,33 @@
 <script>
 	import { format } from 'd3-format'
+	import { get } from 'svelte/store'
 	import Label from './Label.svelte'
 
-	export let rank
-	export let value
-	export let name
-	export let formatString = '.1%'
-	export let scales
-	export let height = 60
-	export let fill
-	export let spaceBetween = 5
+	let {
+		rank,
+		value,
+		name,
+		formatString = '.1%',
+		scales,
+		height = 60,
+		fill,
+		spaceBetween = 5
+	} = $props()
 
 	const textHeight = 16
 	const charWidth = 12
-	$: y = rank * (height + spaceBetween)
-	$: width = $scales.x(value)
+	let y = $derived(rank * (height + spaceBetween))
+	let width = $derived(get(scales).x(value))
 
-	$: textWidth = name.length * charWidth
-	$: textOffset = width <= textWidth ? width + charWidth : width
-	$: textAnchor = textOffset > width ? 'start' : 'end'
+	let textWidth = $derived(name.length * charWidth)
+	let textOffset = $derived(width <= textWidth ? width + charWidth : width)
+	let textAnchor = $derived(textOffset > width ? 'start' : 'end')
 
-	$: formattedValue = format(formatString)(value)
+	let formattedValue = $derived(format(formatString)(value))
+	let xOrigin = $derived(get(scales).x(0))
 </script>
 
-<rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
-<rect x={$scales.x(0)} {y} width={5} {height} {fill} />
-<Label x={width} y={y + textHeight + 8} anchor={textAnchor} label={name} />
-<Label
-	x={width}
-	y={y + height - 14}
-	anchor={textAnchor}
-	label={formattedValue}
-	small
-/>
+<rect x={xOrigin} {y} {width} {height} {fill} opacity={0.5} />
+<rect x={xOrigin} {y} width={5} {height} {fill} />
+<Label x={width} y={y + textHeight + 8} anchor={textAnchor} text={name} />
+<Label x={width} y={y + height - 14} anchor={textAnchor} text={formattedValue} small />

package/src/elements/ColorRamp.svelte

@@ -1,39 +1,37 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../lib/utils'
+	import { id as uniqueId } from '@rokkit/core'
 
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let height = 10
-	export let width = 100
-	export let tickCount = 5
-	export let scale
+	let { x = 0, y = 0, textSize = 5, height = 10, width = 100, tickCount = 5, scale } = $props()
 
-	$: scaleTicks = scaleLinear()
-		.range([x, x + width])
-		.domain(scale.domain())
-	$: scalePercent = scaleLinear().range([0, 100]).domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), value: d }))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + width])
+			.domain(scale.domain())
+	)
+	let scalePercent = $derived(scaleLinear().range([0, 100]).domain(scale.domain()))
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+	)
 
-	$: colors = ticks.map(({ value }) => ({
-		color: scale(value),
-		offset: `${scalePercent(value)}%`,
-	}))
-	$: id = uniqueId('legend-')
+	let colors = $derived(
+		ticks.map(({ value }) => ({
+			color: scale(value),
+			offset: `${scalePercent(value)}%`
+		}))
+	)
+	let id = $state(uniqueId('legend-'))
 </script>
 
 <defs>
 	<linearGradient {id}>
-		{#each colors as { color, offset }}
+		{#each colors as { color, offset }, index (index)}
 			<stop stop-color={color} {offset} />
 		{/each}
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, value }}
+{#each ticks as { x, value }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{value}</text>
 {/each}

package/src/elements/ContinuousLegend.svelte

@@ -1,24 +1,27 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../components/lib/utils'
 
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let height = 10
-	export let width = 100
-	export let tickCount = 5
-	export let scale
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		height = 10,
+		width = 100,
+		tickCount = 5,
+		scale,
+		id = 'legend'
+	} = $props()
 
-	$: scaleTicks = scaleLinear()
-		.range([x, x + 100])
-		.domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), label: d }))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + 100])
+			.domain(scale.domain())
+	)
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
+	)
 
-	$: colors = scale.range()
-	$: id = uniqueId('legend-')
+	let colors = $derived(scale.range())
 </script>
 
 <defs>
@@ -28,7 +31,7 @@
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, label }}
+{#each ticks as { x, label }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{label}</text>
 {/each}

package/src/elements/DefinePatterns.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { uniq } from 'ramda'
+
+	let {
+		size = 10,
+		patternUnits = 'userSpaceOnUse',
+		/** @type {Array<import('./types').Pattern>} */
+		patterns = []
+	} = $props()
+
+	let names = $derived(uniq(patterns.map(({ id }) => id)))
+</script>
+
+{#if names.length < patterns.length}
+	<error> Patterns should be an array and should have unique names for each pattern </error>
+{:else if patterns.length > 0}
+	<defs>
+		{#each patterns as { id, component: Component, fill, stroke }, index (index)}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<Component {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -1,22 +1,22 @@
 <script>
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let size = 10
-	export let space = 2
-	export let padding = 5
-	export let scale
-	export let tickCount
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		size = 10,
+		space = 2,
+		padding = 5,
+		scale,
+		tickCount = 10
+	} = $props()
 
-	$: sizeWithSpace = size + space
-	$: ticks = scale.ticks.apply(scale, [tickCount])
+	let sizeWithSpace = $derived(size + space)
+	let ticks = $derived(scale.ticks.apply(scale, [tickCount]))
 </script>
 
-{#each ticks as tick, i}
-	<text
-		x={x + padding + i * sizeWithSpace + size / 2}
-		y={y + size / 2}
-		font-size={textSize}>{tick}</text
+{#each ticks as tick, i (i)}
+	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
+		>{tick}</text
 	>
 	<rect
 		x={x + padding + i * sizeWithSpace}

package/src/elements/Label.svelte

@@ -1,12 +1,8 @@
 <script>
-	export let small = false
-	export let label
-	export let angle = 0
-	export let anchor = 'middle'
-	export let x
-	export let y
+	let { x, y, text, angle = 0, small = false, anchor = 'middle' } = $props()
 
-	$: transform = `translate(${x},${y}) rotate(${angle})`
+	let transform = $derived(`translate(${x},${y}) rotate(${angle})`)
+	let validAnchor = $derived(['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle')
 </script>
 
-<text class="label" class:small text-anchor={anchor} {transform}>{label}</text>
+<text class="label" class:small text-anchor={validAnchor} {transform}>{text}</text>

package/src/elements/SymbolGrid.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { swatch } from '../lib/swatch'
+	import { swatchGrid } from '../lib/grid'
+	import Symbol from '../Symbol.svelte'
+
+	let { base = 'teal', size = 4, shade = 600 } = $props()
+
+	let grid = $derived(swatchGrid(swatch.keys.symbol.length, size, 10))
+</script>
+
+<svg viewBox="0 0 {grid.width} {grid.height}">
+	{#each grid.data as { x, y, r }, index (index)}
+		<Symbol
+			{x}
+			{y}
+			size={r * 2}
+			name={swatch.keys.symbol[index]}
+			fill={swatch.palette[base][shade]}
+			stroke={swatch.palette[base][shade]}
+		/>
+	{/each}
+</svg>

package/src/elements/index.js

@@ -0,0 +1,6 @@
+export { default as Bar } from './Bar.svelte'
+export { default as ColorRamp } from './ColorRamp.svelte'
+export { default as ContinuousLegend } from './ContinuousLegend.svelte'
+export { default as Label } from './Label.svelte'
+export { default as DefinePatterns } from './DefinePatterns.svelte'
+export { default as SymbolGrid } from './SymbolGrid.svelte'

package/src/examples/BarChartExample.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { Plot } from '../index.js'
+	import { dataset } from '@rokkit/data'
+
+	// Sample data
+	const sampleData = [
+		{ model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+		{ model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+		{ model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+		{ model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+		{ model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+		{ model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+		{ model: 'Model G', name: 'Product 7', category: 'Home', count: 35 }
+	]
+
+	// Use the dataset class to process the data
+	const data = dataset(sampleData)
+		.groupBy('category')
+		.summarize('name', { count: (values) => values.length })
+		.rollup()
+
+	// Chart dimensions
+	const width = 600
+	const height = 400
+	const margin = { top: 20, right: 100, bottom: 60, left: 60 }
+
+	// Click handler for bars
+	function handleBarClick(item) {
+		console.log('Bar clicked:', item)
+		alert(`Clicked on ${item.category} with count ${item.count}`)
+	}
+</script>
+
+<div class="example">
+	<h2>Bar Chart Example</h2>
+
+	<div class="chart-wrapper">
+		<Plot.Root {data} {width} {height} {margin} fill="category">
+			<Plot.Grid direction="y" lineStyle="dashed" />
+			<Plot.Axis type="x" field="category" label="Product Category" />
+			<Plot.Axis type="y" field="count" label="Number of Products" />
+			<Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} />
+			<Plot.Legend title="Categories" />
+		</Plot.Root>
+	</div>
+
+	<div class="code-example">
+		<h3>Example Code:</h3>
+		<pre>
+<!-- &lt;script&gt;
+  import { Plot } from '@rokkit/chart';
+  import { dataset } from '@rokkit/data';
+
+  // Sample data
+  const sampleData = [
+    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+    { model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+    { model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+    { model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+    { model: 'Model G', name: 'Product 7', category: 'Home', count: 35 },
+  ];
+
+  // Use the dataset class to process the data
+  const data = dataset(sampleData)
+    .groupBy('category')
+    .summarize('name', { count: values => values.length })
+    .rollup();
+&lt;/script&gt;
+
+&lt;Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 100, bottom: 60, left: 60 }} fill="category"&gt;
+  &lt;Plot.Grid direction="y" lineStyle="dashed" /&gt;
+  &lt;Plot.Axis type="x" field="category" label="Product Category" /&gt;
+  &lt;Plot.Axis type="y" field="count" label="Number of Products" /&gt;
+  &lt;Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} /&gt;
+  &lt;Plot.Legend title="Categories" /&gt;
+&lt;/Plot.Root&gt; -->
+    </pre>
+	</div>
+</div>

package/src/geoms/Arc.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildArcs } from '../lib/brewing/marks/arcs.js'
+
+  /**
+   * `fill` is the primary prop name; `color` is accepted as an alias for
+   * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
+   * @type {{ theta?: string, fill?: string, color?: string, pattern?: string, stat?: string, labelFn?: (data: Record<string, unknown>) => string, options?: { innerRadius?: number } }}
+   */
+  let { theta, fill, color, pattern, labelFn = undefined, stat = 'identity', options = {} } = $props()
+
+  const fillField = $derived(fill ?? color)
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'arc', channels: { color: fillField, y: theta, pattern }, stat, options })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { color: fillField, y: theta, pattern }, stat })
+  })
+
+  const data     = $derived(id ? plotState.geomData(id) : [])
+  const colors   = $derived(plotState.colors)
+  const patterns = $derived(plotState.patterns)
+  const w        = $derived(plotState.innerWidth)
+  const h        = $derived(plotState.innerHeight)
+
+  const arcs = $derived.by(() => {
+    if (!data?.length) return []
+    // Guard: skip until data catches up after a fill-field change.
+    // When fillField changes, the $effect updates the geom asynchronously, but
+    // this derived runs first with stale data whose rows don't have the new
+    // field — causing all keys to be undefined (duplicate key error).
+    if (fillField && !(fillField in data[0])) return []
+    const innerRadius = (options.innerRadius ?? 0) * Math.min(w, h) / 2
+    return buildArcs(data, { color: fillField, y: theta, pattern }, colors, w, h, { innerRadius }, patterns)
+  })
+</script>
+
+{#if arcs.length > 0}
+  <g
+    data-plot-geom="arc"
+    transform="translate({w / 2}, {h / 2})"
+  >
+    {#each arcs as arc (arc.key)}
+      <path
+        d={arc.d}
+        fill={arc.fill}
+        stroke={arc.stroke}
+        stroke-width="1"
+        role="presentation"
+        data-plot-element="arc"
+        onmouseenter={() => plotState.setHovered({ ...arc.data, '%': `${arc.pct}%` })}
+        onmouseleave={() => plotState.clearHovered()}
+      />
+      {#if arc.patternId}
+        <path d={arc.d} fill="url(#{arc.patternId})" stroke={arc.stroke} stroke-width="1" pointer-events="none" data-plot-element="arc" />
+      {/if}
+      {#if arc.pct >= 5}
+        {@const labelText = labelFn ? String(labelFn(arc.data) ?? '') : `${arc.pct}%`}
+        {#if labelText}
+          {@const lw = Math.max(36, labelText.length * 7 + 12)}
+          <g transform="translate({arc.centroid[0]},{arc.centroid[1]})" pointer-events="none" data-plot-element="arc-label">
+            <rect x={-lw / 2} y="-9" width={lw} height="18" rx="4" fill="white" fill-opacity="0.82" />
+            <text
+              text-anchor="middle"
+              dominant-baseline="central"
+              font-size="11"
+              font-weight="600"
+              fill={arc.stroke}
+            >{labelText}</text>
+          </g>
+        {/if}
+      {/if}
+    {/each}
+  </g>
+{/if}