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

package/dist/PlotState.svelte.d.ts

@@ -9,12 +9,12 @@ export class PlotState {
         fill: string;
         stroke: string;
     }>;
-    patterns: Map<any, any>;
-    symbols: Map<any, any>;
+    patterns: Map<unknown, string> | SvelteMap<any, any>;
+    symbols: Map<unknown, string> | SvelteMap<any, any>;
     colorField: any;
     patternField: any;
     symbolField: any;
-    geomTypes: Set<any>;
+    geomTypes: SvelteSet<any>;
     xAxisY: any;
     yAxisX: any;
     update(config: any): void;
@@ -45,3 +45,5 @@ export class PlotState {
     clearHovered(): void;
     #private;
 }
+import { SvelteMap } from 'svelte/reactivity';
+import { SvelteSet } from 'svelte/reactivity';

package/dist/crossfilter/createCrossFilter.svelte.d.ts

@@ -1,15 +1,13 @@
-/**
- * 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(): CrossFilter;
+export function createCrossFilter(): {
+    /** @readonly — reactive Map of current filter state */
+    readonly filters: SvelteMap<any, any>;
+    /** @readonly — increments on every mutation; read inside $effect to react to any filter change */
+    readonly version: number;
+    isFiltered: (dimension: string) => boolean;
+    isDimmed: (dimension: string, value: unknown) => boolean;
+    toggleCategorical: (dimension: string, value: unknown) => void;
+    setRange: (dimension: string, range: [number, number]) => void;
+    clearFilter: (dimension: string) => void;
+    clearAll: () => void;
+};
+import { SvelteMap } from 'svelte/reactivity';

package/dist/lib/brewing/brewer.svelte.d.ts

