@rokkit/chart 1.0.0-next.147 → 1.0.0-next.148

package/src/charts/ScatterPlot.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Point from '../geoms/Point.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').ScatterBubbleChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    color = undefined,
+    symbol = undefined,
+    size = undefined,
+    label = false,
+    tooltip = false,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
+  <Point {x} {y} {color} {size} {symbol} {label} />
+</Plot>

package/src/charts/ViolinPlot.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Violin from '../geoms/Violin.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').BoxViolinChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    fill = undefined,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend}>
+  <Violin {x} {y} {fill} />
+</Plot>

package/src/crossfilter/CrossFilter.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { setContext, untrack } from 'svelte'
+  import { createCrossFilter } from './createCrossFilter.svelte.js'
+
+  /**
+   * @type {{
+   *   crossfilter?: ReturnType<typeof createCrossFilter>,
+   *   mode?: 'dim' | 'hide',
+   *   filters?: import('./createCrossFilter.svelte.js').FilterState,
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    crossfilter: externalCf = undefined,
+    mode = 'dim',
+    filters = $bindable(),
+    children
+  } = $props()
+
+  // Use an externally provided instance (spec/helpers API) or create one internally.
+  // untrack() suppresses "captures initial value" warning — intentional: the cf
+  // instance is locked in at construction time and must not recreate on prop changes.
+  const cf = untrack(() => externalCf ?? createCrossFilter())
+
+  // Expose the reactive filters Map to callers via bind:filters
+  $effect(() => {
+    filters = cf.filters
+  })
+
+  setContext('crossfilter', cf)
+  // Use a getter object so children can read .mode reactively
+  const modeRef = { get mode() { return mode } }
+  setContext('crossfilter-mode', modeRef)
+</script>
+
+<div data-crossfilter data-crossfilter-mode={mode}>
+  {@render children?.()}
+</div>

package/src/crossfilter/FilterBar.svelte

@@ -0,0 +1,32 @@
+<script>
+  import PlotChart from '../Plot.svelte'
+  import Bar from '../geoms/Bar.svelte'
+
+  let {
+    data = [],
+    field,
+    valueField,
+    stat = 'sum',
+    width = 300,
+    height = 120,
+    mode = 'light'
+  } = $props()
+
+  const spec = $derived({
+    x: field,
+    y: valueField
+  })
+</script>
+
+<!-- FilterBar must be used inside a <CrossFilter> parent. Does not create its own context. -->
+<PlotChart
+  {data}
+  {spec}
+  {width}
+  {height}
+  {mode}
+  grid={false}
+  legend={false}
+>
+  <Bar x={field} y={valueField} {stat} filterable={true} />
+</PlotChart>

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,113 @@
+/**
+ * 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}
+ */
+export function createCrossFilter() {
+  // Map<dimension, Set<unknown> | [number, number]>
+  const filters = $state(new Map())
+
+  // 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) {
+    const existing = filters.get(dimension)
+    const set = existing instanceof Set ? new Set(existing) : new Set()
+    if (set.has(value)) {
+      set.delete(value)
+    } else {
+      set.add(value)
+    }
+    if (set.size === 0) {
+      filters.delete(dimension)
+    } else {
+      filters.set(dimension, set)
+    }
+    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/SymbolGrid.svelte

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

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}

