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

package/src/PlotState.svelte.js

@@ -0,0 +1,278 @@
+import { untrack } from 'svelte'
+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'
+import { resolveFormat, resolveTooltip, resolveGeom } from './lib/plot/helpers.js'
+import { distinct, assignColors } from './lib/brewing/colors.js'
+import { assignPatterns } from './lib/brewing/patterns.js'
+import { assignSymbols } from './lib/brewing/marks/points.js'
+
+let nextId = 0
+
+export class PlotState {
+  #data          = $state([])
+  #rawData       = []
+  #channels      = $state({})
+  #labels        = $state({})
+  #helpers       = $state({})
+  #presetName    = $state(undefined)
+  #colorMidpoint = $state(undefined)
+  #colorSpec     = $state(undefined)
+  #colorDomain   = $state(undefined)
+  #xDomain       = $state(undefined)
+  #yDomain       = $state(undefined)
+  #width         = $state(600)
+  #height        = $state(400)
+  #margin        = $state({ top: 20, right: 20, bottom: 40, left: 50 })
+  #marginOverride = $state(undefined)
+
+  #geoms   = $state([])
+  #mode    = $state('light')
+  #hovered = $state(null)
+
+  axisOrigin = $state([undefined, undefined])
+
+  #effectiveMargin = $derived(this.#marginOverride ?? this.#margin)
+  #innerWidth  = $derived(this.#width  - this.#effectiveMargin.left - this.#effectiveMargin.right)
+  #innerHeight = $derived(this.#height - this.#effectiveMargin.top  - this.#effectiveMargin.bottom)
+
+  // Effective channels: prefer top-level channels; fall back to first geom's channels
+  // for the declarative API where no spec is provided.
+  #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,
+    }
+  })
+
+  orientation = $derived.by(() => {
+    const xField = this.#effectiveChannels.x
+    const yField = this.#effectiveChannels.y
+    if (!xField || !yField) return 'none'
+    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)
+  })
+
+  colorScaleType = $derived.by(() => {
+    const field = this.#effectiveChannels.color
+    if (!field) return 'categorical'
+    return inferColorScaleType(this.#data, field, {
+      colorScale: this.#colorSpec,
+      colorMidpoint: this.#colorMidpoint
+    })
+  })
+
+  xScale = $derived.by(() => {
+    const field = this.#effectiveChannels.x
+    if (!field) return null
+    const datasets = this.#geoms.length > 0
+      ? this.#geoms.map((g) => this.geomData(g.id))
+      : [this.#rawData]
+    const includeZero = this.orientation === 'horizontal'
+    // For vertical bar charts, force scaleBand even when X values are numeric (e.g. year).
+    // Horizontal bar charts keep X as a continuous value axis.
+    const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
+    const bandX = hasBarGeom && this.orientation !== 'horizontal'
+    return buildUnifiedXScale(datasets, field, this.#innerWidth, {
+      domain: this.#xDomain,
+      includeZero,
+      band: bandX
+    })
+  })
+
+  yScale = $derived.by(() => {
+    const field = this.#effectiveChannels.y
+    if (!field) return null
+    const datasets = this.#geoms.length > 0
+      ? 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
+    })
+  })
+
+  // Colors: Map<colorKey, { fill, stroke }> for all distinct color field values.
+  // If a colorDomain is provided (e.g. from FacetPlot for cross-panel consistency),
+  // use it instead of deriving distinct values from the local panel data.
+  colors = $derived.by(() => {
+    const field = this.#effectiveChannels.color
+    const values = this.#colorDomain ?? distinct(this.#data, field)
+    return assignColors(values, this.#mode)
+  })
+
+  // Patterns: Map<patternKey, patternName> — only populated when a pattern channel is set
+  // 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()
+    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()
+    return assignSymbols(distinct(this.#data, sf))
+  })
+
+  // Expose effective channel fields for consumers (e.g. Legend)
+  colorField = $derived(this.#effectiveChannels.color)
+  patternField = $derived(this.#effectiveChannels.pattern)
+  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)))
+
+  xAxisY = $derived.by(() => {
+    if (!this.yScale || typeof this.yScale !== 'function') return this.#innerHeight
+    const crossVal = this.axisOrigin[1]
+    if (crossVal !== undefined) return this.yScale(crossVal)
+    const domain = this.yScale.domain?.()
+    return domain ? this.yScale(domain[0]) : this.#innerHeight
+  })
+
+  yAxisX = $derived.by(() => {
+    if (!this.xScale || typeof this.xScale !== 'function') return 0
+    const crossVal = this.axisOrigin[0]
+    if (crossVal !== undefined) return this.xScale(crossVal)
+    const domain = this.xScale.domain?.()
+    return domain ? this.xScale(domain[0]) : 0
+  })
+
+  constructor(config = {}) {
+    this.#rawData       = config.data          ?? []
+    this.#data          = config.data          ?? []
+    this.#channels      = config.channels      ?? {}
+    this.#labels        = config.labels        ?? {}
+    this.#helpers       = config.helpers       ?? {}
+    this.#presetName    = config.preset
+    this.#colorMidpoint = config.colorMidpoint
+    this.#colorSpec     = config.colorScale
+    this.#colorDomain   = config.colorDomain
+    this.#xDomain       = config.xDomain
+    this.#yDomain       = config.yDomain
+    this.#width         = config.width         ?? 600
+    this.#height        = config.height        ?? 400
+    this.#mode          = config.mode          ?? 'light'
+    this.#marginOverride = config.margin       ?? undefined
+  }
+
+  update(config) {
+    if (config.data          !== undefined) { this.#rawData = config.data; this.#data = config.data }
+    if (config.channels      !== undefined) this.#channels      = config.channels
+    if (config.labels        !== undefined) this.#labels        = config.labels
+    if (config.helpers       !== undefined) this.#helpers       = config.helpers
+    if (config.preset        !== undefined) this.#presetName    = config.preset
+    if (config.colorMidpoint !== undefined) this.#colorMidpoint = config.colorMidpoint
+    if (config.colorScale    !== undefined) this.#colorSpec     = config.colorScale
+    this.#colorDomain = config.colorDomain
+    this.#xDomain = config.xDomain
+    this.#yDomain = config.yDomain
+    if (config.width         !== undefined) this.#width         = config.width
+    if (config.height        !== undefined) this.#height        = config.height
+    if (config.mode          !== undefined) this.#mode          = config.mode
+    this.#marginOverride = config.margin ?? undefined
+  }
+
+  registerGeom(config) {
+    const id = `geom-${nextId++}`
+    this.#geoms = [...this.#geoms, { id, ...config }]
+    return id
+  }
+
+  updateGeom(id, config) {
+    // untrack the read of #geoms to avoid effect_update_depth_exceeded when
+    // called from a geom's $effect (which would otherwise track #geoms as a dependency)
+    this.#geoms = untrack(() => this.#geoms).map((g) => g.id === id ? { ...g, ...config } : g)
+  }
+
+  unregisterGeom(id) {
+    this.#geoms = this.#geoms.filter((g) => g.id !== id)
+  }
+
+  geomData(id) {
+    const geom = this.#geoms.find((g) => g.id === id)
+    if (!geom) return []
+    const stat = geom.stat ?? 'identity'
+    if (stat === 'identity') return this.#rawData
+    const mergedChannels = { ...this.#channels, ...geom.channels }
+    return applyGeomStat(this.#rawData, { stat, channels: mergedChannels }, this.#helpers)
+  }
+
+  label(field) {
+    return this.#labels?.[field] ?? field
+  }
+
+  format(field)       { return resolveFormat(field, this.#helpers) }
+  tooltip()           { return resolveTooltip(this.#helpers) }
+  geomComponent(type) { return resolveGeom(type, this.#helpers) }
+  preset()            { return resolvePreset(this.#presetName, this.#helpers) }
+
+  get margin()      { return this.#effectiveMargin }
+  get innerWidth()  { return this.#innerWidth }
+  get innerHeight() { return this.#innerHeight }
+  get mode()        { return this.#mode }
+  get hovered()     { return this.#hovered }
+
+  setHovered(data)  { this.#hovered = data }
+  clearHovered()    { this.#hovered = null }
+}

package/src/Sparkline.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { scaleLinear } from 'd3-scale'
+  import { line as d3line, area as d3area, curveCatmullRom } from 'd3-shape'
+
+  /**
+   * @type {number[] | object[]}
+   */
+  let {
+    data = [],
+    field = undefined,
+    type = 'line',
+    curve = 'linear',
+    color = 'primary',
+    width = 80,
+    height = 24,
+    min = undefined,
+    max = undefined
+  } = $props()
+
+  const values = $derived(
+    field ? data.map((d) => Number(d[field])) : data.map(Number)
+  )
+
+  const yMin = $derived(min ?? Math.min(...values))
+  const yMax = $derived(max ?? Math.max(...values))
+
+  const xScale = $derived(
+    scaleLinear().domain([0, values.length - 1]).range([0, width])
+  )
+  const yScale = $derived(
+    scaleLinear().domain([yMin, yMax]).range([height, 0])
+  )
+
+  const linePath = $derived.by(() => {
+    const gen = d3line().x((_, i) => xScale(i)).y((v) => yScale(v))
+    if (curve === 'smooth') gen.curve(curveCatmullRom)
+    return gen(values)
+  })
+
+  const areaPath = $derived.by(() => {
+    const gen = d3area().x((_, i) => xScale(i)).y0(height).y1((v) => yScale(v))
+    if (curve === 'smooth') gen.curve(curveCatmullRom)
+    return gen(values)
+  })
+
+  const barWidth = $derived(Math.max(1, width / values.length - 1))
+
+  const strokeColor = $derived(`rgb(var(--color-${color}-500, 100,116,139))`)
+  const fillColor = $derived(`rgba(var(--color-${color}-300), 0.25)`)
+</script>
+
+<svg {width} {height} style="overflow: visible; display: block;">
+  {#if type === 'line'}
+    <path d={linePath} fill="none" stroke={strokeColor} stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+  {:else if type === 'area'}
+    <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}
+      <rect
+        x={xScale(i) - barWidth / 2}
+        y={yScale(v)}
+        width={barWidth}
+        height={height - yScale(v)}
+        fill={strokeColor}
+      />
+    {/each}
+  {/if}
+</svg>

package/src/Symbol.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { components } from './symbols'
+
+	let {
+		x = 0,
+		y = 0,
+		size = 10,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		name = 'circle',
+		...restProps
+	} = $props()
+
+	let RenderShape = $derived(components[name] ?? components.default)
+	let props = $derived({ ...restProps, x, y, size, fill, stroke })
+</script>
+
+<!-- {#snippet defaultSymbol(props)}
+	<circle cx={x} cy={y} r={size / 2} {fill} {stroke} />
+{/snippet} -->
+<RenderShape {...props} />

package/src/Texture.svelte

@@ -0,0 +1,18 @@
+<script>
+	let {
+		id,
+		path,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		thickness = 0.5,
+		patternUnits = 'userSpaceOnUse',
+		size = 10
+	} = $props()
+</script>
+
+<pattern {id} {patternUnits} width={size} height={size}>
+	<rect width={size} height={size} {fill} />
+	{#if path}
+		<path d={path} fill="none" {stroke} stroke-width={thickness} />
+	{/if}
+</pattern>

package/src/charts/AreaChart.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Area from '../geoms/Area.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    fill = undefined,
+    stat = 'identity',
+    curve = undefined,
+    pattern = undefined,
+    stack = false,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend}>
+  <Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
+</Plot>

package/src/charts/BarChart.svelte

@@ -0,0 +1,26 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Bar from '../geoms/Bar.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').BarChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    fill = undefined,   // mapped to color channel
+    pattern = undefined,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false,
+    stat = 'identity',
+    stack = false,
+    label = false,
+    tooltip = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
+  <Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
+</Plot>

package/src/charts/BoxPlot.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Box from '../geoms/Box.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}>
+  <Box {x} {y} {fill} />
+</Plot>

package/src/charts/BubbleChart.svelte

@@ -0,0 +1,23 @@
+<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: _symbol = undefined,
+    size,               // required: field name for bubble radius
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend}>
+  <Point {x} {y} {color} {size} />
+</Plot>

package/src/charts/LineChart.svelte

@@ -0,0 +1,26 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Line from '../geoms/Line.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    color = undefined,
+    stat = 'identity',
+    symbol = undefined,
+    curve = undefined,   // forwarded to Line options
+    label = false,
+    tooltip = false,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
+  <Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
+</Plot>

package/src/charts/PieChart.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Arc from '../geoms/Arc.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').PieChartProps} */
+  let {
+    data = [],
+    label = undefined,
+    y = undefined,
+    fill = undefined,
+    pattern = undefined,
+    innerRadius = 0,
+    labelFn = undefined,
+    tooltip = false,
+    width = 400,
+    height = 400,
+    mode = 'light',
+    legend = false,
+    stat = 'sum'
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} grid={false} axes={false} margin={{ top: 10, right: 10, bottom: 10, left: 10 }} {legend} {tooltip}>
+  <Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} options={{ innerRadius }} />
+</Plot>

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>