@@ -1,31 +1,6 @@
-/**
- * Groups aesthetic channel mappings by field name, merging aesthetics that
- * share the same field into one legend section.
- *
- * @param {{ fill?: string, color?: string, pattern?: string, symbol?: string }} channels
- *   `fill` takes precedence over `color` for polygon charts (bars, areas, pie slices).
- * @param {Map<unknown, {fill:string, stroke:string}>} colorMap
- * @param {Map<unknown, string>} patternMap
- * @param {Map<unknown, string>} symbolMap
- * @returns {{ field: string, items: { label: string, fill: string|null, stroke: string|null, patternId: string|null, shape: string|null }[] }[]}
- */
-export function buildLegendGroups(channels: {
-    fill?: string;
-    color?: string;
-    pattern?: string;
-    symbol?: string;
-}, colorMap: Map<unknown, {
-    fill: string;
-    stroke: string;
-}>, patternMap: Map<unknown, string>, symbolMap: Map<unknown, string>): {
-    field: string;
-    items: {
-        label: string;
-        fill: string | null;
-        stroke: string | null;
-        patternId: string | null;
-        shape: string | null;
-    }[];
+export function buildLegendGroups(channels: any, colorMap: any, patternMap: any, symbolMap: any): {
+    field: any;
+    items: any;
 }[];
 export class ChartBrewer {
     /**
@@ -107,14 +82,8 @@ export class ChartBrewer {
         key: any;
     }[];
     legendGroups: {
-        field: string;
-        items: {
-            label: string;
-            fill: string | null;
-            stroke: string | null;
-            patternId: string | null;
-            shape: string | null;
-        }[];
+        field: any;
+        items: any;
     }[];
     get margin(): {
         top: number;

package/dist/lib/brewing/stats.d.ts

@@ -11,19 +11,11 @@ export function applyBoxStat(data: Object[], channels: {
     y?: string;
     color?: string;
 }): Object[];
-/**
- * Aggregates data by one or more grouping fields, reducing the value field
- * using the given stat. Accepts a built-in name or a custom function.
- *
- * @param {Object[]} data
- * @param {{ by: string[], value: string, stat: string|Function }} opts
- * @returns {Object[]}
- */
-export function applyAggregate(data: Object[], { by, value, stat }: {
-    by: string[];
-    value: string;
-    stat: string | Function;
-}): Object[];
+export function applyAggregate(data: any, { by, value, stat }: {
+    by: any;
+    value: any;
+    stat: any;
+}): any;
 /**
  * Built-in reduction functions. Each receives an array of numeric values.
  * @type {Record<string, (values: number[]) => number>}

package/dist/lib/chart.d.ts

@@ -1,8 +1,8 @@
 export function chart(data: any, aes: any): Chart;
 declare class Chart {
     constructor(data: any, opts: any);
-    width: number;
-    height: number;
+    width: number | undefined;
+    height: number | undefined;
     flipCoords: any;
     x: any;
     y: any;
@@ -13,13 +13,10 @@ declare class Chart {
     color: any;
     shape: any;
     padding(value: any): this;
-    spacing: number;
+    spacing: number | undefined;
     margin(value: any): this;
-    domain: {
-        x: any[];
-        y: any[];
-    };
     stat: any;
+    domain: any;
     data: any;
     refresh(): this;
     range: {
@@ -36,5 +33,6 @@ declare class Chart {
     } | undefined;
     aggregate(value: any, stat: any): void;
     ticks(axis: any, count: any, fontSize?: number): any;
+    #private;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.150",
+  "version": "1.0.0-next.151",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {

package/src/AnimatedPlot.svelte

@@ -99,19 +99,20 @@
   let lastTime = 0
   let rafId = 0
 
+  function advanceFrame() {
+    currentIndex = currentIndex + 1
+    if (currentIndex >= frameKeys.length) {
+      if (animate.loop ?? false) currentIndex = 0
+      else playing = false
+    }
+  }
+
   function tick(time) {
     if (!playing) return
     if (time - lastTime >= msPerFrame) {
       lastTime = time
-      currentIndex = currentIndex + 1
-      if (currentIndex >= frameKeys.length) {
-        if (animate.loop ?? false) {
-          currentIndex = 0
-        } else {
-          playing = false
-          return
-        }
-      }
+      advanceFrame()
+      if (!playing) return
     }
     rafId = requestAnimationFrame(tick)
   }

package/src/Chart.svelte

@@ -40,27 +40,24 @@
   const brewer = new ChartBrewer()
   setContext('chart-brewer', brewer)
 
+  function buildChannels() {
+    const channels = {}
+    if (x)       channels.x = x
+    if (y)       channels.y = y
+    if (color)   channels.color = color
+    if (pattern) channels.pattern = pattern
+    if (fill)    channels.fill = fill
+    if (size)    channels.size = size
+    if (label)   channels.label = label
+    if (symbol)  channels.symbol = symbol
+    return channels
+  }
+
   $effect(() => {
     if (spec) {
-      brewer.update({
-        data: spec.data,
-        channels: spec.channels,
-        width,
-        height,
-        mode,
-        layers: spec.layers
-      })
+      brewer.update({ data: spec.data, channels: spec.channels, width, height, mode, layers: spec.layers })
     } else {
-      const channels = {}
-      if (x)       channels.x = x
-      if (y)       channels.y = y
-      if (color)   channels.color = color
-      if (pattern) channels.pattern = pattern
-      if (fill)    channels.fill = fill
-      if (size)    channels.size = size
-      if (label)   channels.label = label
-      if (symbol)  channels.symbol = symbol
-      brewer.update({ data, channels, width, height, mode })
+      brewer.update({ data, channels: buildChannels(), width, height, mode })
     }
   })
 

package/src/Plot.svelte

@@ -47,27 +47,8 @@
     children
   } = $props()
 
-  // Create PlotState with initial values and provide as context.
-  // untrack() suppresses "captures initial value" warnings — intentional:
-  // the $effect below handles all subsequent reactive updates.
-  const plotState = untrack(() => new PlotState({
-    data: spec?.data ?? data,
-    width: spec?.width ?? width,
-    height: spec?.height ?? height,
-    mode,
-    margin,
-    channels: spec ? { x: spec.x, y: spec.y, color: spec.color ?? spec.fill } : {},
-    labels: spec?.labels ?? {},
-    helpers,
-    xDomain: spec?.xDomain,
-    yDomain: spec?.yDomain,
-    colorDomain: spec?.colorDomain
-  }))
-  setContext('plot-state', plotState)
-
-  // Keep state in sync when reactive config changes
-  $effect(() => {
-    plotState.update({
+  function buildPlotConfig() {
+    return {
       data: spec?.data ?? data,
       width: spec?.width ?? width,
       height: spec?.height ?? height,
@@ -79,7 +60,18 @@
       xDomain: spec?.xDomain,
       yDomain: spec?.yDomain,
       colorDomain: spec?.colorDomain
-    })
+    }
+  }
+
+  // Create PlotState with initial values and provide as context.
+  // untrack() suppresses "captures initial value" warnings — intentional:
+  // the $effect below handles all subsequent reactive updates.
+  const plotState = untrack(() => new PlotState(buildPlotConfig()))
+  setContext('plot-state', plotState)
+
+  // Keep state in sync when reactive config changes
+  $effect(() => {
+    plotState.update(buildPlotConfig())
   })
 
   const svgWidth  = $derived(spec?.width ?? width)
@@ -131,7 +123,7 @@
       {@render children?.()}
 
       <!-- Spec-driven geoms -->
-      {#each specGeoms as geomSpec}
+      {#each specGeoms as geomSpec (geomSpec.type)}
         {@const GeomComponent = resolveGeomComponent(geomSpec.type)}
         {#if GeomComponent}
           <GeomComponent

package/src/PlotState.svelte.js

@@ -1,4 +1,5 @@
 import { untrack } from 'svelte'
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
 import { applyGeomStat } from './lib/plot/stat.js'
 import { inferFieldType, inferOrientation, buildUnifiedXScale, buildUnifiedYScale, inferColorScaleType } from './lib/plot/scales.js'
 import { resolvePreset } from './lib/plot/preset.js'
@@ -38,20 +39,29 @@ export class PlotState {
 
   // Effective channels: prefer top-level channels; fall back to first geom's channels
   // for the declarative API where no spec is provided.
+  #mergeGeomChannels(tc, geom) {
+    return {
+      x:       tc.x       ?? geom.channels?.x,
+      y:       tc.y       ?? geom.channels?.y,
+      color:   tc.color   ?? geom.channels?.color,
+      pattern: tc.pattern ?? geom.channels?.pattern,
+      symbol:  tc.symbol  ?? geom.channels?.symbol,
+    }
+  }
+
   #effectiveChannels = $derived.by(() => {
     const tc = this.#channels
     if (tc.x && tc.y) return tc
     const firstGeom = this.#geoms[0]
     if (!firstGeom) return tc
-    return {
-      x:       tc.x       ?? firstGeom.channels?.x,
-      y:       tc.y       ?? firstGeom.channels?.y,
-      color:   tc.color   ?? firstGeom.channels?.color,
-      pattern: tc.pattern ?? firstGeom.channels?.pattern,
-      symbol:  tc.symbol  ?? firstGeom.channels?.symbol,
-    }
+    return this.#mergeGeomChannels(tc, firstGeom)
   })
 
+  #resolveXType(rawXType, yType) {
+    const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
+    return (hasBarGeom && rawXType === 'continuous' && yType === 'continuous') ? 'band' : rawXType
+  }
+
   orientation = $derived.by(() => {
     const xField = this.#effectiveChannels.x
     const yField = this.#effectiveChannels.y
@@ -59,9 +69,7 @@ export class PlotState {
     const rawXType = inferFieldType(this.#data, xField)
     const yType = inferFieldType(this.#data, yField)
     // Bar geoms treat numeric X as categorical (e.g. year on X → vertical bars).
-    const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
-    const xType = (hasBarGeom && rawXType === 'continuous' && yType === 'continuous') ? 'band' : rawXType
-    return inferOrientation(xType, yType)
+    return inferOrientation(this.#resolveXType(rawXType, yType), yType)
   })
 
   colorScaleType = $derived.by(() => {
@@ -91,6 +99,44 @@ export class PlotState {
     })
   })
 
+  // For box/violin geoms, compute y domain from iqr_min/iqr_max instead of raw y values.
+  #resolveBoxDomain() {
+    const boxGeom = this.#geoms.find((g) => g.type === 'box' || g.type === 'violin')
+    if (!boxGeom) return null
+    const boxData = this.geomData(boxGeom.id)
+    const isValid = (v) => v !== null && v !== undefined && !isNaN(v)
+    const mins = boxData.map((d) => d.iqr_min).filter(isValid)
+    const maxs = boxData.map((d) => d.iqr_max).filter(isValid)
+    return (mins.length > 0 && maxs.length > 0) ? [Math.min(...mins), Math.max(...maxs)] : null
+  }
+
+  // For stacked bars, compute y domain from per-x column totals.
+  #resolveStackDomain(field) {
+    const stackGeom = this.#geoms.find((g) => g.options?.stack)
+    if (!stackGeom) return null
+    const xField = this.#effectiveChannels.x
+    const stackData = this.geomData(stackGeom.id)
+    if (!xField || stackData.length === 0) return null
+    // Mirror buildStackedBars/subBandFields: stack dimension is the first
+    // non-x field among [color, pattern]. Summing all raw rows (stat=identity)
+    // would overcount when multiple rows share the same (x, stack) key.
+    const colorField = this.#effectiveChannels.color
+    const patternField = this.#effectiveChannels.pattern
+    const stackField = [colorField, patternField].find((f) => f && f !== xField) ?? colorField
+    const lookup = new SvelteMap()
+    for (const d of stackData) {
+      const xVal = d[xField]
+      const cKey = stackField ? String(d[stackField]) : '_'
+      if (!lookup.has(xVal)) lookup.set(xVal, new SvelteMap())
+      lookup.get(xVal).set(cKey, Number(d[field]) || 0)
+    }
+    const totals = new SvelteMap()
+    for (const [xVal, colorMap] of lookup) {
+      totals.set(xVal, [...colorMap.values()].reduce((s, v) => s + v, 0))
+    }
+    return [0, Math.max(0, ...totals.values())]
+  }
+
   yScale = $derived.by(() => {
     const field = this.#effectiveChannels.y
     if (!field) return null
@@ -98,55 +144,8 @@ export class PlotState {
       ? this.#geoms.map((g) => this.geomData(g.id))
       : [this.#rawData]
     const includeZero = this.orientation === 'vertical'
-
-    // For stacked bars, the y domain must cover the per-x column *total*, not the
-    // per-row max — otherwise bars overflow the plot area.
-    // For box/violin geoms, the processed data has iqr_min/iqr_max instead of raw y values.
-    let yDomain = this.#yDomain
-    if (!yDomain) {
-      const boxGeom = this.#geoms.find((g) => g.type === 'box' || g.type === 'violin')
-      if (boxGeom) {
-        const boxData = this.geomData(boxGeom.id)
-        const mins = boxData.map((d) => d.iqr_min).filter((v) => v !== null && v !== undefined && !isNaN(v))
-        const maxs = boxData.map((d) => d.iqr_max).filter((v) => v !== null && v !== undefined && !isNaN(v))
-        if (mins.length > 0 && maxs.length > 0) {
-          yDomain = [Math.min(...mins), Math.max(...maxs)]
-        }
-      }
-    }
-    if (!yDomain) {
-      const stackGeom = this.#geoms.find((g) => g.options?.stack)
-      if (stackGeom) {
-        const xField = this.#effectiveChannels.x
-        const stackData = this.geomData(stackGeom.id)
-        if (xField && stackData.length > 0) {
-          // Mirror buildStackedBars/subBandFields: stack dimension is the first
-          // non-x field among [color, pattern]. Summing all raw rows (stat=identity)
-          // would overcount when multiple rows share the same (x, stack) key.
-          const colorField = this.#effectiveChannels.color
-          const patternField = this.#effectiveChannels.pattern
-          const stackField = [colorField, patternField].find((f) => f && f !== xField) ?? colorField
-          const lookup = new Map()
-          for (const d of stackData) {
-            const xVal = d[xField]
-            const cKey = stackField ? String(d[stackField]) : '_'
-            if (!lookup.has(xVal)) lookup.set(xVal, new Map())
-            lookup.get(xVal).set(cKey, Number(d[field]) || 0)
-          }
-          const totals = new Map()
-          for (const [xVal, colorMap] of lookup) {
-            totals.set(xVal, [...colorMap.values()].reduce((s, v) => s + v, 0))
-          }
-          const maxStack = Math.max(0, ...totals.values())
-          yDomain = [0, maxStack]
-        }
-      }
-    }
-
-    return buildUnifiedYScale(datasets, field, this.#innerHeight, {
-      domain: yDomain,
-      includeZero
-    })
+    const yDomain = this.#yDomain ?? this.#resolveBoxDomain() ?? this.#resolveStackDomain(field)
+    return buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero })
   })
 
   // Colors: Map<colorKey, { fill, stroke }> for all distinct color field values.
@@ -162,15 +161,15 @@ export class PlotState {
   // and the pattern field is categorical (continuous fields can't be discretely patterned).
   patterns = $derived.by(() => {
     const pf = this.#effectiveChannels.pattern
-    if (!pf) return new Map()
-    if (inferFieldType(this.#data, pf) === 'continuous') return new Map()
+    if (!pf) return new SvelteMap()
+    if (inferFieldType(this.#data, pf) === 'continuous') return new SvelteMap()
     return assignPatterns(distinct(this.#data, pf))
   })
 
   // Symbols: Map<symbolKey, shapeName> — only populated when a symbol channel is set.
   symbols = $derived.by(() => {
     const sf = this.#effectiveChannels.symbol
-    if (!sf) return new Map()
+    if (!sf) return new SvelteMap()
     return assignSymbols(distinct(this.#data, sf))
   })
 
@@ -180,7 +179,7 @@ export class PlotState {
   symbolField = $derived(this.#effectiveChannels.symbol)
 
   // Set of geom types currently registered (used by Legend to pick swatch style)
-  geomTypes = $derived(new Set(this.#geoms.map((g) => g.type)))
+  geomTypes = $derived(new SvelteSet(this.#geoms.map((g) => g.type)))
 
   xAxisY = $derived.by(() => {
     if (!this.yScale || typeof this.yScale !== 'function') return this.#innerHeight

package/src/Sparkline.svelte

@@ -56,7 +56,7 @@
     <path d={areaPath} fill={fillColor} stroke="none" />
     <path d={linePath} fill="none" stroke={strokeColor} stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
   {:else if type === 'bar'}
-    {#each values as v, i}
+    {#each values as v, i (i)}
       <rect
         x={xScale(i) - barWidth / 2}
         y={yScale(v)}

package/src/crossfilter/createCrossFilter.svelte.js

@@ -1,3 +1,5 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+
 /**
  * Creates a reactive cross-filter state object.
  *
@@ -12,9 +14,25 @@
  *
  * @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 = $state(new Map())
+  const filters = new SvelteMap()
 
   // Simple counter incremented on every mutation. Components read cf.version
   // inside $effect to reactively recompute when any filter changes.
@@ -58,18 +76,7 @@ export function createCrossFilter() {
    * @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)
-    }
+    toggleCategoricalInMap(filters, dimension, value)
     version++
   }
 

package/src/geoms/Box.svelte

@@ -8,13 +8,15 @@
   let id = $state(null)
 
   // fill ?? x drives the colors map for both box interior and whisker strokes
+  const fillChannel = $derived(fill ?? x)
+
   onMount(() => {
-    id = plotState.registerGeom({ type: 'box', channels: { x, y, color: fill ?? x }, stat, options })
+    id = plotState.registerGeom({ type: 'box', channels: { x, y, color: fillChannel }, stat, options })
   })
   onDestroy(() => { if (id) plotState.unregisterGeom(id) })
 
   $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color: fill ?? x }, stat })
+    if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
   })
 
   const data   = $derived(id ? plotState.geomData(id) : [])
@@ -24,7 +26,7 @@
 
   const boxes = $derived.by(() => {
     if (!data?.length || !xScale || !yScale) return []
-    return buildBoxes(data, { x, fill: fill ?? x }, xScale, yScale, colors)
+    return buildBoxes(data, { x, fill: fillChannel }, xScale, yScale, colors)
   })
 </script>
 

package/src/geoms/Line.svelte

@@ -14,8 +14,7 @@
     if (!label) return null
     if (label === true) return String(data[y] ?? '')
     if (typeof label === 'function') return String(label(data) ?? '')
-    if (typeof label === 'string') return String(data[label] ?? '')
-    return null
+    return typeof label === 'string' ? String(data[label] ?? '') : null
   }
 
   const plotState = getContext('plot-state')

package/src/geoms/Point.svelte

@@ -14,8 +14,7 @@
     if (!label) return null
     if (label === true) return String(data[y] ?? '')
     if (typeof label === 'function') return String(label(data) ?? '')
-    if (typeof label === 'string') return String(data[label] ?? '')
-    return null
+    return typeof label === 'string' ? String(data[label] ?? '') : null
   }
 
   const plotState = getContext('plot-state')
@@ -36,18 +35,24 @@
   const colors    = $derived(plotState.colors)
   const symbolMap = $derived(plotState.symbols)
 
-  const sizeScale = $derived.by(() => {
+  function buildSizeScale() {
     if (!size || !data?.length) return null
     const vals = data.map((d) => Number(d[size])).filter((v) => !isNaN(v))
     if (!vals.length) return null
-    const maxVal = Math.max(...vals)
     const minVal = Math.min(...vals)
-    return scaleSqrt().domain([minVal, maxVal]).range([options.minRadius ?? 3, options.maxRadius ?? 20])
-  })
+    const maxVal = Math.max(...vals)
+    const minRadius = options.minRadius ?? 3
+    const maxRadius = options.maxRadius ?? 20
+    return scaleSqrt().domain([minVal, maxVal]).range([minRadius, maxRadius])
+  }
+
+  const sizeScale = $derived.by(() => buildSizeScale())
+
+  const defaultRadius = $derived(options.radius ?? 4)
 
   const points = $derived.by(() => {
     if (!data?.length || !xScale || !yScale) return []
-    return buildPoints(data, { x, y, color, size, symbol: symbolField }, xScale, yScale, colors, sizeScale, symbolMap, options.radius ?? 4)
+    return buildPoints(data, { x, y, color, size, symbol: symbolField }, xScale, yScale, colors, sizeScale, symbolMap, defaultRadius)
   })
 </script>
 

package/src/geoms/Violin.svelte

@@ -8,13 +8,15 @@
   let id = $state(null)
 
   // fill ?? x drives the colors map for both violin interior and outline
+  const fillChannel = $derived(fill ?? x)
+
   onMount(() => {
-    id = plotState.registerGeom({ type: 'violin', channels: { x, y, color: fill ?? x }, stat, options })
+    id = plotState.registerGeom({ type: 'violin', channels: { x, y, color: fillChannel }, stat, options })
   })
   onDestroy(() => { if (id) plotState.unregisterGeom(id) })
 
   $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color: fill ?? x }, stat })
+    if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
   })
 
   const data   = $derived(id ? plotState.geomData(id) : [])
@@ -24,7 +26,7 @@
 
   const violins = $derived.by(() => {
     if (!data?.length || !xScale || !yScale) return []
-    return buildViolins(data, { x, fill: fill ?? x }, xScale, yScale, colors)
+    return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
   })
 </script>
 

package/src/lib/brewing/CartesianBrewer.svelte.js

@@ -1,3 +1,4 @@
+import { SvelteSet } from 'svelte/reactivity'
 import { ChartBrewer } from './brewer.svelte.js'
 import { applyAggregate } from './stats.js'
 
@@ -10,7 +11,7 @@ export class CartesianBrewer extends ChartBrewer {
     if (stat === 'identity' || !channels.x || !channels.y) return data
     // Group by all mapped aesthetic dimensions so they survive aggregation.
     // e.g. x=region, fill=region, pattern=quarter → by=['region','quarter']
-    const by = [...new Set([channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean))]
+    const by = [...new SvelteSet([channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean))]
     return applyAggregate(data, { by, value: channels.y, stat })
   }
 }

package/src/lib/brewing/brewer.svelte.js

@@ -1,3 +1,4 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
 import { distinct, assignColors } from './colors.js'
 import { assignPatterns, toPatternId, PATTERN_ORDER } from './patterns.js'
 import { assignSymbols } from './symbols.js'
@@ -21,39 +22,39 @@ const DEFAULT_MARGIN = { top: 20, right: 20, bottom: 40, left: 50 }
  * @param {Map<unknown, string>} symbolMap
  * @returns {{ field: string, items: { label: string, fill: string|null, stroke: string|null, patternId: string|null, shape: string|null }[] }[]}
  */
+function addAesthetic(byField, field, aesthetic, keys) {
+  if (byField.has(field)) {
+    byField.get(field).aesthetics.push(aesthetic)
+  } else {
+    byField.set(field, { aesthetics: [aesthetic], keys })
+  }
+}
+
+function buildLegendItem(key, aesthetics, colorMap, patternMap, symbolMap) {
+  const hasColor = aesthetics.includes('color')
+  return {
+    label: String(key),
+    fill: hasColor ? (colorMap.get(key)?.fill ?? null) : null,
+    stroke: hasColor ? (colorMap.get(key)?.stroke ?? null) : null,
+    patternId: aesthetics.includes('pattern') && patternMap.has(key) ? toPatternId(key) : null,
+    shape: aesthetics.includes('symbol') ? (symbolMap.get(key) ?? 'circle') : null
+  }
+}
+
 export function buildLegendGroups(channels, colorMap, patternMap, symbolMap) {
   const cf = channels.fill ?? channels.color
   const { pattern: pf, symbol: sf } = channels
-  const byField = new Map()
+  const byField = new SvelteMap()
 
-  if (cf) {
-    byField.set(cf, { aesthetics: ['color'], keys: [...colorMap.keys()] })
-  }
-  if (pf) {
-    if (byField.has(pf)) {
-      byField.get(pf).aesthetics.push('pattern')
-    } else {
-      byField.set(pf, { aesthetics: ['pattern'], keys: [...patternMap.keys()] })
-    }
-  }
-  if (sf) {
-    if (byField.has(sf)) {
-      byField.get(sf).aesthetics.push('symbol')
-    } else {
-      byField.set(sf, { aesthetics: ['symbol'], keys: [...symbolMap.keys()] })
-    }
-  }
+  if (cf) byField.set(cf, { aesthetics: ['color'], keys: [...colorMap.keys()] })
+  if (pf) addAesthetic(byField, pf, 'pattern', [...patternMap.keys()])
+  if (sf) addAesthetic(byField, sf, 'symbol', [...symbolMap.keys()])
 
   return [...byField.entries()].map(([field, { aesthetics, keys }]) => ({
     field,
-    items: keys.filter((k) => k !== null && k !== undefined).map((key) => ({
-      label: String(key),
-      fill: aesthetics.includes('color') ? (colorMap.get(key)?.fill ?? null) : null,
-      stroke: aesthetics.includes('color') ? (colorMap.get(key)?.stroke ?? null) : null,
-      patternId:
-        aesthetics.includes('pattern') && patternMap.has(key) ? toPatternId(key) : null,
-      shape: aesthetics.includes('symbol') ? (symbolMap.get(key) ?? 'circle') : null
-    }))
+    items: keys
+      .filter((k) => k !== null && k !== undefined)
+      .map((key) => buildLegendItem(key, aesthetics, colorMap, patternMap, symbolMap))
   })).filter((group) => group.items.length > 0)
 }
 
@@ -93,14 +94,14 @@ export class ChartBrewer {
   colorMap = $derived(
     (this.#channels.fill ?? this.#channels.color)
       ? assignColors(distinct(this.#rawData, this.#channels.fill ?? this.#channels.color), this.#mode)
-      : new Map()
+      : new SvelteMap()
   )
 
   /** @type {Map<unknown, string>} */
   patternMap = $derived(
     this.#channels.pattern
       ? assignPatterns(distinct(this.#rawData, this.#channels.pattern))
-      : new Map()
+      : new SvelteMap()
   )
 
   /**
@@ -128,7 +129,7 @@ export class ChartBrewer {
     for (const [pk, name] of this.patternMap.entries()) {
       defs.push({ id: toPatternId(pk), name, fill: '#ddd', stroke: '#666' })
     }
-    const seenComposite = new Set()
+    const seenComposite = new SvelteSet()
     for (const d of this.processedData) {
       const fk = d[ff]
       const pk = d[pf]
@@ -147,7 +148,7 @@ export class ChartBrewer {
   symbolMap = $derived(
     this.#channels.symbol
       ? assignSymbols(distinct(this.#rawData, this.#channels.symbol))
-      : new Map()
+      : new SvelteMap()
   )
 
   get innerWidth()  { return this.#width  - this.#margin.left - this.#margin.right }

package/src/lib/brewing/scales.js

@@ -21,6 +21,11 @@ export function buildXScale(data, field, width, opts = {}) {
     .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
+}
+
 /**
  * Builds a y linear scale from 0 to max, extended by any layer overrides.
  * @param {Object[]} data
@@ -29,13 +34,8 @@ export function buildXScale(data, field, width, opts = {}) {
  * @param {Array<{data?: Object[], y?: string}>} layers
  */
 export function buildYScale(data, field, height, layers = []) {
-  let maxVal = max(data, (d) => Number(d[field])) ?? 0
-  for (const layer of layers) {
-    if (layer.data && layer.y) {
-      const layerMax = max(layer.data, (d) => Number(d[layer.y])) ?? 0
-      if (layerMax > maxVal) maxVal = layerMax
-    }
-  }
+  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()
 }
 

package/src/lib/brewing/stats.js

@@ -50,8 +50,12 @@ export function applyBoxStat(data, channels) {
  * @param {{ by: string[], value: string, stat: string|Function }} opts
  * @returns {Object[]}
  */
+function isIdentityOrEmpty(stat, by, value) {
+  return stat === 'identity' || by.length === 0 || value === null || value === undefined
+}
+
 export function applyAggregate(data, { by, value, stat }) {
-  if (stat === 'identity' || by.length === 0 || value === null || value === undefined) return data
+  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)

package/src/lib/chart.js

@@ -46,7 +46,7 @@ class Chart {
 	// padding
 	// flipCoords = false
 
-	constructor(data, opts) {
+	#initFields(opts) {
 		this.width = Number(opts.width) || 2048
 		this.height = Number(opts.height) || 2048
 		this.flipCoords = opts.flipCoords || false
@@ -58,17 +58,18 @@ class Chart {
 		this.fill = opts.fill || opts.x
 		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,
 			right: Number(opts.margin?.right) || 0,
 			bottom: Number(opts.margin?.bottom) || 0
 		}
+		this.stat = opts.stat || 'identity'
+	}
+
+	#initDomain(data) {
 		this.domain = {
 			x: [...new Set(data.map((d) => d[this.x]))],
 			y: [...new Set(data.map((d) => d[this.y]))]
@@ -76,8 +77,9 @@ class Chart {
 		if (this.flipCoords) {
 			this.domain = { y: this.domain.x, x: this.domain.y }
 		}
-		this.stat = opts.stat || 'identity'
+	}
 
+	#initData(data) {
 		this.data = data.map((d) => ({
 			x: this.flipCoords ? d[this.y] : d[this.x],
 			y: this.flipCoords ? d[this.x] : d[this.y],
@@ -85,7 +87,12 @@ class Chart {
 			color: d[this.color]
 			// shape: d[this.shape]
 		}))
+	}
 
+	constructor(data, opts) {
+		this.#initFields(opts)
+		this.#initDomain(data)
+		this.#initData(data)
 		this.refresh()
 	}
 

package/src/patterns/PatternDef.svelte

@@ -11,7 +11,7 @@
 
 <pattern {id} patternUnits="userSpaceOnUse" width={size} height={size}>
 	<rect width={size} height={size} fill="none" />
-	{#each resolvedMarks as { type, attrs }}
+	{#each resolvedMarks as { type, attrs }, i (i)}
 		{#if type === 'line'}
 			<line {...attrs} />
 		{:else if type === 'circle'}

package/src/patterns/README.md

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