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

package/src/AnimatedPlot.svelte

@@ -0,0 +1,214 @@
+<script>
+  import { onMount, onDestroy } from 'svelte'
+  import { extractFrames, completeFrames, computeStaticDomains } from './lib/plot/frames.js'
+  import { applyGeomStat } from './lib/plot/stat.js'
+  import Timeline from './Plot/Timeline.svelte'
+  import PlotChart from './Plot.svelte'
+
+  /**
+   * @type {{
+   *   data: Object[],
+   *   animate: { by: string, duration?: number, loop?: boolean },
+   *   x?: string,
+   *   y?: string,
+   *   color?: string,
+   *   geoms?: import('./lib/plot/types.js').GeomSpec[],
+   *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   grid?: boolean,
+   *   legend?: boolean,
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    data = [],
+    animate,
+    x,
+    y,
+    color,
+    geoms = [],
+    helpers = {},
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false,
+    children
+  } = $props()
+
+  // Pre-aggregate and complete frames when any geom has a non-identity stat:
+  //   1. applyGeomStat: aggregate data by (x, color?, by) → one row per combination
+  //   2. completeFrames: alignBy(by) ensures all frame values appear for every (x, color?)
+  //      group, filling missing rows with y=0 so bars animate smoothly
+  // Geoms are returned with stat: 'identity' so PlotChart renders the pre-aggregated values as-is.
+  const prepared = $derived.by(() => {
+    const firstNonIdentity = geoms.find((g) => g.stat && g.stat !== 'identity')
+    if (!firstNonIdentity) return { data, geoms }
+
+    const aggChannels = { y }
+    if (x) aggChannels.x = x
+    if (color) aggChannels.color = color
+    aggChannels.frame = animate.by  // 'frame' is not a value channel, so it becomes a group-by
+
+    const aggregated = applyGeomStat(
+      data,
+      { stat: firstNonIdentity.stat, channels: aggChannels },
+      helpers
+    )
+    const completeData = completeFrames(aggregated, { x, y, color }, animate.by)
+
+    return { data: completeData, geoms: geoms.map((g) => ({ ...g, stat: 'identity' })) }
+  })
+
+  // Extract frames and compute stable domains from the full prepared dataset
+  const rawFrames = $derived(extractFrames(prepared.data, animate.by))
+  const frameKeys = $derived([...rawFrames.keys()])
+
+  const channels = $derived({ x, y, color })
+  const staticDomains = $derived(
+    x && y ? computeStaticDomains(prepared.data, channels) : { xDomain: undefined, yDomain: undefined }
+  )
+
+  // Playback state
+  let currentIndex = $state(0)
+  let playing      = $state(false)
+  let speed        = $state(1)
+
+  // Current frame data — already complete (all x/color combos present)
+  const currentFrameData = $derived.by(() => {
+    const key = frameKeys[currentIndex]
+    return rawFrames.get(key) ?? []
+  })
+
+  // Reduced motion preference
+  let prefersReducedMotion = $state(false)
+  onMount(() => {
+    if (typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    prefersReducedMotion = mq.matches
+    const handler = (e) => { prefersReducedMotion = e.matches }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  })
+
+  // Animation loop
+  const baseDuration = $derived(animate.duration ?? 800)
+  const msPerFrame   = $derived(Math.round(baseDuration / speed))
+  let lastTime = 0
+  let rafId = 0
+
+  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
+        }
+      }
+    }
+    rafId = requestAnimationFrame(tick)
+  }
+
+  $effect(() => {
+    // Reading msPerFrame here makes it a tracked dependency — effect re-runs on speed changes,
+    // which resets lastTime=0 to re-anchor frame pacing.
+    const _ms = msPerFrame
+    if (playing && !prefersReducedMotion) {
+      lastTime = 0
+      rafId = requestAnimationFrame(tick)
+    } else {
+      cancelAnimationFrame(rafId)
+    }
+    return () => cancelAnimationFrame(rafId)
+  })
+
+  // Reduced motion: step frames on interval instead
+  let reducedInterval = 0
+  $effect(() => {
+    if (!playing || !prefersReducedMotion) {
+      clearInterval(reducedInterval)
+      return
+    }
+    reducedInterval = setInterval(() => {
+      currentIndex = currentIndex + 1
+      if (currentIndex >= frameKeys.length) {
+        if (animate.loop ?? false) currentIndex = 0
+        else { playing = false; clearInterval(reducedInterval) }
+      }
+    }, msPerFrame)
+    return () => clearInterval(reducedInterval)
+  })
+
+  onDestroy(() => {
+    cancelAnimationFrame(rafId)
+    clearInterval(reducedInterval)
+  })
+
+  $effect(() => {
+    const len = frameKeys.length
+    if (currentIndex >= len && len > 0) {
+      currentIndex = len - 1
+      playing = false
+    } else if (len === 0) {
+      currentIndex = 0
+      playing = false
+    }
+  })
+
+  function handlePlay()  { playing = true }
+  function handlePause() { playing = false }
+  function handleScrub(index) {
+    playing = false
+    currentIndex = index
+  }
+  function handleSpeed(s) { speed = s }
+
+  // Build spec for the current frame, with static domain overrides
+  const frameSpec = $derived({
+    data: currentFrameData,
+    x, y, color,
+    geoms: prepared.geoms,
+    xDomain: staticDomains.xDomain,
+    yDomain: staticDomains.yDomain
+  })
+</script>
+
+<div data-plot-animated>
+  <PlotChart
+    spec={frameSpec}
+    {helpers}
+    {width}
+    {height}
+    {mode}
+    {grid}
+    {legend}
+  >
+    {@render children?.()}
+  </PlotChart>
+
+  <Timeline
+    {frameKeys}
+    {currentIndex}
+    {playing}
+    {speed}
+    onplay={handlePlay}
+    onpause={handlePause}
+    onscrub={handleScrub}
+    onspeed={handleSpeed}
+  />
+</div>
+
+<style>
+  [data-plot-animated] {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+</style>

package/src/Chart.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { setContext } from 'svelte'
+  import { ChartBrewer } from './lib/brewing/brewer.svelte.js'
+
+  /**
+   * @type {{
+   *   spec?: import('./spec/chart-spec.js').ChartSpec,
+   *   data?: Object[],
+   *   x?: string,
+   *   y?: string,
+   *   color?: string,
+   *   pattern?: string,
+   *   fill?: string,
+   *   size?: string,
+   *   label?: string,
+   *   symbol?: string,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    spec = undefined,
+    data = [],
+    x = undefined,
+    y = undefined,
+    color = undefined,
+    pattern = undefined,
+    fill = undefined,
+    size = undefined,
+    label = undefined,
+    symbol = undefined,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    children
+  } = $props()
+
+  const brewer = new ChartBrewer()
+  setContext('chart-brewer', brewer)
+
+  $effect(() => {
+    if (spec) {
+      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 })
+    }
+  })
+
+</script>
+
+<div class="chart-container" data-chart-root>
+  <svg
+    {width}
+    {height}
+    viewBox="0 0 {width} {height}"
+    role="img"
+    aria-label="Chart visualization"
+  >
+    <g
+      class="chart-area"
+      data-chart-canvas
+    >
+      {@render children?.()}
+    </g>
+  </svg>
+</div>
+
+<style>
+  .chart-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+
+  svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .chart-area {
+    pointer-events: all;
+  }
+</style>

package/src/FacetPlot/Panel.svelte

@@ -0,0 +1,23 @@
+<script>
+  import PlotChart from '../Plot.svelte'
+
+  let {
+    data, x, y, color, geoms = [], helpers = {},
+    width, height, mode, grid, legend,
+    xDomain, yDomain, colorDomain,
+    children
+  } = $props()
+
+  // Build spec with domain overrides so PlotState uses them
+  const spec = $derived({
+    data, x, y, color,
+    geoms,
+    xDomain,
+    yDomain,
+    colorDomain
+  })
+</script>
+
+<PlotChart {spec} {helpers} {width} {height} {mode} {grid} {legend}>
+  {@render children?.()}
+</PlotChart>

package/src/FacetPlot.svelte

@@ -0,0 +1,90 @@
+<script>
+  import { splitByField, getFacetDomains } from './lib/plot/facet.js'
+  import { distinct } from './lib/brewing/colors.js'
+  import PlotPanel from './FacetPlot/Panel.svelte'
+
+  /**
+   * @type {{
+   *   data: Object[],
+   *   facet: { by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' },
+   *   x?: string,
+   *   y?: string,
+   *   color?: string,
+   *   geoms?: import('./lib/plot/types.js').GeomSpec[],
+   *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+   *   panelWidth?: number,
+   *   panelHeight?: number,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   grid?: boolean,
+   *   legend?: boolean,
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    data = [],
+    facet,
+    x,
+    y,
+    fill,
+    color,
+    geoms = [],
+    helpers = {},
+    panelWidth,
+    panelHeight,
+    width = 900,
+    height = 300,
+    mode = 'light',
+    grid = true,
+    legend = false,
+    children
+  } = $props()
+
+  // `fill` is accepted as an alias for `color` (bar/area semantics vs line/point)
+  const colorChannel = $derived(fill ?? color)
+
+  const panels  = $derived(splitByField(data, facet.by))
+  const scales  = $derived(facet.scales ?? 'fixed')
+  const domains = $derived(
+    x && y ? getFacetDomains(panels, { x, y }, scales) : new Map()
+  )
+
+  // Global color domain ensures the same value maps to the same color in every panel.
+  const colorDomain = $derived(colorChannel ? distinct(data, colorChannel) : undefined)
+
+  const cols = $derived(facet.cols ?? Math.min(panels.size, 3))
+  const pw   = $derived(panelWidth  ?? Math.floor(width / cols))
+  const ph   = $derived(panelHeight ?? height)
+</script>
+
+<div data-facet-grid style:--facet-cols={cols}>
+  {#each [...panels.entries()] as [facetValue, panelData] (`${facetValue}`)}
+    <div data-facet-panel data-facet-value={facetValue}>
+      <div data-facet-title>{facetValue}</div>
+      <PlotPanel
+        data={panelData}
+        {x} {y} color={colorChannel}
+        {geoms} {helpers}
+        width={pw}
+        height={ph}
+        {mode} {grid}
+        legend={false}
+        xDomain={domains.get(facetValue)?.xDomain}
+        yDomain={domains.get(facetValue)?.yDomain}
+        {colorDomain}
+      >
+        <!-- Render caller-supplied geoms inside every panel (each gets its own PlotState context) -->
+        {@render children?.()}
+      </PlotPanel>
+    </div>
+  {/each}
+</div>
+
+<!-- Single shared legend outside the grid -->
+{#if legend}
+  <div data-facet-legend>
+    <!-- Legend content rendered by first panel; simplified for now -->
+  </div>
+{/if}
+

package/src/Plot/Arc.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.arcs && brewer.arcs.length > 0}
+	<g
+		class="chart-arcs"
+		data-plot-type="arc"
+		transform="translate({brewer.width / 2}, {brewer.height / 2})"
+	>
+		{#each brewer.arcs as arc (arc.key)}
+			<path
+				d={arc.d}
+				fill={arc.fill}
+				stroke={arc.stroke}
+				stroke-width="1"
+				data-plot-element="arc"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-arcs {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Area.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.areas && brewer.areas.length > 0}
+	<g class="chart-areas" data-plot-type="area">
+		{#each brewer.areas as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill={seg.fill}
+				stroke={seg.stroke}
+				opacity="0.7"
+				data-plot-element="area"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-areas {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Axis.svelte

@@ -1,95 +1,73 @@
 <script>
-	import { getContext } from 'svelte'
-	import { createXAxis, createYAxis, createTickAttributes } from '../lib/brewing/axes.svelte.js'
+  import { getContext } from 'svelte'
 
-	let {
-		type = 'x',
-		field = null,
-		label = '',
-		ticks = null,
-		tickFormat = null,
-		grid = false
-	} = $props()
+  /** @type {'x' | 'y'} */
+  let { type = 'x', label = '' } = $props()
 
