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

package/dist/lib/plot/frames.d.ts

@@ -8,35 +8,37 @@
  */
 export function extractFrames(data: Object[], timeField: string): Map<unknown, Object[]>;
 /**
- * Ensures all (x, color) combinations exist in the frame data.
- * Missing combinations are filled with y=0 so the animation
- * starts/ends smoothly without bars jumping in from nowhere.
+ * Ensures all frame values (byField) appear for every (x, color?) combination.
+ * Uses dataset alignBy to fill missing frame-value combos with y=0 so bars
+ * animate smoothly rather than disappearing between frames.
  *
- * @param {Object[]} frameData - rows for a single frame
- * @param {{ x: string, y: string, color?: string }} channels
- * @param {unknown[]} allXValues - all x values across all frames
- * @param {unknown[] | null} allColorValues - all color values across frames (null if no color)
+ * Call after pre-aggregation. The result can be split directly by extractFrames
+ * with no further per-frame normalization needed.
+ *
+ * @param {Object[]} data - pre-aggregated rows, one per (x, color?, byField)
+ * @param {{ x?: string, y: string, color?: string }} channels
+ * @param {string} byField - the frame field (e.g. 'year')
  * @returns {Object[]}
  */
-export function normalizeFrame(frameData: Object[], channels: {
-    x: string;
+export function completeFrames(data: Object[], channels: {
+    x?: string;
     y: string;
     color?: string;
-}, allXValues: unknown[], allColorValues: unknown[] | null): Object[];
+}, byField: string): Object[];
 /**
- * Computes static x/y domains across all frames combined.
- * These domains stay constant throughout the animation so bars
- * can be compared across frames by absolute height.
+ * Computes static x/y domains from the full (pre-split) data array.
+ * These domains stay constant throughout the animation so values are
+ * always comparable across frames.
  *
- * NOTE: y domain is pinned to [0, max] — assumes bar chart semantics where
- * the baseline is always 0. If used with scatter or line charts where y can
- * be negative, pass an explicit `yDomain` override instead.
+ * NOTE: y domain is pinned to [0, max] — assumes bar chart semantics.
+ * Pass an explicit yDomain override for scatter/line charts where y can
+ * be negative.
  *
- * @param {Map<unknown, Object[]>} frames
+ * @param {Object[]} data - full dataset (before frame extraction)
  * @param {{ x: string, y: string }} channels
  * @returns {{ xDomain: unknown[], yDomain: [number, number] }}
  */