package/src/geoms/Area.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildAreas, buildStackedAreas } from './lib/areas.js'
+
+  let { x, y, color, pattern, stat = 'identity', options = {} } = $props()
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'area', channels: { x, y, color, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+
+  const data     = $derived(id ? plotState.geomData(id) : [])
+  const xScale   = $derived(plotState.xScale)
+  const yScale   = $derived(plotState.yScale)
+  const colors   = $derived(plotState.colors)
+  const patterns = $derived(plotState.patterns)
+
+  const areas = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    const channels = { x, y, color, pattern }
+    if (options.stack) {
+      return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+    }
+    return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+  })
+</script>
+
+{#if areas.length > 0}
+  <g data-plot-geom="area">
+    {#each areas as seg (seg.key ?? seg.d)}
+      <path
+        d={seg.d}
+        fill={seg.fill}
+        fill-opacity={seg.patternId ? 1 : (options.opacity ?? 0.6)}
+        stroke={seg.stroke ?? 'none'}
+        data-plot-element="area"
+      />
+      {#if seg.patternId}
+        <path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
+      {/if}
+    {/each}
+  </g>
+{/if}

package/src/geoms/Bar.svelte

@@ -0,0 +1,142 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
+  import LabelPill from './LabelPill.svelte'
+
+  let { x, y, color, fill: fillProp, pattern, label = false, stat = 'identity', options = {}, filterable = false } = $props()
+
+  // `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
+  const colorChannel = $derived(fillProp ?? color)
+
+  /**
+   * @param {Record<string, unknown>} data
+   * @param {string} defaultField
+   * @returns {string | null}
+   */
+  function resolveLabel(data, defaultField) {
+    if (!label) return null
+    if (label === true) return String(data[defaultField] ?? '')
+    if (typeof label === 'function') return String(label(data) ?? '')
+    if (typeof label === 'string') return String(data[label] ?? '')
+    return null
+  }
+
+  const plotState = getContext('plot-state')
+  const cf = getContext('crossfilter')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'bar', channels: { x, y, color: colorChannel, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+  onDestroy(() => {
+    if (id) plotState.unregisterGeom(id)
+  })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color: colorChannel, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+
+  const data        = $derived(id ? plotState.geomData(id) : [])
+  const xScale      = $derived(plotState.xScale)
+  const yScale      = $derived(plotState.yScale)
+  const colors      = $derived(plotState.colors)
+  const patterns    = $derived(plotState.patterns)
+  const orientation = $derived(plotState.orientation)
+  const innerHeight = $derived(plotState.innerHeight)
+
+  const bars = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    const channels = { x, y, color: colorChannel, pattern }
+    if (orientation === 'horizontal') {
+      return buildHorizontalBars(data, channels, xScale, yScale, colors, innerHeight)
+    }
+    if (options.stack) {
+      return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+    }
+    return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+  })
+
+  /** @type {Record<string, boolean>} */
+  let dimmedByKey = $state({})
+
+  $effect(() => {
+    if (!cf) { dimmedByKey = {}; return }
+    // cf.version is a $state counter that increments on every filter mutation.
+    // Reading it here establishes a reactive dependency so the effect re-runs
+    // whenever any filter changes — including changes from sibling FilterBars.
+    void cf.version
+    const next = /** @type {Record<string, boolean>} */ ({})
+    for (const bar of bars) {
+      const dimmedByX = x ? cf.isDimmed(x, bar.data[x]) : false
+      const dimmedByY = y ? cf.isDimmed(y, bar.data[y]) : false
+      next[bar.key] = dimmedByX || dimmedByY
+    }
+    dimmedByKey = next
+  })
+
+  function handleBarClick(barX) {
+    if (!filterable || !x || !cf) return
+    cf.toggleCategorical(x, barX)
+  }
+</script>
+
+{#if bars.length > 0}
+  <g data-plot-geom="bar">
+    {#each bars as bar (bar.key)}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <rect
+        x={bar.x}
+        y={bar.y}
+        width={Math.max(0, bar.width)}
+        height={Math.max(0, bar.height)}
+        fill={bar.fill}
+        stroke={bar.stroke ?? 'none'}
+        stroke-width={bar.stroke ? 0.5 : 0}
+        data-plot-element="bar"
+        data-plot-value={bar.data[y]}
+        data-plot-category={bar.data[x]}
+        data-dimmed={dimmedByKey[bar.key] ? true : undefined}
+        style:cursor={filterable ? 'pointer' : undefined}
+        onclick={filterable && x ? () => handleBarClick(bar.data[x]) : undefined}
+        onkeydown={filterable && x ? (e) => (e.key === 'Enter' || e.key === ' ') && handleBarClick(bar.data[x]) : undefined}
+        role={filterable ? 'button' : 'graphics-symbol'}
+        tabindex={filterable ? 0 : undefined}
+        aria-label="{bar.data[x]}: {bar.data[y]}"
+        onmouseenter={() => plotState.setHovered(bar.data)}
+        onmouseleave={() => plotState.clearHovered()}
+      >
+        <title>{bar.data[x]}: {bar.data[y]}</title>
+      </rect>
+      {#if bar.patternId}
+        <rect
+          x={bar.x}
+          y={bar.y}
+          width={Math.max(0, bar.width)}
+          height={Math.max(0, bar.height)}
+          fill="url(#{bar.patternId})"
+          pointer-events="none"
+        />
+      {/if}
+      {#if label}
+        {@const text = resolveLabel(bar.data, orientation === 'horizontal' ? x : y)}
+        {#if text}
+          {#if orientation === 'horizontal'}
+            <LabelPill
+              x={bar.x + bar.width + (options.labelOffset ?? 8)}
+              y={bar.y + bar.height / 2}
+              {text}
+              color={bar.stroke ?? '#333'}
+            />
+          {:else}
+            <LabelPill
+              x={bar.x + bar.width / 2}
+              y={bar.y + (options.labelOffset ?? -8)}
+              {text}
+              color={bar.stroke ?? '#333'}
+            />
+          {/if}
+        {/if}
+      {/if}
+    {/each}
+  </g>
+{/if}