-	// Get brewer from context
-	const brewer = getContext('chart-brewer')
+  const state = getContext('plot-state')
 
-	// Set field mappings in the brewer
-	$effect(() => {
-		if (field) {
-			brewer.setFields({
-				[type]: field
-			})
+  const xTicks = $derived.by(() => {
+    const s = state.xScale
+    if (!s) return []
+    if (typeof s.bandwidth === 'function') {
+      return s.domain().map((val) => ({
+        value: val,
+        pos: (s(val) ?? 0) + s.bandwidth() / 2
+      }))
+    }
+    return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+  })
 
-			// Ensure scales are updated
-			brewer.createScales()
-		}
-	})
+  const yTicks = $derived.by(() => {
+    const s = state.yScale
+    if (!s) return []
+    if (typeof s.bandwidth === 'function') {
+      return s.domain().map((val) => ({
+        value: val,
+        pos: (s(val) ?? 0) + s.bandwidth() / 2
+      }))
+    }
+    return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+  })
 
-	// Compute axis data whenever scales change
-	let axisData = $derived(
-		type === 'x'
-			? brewer.createXAxis({ tickCount: ticks, tickFormat, label })
-			: brewer.createYAxis({ tickCount: ticks, tickFormat, label })
-	)
+  const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
+  const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
 </script>
 