-export function computeStaticDomains(frames: Map<unknown, Object[]>, channels: {
+export function computeStaticDomains(data: Object[], channels: {
     x: string;
     y: string;
 }): {

package/dist/lib/plot/scales.d.ts

@@ -1,5 +1,5 @@
-export function inferFieldType(data: any, field: any): "band" | "continuous";
-export function inferOrientation(xType: any, yType: any): "vertical" | "horizontal" | "none";
+export function inferFieldType(data: any, field: any): "continuous" | "band";
+export function inferOrientation(xType: any, yType: any): "none" | "vertical" | "horizontal";
 export function buildUnifiedXScale(datasets: any, field: any, width: any, opts?: {}): any;
 export function buildUnifiedYScale(datasets: any, field: any, height: any, opts?: {}): any;
 export function inferColorScaleType(data: any, field: any, spec?: {}): any;

package/package.json

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

package/src/AnimatedPlot.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount, onDestroy } from 'svelte'
-  import { extractFrames, normalizeFrame, computeStaticDomains } from './lib/plot/frames.js'
+  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'
 
@@ -37,16 +38,37 @@
     children
   } = $props()
 
-  // Extract and normalize frames
-  const rawFrames = $derived(extractFrames(data, animate.by))
+  // 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 allXValues = $derived(x ? [...new Set(data.map((d) => d[x]))] : [])
-  const allColorValues = $derived(color ? [...new Set(data.map((d) => d[color]))] : null)
-
   const staticDomains = $derived(
-    x && y ? computeStaticDomains(rawFrames, channels) : { xDomain: undefined, yDomain: undefined }
+    x && y ? computeStaticDomains(prepared.data, channels) : { xDomain: undefined, yDomain: undefined }
   )
 
   // Playback state
@@ -54,12 +76,10 @@
   let playing      = $state(false)
   let speed        = $state(1)
 
-  // Current frame data (normalized — missing combos filled with 0)
+  // Current frame data — already complete (all x/color combos present)
   const currentFrameData = $derived.by(() => {
     const key = frameKeys[currentIndex]
-    const raw = rawFrames.get(key) ?? []
-    if (!x || !y) return raw
-    return normalizeFrame(raw, { x, y, color }, allXValues, allColorValues)
+    return rawFrames.get(key) ?? []
   })
 
   // Reduced motion preference
@@ -154,7 +174,7 @@
   const frameSpec = $derived({
     data: currentFrameData,
     x, y, color,
-    geoms,
+    geoms: prepared.geoms,
     xDomain: staticDomains.xDomain,
     yDomain: staticDomains.yDomain
   })

package/src/lib/plot/frames.js

@@ -1,4 +1,5 @@
 import { extent } from 'd3-array'
+import { dataset } from '@rokkit/data'
 
 /**
  * Extracts animation frames from data, keyed by time field value.
@@ -19,72 +20,61 @@ export function extractFrames(data, timeField) {
 }
 
 /**
- * Ensures all (x, color) combinations exist in the frame data.
- * Missing combinations are filled with y=0 so the animation
- * starts/ends smoothly without bars jumping in from nowhere.
+ * Ensures all frame values (byField) appear for every (x, color?) combination.
+ * Uses dataset alignBy to fill missing frame-value combos with y=0 so bars
+ * animate smoothly rather than disappearing between frames.
  *
- * @param {Object[]} frameData - rows for a single frame
- * @param {{ x: string, y: string, color?: string }} channels
- * @param {unknown[]} allXValues - all x values across all frames
- * @param {unknown[] | null} allColorValues - all color values across frames (null if no color)
+ * Call after pre-aggregation. The result can be split directly by extractFrames
+ * with no further per-frame normalization needed.
+ *
+ * @param {Object[]} data - pre-aggregated rows, one per (x, color?, byField)
+ * @param {{ x?: string, y: string, color?: string }} channels
+ * @param {string} byField - the frame field (e.g. 'year')
  * @returns {Object[]}
  */
-export function normalizeFrame(frameData, channels, allXValues, allColorValues) {
+export function completeFrames(data, channels, byField) {
   const { x: xf, y: yf, color: cf } = channels
+  const groupFields = [xf, ...(cf ? [cf] : [])].filter(Boolean)
 
-  if (cf && !allColorValues?.length) {
-    throw new Error('normalizeFrame: allColorValues must be provided when color channel is set')
-  }
-
-  // Build lookup of existing (x, color?) keys
-  const existing = new Set(
-    frameData.map((d) => (cf ? `${d[xf]}::${d[cf]}` : String(d[xf])))
-  )
-
-  const filled = [...frameData]
+  if (groupFields.length === 0) return data
 
-  const colorValues = cf && allColorValues ? allColorValues : [null]
+  const nested = dataset(data)
+    .groupBy(...groupFields)
+    .alignBy(byField)
+    .usingTemplate({ [yf]: 0 })
+    .rollup()
+    .select()
 
-  for (const xVal of allXValues) {
-    for (const colorVal of colorValues) {
-      const key = cf ? `${xVal}::${colorVal}` : String(xVal)
-      if (!existing.has(key)) {
-        const row = { [xf]: xVal, [yf]: 0 }
-        if (cf && colorVal !== null) row[cf] = colorVal
-        filled.push(row)
-      }
-    }
-  }
-
-  return filled
+  return nested.flatMap((row) => {
+    const groupKey = groupFields.reduce((acc, f) => ({ ...acc, [f]: row[f] }), {})
+    // strip the actual_flag marker added by alignBy
+    return row.children.map(({ actual_flag: _af, ...child }) => ({ ...groupKey, ...child }))
+  })
 }
 
 /**
- * Computes static x/y domains across all frames combined.
- * These domains stay constant throughout the animation so bars
- * can be compared across frames by absolute height.
+ * Computes static x/y domains from the full (pre-split) data array.
+ * These domains stay constant throughout the animation so values are
+ * always comparable across frames.
  *
- * NOTE: y domain is pinned to [0, max] — assumes bar chart semantics where
- * the baseline is always 0. If used with scatter or line charts where y can
- * be negative, pass an explicit `yDomain` override instead.
+ * NOTE: y domain is pinned to [0, max] — assumes bar chart semantics.
+ * Pass an explicit yDomain override for scatter/line charts where y can
+ * be negative.
  *
- * @param {Map<unknown, Object[]>} frames
+ * @param {Object[]} data - full dataset (before frame extraction)
  * @param {{ x: string, y: string }} channels
  * @returns {{ xDomain: unknown[], yDomain: [number, number] }}
  */
-export function computeStaticDomains(frames, channels) {
+export function computeStaticDomains(data, channels) {
   const { x: xf, y: yf } = channels
-  const allData = [...frames.values()].flat()
-
-  const sampleX = allData[0]?.[xf]
-  const xIsCategorical = typeof sampleX === 'string'
 
-  const xDomain = xIsCategorical
-    ? [...new Set(allData.map((d) => d[xf]))]
-    : extent(allData, (d) => Number(d[xf]))
+  const sampleX = data[0]?.[xf]
+  const xDomain = typeof sampleX === 'string'
+    ? [...new Set(data.map((d) => d[xf]))]
+    : extent(data, (d) => Number(d[xf]))
 
-  const [, yMax] = extent(allData, (d) => Number(d[yf]))
-  const yDomain = [0, yMax ?? 0]   // pin to 0 (bar chart default)
+  const [, yMax] = extent(data, (d) => Number(d[yf]))
+  const yDomain = [0, yMax ?? 0]
 
   return { xDomain, yDomain }
 }