@pixerate/editor 0.165.0 → 0.166.0

package/dist/{chunk-QO2T6KA5.cjs → chunk-UUUTEVX6.cjs}

@@ -12,7 +12,7 @@
 
 
 
-var _chunkUVXTOZ2Bcjs = require('./chunk-UVXTOZ2B.cjs');
+var _chunkBPX4Z3N3cjs = require('./chunk-BPX4Z3N3.cjs');
 
 
 var _chunk55AKPTLMcjs = require('./chunk-55AKPTLM.cjs');
@@ -1239,7 +1239,7 @@ function layoutCartesian(ctx, area, visible) {
   const { spec, theme, marks, measure, fs } = ctx;
   const horizontal = spec.orientation === "horizontal";
   const n = spec.categories.length;
-  const types = new Map(visible.map((s) => [s.id, _chunkUVXTOZ2Bcjs.chartSeriesType.call(void 0, spec, s)]));
+  const types = new Map(visible.map((s) => [s.id, _chunkBPX4Z3N3cjs.chartSeriesType.call(void 0, spec, s)]));
   const stacked = spec.stacking !== "none";
   const percent = spec.stacking === "percent";
   const onSecondary = (s) => s.axis === "secondary";
@@ -1276,7 +1276,7 @@ function layoutCartesian(ctx, area, visible) {
     const stack = stacks.get(s.id);
     errors.set(
       s.id,
-      _chunkUVXTOZ2Bcjs.chartErrorAmounts.call(void 0, s.errorBars, s.values).map((e, i) => {
+      _chunkBPX4Z3N3cjs.chartErrorAmounts.call(void 0, s.errorBars, s.values).map((e, i) => {
         const raw = s.values[i];
         const seg = _optionalChain([stack, 'optionalAccess', _11 => _11.segments, 'access', _12 => _12[i]]);
         if (!e || raw === null || stack && !seg) return null;
@@ -1346,7 +1346,7 @@ function layoutCartesian(ctx, area, visible) {
   const drawOrder = [...visible].sort((a, b) => order(types.get(a.id)) - order(types.get(b.id)));
   for (const s of drawOrder) {
     const si = spec.series.indexOf(s);
-    const color = _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, si);
+    const color = _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, si);
     const type = types.get(s.id);
     const stack = stacks.get(s.id);
     const selSeries = ctx.seriesSelected(s.id);
@@ -1372,7 +1372,7 @@ function layoutCartesian(ctx, area, visible) {
         const selected = ctx.isSelected(target);
         const [x, y] = map({ c: c0, v: Math.min(a, b) });
         const rect = horizontal ? { x: Math.min(a, b), y: c0, width: Math.abs(b - a), height: cw } : { x, y, width: cw, height: Math.abs(b - a) };
-        const fill = _chunkUVXTOZ2Bcjs.chartPointColor.call(void 0, spec, si, i);
+        const fill = _chunkBPX4Z3N3cjs.chartPointColor.call(void 0, spec, si, i);
         marks.push({
           kind: "rect",
           key: `bar-${s.id}-${i}`,
@@ -1451,7 +1451,7 @@ function layoutCartesian(ctx, area, visible) {
         const target = { kind: "point", seriesId: s.id, index: i };
         const selected = ctx.isSelected(target);
         const r = type === "scatter" ? 4.5 : 3.5;
-        const pointColor = _chunkUVXTOZ2Bcjs.chartPointColor.call(void 0, spec, si, i);
+        const pointColor = _chunkBPX4Z3N3cjs.chartPointColor.call(void 0, spec, si, i);
         const fill = showDots ? type === "scatter" ? pointColor : theme.surface : "transparent";
         marks.push(
           pointMark({ key: `point-${s.id}-${i}`, target, selected: selected || selSeries, opacity: type === "scatter" ? 0.85 : void 0 }, showDots ? marker : "hit", cx, cy, showDots ? r : 6, fill, showDots ? pointColor : void 0, 2)
@@ -1524,8 +1524,8 @@ function layoutXy(ctx, area, visible) {
   const yErrors = /* @__PURE__ */ new Map();
   const xErrors = /* @__PURE__ */ new Map();
   for (const { s } of all) {
-    if (s.errorBars) yErrors.set(s.id, _chunkUVXTOZ2Bcjs.chartErrorAmounts.call(void 0, s.errorBars, s.values));
-    if (s.xErrorBars) xErrors.set(s.id, _chunkUVXTOZ2Bcjs.chartErrorAmounts.call(void 0, s.xErrorBars, s.values.map((_, i) => _nullishCoalesce(_optionalChain([s, 'access', _29 => _29.x, 'optionalAccess', _30 => _30[i]]), () => ( (bubble || !s.x ? i + 1 : null))))));
+    if (s.errorBars) yErrors.set(s.id, _chunkBPX4Z3N3cjs.chartErrorAmounts.call(void 0, s.errorBars, s.values));
+    if (s.xErrorBars) xErrors.set(s.id, _chunkBPX4Z3N3cjs.chartErrorAmounts.call(void 0, s.xErrorBars, s.values.map((_, i) => _nullishCoalesce(_optionalChain([s, 'access', _29 => _29.x, 'optionalAccess', _30 => _30[i]]), () => ( (bubble || !s.x ? i + 1 : null))))));
   }
   let xlo = Infinity;
   let xhi = -Infinity;
@@ -1608,8 +1608,8 @@ function layoutXy(ctx, area, visible) {
   const trendLabels = [];
   for (const { s, pts } of all) {
     const si = spec.series.indexOf(s);
-    const color = _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, si);
-    const type = _chunkUVXTOZ2Bcjs.chartSeriesType.call(void 0, spec, s);
+    const color = _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, si);
+    const type = _chunkBPX4Z3N3cjs.chartSeriesType.call(void 0, spec, s);
     const selSeries = ctx.seriesSelected(s.id);
     const seriesTarget = { kind: "series", seriesId: s.id };
     if (type === "line" || type === "area") {
@@ -1634,7 +1634,7 @@ function layoutXy(ctx, area, visible) {
       }
       const target = { kind: "point", seriesId: s.id, index: p.i };
       const selected = ctx.isSelected(target);
-      const pointColor = _chunkUVXTOZ2Bcjs.chartPointColor.call(void 0, spec, si, p.i);
+      const pointColor = _chunkBPX4Z3N3cjs.chartPointColor.call(void 0, spec, si, p.i);
       const r = bubble ? maxSize > 0 && p.size !== null && p.size > 0 ? Math.max(2, Math.sqrt(p.size / maxSize) * maxR) : 2 : 4.5;
       if (bubble) marks.push({ kind: "circle", key: `point-${s.id}-${p.i}`, role: "point", cx, cy, r, fill: pointColor, stroke: pointColor, strokeWidth: 1, opacity: 0.6, target, selected: selected || selSeries });
       else marks.push(pointMark({ key: `point-${s.id}-${p.i}`, target, selected: selected || selSeries, opacity: 0.85 }, marker === "none" ? "hit" : marker, cx, cy, marker === "none" ? 6 : r, marker === "none" ? "transparent" : pointColor, marker === "none" ? void 0 : pointColor, 2));
@@ -1677,8 +1677,40 @@ function trendlineLegendItems(spec, color) {
   );
 }
 
+// src/chart/race.ts
+function chartRaceValueAt(series, index) {
+  for (let i = Math.min(index, series.values.length - 1); i >= 0; i--) {
+    const v = series.values[i];
+    if (v !== null && v !== void 0 && Number.isFinite(v)) return v;
+  }
+  return 0;
+}
+function chartRaceMoment(count, frame) {
+  const last = Math.max(0, count - 1);
+  const at = frame === null || frame === void 0 || !Number.isFinite(frame) ? last : Math.max(0, Math.min(last, frame));
+  const from = Math.floor(at);
+  const to = Math.min(last, from + 1);
+  return { from, to, t: at - from, at };
+}
+function chartRaceRanking(spec, frame) {
+  const visible = spec.series.filter((s) => !s.hidden);
+  const { from, to, t } = chartRaceMoment(spec.categories.length, frame);
+  const rankAt = (i) => {
+    const order2 = visible.map((s, k) => ({ id: s.id, v: chartRaceValueAt(s, i), k })).sort((a, b) => b.v - a.v || a.k - b.k);
+    return new Map(order2.map((o, r) => [o.id, r]));
+  };
+  const r0 = rankAt(from);
+  const r1 = rankAt(to);
+  const near = t < 0.5 ? r0 : r1;
+  return visible.map((s) => {
+    const a = chartRaceValueAt(s, from);
+    const b = chartRaceValueAt(s, to);
+    return { seriesId: s.id, name: s.name, value: a + (b - a) * t, position: r0.get(s.id) + (r1.get(s.id) - r0.get(s.id)) * t, rank: near.get(s.id) };
+  }).sort((a, b) => a.position - b.position || b.value - a.value);
+}
+
 // src/chart/layout-families.ts
-var sliceColor = (ctx, series, i) => _optionalChain([series, 'access', _45 => _45.pointColors, 'optionalAccess', _46 => _46[i]]) || _chunkUVXTOZ2Bcjs.chartSliceColor.call(void 0, ctx.spec, i);
+var sliceColor = (ctx, series, i) => _optionalChain([series, 'access', _45 => _45.pointColors, 'optionalAccess', _46 => _46[i]]) || _chunkBPX4Z3N3cjs.chartSliceColor.call(void 0, ctx.spec, i);
 function layoutPie(ctx, area, series) {
   const { spec, theme, marks, fs, selection } = ctx;
   const values = spec.categories.map((_, i) => {
@@ -1794,7 +1826,7 @@ function layoutRadar(ctx, area, visible) {
     });
   for (const s of visible) {
     const si = spec.series.indexOf(s);
-    const color = _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, si);
+    const color = _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, si);
     const selSeries = ctx.seriesSelected(s.id);
     const pts = s.values.map((v, i) => v !== null && Number.isFinite(v) ? at(i, rOf(v)) : null);
     const present = pts.filter((p) => p !== null);
@@ -1844,7 +1876,7 @@ function layoutWaterfall(ctx, area, series) {
   });
   const { band, catCenter, map, value } = frame;
   const w = band * (1 - spec.gapWidth);
-  const color = _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(series));
+  const color = _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(series));
   const format = _nullishCoalesce(series.format, () => ( spec.yAxis.format));
   const labelsOn = _nullishCoalesce(series.dataLabels, () => ( spec.dataLabels));
   let prevEnd = null;
@@ -1903,7 +1935,7 @@ function layoutHistogram(ctx, area, visible) {
   const gap = k > 1 ? band * spec.gapWidth * 0.5 : 0;
   const w = (band - gap) / k;
   visible.forEach((s, si) => {
-    const color = _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
+    const color = _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
     const target = { kind: "series", seriesId: s.id };
     const selected = ctx.seriesSelected(s.id);
     counts[si].forEach((c, b) => {
@@ -1934,7 +1966,7 @@ function layoutBox(ctx, area, visible) {
   visible.forEach((s, i) => {
     const st = stats[i];
     if (!st) return;
-    const color = _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
+    const color = _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
     const target = { kind: "series", seriesId: s.id };
     const selected = ctx.seriesSelected(s.id);
     const c = catCenter(i);
@@ -2153,7 +2185,7 @@ function layoutLikert(ctx, area, visible) {
       if (x1 - x0 <= 0) return;
       const target = { kind: "point", seriesId: s.id, index: i };
       const selected = ctx.isSelected(target);
-      const fill = _optionalChain([s, 'access', _48 => _48.pointColors, 'optionalAccess', _49 => _49[i]]) || _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
+      const fill = _optionalChain([s, 'access', _48 => _48.pointColors, 'optionalAccess', _49 => _49[i]]) || _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
       const rect = { x: x0, y, width: x1 - x0, height: barH };
       marks.push({ kind: "rect", key, role: "bar", ...rect, fill, target, selected: selected || ctx.seriesSelected(s.id) || catSelected });
       if (selected) ctx.outline(`${key}-selection`, { x: rect.x - 2, y: rect.y - 2, width: rect.width + 4, height: rect.height + 4 });
@@ -2252,8 +2284,8 @@ function layoutParliament(ctx, area, series) {
 }
 function treeColor(ctx, series, node, group, base, shade) {
   if (node.color) return node.color;
-  if (base === null) return _optionalChain([series, 'optionalAccess', _50 => _50.pointColors, 'optionalAccess', _51 => _51[group]]) || _chunkUVXTOZ2Bcjs.chartSliceColor.call(void 0, ctx.spec, group);
-  return _chunkUVXTOZ2Bcjs.shadeChartColor.call(void 0, base, shade);
+  if (base === null) return _optionalChain([series, 'optionalAccess', _50 => _50.pointColors, 'optionalAccess', _51 => _51[group]]) || _chunkBPX4Z3N3cjs.chartSliceColor.call(void 0, ctx.spec, group);
+  return _chunkBPX4Z3N3cjs.shadeChartColor.call(void 0, base, shade);
 }
 function layoutTreemapTree(ctx, area, series) {
   const { spec, marks, theme, fs, measure } = ctx;
@@ -2261,7 +2293,7 @@ function layoutTreemapTree(ctx, area, series) {
   const labelsOn = _nullishCoalesce(_optionalChain([series, 'optionalAccess', _53 => _53.dataLabels]), () => ( true));
   let unlabelled = 0;
   const draw = (nodes, rect, key, group, base) => {
-    const rects = chartSquarify(nodes.map(_chunkUVXTOZ2Bcjs.chartTreeTotal), rect);
+    const rects = chartSquarify(nodes.map(_chunkBPX4Z3N3cjs.chartTreeTotal), rect);
     nodes.forEach((node, k) => {
       const r = rects[k];
       if (r.width <= 0.5 || r.height <= 0.5) return;
@@ -2296,10 +2328,10 @@ function layoutTreemapTree(ctx, area, series) {
 }
 function layoutSunburst(ctx, area, series) {
   const { spec, marks, theme, fs, measure } = ctx;
-  const tree = spec.tree.length ? spec.tree : _chunkUVXTOZ2Bcjs.chartTreeFromSeries.call(void 0, spec.categories, _nullishCoalesce(_optionalChain([series, 'optionalAccess', _55 => _55.values]), () => ( [])));
+  const tree = spec.tree.length ? spec.tree : _chunkBPX4Z3N3cjs.chartTreeFromSeries.call(void 0, spec.categories, _nullishCoalesce(_optionalChain([series, 'optionalAccess', _55 => _55.values]), () => ( [])));
   const indexOf = new Map(spec.categories.map((c, i) => [c.trim() || `${i + 1}`, i]));
-  const depth = _chunkUVXTOZ2Bcjs.chartTreeDepth.call(void 0, tree);
-  const total = tree.reduce((t, n) => t + _chunkUVXTOZ2Bcjs.chartTreeTotal.call(void 0, n), 0);
+  const depth = _chunkBPX4Z3N3cjs.chartTreeDepth.call(void 0, tree);
+  const total = tree.reduce((t, n) => t + _chunkBPX4Z3N3cjs.chartTreeTotal.call(void 0, n), 0);
   const cx = area.x + area.width / 2;
   const cy = area.y + area.height / 2;
   const outer = Math.max(8, Math.min(area.width, area.height) / 2 - 4);
@@ -2313,10 +2345,10 @@ function layoutSunburst(ctx, area, series) {
   const format = _nullishCoalesce(_optionalChain([series, 'optionalAccess', _56 => _56.format]), () => ( spec.yAxis.format));
   let unlabelled = 0;
   const walk = (nodes, start, sweep, level, key, group, base) => {
-    const sum = nodes.reduce((t, n) => t + _chunkUVXTOZ2Bcjs.chartTreeTotal.call(void 0, n), 0);
+    const sum = nodes.reduce((t, n) => t + _chunkBPX4Z3N3cjs.chartTreeTotal.call(void 0, n), 0);
     let at = start;
     nodes.forEach((node, k) => {
-      const value = _chunkUVXTOZ2Bcjs.chartTreeTotal.call(void 0, node);
+      const value = _chunkBPX4Z3N3cjs.chartTreeTotal.call(void 0, node);
       if (!(value > 0) || !sum) return;
       const a0 = at;
       const a1 = at + sweep * value / sum;
@@ -2388,7 +2420,7 @@ function layoutSankey(ctx, area, series) {
       y += value[i] * ky + pad;
     }
   }
-  const color = (i) => _optionalChain([series, 'optionalAccess', _61 => _61.pointColors, 'optionalAccess', _62 => _62[i]]) || _chunkUVXTOZ2Bcjs.chartSliceColor.call(void 0, spec, i);
+  const color = (i) => _optionalChain([series, 'optionalAccess', _61 => _61.pointColors, 'optionalAccess', _62 => _62[i]]) || _chunkBPX4Z3N3cjs.chartSliceColor.call(void 0, spec, i);
   const named = new Set(spec.highlight);
   const lit = nodes.map((n) => named.has(n));
   const dimLinks = lit.some(Boolean);
@@ -2441,17 +2473,56 @@ function layoutSankey(ctx, area, series) {
   if (hidden) ctx.warn("labels-truncated", `${hidden} node label${hidden === 1 ? " was" : "s were"} shortened to fit between the columns.`);
   return { plot: area };
 }
+function layoutBarRace(ctx, area, frame) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const top = spec.raceTopN;
+  const moment = chartRaceMoment(spec.categories.length, frame);
+  const ranking = chartRaceRanking(spec, frame);
+  const shown = ranking.filter((e) => e.position < top);
+  const labelW = Math.min(area.width * 0.3, Math.max(0, ...ranking.map((e) => measure(e.name, fs)))) + 8;
+  const tickH = spec.yAxis.show ? fs * 1.6 : 4;
+  const plot = { x: area.x + labelW, y: area.y + tickH, width: Math.max(1, area.width - labelW - fs * 4), height: Math.max(1, area.height - tickH) };
+  const lead = Math.max(1e-9, ...shown.map((e) => e.value));
+  const max = spec.yAxis.max !== null && spec.yAxis.max > 0 ? spec.yAxis.max : lead * 1.08;
+  const xOf = (v) => plot.x + Math.max(0, Math.min(max, v)) / max * plot.width;
+  const ticks = niceScale(0, max, 5).ticks.filter((t) => t <= max);
+  const axisTarget = { kind: "axis", axis: "y" };
+  const format = spec.yAxis.format;
+  ticks.forEach((t, k) => {
+    if (spec.yAxis.gridlines) marks.push({ kind: "line", key: `grid-y-${k}`, role: "grid", x1: xOf(t), y1: plot.y, x2: xOf(t), y2: plot.y + plot.height, stroke: theme.grid, strokeWidth: 1 });
+    if (spec.yAxis.show) marks.push({ kind: "text", key: `tick-y-${k}`, role: "tick-label", x: xOf(t), y: area.y, text: formatChartNumber(t, format, _nullishCoalesce(format.decimals, () => ( stepDecimals(ticks[1] - ticks[0] || 1)))), anchor: "middle", baseline: "top", size: fs - 1, fill: theme.mutedText, target: axisTarget });
+  });
+  const label = _nullishCoalesce(spec.categories[moment.t < 0.5 ? moment.from : moment.to], () => ( ""));
+  const timeSize = Math.min(theme.titleSize * 3, plot.height * 0.2, plot.width * 0.5 / Math.max(1, label.length * 0.6));
+  marks.push({ kind: "text", key: "race-time", role: "race-time", x: plot.x + plot.width, y: plot.y + plot.height - 4, text: label, anchor: "end", baseline: "bottom", size: timeSize, weight: 700, fill: theme.mutedText, opacity: 0.55, target: { kind: "category", index: moment.t < 0.5 ? moment.from : moment.to } });
+  const band = plot.height / top;
+  const barH = Math.max(2, band * (1 - Math.min(0.8, spec.gapWidth)));
+  const index = Math.round(moment.at);
+  for (const e of shown) {
+    const si = spec.series.findIndex((s2) => s2.id === e.seriesId);
+    const s = spec.series[si];
+    const y = plot.y + e.position * band + (band - barH) / 2;
+    const target = { kind: "point", seriesId: e.seriesId, index };
+    const selected = ctx.isSelected(target) || ctx.seriesSelected(e.seriesId);
+    const width = Math.max(0, xOf(e.value) - plot.x);
+    marks.push({ kind: "rect", key: `bar-${e.seriesId}`, role: "bar", x: plot.x, y, width, height: barH, fill: _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, si), radius: Math.min(3, barH / 4), target, selected, ...selected ? { stroke: theme.selection, strokeWidth: 1.5 } : {} });
+    marks.push({ kind: "text", key: `label-name-${e.seriesId}`, role: "tick-label", x: plot.x - 6, y: y + barH / 2, text: truncate(e.name, labelW - 8, fs, measure), anchor: "end", baseline: "middle", size: fs, fill: selected ? theme.selection : theme.text, target: { kind: "series", seriesId: e.seriesId } });
+    if (_nullishCoalesce(s.dataLabels, () => ( true))) marks.push({ kind: "text", key: `label-${e.seriesId}`, role: "data-label", x: plot.x + width + 5, y: y + barH / 2, text: formatChartNumber(e.value, _nullishCoalesce(s.format, () => ( format)), _nullishCoalesce((_nullishCoalesce(s.format, () => ( format))).decimals, () => ( (Math.abs(e.value) >= 100 ? 0 : void 0)))), anchor: "start", baseline: "middle", size: fs - 1, fill: theme.text, target });
+  }
+  if (ranking.length > top) ctx.warn("values-skipped", `The race shows the top ${top} of ${ranking.length} names at each moment (raceTopN).`);
+  return { plot, valueScale: { axis: "x", domain: [0, max], range: [plot.x, plot.x + plot.width], ticks } };
+}
 
 // src/chart/layout.ts
 function legendItems(spec, ctx) {
-  const family = _chunkUVXTOZ2Bcjs.chartFamily.call(void 0, spec);
-  if (spec.type === "funnel" || spec.type === "slope" || spec.type === "sankey") return [];
-  if (_chunkUVXTOZ2Bcjs.chartSpecColorsByCategory.call(void 0, spec)) {
+  const family = _chunkBPX4Z3N3cjs.chartFamily.call(void 0, spec);
+  if (spec.type === "funnel" || spec.type === "slope" || spec.type === "sankey" || spec.type === "barrace") return [];
+  if (_chunkBPX4Z3N3cjs.chartSpecColorsByCategory.call(void 0, spec)) {
     const first = spec.series.find((s) => !s.hidden);
     const seats = (i) => Math.max(0, Math.round(_nullishCoalesce(_optionalChain([first, 'optionalAccess', _66 => _66.values, 'access', _67 => _67[i]]), () => ( 0))));
     return spec.categories.map((c, i) => ({
       label: spec.type === "parliament" ? `${c} ${seats(i)}` : c,
-      color: _optionalChain([first, 'optionalAccess', _68 => _68.pointColors, 'optionalAccess', _69 => _69[i]]) || _chunkUVXTOZ2Bcjs.chartSliceColor.call(void 0, spec, i),
+      color: _optionalChain([first, 'optionalAccess', _68 => _68.pointColors, 'optionalAccess', _69 => _69[i]]) || _chunkBPX4Z3N3cjs.chartSliceColor.call(void 0, spec, i),
       target: { kind: "category", index: i },
       faded: false,
       selected: ctx.isSelected({ kind: "category", index: i }),
@@ -2465,17 +2536,17 @@ function legendItems(spec, ctx) {
     return [
       { label: "Increase", color: ctx.theme.positive, target, faded: false, selected: false, shape: "square" },
       { label: "Decrease", color: ctx.theme.negative, target, faded: false, selected: false, shape: "square" },
-      { label: "Total", color: _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(first)), target, faded: false, selected: false, shape: "square" }
+      { label: "Total", color: _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(first)), target, faded: false, selected: false, shape: "square" }
     ];
   }
   if (family === "box") return [];
-  const trends = trendlineLegendItems(spec, (i) => _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, i));
+  const trends = trendlineLegendItems(spec, (i) => _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, i));
   const items = [];
   spec.series.forEach((s, i) => {
-    const type = _chunkUVXTOZ2Bcjs.chartSeriesType.call(void 0, spec, s);
+    const type = _chunkBPX4Z3N3cjs.chartSeriesType.call(void 0, spec, s);
     items.push({
       label: s.name,
-      color: _chunkUVXTOZ2Bcjs.chartSeriesColor.call(void 0, spec, i),
+      color: _chunkBPX4Z3N3cjs.chartSeriesColor.call(void 0, spec, i),
       target: { kind: "series", seriesId: s.id },
       faded: !!s.hidden,
       selected: ctx.seriesSelected(s.id),
@@ -2488,7 +2559,7 @@ function legendItems(spec, ctx) {
 function layoutChart(spec, options) {
   const width = Math.max(1, Number.isFinite(options.width) ? options.width : 1);
   const height = Math.max(1, Number.isFinite(options.height) ? options.height : 1);
-  const theme = { ..._chunkUVXTOZ2Bcjs.DEFAULT_CHART_THEME, ...options.theme };
+  const theme = { ..._chunkBPX4Z3N3cjs.DEFAULT_CHART_THEME, ...options.theme };
   const selection = _nullishCoalesce(options.selection, () => ( null));
   const marks = [];
   const warnings = [];
@@ -2527,17 +2598,17 @@ function layoutChart(spec, options) {
   if (spec.title) titleMark("title", spec.title, theme.titleSize, 600, theme.text);
   if (spec.subtitle) titleMark("subtitle", spec.subtitle, fs + 1, 400, theme.mutedText);
   if (spec.title || spec.subtitle) top += 6;
-  const family = _chunkUVXTOZ2Bcjs.chartFamily.call(void 0, spec);
+  const family = _chunkBPX4Z3N3cjs.chartFamily.call(void 0, spec);
   const visible = spec.series.filter((s) => !s.hidden);
   const items = legendItems(spec, ctx);
   let area = { x: pad, y: top, width: width - pad * 2, height: height - top - pad - noteHeight(spec, fs) };
   const seriesLegend = family === "cartesian" || family === "xy" || family === "radar" || family === "histogram";
   const hasTrend = items.some((i) => i.shape === "dash");
-  const showLegend = spec.legend.show && items.length > 0 && (!seriesLegend || _chunkUVXTOZ2Bcjs.chartVariesColors.call(void 0, spec) || spec.series.length > 1 || spec.series.some((s) => s.hidden) || hasTrend);
+  const showLegend = spec.legend.show && items.length > 0 && (!seriesLegend || _chunkBPX4Z3N3cjs.chartVariesColors.call(void 0, spec) || spec.series.length > 1 || spec.series.some((s) => s.hidden) || hasTrend);
   if (showLegend) area = layoutLegend(items, spec.legend.position, area, ctx, ctx.isSelected({ kind: "legend" }));
   const finish = (result) => {
     if (result.plot.width > 0) {
-      if (chartAnnotationFamily(_chunkUVXTOZ2Bcjs.chartFamily.call(void 0, spec))) drawCallouts(ctx, result.plot);
+      if (chartAnnotationFamily(_chunkBPX4Z3N3cjs.chartFamily.call(void 0, spec))) drawCallouts(ctx, result.plot);
       else if (spec.referenceLines.length || spec.referenceBands.length || spec.series.some((s) => s.callouts))
         ctx.warn("annotations-skipped", `Reference lines, bands and callouts are drawn on bar, line, area, scatter and bubble charts; this ${spec.type} chart leaves them out.`);
     }
@@ -2585,6 +2656,8 @@ function layoutChart(spec, options) {
       return finish(layoutFunnel(ctx, area, visible[0]));
     case "treemap":
       return finish(spec.tree.length ? layoutTreemapTree(ctx, area, spec.series[0]) : layoutTreemap(ctx, area, visible[0]));
+    case "barrace":
+      return finish(layoutBarRace(ctx, area, options.raceFrame));
     case "sankey":
       if (!spec.links.length) {
         ctx.warn("type-fallback", "A Sankey diagram needs flows (set_chart_links); it is drawn as a bar chart until then.");
@@ -2701,7 +2774,7 @@ function addReadout(ctx, readout, plot) {
   } else return;
   const axis = series.axis === "secondary" ? spec.yAxis2 : spec.yAxis;
   const x = _optionalChain([series, 'access', _75 => _75.x, 'optionalAccess', _76 => _76[readout.index]]);
-  const text = x !== null && x !== void 0 && _chunkUVXTOZ2Bcjs.chartFamily.call(void 0, spec) === "xy" ? `${formatChartNumber(x, spec.xAxis.format)}, ${formatChartNumber(value, axis.format)}` : `${_nullishCoalesce(spec.categories[readout.index], () => ( ""))}: ${formatChartNumber(value, _nullishCoalesce(series.format, () => ( axis.format)))}`;
+  const text = x !== null && x !== void 0 && _chunkBPX4Z3N3cjs.chartFamily.call(void 0, spec) === "xy" ? `${formatChartNumber(x, spec.xAxis.format)}, ${formatChartNumber(value, axis.format)}` : `${_nullishCoalesce(spec.categories[readout.index], () => ( ""))}: ${formatChartNumber(value, _nullishCoalesce(series.format, () => ( axis.format)))}`;
   const w = measure(text, fs, 600) + 10;
   const h = fs + 8;
   const bx = Math.max(plot.x, Math.min(plot.x + plot.width - w, ax - w / 2));
@@ -2798,4 +2871,7 @@ function snapChartValue(scene, value, step, ticks = _nullishCoalesce(_optionalCh
 
 
 
-exports.parseChartDate = parseChartDate; exports.CHART_DATE_STEPS = CHART_DATE_STEPS; exports.formatChartDate = formatChartDate; exports.chartDateLabels = chartDateLabels; exports.compileChartFormatCode = compileChartFormatCode; exports.formatChartValueWithCode = formatChartValueWithCode; exports.chartSerialToDate = chartSerialToDate; exports.chartDateToSerial = chartDateToSerial; exports.niceStep = niceStep; exports.niceScale = niceScale; exports.stepDecimals = stepDecimals; exports.formatChartNumber = formatChartNumber; exports.linearMap = linearMap; exports.niceLogScale = niceLogScale; exports.chartScaleToPixel = chartScaleToPixel; exports.chartScaleFromPixel = chartScaleFromPixel; exports.estimateChartTextWidth = estimateChartTextWidth; exports.sameChartSelection = sameChartSelection; exports.contrastingTextColor = contrastingTextColor; exports.r2 = r2; exports.chartHistogram = chartHistogram; exports.chartQuantile = chartQuantile; exports.suggestChartReferences = suggestChartReferences; exports.chartBoxStats = chartBoxStats; exports.chartSquarify = chartSquarify; exports.decimateChartPoints = decimateChartPoints; exports.summarizeChartSeries = summarizeChartSeries; exports.fitChartTrendline = fitChartTrendline; exports.trendNumberText = trendNumberText; exports.chartMovingAverage = chartMovingAverage; exports.chartTrendlineName = chartTrendlineName; exports.chartSupportsTrendlines = chartSupportsTrendlines; exports.MAX_CHART_DATA_LABELS = MAX_CHART_DATA_LABELS; exports.MAX_CHART_LINE_POINTS = MAX_CHART_LINE_POINTS; exports.MAX_CHART_MARKERS = MAX_CHART_MARKERS; exports.layoutChart = layoutChart; exports.chartValueAtPoint = chartValueAtPoint; exports.chartXAtPoint = chartXAtPoint; exports.snapChartValue = snapChartValue;
+
+
+
+exports.parseChartDate = parseChartDate; exports.CHART_DATE_STEPS = CHART_DATE_STEPS; exports.formatChartDate = formatChartDate; exports.chartDateLabels = chartDateLabels; exports.compileChartFormatCode = compileChartFormatCode; exports.formatChartValueWithCode = formatChartValueWithCode; exports.chartSerialToDate = chartSerialToDate; exports.chartDateToSerial = chartDateToSerial; exports.niceStep = niceStep; exports.niceScale = niceScale; exports.stepDecimals = stepDecimals; exports.formatChartNumber = formatChartNumber; exports.linearMap = linearMap; exports.niceLogScale = niceLogScale; exports.chartScaleToPixel = chartScaleToPixel; exports.chartScaleFromPixel = chartScaleFromPixel; exports.estimateChartTextWidth = estimateChartTextWidth; exports.sameChartSelection = sameChartSelection; exports.contrastingTextColor = contrastingTextColor; exports.r2 = r2; exports.chartHistogram = chartHistogram; exports.chartQuantile = chartQuantile; exports.suggestChartReferences = suggestChartReferences; exports.chartBoxStats = chartBoxStats; exports.chartSquarify = chartSquarify; exports.decimateChartPoints = decimateChartPoints; exports.summarizeChartSeries = summarizeChartSeries; exports.fitChartTrendline = fitChartTrendline; exports.trendNumberText = trendNumberText; exports.chartMovingAverage = chartMovingAverage; exports.chartTrendlineName = chartTrendlineName; exports.chartSupportsTrendlines = chartSupportsTrendlines; exports.MAX_CHART_DATA_LABELS = MAX_CHART_DATA_LABELS; exports.MAX_CHART_LINE_POINTS = MAX_CHART_LINE_POINTS; exports.MAX_CHART_MARKERS = MAX_CHART_MARKERS; exports.chartRaceValueAt = chartRaceValueAt; exports.chartRaceMoment = chartRaceMoment; exports.chartRaceRanking = chartRaceRanking; exports.layoutChart = layoutChart; exports.chartValueAtPoint = chartValueAtPoint; exports.chartXAtPoint = chartXAtPoint; exports.snapChartValue = snapChartValue;