-<g class="axis {type}-axis" transform={axisData.transform} data-plot-axis={type}>
-	{#if axisData.ticks.length > 0}
-		<!-- Axis line -->
-		<line
-			data-plot-axis-line
-			x1={type === 'x' ? 0 : 0}
-			y1={type === 'x' ? 0 : 0}
-			x2={type === 'x' ? brewer.getDimensions().innerWidth : 0}
-			y2={type === 'x' ? 0 : brewer.getDimensions().innerHeight}
-			stroke="currentColor"
-		/>
-
-		<!-- Ticks -->
-		{#each axisData.ticks as tick, index (index)}
-			{@const attrs = createTickAttributes(tick, type)}
-			<g {...attrs}>
-				<line
-					x1="0"
-					y1="0"
-					x2={type === 'x' ? 0 : -6}
-					y2={type === 'x' ? 6 : 0}
-					stroke="currentColor"
-				/>
-				<text x={type === 'x' ? 0 : -9} y={type === 'x' ? 9 : 0} data-plot-tick-label>
-					{tick.formattedValue}
-				</text>
-			</g>
-		{/each}
-
-		<!-- Axis label -->
-		{#if label}
-			<text
-				class="axis-label {type}-axis-label"
-				transform={axisData.labelTransform}
-				text-anchor="middle"
-				data-plot-axis-label
-			>
-				{label}
-			</text>
-		{/if}
-	{/if}
-</g>
+{#if type === 'x'}
+  <g class="axis x-axis" transform={xTransform} data-plot-axis="x">
+    <line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
+    {#each xTicks as tick (tick.value)}
+      <g transform="translate({tick.pos}, 0)" data-plot-tick>
+        <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" />
+        <text x="0" y="9" text-anchor="middle" dominant-baseline="hanging" data-plot-tick-label>
+          {tick.value}
+        </text>
+      </g>
+    {/each}
+    {#if label}
+      <text x={state.innerWidth / 2} y="36" text-anchor="middle" class="axis-label" data-plot-axis-label>{label}</text>
+    {/if}
+  </g>
+{:else}
+  <g class="axis y-axis" transform={yTransform} data-plot-axis="y">
+    <line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
+    {#each yTicks as tick (tick.value)}
+      <g transform="translate(0, {tick.pos})" data-plot-tick>
+        <line x1="-6" y1="0" x2="0" y2="0" stroke="currentColor" />
+        <text x="-9" y="0" text-anchor="end" dominant-baseline="middle" data-plot-tick-label>
+          {tick.value}
+        </text>
+      </g>
+    {/each}
+    {#if label}
+      <text transform="rotate(-90)" x={-(state.innerHeight / 2)} y="-40" text-anchor="middle" class="axis-label" data-plot-axis-label>{label}</text>
+    {/if}
+  </g>
+{/if}
 
 <style>
-	.axis {
-		font-size: 12px;
-	}
-
-	.axis-label {
-		font-size: 14px;
-		font-weight: 500;
-		fill: currentColor;
-	}
-
-	[data-plot-tick-label] {
-		font-size: 11px;
-		fill: currentColor;
-	}
+  .axis { font-size: 11px; fill: currentColor; stroke: currentColor; }
+  .axis-label { font-size: 13px; font-weight: 500; }
+  [data-plot-axis-line] { stroke: currentColor; }
 </style>