@pixerate/editor 0.165.0 → 0.167.0

package/dist/{chunk-V5GSY3NC.js → chunk-M52UCHVZ.js}

@@ -12,7 +12,7 @@ import {
   chartTreeTotal,
   chartVariesColors,
   shadeChartColor
-} from "./chunk-2ZRN43IN.js";
+} from "./chunk-ORZF4JOO.js";
 import {
   NumberFormat
 } from "./chunk-II2WIF5Z.js";
@@ -948,7 +948,7 @@ function drawCallouts(ctx, plot) {
   }
   if (unplaced) ctx.warn("annotations-skipped", `${unplaced} callout${unplaced === 1 ? " points" : "s point"} at a gap or a hidden value and ${unplaced === 1 ? "is" : "are"} not drawn.`);
 }
-var MUTED = /* @__PURE__ */ new Set(["node", "bar", "line", "area", "point", "slice", "cell", "box", "whisker", "outlier", "connector", "trendline", "trendline-label", "error-bar", "data-label", "legend-swatch", "legend-label"]);
+var MUTED = /* @__PURE__ */ new Set(["node", "region", "bar", "line", "area", "point", "slice", "cell", "box", "whisker", "outlier", "connector", "trendline", "trendline-label", "error-bar", "data-label", "legend-swatch", "legend-label"]);
 function applyHighlight(ctx) {
   const { spec, marks } = ctx;
   if (!spec.highlight.length) return;
@@ -1677,6 +1677,83 @@ function trendlineLegendItems(spec, color) {
   );
 }
 
+// src/chart/maps.ts
+var maps = /* @__PURE__ */ new Map();
+function registerChartMap(map) {
+  maps.set(map.id, map);
+}
+function getChartMap(id) {
+  return maps.get(id);
+}
+function listChartMaps() {
+  return [...maps.values()];
+}
+var fold = (text) => text.normalize("NFKD").replace(/[̀-ͯ]/g, "").trim().toLowerCase();
+function matchChartMapRegions(map, categories) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const r of map.regions) {
+    byKey.set(fold(r.id), r);
+    byKey.set(fold(r.name), r);
+  }
+  const taken = /* @__PURE__ */ new Set();
+  return categories.map((c) => {
+    const r = byKey.get(fold(c));
+    if (!r || taken.has(r.id)) return null;
+    taken.add(r.id);
+    return r;
+  });
+}
+function chartMapBreaks(values, steps, thresholds) {
+  if (thresholds.length) return [...thresholds];
+  if (!values.length) return [];
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  if (!(hi > lo)) return [];
+  const exact = Array.from({ length: steps - 1 }, (_, k) => lo + (hi - lo) * (k + 1) / steps);
+  for (let digits = 2; digits <= 6; digits++) {
+    const rounded = exact.map((b) => Number(b.toPrecision(digits)));
+    if (rounded.every((b, i) => i === 0 || b > rounded[i - 1])) return rounded;
+  }
+  return exact;
+}
+var chartMapClass = (value, breaks) => breaks.filter((b) => value >= b).length;
+function chartMapRamp(base, count) {
+  if (count <= 1) return [base];
+  return Array.from({ length: count }, (_, k) => shadeChartColor(base, 0.82 - 1.17 * k / (count - 1)));
+}
+
+// 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) => series.pointColors?.[i] || chartSliceColor(ctx.spec, i);
 function layoutPie(ctx, area, series) {
@@ -2441,11 +2518,110 @@ 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, format.decimals ?? stepDecimals(ticks[1] - ticks[0] || 1)), anchor: "middle", baseline: "top", size: fs - 1, fill: theme.mutedText, target: axisTarget });
+  });
+  const label = 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: chartSeriesColor(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 (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, s.format ?? format, (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 } };
+}
+function placePath(d, s, ox, oy) {
+  return d.replace(/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g, (_, x, y) => `${r2(ox + Number(x) * s)},${r2(oy + Number(y) * s)}`);
+}
+function layoutChoropleth(ctx, area, series) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const map = getChartMap(spec.map);
+  const matches = matchChartMapRegions(map, spec.categories);
+  const unmatched = spec.categories.filter((_, i) => !matches[i]);
+  if (unmatched.length)
+    ctx.warn("values-skipped", `${unmatched.length} categor${unmatched.length === 1 ? "y names" : "ies name"} no region of ${map.name}: ${unmatched.slice(0, 8).map((c) => `"${c}"`).join(", ")}${unmatched.length > 8 ? ", \u2026" : ""}. Use codes (such as FRA) or names (France).`);
+  const indexOf = /* @__PURE__ */ new Map();
+  matches.forEach((r, i) => r && indexOf.set(r.id, i));
+  const valueAt = (i) => {
+    const v = series.values[i];
+    return v !== null && v !== void 0 && Number.isFinite(v) ? v : null;
+  };
+  const present = [...indexOf.values()].map(valueAt).filter((v) => v !== null);
+  const breaks = chartMapBreaks(present, spec.mapSteps, spec.mapThresholds);
+  const ramp = chartMapRamp(series.color ?? chartSeriesColor(spec, spec.series.indexOf(series)), breaks.length + 1);
+  const format = series.format ?? spec.yAxis.format;
+  const legendH = fs * 2.2;
+  const s = Math.max(1e-6, Math.min(area.width / map.width, (area.height - legendH) / map.height));
+  const ox = area.x + (area.width - map.width * s) / 2;
+  const oy = area.y;
+  if (map.land) marks.push({ kind: "path", key: "map-land", role: "map-land", d: placePath(map.land, s, ox, oy), fill: theme.grid, opacity: 0.55 });
+  const markers = [];
+  const labels = [];
+  for (const region of map.regions) {
+    const i = indexOf.get(region.id);
+    const value = i === void 0 ? null : valueAt(i);
+    const fill = i !== void 0 && series.pointColors?.[i] ? series.pointColors[i] : value === null ? theme.grid : ramp[chartMapClass(value, breaks)];
+    const target = i === void 0 ? void 0 : { kind: "category", index: i };
+    const selected = target ? ctx.isSelected(target) || ctx.isSelected({ kind: "point", seriesId: series.id, index: i }) : false;
+    const [cx, cy] = [ox + region.center[0] * s, oy + region.center[1] * s];
+    if (region.d) marks.push({ kind: "path", key: `region-${region.id}`, role: "region", d: placePath(region.d, s, ox, oy), fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2 : 0.6, ...target ? { target, selected } : {} });
+    if (!region.d || region.area * s * s < 30)
+      markers.push({ kind: "circle", key: `region-marker-${region.id}`, role: "region", cx, cy, r: 3.5, fill, stroke: selected ? theme.selection : theme.text, strokeWidth: selected ? 1.5 : 0.75, ...target ? { target, selected } : {} });
+    if (value !== null && target && (series.dataLabels ?? spec.dataLabels) && region.area * s * s > (fs * 3) ** 2) {
+      const text = formatChartNumber(value, format);
+      labels.push({ kind: "text", key: `label-${region.id}`, role: "data-label", x: cx, y: cy, text, anchor: "middle", baseline: "middle", size: fs - 1, weight: 600, fill: contrastingTextColor(fill), target });
+    }
+  }
+  marks.push(...markers, ...labels);
+  const fmt = (v) => formatChartNumber(v, format);
+  const items = ramp.map((color, k) => ({
+    color,
+    text: breaks.length === 0 ? present.length ? fmt(present[0]) : "" : k === 0 ? `< ${fmt(breaks[0])}` : k === breaks.length ? `\u2265 ${fmt(breaks[k - 1])}` : `${fmt(breaks[k - 1])}\u2013${fmt(breaks[k])}`
+  }));
+  items.push({ color: theme.grid, text: "No data" });
+  let x = area.x;
+  const y = area.y + area.height - fs * 0.9;
+  items.forEach((item, k) => {
+    marks.push({ kind: "rect", key: `legend-swatch-${k}`, role: "legend-swatch", x, y: y - 5, width: 10, height: 10, radius: 2, fill: item.color });
+    marks.push({ kind: "text", key: `legend-label-${k}`, role: "legend-label", x: x + 14, y, text: item.text, anchor: "start", baseline: "middle", size: fs - 1, fill: theme.text });
+    x += 14 + measure(item.text, fs - 1) + 14;
+  });
+  if (x > area.x + area.width) ctx.warn("legend-truncated", "The map legend is wider than the chart; widen the chart or use fewer classes.");
+  if (map.attribution) marks.push({ kind: "text", key: "map-attribution", role: "note", x: area.x + area.width, y, text: map.attribution, anchor: "end", baseline: "middle", size: Math.max(7, fs - 3), fill: theme.mutedText });
+  return { plot: { x: ox, y: oy, width: map.width * s, height: map.height * s } };
+}
 
 // src/chart/layout.ts
 function legendItems(spec, ctx) {
   const family = chartFamily(spec);
-  if (spec.type === "funnel" || spec.type === "slope" || spec.type === "sankey") return [];
+  if (spec.type === "funnel" || spec.type === "slope" || spec.type === "sankey" || spec.type === "barrace" || spec.type === "choropleth") return [];
   if (chartSpecColorsByCategory(spec)) {
     const first = spec.series.find((s) => !s.hidden);
     const seats = (i) => Math.max(0, Math.round(first?.values[i] ?? 0));
@@ -2585,6 +2761,20 @@ 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 "choropleth": {
+      const map = getChartMap(spec.map);
+      if (!map) {
+        ctx.warn("type-fallback", `The map "${spec.map}" is not registered, so the values are drawn as bars: register it with registerChartMap (the Europe outlines are EUROPE_CHART_MAP in @pixerate/editor/chart-maps).`);
+        return finish(layoutCartesian(ctx, area, visible));
+      }
+      if (!matchChartMapRegions(map, spec.categories).some(Boolean)) {
+        ctx.warn("type-fallback", `No category names a region of ${map.name}, so the values are drawn as bars: use codes (such as FRA) or names (France) as categories.`);
+        return finish(layoutCartesian(ctx, area, visible));
+      }
+      return finish(layoutChoropleth(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.");
@@ -2794,6 +2984,16 @@ export {
   MAX_CHART_DATA_LABELS,
   MAX_CHART_LINE_POINTS,
   MAX_CHART_MARKERS,
+  registerChartMap,
+  getChartMap,
+  listChartMaps,
+  matchChartMapRegions,
+  chartMapBreaks,
+  chartMapClass,
+  chartMapRamp,
+  chartRaceValueAt,
+  chartRaceMoment,
+  chartRaceRanking,
   layoutChart,
   chartValueAtPoint,
   chartXAtPoint,

package/dist/{chunk-FRBRLKNQ.js → chunk-N3ACT6VJ.js}

@@ -4,14 +4,17 @@ import {
 } from "./chunk-KGRZMHZB.js";
 import {
   chartMovingAverage,
+  chartRaceRanking,
   chartSupportsTrendlines,
   fitChartTrendline,
   formatChartNumber,
+  getChartMap,
   layoutChart,
+  matchChartMapRegions,
   r2,
   sameChartSelection,
   summarizeChartSeries
-} from "./chunk-V5GSY3NC.js";
+} from "./chunk-M52UCHVZ.js";
 import {
   CHART_TYPE_LABELS,
   DEFAULT_CHART_PALETTE,
@@ -44,7 +47,7 @@ import {
   parseChartValue,
   shadeChartColor,
   uniqueChartSeriesId
-} from "./chunk-2ZRN43IN.js";
+} from "./chunk-ORZF4JOO.js";
 import {
   parseCsv,
   parseTsv
@@ -549,6 +552,22 @@ function describeChart(spec, series = spec.series.filter((s) => !s.hidden).map((
     }
     return parts.join(" ");
   }
+  if (family === "choropleth") {
+    const s = spec.series.find((x) => !x.hidden);
+    const map = getChartMap(spec.map);
+    const matches = map ? matchChartMapRegions(map, spec.categories) : spec.categories.map(() => null);
+    const rows = spec.categories.flatMap((c, i) => matches[i] && s.values[i] !== null ? [{ name: matches[i].name, v: s.values[i] }] : []).sort((a, b) => b.v - a.v);
+    const missing = spec.categories.filter((_, i) => !matches[i]).length;
+    if (!rows.length) return `${head} of ${map?.name ?? spec.map} with no regions matched.`;
+    return `${head} of ${map?.name ?? spec.map} shading ${rows.length} region${rows.length === 1 ? "" : "s"} by ${s.name}: highest ${rows[0].name} (${fmt(rows[0].v)}), lowest ${rows[rows.length - 1].name} (${fmt(rows[rows.length - 1].v)}).${missing ? ` ${missing} categor${missing === 1 ? "y names" : "ies name"} no region.` : ""}`;
+  }
+  if (family === "barrace") {
+    const n = spec.categories.length;
+    const first = chartRaceRanking(spec, 0)[0];
+    const last = chartRaceRanking(spec, n - 1)[0];
+    const lead = (e, at) => e ? `${e.name} leads at ${at} with ${fmt(e.value)}` : "";
+    return `${head} of ${series.length} names over ${n} time points (${spec.categories[0]} to ${spec.categories[n - 1]}), showing the top ${Math.min(spec.raceTopN, series.length)}. ${lead(first, spec.categories[0])}; ${lead(last, spec.categories[n - 1])}.`;
+  }
   if (family === "sankey") {
     if (!spec.links.length) return `${head} with no flows yet.`;
     const total = spec.links.reduce((t, l) => t + l.value, 0);
@@ -776,6 +795,17 @@ function sameChartJson(a, b) {
   if (keys.length !== Object.keys(bo).filter((k) => bo[k] !== void 0).length) return false;
   return keys.every((k) => Object.prototype.hasOwnProperty.call(bo, k) && sameChartJson(ao[k], bo[k]));
 }
+var defaultRaceTicker = {
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  next: (step) => {
+    if (typeof requestAnimationFrame === "function") {
+      const id2 = requestAnimationFrame(() => step());
+      return () => cancelAnimationFrame(id2);
+    }
+    const id = setTimeout(step, 16);
+    return () => clearTimeout(id);
+  }
+};
 var fail = (message, issues) => ({ ok: false, message, ...issues ? { issues } : {} });
 var ChartController = class {
   history;
@@ -788,12 +818,16 @@ var ChartController = class {
   revision = 0;
   applying = false;
   onChange;
+  raceTicker;
+  raceFrame = null;
+  raceStop = null;
   listeners = /* @__PURE__ */ new Set();
   unsubscribeHistory;
   state;
   constructor(options = {}) {
     this.history = options.history ?? new HistoryManager();
     this.onChange = options.onChange;
+    this.raceTicker = options.raceTicker ?? defaultRaceTicker;
     const { spec, issues } = normalizeChartSpec(options.spec ?? {});
     this.spec = spec;
     this.issues = issues;
@@ -843,6 +877,8 @@ var ChartController = class {
       canRedo: h.canRedo,
       undoLabel: h.undoName,
       redoLabel: h.redoName,
+      raceFrame: this.raceFrame === null ? null : Math.min(this.raceFrame, Math.max(0, this.spec.categories.length - 1)),
+      racePlaying: this.raceStop !== null,
       revision: this.revision
     };
   }
@@ -1651,6 +1687,55 @@ var ChartController = class {
   // -------------------------------------------------------------------------
   // Selection and gestures
   // -------------------------------------------------------------------------
+  /**
+   * Shows a bar race at a moment: a category index, fractional between time points (`null`:
+   * the last one). View state like the selection, so not an undo step. Stops playback.
+   */
+  setRaceFrame(frame) {
+    const n = this.spec.categories.length;
+    if (frame !== null && !(Number.isFinite(frame) && frame >= 0 && frame <= Math.max(0, n - 1)))
+      return fail(n ? `The race has time points 0 to ${n - 1}${n > 1 ? ` ("${this.spec.categories[0]}" to "${this.spec.categories[n - 1]}")` : ""}; got ${frame}.` : "The chart has no time points (categories) yet.");
+    this.stopRace();
+    if (frame === this.raceFrame) return { ok: true };
+    this.raceFrame = frame;
+    this.notify(false);
+    return { ok: true };
+  }
+  /**
+   * Plays the bar race from the moment shown (from the start when it is at the end), moving
+   * one time point every `msPerStep` (default 1000) until the last. Not an undo step.
+   */
+  playRace(options = {}) {
+    const last = this.spec.categories.length - 1;
+    if (last < 1) return fail("A race needs at least two time points (categories) to play.");
+    this.stopRace();
+    const per = Math.max(50, options.msPerStep ?? 1e3);
+    const from = this.raceFrame === null || this.raceFrame >= last ? 0 : this.raceFrame;
+    const start = this.raceTicker.now();
+    const step = () => {
+      const at = Math.min(last, from + (this.raceTicker.now() - start) / per);
+      this.raceFrame = at;
+      if (at >= last) {
+        this.raceStop = null;
+        this.raceFrame = null;
+      } else this.raceStop = this.raceTicker.next(step);
+      this.notify(false);
+    };
+    this.raceFrame = from;
+    this.raceStop = this.raceTicker.next(step);
+    this.notify(false);
+    return { ok: true };
+  }
+  /** Pauses bar race playback where it is. */
+  pauseRace() {
+    if (!this.raceStop) return;
+    this.stopRace();
+    this.notify(false);
+  }
+  stopRace() {
+    this.raceStop?.();
+    this.raceStop = null;
+  }
   /** Selects a chart element (view state; not an undo step). */
   select(selection) {
     const next = this.validSelection(selection, this.spec);
@@ -1773,6 +1858,7 @@ var ChartController = class {
   }
   /** Stops listening to the history (reconnected by the next `subscribe`). */
   destroy() {
+    this.stopRace();
     this.unsubscribeHistory?.();
     this.unsubscribeHistory = void 0;
     this.listeners.clear();
@@ -1808,6 +1894,10 @@ function updateLabel(patch) {
     parliamentArc: "Change hemicycle sweep",
     parliamentMajority: "Change majority",
     parliamentLabel: "Edit seat caption",
+    raceTopN: "Change bars shown",
+    map: "Change map",
+    mapSteps: "Change colour classes",
+    mapThresholds: "Change class breaks",
     sunburstLabel: "Edit centre caption",
     tree: "Replace grouped data",
     links: "Replace flows",

package/dist/{chunk-CRFSQWKQ.js → chunk-OLCHKGGO.js}

@@ -8,7 +8,7 @@ import {
   isCartesianChart,
   normalizeChartSpec,
   parseChartColor
-} from "./chunk-2ZRN43IN.js";
+} from "./chunk-ORZF4JOO.js";
 
 // src/chart/ooxml.ts
 var CHART_OOXML_NS = "http://schemas.openxmlformats.org/drawingml/2006/chart";
@@ -475,6 +475,12 @@ function chartToOoxml(spec) {
   } else if (family === "sunburst") {
     issues.push(`Sunburst charts are written as doughnut charts of the ${spec.tree.length ? "top-level group totals" : "values"}: DrawingML has no sunburst type (Office 2016 stores it as chartex).`);
     type = "donut";
+  } else if (family === "choropleth") {
+    issues.push("Maps are written as bar charts of the values by region: DrawingML has no map chart (Office 2016 stores region maps as chartex with Bing geodata).");
+    type = "bar";
+  } else if (family === "barrace") {
+    issues.push("Bar chart races are written as clustered bar charts of every name at every time point: DrawingML has no animation.");
+    type = "bar";
   } else if (family === "sankey") {
     issues.push("Sankey diagrams are written as bar charts of how much passes through each node: DrawingML has no flows.");
     type = "bar";

package/dist/{chunk-2ZRN43IN.js → chunk-ORZF4JOO.js}

@@ -426,7 +426,7 @@ function removeChartTreeRow(rows, row) {
 }
 
 // src/chart/spec.ts
-var CHART_TYPES = ["bar", "line", "area", "scatter", "bubble", "pie", "donut", "radar", "waterfall", "histogram", "box", "funnel", "treemap", "sunburst", "sankey", "slope", "likert", "parliament"];
+var CHART_TYPES = ["bar", "line", "area", "scatter", "bubble", "pie", "donut", "radar", "waterfall", "histogram", "box", "funnel", "treemap", "sunburst", "sankey", "slope", "likert", "parliament", "barrace", "choropleth"];
 var CHART_MARKERS = ["circle", "square", "diamond", "triangle", "cross", "none"];
 var CHART_TRENDLINE_TYPES = ["linear", "exponential", "logarithmic", "power", "polynomial", "moving-average"];
 var CHART_LABEL_POSITIONS = ["auto", "inside", "outside", "center"];
@@ -461,7 +461,9 @@ var CHART_TYPE_LABELS = {
   likert: "Likert",
   parliament: "Parliament",
   sunburst: "Sunburst",
-  sankey: "Sankey"
+  sankey: "Sankey",
+  barrace: "Bar race",
+  choropleth: "Map"
 };
 var DEFAULT_CHART_PALETTE = ["#4269d0", "#efb118", "#ff725c", "#6cc5b0", "#3ca951", "#ff8ab7", "#a463f2", "#97bbf5", "#9c6b4e", "#9498a0"];
 var DEFAULT_CHART_THEME = {
@@ -513,6 +515,8 @@ function chartFamily(spec) {
     case "parliament":
     case "sunburst":
     case "sankey":
+    case "barrace":
+    case "choropleth":
       return spec.type;
     case "bubble":
       return "xy";
@@ -984,6 +988,25 @@ function normalizeChartSpec(input) {
     if (Number.isInteger(m) && m >= 1) parliamentMajority = m;
     else issues.push({ path: "parliamentMajority", message: "parliamentMajority must be a whole number of seats, 1 or more, or null for half plus one." });
   }
+  let mapSteps = 5;
+  if (value.mapSteps !== void 0) {
+    const n = Number(value.mapSteps);
+    if (value.mapSteps !== null && Number.isInteger(n) && n >= 2 && n <= 9) mapSteps = n;
+    else issues.push({ path: "mapSteps", message: "mapSteps must be a whole number of colour classes from 2 to 9." });
+  }
+  let mapThresholds = [];
+  if (value.mapThresholds !== void 0 && value.mapThresholds !== null) {
+    const list = Array.isArray(value.mapThresholds) ? value.mapThresholds.map((t) => typeof t === "number" ? t : Number(t)) : null;
+    if (!list || list.some((t) => !Number.isFinite(t)) || list.length > 8 || list.some((t, i) => i > 0 && t <= list[i - 1]))
+      issues.push({ path: "mapThresholds", message: "mapThresholds must be up to 8 numbers in ascending order (the class breaks), or [] for equal classes." });
+    else mapThresholds = list;
+  }
+  let raceTopN = 10;
+  if (value.raceTopN !== void 0) {
+    const n = Number(value.raceTopN);
+    if (value.raceTopN !== null && Number.isInteger(n) && n >= 1 && n <= 30) raceTopN = n;
+    else issues.push({ path: "raceTopN", message: "raceTopN must be a whole number of bars from 1 to 30." });
+  }
   let radarTicks = null;
   if (value.radarTicks !== void 0 && value.radarTicks !== null) {
     const t = Number(value.radarTicks);
@@ -1029,7 +1052,11 @@ function normalizeChartSpec(input) {
     sunburstLabel: text(value.sunburstLabel, "", "sunburstLabel", issues),
     links,
     sankeyNodes: links.length ? sankeyNodes : [],
-    sankeyLinkColor: pick(value.sankeyLinkColor, CHART_SANKEY_LINK_COLORS, "source", "sankeyLinkColor", issues)
+    sankeyLinkColor: pick(value.sankeyLinkColor, CHART_SANKEY_LINK_COLORS, "source", "sankeyLinkColor", issues),
+    raceTopN,
+    map: text(value.map, "europe", "map", issues).trim() || "europe",
+    mapSteps,
+    mapThresholds
   };
   if (spec.stacking === "percent")
     for (const name of ["yAxis", "yAxis2"]) {
@@ -1055,7 +1082,8 @@ function cloneChartSpec(spec) {
     referenceBands: spec.referenceBands.map((b) => ({ ...b })),
     tree: cloneChartTree(spec.tree),
     links: spec.links.map((l) => ({ ...l })),
-    sankeyNodes: [...spec.sankeyNodes]
+    sankeyNodes: [...spec.sankeyNodes],
+    mapThresholds: [...spec.mapThresholds]
   };
 }
 function cloneChartSeries(series) {

package/dist/{chunk-UVXTOZ2B.cjs → chunk-OUO3DSRT.cjs}

@@ -426,7 +426,7 @@ function removeChartTreeRow(rows, row) {
 }
 
 // src/chart/spec.ts
-var CHART_TYPES = ["bar", "line", "area", "scatter", "bubble", "pie", "donut", "radar", "waterfall", "histogram", "box", "funnel", "treemap", "sunburst", "sankey", "slope", "likert", "parliament"];
+var CHART_TYPES = ["bar", "line", "area", "scatter", "bubble", "pie", "donut", "radar", "waterfall", "histogram", "box", "funnel", "treemap", "sunburst", "sankey", "slope", "likert", "parliament", "barrace", "choropleth"];
 var CHART_MARKERS = ["circle", "square", "diamond", "triangle", "cross", "none"];
 var CHART_TRENDLINE_TYPES = ["linear", "exponential", "logarithmic", "power", "polynomial", "moving-average"];
 var CHART_LABEL_POSITIONS = ["auto", "inside", "outside", "center"];
@@ -461,7 +461,9 @@ var CHART_TYPE_LABELS = {
   likert: "Likert",
   parliament: "Parliament",
   sunburst: "Sunburst",
-  sankey: "Sankey"
+  sankey: "Sankey",
+  barrace: "Bar race",
+  choropleth: "Map"
 };
 var DEFAULT_CHART_PALETTE = ["#4269d0", "#efb118", "#ff725c", "#6cc5b0", "#3ca951", "#ff8ab7", "#a463f2", "#97bbf5", "#9c6b4e", "#9498a0"];
 var DEFAULT_CHART_THEME = {
@@ -513,6 +515,8 @@ function chartFamily(spec) {
     case "parliament":
     case "sunburst":
     case "sankey":
+    case "barrace":
+    case "choropleth":
       return spec.type;
     case "bubble":
       return "xy";
@@ -984,6 +988,25 @@ function normalizeChartSpec(input) {
     if (Number.isInteger(m) && m >= 1) parliamentMajority = m;
     else issues.push({ path: "parliamentMajority", message: "parliamentMajority must be a whole number of seats, 1 or more, or null for half plus one." });
   }
+  let mapSteps = 5;
+  if (value.mapSteps !== void 0) {
+    const n = Number(value.mapSteps);
+    if (value.mapSteps !== null && Number.isInteger(n) && n >= 2 && n <= 9) mapSteps = n;
+    else issues.push({ path: "mapSteps", message: "mapSteps must be a whole number of colour classes from 2 to 9." });
+  }
+  let mapThresholds = [];
+  if (value.mapThresholds !== void 0 && value.mapThresholds !== null) {
+    const list = Array.isArray(value.mapThresholds) ? value.mapThresholds.map((t) => typeof t === "number" ? t : Number(t)) : null;
+    if (!list || list.some((t) => !Number.isFinite(t)) || list.length > 8 || list.some((t, i) => i > 0 && t <= list[i - 1]))
+      issues.push({ path: "mapThresholds", message: "mapThresholds must be up to 8 numbers in ascending order (the class breaks), or [] for equal classes." });
+    else mapThresholds = list;
+  }
+  let raceTopN = 10;
+  if (value.raceTopN !== void 0) {
+    const n = Number(value.raceTopN);
+    if (value.raceTopN !== null && Number.isInteger(n) && n >= 1 && n <= 30) raceTopN = n;
+    else issues.push({ path: "raceTopN", message: "raceTopN must be a whole number of bars from 1 to 30." });
+  }
   let radarTicks = null;
   if (value.radarTicks !== void 0 && value.radarTicks !== null) {
     const t = Number(value.radarTicks);
@@ -1029,7 +1052,11 @@ function normalizeChartSpec(input) {
     sunburstLabel: text(value.sunburstLabel, "", "sunburstLabel", issues),
     links,
     sankeyNodes: links.length ? sankeyNodes : [],
-    sankeyLinkColor: pick(value.sankeyLinkColor, CHART_SANKEY_LINK_COLORS, "source", "sankeyLinkColor", issues)
+    sankeyLinkColor: pick(value.sankeyLinkColor, CHART_SANKEY_LINK_COLORS, "source", "sankeyLinkColor", issues),
+    raceTopN,
+    map: text(value.map, "europe", "map", issues).trim() || "europe",
+    mapSteps,
+    mapThresholds
   };
   if (spec.stacking === "percent")
     for (const name of ["yAxis", "yAxis2"]) {
@@ -1055,7 +1082,8 @@ function cloneChartSpec(spec) {
     referenceBands: spec.referenceBands.map((b) => ({ ...b })),
     tree: cloneChartTree(spec.tree),
     links: spec.links.map((l) => ({ ...l })),
-    sankeyNodes: [...spec.sankeyNodes]
+    sankeyNodes: [...spec.sankeyNodes],
+    mapThresholds: [...spec.mapThresholds]
   };
 }
 function cloneChartSeries(series) {