@pixerate/editor 0.162.1 → 0.164.0

package/dist/{chunk-DTSTNRPH.js → chunk-Z4P2RBMJ.js}

@@ -1,13 +1,18 @@
 import {
   DEFAULT_CHART_THEME,
-  chartColorsByCategory,
   chartErrorAmounts,
   chartFamily,
   chartPointColor,
   chartSeriesColor,
   chartSeriesType,
-  chartSliceColor
-} from "./chunk-HLOKB7WW.js";
+  chartSliceColor,
+  chartSpecColorsByCategory,
+  chartTreeDepth,
+  chartTreeFromSeries,
+  chartTreeTotal,
+  chartVariesColors,
+  shadeChartColor
+} from "./chunk-3NEZJCBY.js";
 import {
   NumberFormat
 } from "./chunk-II2WIF5Z.js";
@@ -507,6 +512,15 @@ function chartQuantile(sorted, q) {
   const b = sorted[i + 1] ?? a;
   return a + (b - a) * (pos - i);
 }
+var roundish = (n) => Number(n.toPrecision(3));
+function suggestChartReferences(spec) {
+  const values = spec.series.filter((s) => !s.hidden && s.axis !== "secondary").flatMap((s) => s.values).filter((v) => v !== null && Number.isFinite(v)).sort((a, b) => a - b);
+  if (!values.length) return { line: { value: 0, label: "Target" }, band: { from: 0, to: 1, label: "Target range" } };
+  const mean = values.reduce((t, v) => t + v, 0) / values.length;
+  const lo = roundish(chartQuantile(values, 0.25));
+  const hi = roundish(chartQuantile(values, 0.75));
+  return { line: { value: roundish(mean), label: "Average" }, band: { from: lo, to: hi > lo ? hi : lo + 1, label: "Middle half" } };
+}
 function chartBoxStats(values) {
   const v = values.filter((x) => x !== null && Number.isFinite(x)).sort((a, b) => a - b);
   if (!v.length) return null;
@@ -822,6 +836,157 @@ function chartSupportsTrendlines(type, stacking) {
   return (type === "bar" || type === "line" || type === "area" || type === "scatter" || type === "bubble") && stacking === "none";
 }
 
+// src/chart/layout-annotations.ts
+var axisOf = (item) => item.axis ?? "y";
+var chartAnnotationFamily = (family) => family === "cartesian" || family === "xy";
+function referenceValues(spec, axis) {
+  const out = [];
+  for (const l of spec.referenceLines) if (axisOf(l) === axis) out.push(l.value);
+  for (const b of spec.referenceBands) if (axisOf(b) === axis) out.push(b.from, b.to);
+  return out;
+}
+function drawReferences(ctx, plot, axes, layer) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const items = layer === "bands" ? spec.referenceBands : spec.referenceLines;
+  const missing = /* @__PURE__ */ new Set();
+  items.forEach((item, i) => {
+    const axis = axes[axisOf(item)];
+    if (!axis) {
+      missing.add(axisOf(item));
+      return;
+    }
+    const { info, vertical } = axis;
+    const color = item.color ?? theme.text;
+    const lo = vertical ? plot.y : plot.x;
+    const hi = vertical ? plot.y + plot.height : plot.x + plot.width;
+    const inside = (p2) => Number.isFinite(p2) && p2 >= lo - 0.5 && p2 <= hi + 0.5;
+    const at = (v) => info.logBase && !(v > 0) ? NaN : info.raw(v);
+    if ("from" in item) {
+      const a = at(item.from);
+      const b = at(item.to);
+      if (!Number.isFinite(a) || !Number.isFinite(b)) return;
+      const p0 = Math.max(lo, Math.min(a, b));
+      const p1 = Math.min(hi, Math.max(a, b));
+      if (p1 <= p0) return;
+      const rect = vertical ? { x: plot.x, y: p0, width: plot.width, height: p1 - p0 } : { x: p0, y: plot.y, width: p1 - p0, height: plot.height };
+      marks.push({ kind: "rect", key: `reference-band-${i}`, role: "reference-band", ...rect, fill: color, opacity: item.color ? 0.16 : 0.07 });
+      if (item.label) {
+        const text = truncate(item.label, (vertical ? plot.width : rect.width) - 8, fs - 1, measure);
+        marks.push({ kind: "text", key: `reference-label-band-${i}`, role: "reference-label", x: rect.x + 4, y: rect.y + 3, text, anchor: "start", baseline: "top", size: fs - 1, fill: color, opacity: 0.85 });
+      }
+      return;
+    }
+    const p = at(item.value);
+    if (!inside(p)) {
+      ctx.warn("annotations-skipped", `The reference line at ${item.value} is outside the ${axisOf(item) === "x" ? "x" : "value"} axis range and is not drawn.`);
+      return;
+    }
+    const line = vertical ? { x1: plot.x, y1: p, x2: plot.x + plot.width, y2: p } : { x1: p, y1: plot.y, x2: p, y2: plot.y + plot.height };
+    marks.push({ kind: "line", key: `reference-line-${i}`, role: "reference-line", ...line, stroke: color, strokeWidth: 1.25, dash: "5 3", opacity: 0.8 });
+    if (item.label) {
+      const text = truncate(item.label, (vertical ? plot.width : plot.width / 2) - 8, fs - 1, measure);
+      const label = vertical ? { x: plot.x + plot.width - 4, y: p - 3, anchor: "end", baseline: "bottom" } : { x: p + 4, y: plot.y + 2, anchor: "start", baseline: "top" };
+      marks.push({ kind: "text", key: `reference-label-line-${i}`, role: "reference-label", ...label, text, size: fs - 1, weight: 500, fill: color });
+    }
+  });
+  for (const axis of missing)
+    ctx.warn("annotations-skipped", axis === "x" ? "Reference lines and bands on the x axis need a scatter or bubble chart with numeric x values; they are not drawn." : "Reference lines and bands on the secondary axis need a series on that axis; they are not drawn.");
+}
+function anchorOf(mark, horizontal) {
+  if (mark.kind === "rect") return horizontal ? { x: mark.x + mark.width, y: mark.y + mark.height / 2 } : { x: mark.x + mark.width / 2, y: mark.y };
+  if (mark.kind === "circle") return { x: mark.cx, y: mark.cy - mark.r };
+  return null;
+}
+function drawCallouts(ctx, plot) {
+  const { spec, marks, theme, fs, measure } = ctx;
+  const horizontal = spec.orientation === "horizontal";
+  const placed = [];
+  const overlaps = (a) => placed.some((b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height);
+  let unplaced = 0;
+  for (const s of spec.series) {
+    if (s.hidden || !s.callouts) continue;
+    s.callouts.forEach((label, i) => {
+      if (!label) return;
+      const mark = marks.find((m) => (m.role === "bar" || m.role === "point") && m.target?.kind === "point" && m.target.seriesId === s.id && m.target.index === i);
+      const anchor = mark ? anchorOf(mark, horizontal && mark.kind === "rect") : null;
+      if (!anchor) {
+        unplaced++;
+        return;
+      }
+      const size = fs - 1;
+      const text = truncate(label, plot.width * 0.6, size, measure);
+      const w = measure(text, size, 600) + 10;
+      const h = size + 8;
+      const sideways = horizontal && mark.kind === "rect";
+      let bx = sideways ? anchor.x + 14 : anchor.x - w / 2;
+      let by = sideways ? anchor.y - h / 2 : anchor.y - h - 14;
+      const clamp = () => {
+        bx = Math.max(plot.x, Math.min(plot.x + plot.width - w, bx));
+        by = Math.max(plot.y - fs / 2, Math.min(plot.y + plot.height - h, by));
+      };
+      clamp();
+      const covers = anchor.x >= bx - 2 && anchor.x <= bx + w + 2 && anchor.y >= by - 2 && anchor.y <= by + h + 2;
+      if (covers) {
+        if (sideways) bx = anchor.x - w - 14;
+        else by = anchor.y + 14;
+        clamp();
+      }
+      for (let k = 0; k < 6 && overlaps({ x: bx, y: by, width: w, height: h }); k++) {
+        if (sideways) by += h + 2;
+        else by -= h + 2;
+        clamp();
+      }
+      const box = { x: bx, y: by, width: w, height: h };
+      placed.push(box);
+      const target = { kind: "point", seriesId: s.id, index: i };
+      const ex = Math.max(bx, Math.min(bx + w, anchor.x));
+      const ey = Math.max(by, Math.min(by + h, anchor.y));
+      if (Math.hypot(ex - anchor.x, ey - anchor.y) > 2) marks.push({ kind: "line", key: `callout-leader-${s.id}-${i}`, role: "callout", x1: anchor.x, y1: anchor.y, x2: ex, y2: ey, stroke: theme.axis, strokeWidth: 1 });
+      marks.push({ kind: "rect", key: `callout-box-${s.id}-${i}`, role: "callout", ...box, fill: theme.surface, stroke: theme.axis, strokeWidth: 1, radius: 3, target });
+      marks.push({ kind: "text", key: `callout-${s.id}-${i}`, role: "callout", x: bx + w / 2, y: by + h / 2, text, anchor: "middle", baseline: "middle", size, weight: 600, fill: theme.text, target });
+    });
+  }
+  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(["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;
+  const names = new Set(spec.highlight);
+  const categories = /* @__PURE__ */ new Set();
+  spec.categories.forEach((c, i) => names.has(c) && categories.add(i));
+  const series = new Set(spec.series.filter((s) => names.has(s.id) || names.has(s.name)).map((s) => s.id));
+  const unmatched = spec.highlight.filter((h) => !spec.categories.includes(h) && !spec.series.some((s) => s.id === h || s.name === h));
+  if (unmatched.length) ctx.warn("highlight-unmatched", `Highlight names ${unmatched.map((u) => `"${u}"`).join(", ")}, which ${unmatched.length === 1 ? "is" : "are"} neither a category nor a series.`);
+  if (!categories.size && !series.size) return;
+  const bright = (t) => {
+    switch (t.kind) {
+      case "point":
+        return series.has(t.seriesId) || categories.has(t.index);
+      case "series":
+      case "trendline":
+        return !series.size || series.has(t.seriesId);
+      case "category":
+        return !categories.size || categories.has(t.index);
+      default:
+        return true;
+    }
+  };
+  for (let k = 0; k < marks.length; k++) {
+    const m = marks[k];
+    if (!m.target || !MUTED.has(m.role) || bright(m.target)) continue;
+    marks[k] = { ...m, opacity: (m.opacity ?? 1) * 0.25 };
+  }
+}
+var noteHeight = (spec, fs) => spec.note ? fs * 1.5 : 0;
+function drawNote(ctx, pad) {
+  const { spec, marks, theme, fs, measure, width, height } = ctx;
+  if (!spec.note) return;
+  const text = truncate(spec.note, width - pad * 2, fs - 1, measure);
+  if (text !== spec.note) ctx.warn("labels-truncated", "The note was shortened to fit the width.");
+  marks.push({ kind: "text", key: "note", role: "note", x: pad, y: height - pad + 2, text, anchor: "start", baseline: "bottom", size: fs - 1, fill: theme.mutedText });
+}
+
 // src/chart/layout-cartesian.ts
 var MAX_CHART_DATA_LABELS = 200;
 var MAX_CHART_LINE_POINTS = 2e3;
@@ -1137,6 +1302,7 @@ function layoutCartesian(ctx, area, visible) {
       else s.values.forEach((v) => v !== null && see(v));
       errors.get(s.id)?.forEach((e) => e && (see(e.lo), see(e.hi)));
     }
+    for (const v of referenceValues(spec, secondary ? "y2" : "y")) see(v);
     if (log) {
       const skipped = group.reduce((t, s) => t + s.values.filter((v) => v !== null && Number.isFinite(v) && v <= 0).length, 0);
       if (skipped) ctx.warn("values-skipped", `${skipped} value${skipped === 1 ? "" : "s"} of 0 or less cannot be drawn on the logarithmic ${secondary ? "secondary " : ""}value axis and ${skipped === 1 ? "was" : "were"} skipped.`);
@@ -1163,6 +1329,8 @@ function layoutCartesian(ctx, area, visible) {
   });
   const { plot, band, catCenter, map, catStart } = frame;
   const infoOf = (s) => onSecondary(s) && frame.value2 ? frame.value2 : frame.value;
+  const refAxes = { y: { info: frame.value, vertical: !horizontal }, ...frame.value2 ? { y2: { info: frame.value2, vertical: !horizontal } } : {} };
+  drawReferences(ctx, plot, refAxes, "bands");
   const bars = visible.filter((s) => types.get(s.id) === "bar");
   const barAxes = [...new Set(bars.map((s) => onSecondary(s)))];
   const slots = stacked ? barAxes.length : bars.length;
@@ -1327,6 +1495,7 @@ function layoutCartesian(ctx, area, visible) {
       drawTrendlines(ctx, plot, s, color, points, toPx, trendLabels, !!info.logBase);
     }
   }
+  drawReferences(ctx, plot, refAxes, "lines");
   marks.push(...errorMarks, ...labelMarks);
   drawTrendLabels(ctx, plot, trendLabels);
   if (hiddenLabels) ctx.warn("data-labels-hidden", `${hiddenLabels} data label${hiddenLabels === 1 ? "" : "s"} did not fit and ${hiddenLabels === 1 ? "is" : "are"} hidden.`);
@@ -1389,6 +1558,8 @@ function layoutXy(ctx, area, visible) {
       seeX(Math.max(...pts.map((p) => p.x)) + (t.forward ?? 0));
     }
   }
+  for (const v of referenceValues(spec, "y")) seeY(v);
+  for (const v of referenceValues(spec, "x")) seeX(v);
   if (!Number.isFinite(xlo)) [xlo, xhi] = xLog ? [1, 10] : [0, 1];
   if (!Number.isFinite(ylo)) [ylo, yhi] = yLog ? [1, 10] : [0, 1];
   const titleBand = fs * 1.3 + 6;
@@ -1430,6 +1601,8 @@ function layoutXy(ctx, area, visible) {
     if (!ctx.isSelected({ kind: "axis", axis })) continue;
     ctx.outline(`axis-${axis}-selection`, axis === "y" ? { x: area.x, y: plot.y - fs / 2, width: left - 2, height: plot.height + fs } : { x: plot.x - 4, y: plot.y + plot.height + 2, width: plot.width + 8, height: area.y + area.height - plot.y - plot.height - 2 });
   }
+  const refAxes = { y: { info: yInfo, vertical: true }, x: { info: xInfo, vertical: false } };
+  drawReferences(ctx, plot, refAxes, "bands");
   const labelMarks = [];
   const errorMarks = [];
   const trendLabels = [];
@@ -1488,6 +1661,7 @@ function layoutXy(ctx, area, visible) {
     }
     if (s.trendlines?.length) drawTrendlines(ctx, plot, s, color, pts.map((p) => [p.x, p.y]), (x, y) => [xRaw(x), yRaw(y)], trendLabels, xLog || yLog);
   }
+  drawReferences(ctx, plot, refAxes, "lines");
   marks.push(...errorMarks, ...labelMarks);
   drawTrendLabels(ctx, plot, trendLabels);
   return {
@@ -1843,15 +2017,348 @@ function layoutTreemap(ctx, area, series) {
   if (unlabelled) ctx.warn("data-labels-hidden", `${unlabelled} treemap cell${unlabelled === 1 ? " is" : "s are"} too small for a label.`);
   return { plot: area };
 }
+function dodge(ys, gap, top, bottom) {
+  const out = [...ys];
+  for (let k = 1; k < out.length; k++) out[k] = Math.max(out[k], out[k - 1] + gap);
+  const over = out.length ? out[out.length - 1] - bottom : 0;
+  if (over > 0) for (let k = out.length - 1; k >= 0; k--) out[k] = Math.max(top, Math.min(out[k] - over, k < out.length - 1 ? out[k + 1] - gap : Infinity));
+  return out;
+}
+function layoutSlope(ctx, area, visible) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const [a, b] = visible;
+  if (visible.length > 2) ctx.warn("values-skipped", `A slope chart joins two series; ${visible.length - 2} more ${visible.length === 3 ? "is" : "are"} not drawn.`);
+  const at = (s, i) => {
+    const v = s.values[i];
+    return v !== null && Number.isFinite(v) ? v : null;
+  };
+  const all = spec.categories.flatMap((_, i) => [at(a, i), at(b, i)]).filter((v) => v !== null);
+  const lo = Math.min(...all);
+  const hi = Math.max(...all);
+  const labelsOn = a.dataLabels ?? b.dataLabels ?? spec.dataLabels;
+  const fmtA = (v) => formatChartNumber(v, a.format ?? spec.yAxis.format);
+  const fmtB = (v) => formatChartNumber(v, b.format ?? spec.yAxis.format);
+  const leftText = (i) => {
+    const v = at(a, i);
+    return labelsOn && v !== null ? `${spec.categories[i]}  ${fmtA(v)}` : spec.categories[i];
+  };
+  const rightText = (i) => {
+    const v = at(b, i);
+    return labelsOn && v !== null ? `${fmtB(v)}  ${spec.categories[i]}` : spec.categories[i];
+  };
+  const maxW = area.width * 0.3;
+  const leftW = Math.min(maxW, Math.max(0, ...spec.categories.map((_, i) => measure(leftText(i), fs))));
+  const rightW = Math.min(maxW, Math.max(0, ...spec.categories.map((_, i) => measure(rightText(i), fs))));
+  const headerH = fs * 1.8;
+  const plot = { x: area.x + leftW + 10, y: area.y + headerH + fs / 2, width: Math.max(1, area.width - leftW - rightW - 20), height: Math.max(1, area.height - headerH - fs) };
+  const scale = axisScale(lo, hi, plot.height, spec.yAxis, ctx.options.valueDomain, true);
+  const yOf = (v) => linearMap(Math.min(scale.max, Math.max(scale.min, v)), [scale.min, scale.max], [plot.y + plot.height, plot.y]);
+  const xL = plot.x;
+  const xR = plot.x + plot.width;
+  for (const [s, x, anchor] of [[a, xL, "end"], [b, xR, "start"]]) {
+    const target = { kind: "series", seriesId: s.id };
+    const selected = ctx.seriesSelected(s.id);
+    marks.push({ kind: "line", key: `axis-slope-${s.id}`, role: "axis", x1: x, y1: plot.y, x2: x, y2: plot.y + plot.height, stroke: theme.axis, strokeWidth: 1, target });
+    marks.push({ kind: "text", key: `axis-title-${s.id}`, role: "axis-title", x, y: area.y, text: truncate(s.name, maxW + plot.width / 2, fs + 1, measure), anchor: anchor === "end" ? "end" : "start", baseline: "top", size: fs + 1, weight: 600, fill: selected ? theme.selection : theme.text, target, selected });
+  }
+  const leftLabels = [];
+  const rightLabels = [];
+  spec.categories.forEach((_, i) => {
+    const va = at(a, i);
+    const vb = at(b, i);
+    const color = sliceColor(ctx, a, i);
+    const catTarget = { kind: "category", index: i };
+    const catSelected = ctx.isSelected(catTarget);
+    if (va !== null && vb !== null)
+      marks.push({ kind: "line", key: `line-slope-${i}`, role: "line", x1: xL, y1: yOf(va), x2: xR, y2: yOf(vb), stroke: color, strokeWidth: catSelected ? 3.5 : 2, target: catTarget, selected: catSelected });
+    for (const [s, v, x, labels] of [[a, va, xL, leftLabels], [b, vb, xR, rightLabels]]) {
+      if (v === null) continue;
+      const target = { kind: "point", seriesId: s.id, index: i };
+      const selected = ctx.isSelected(target);
+      marks.push({ kind: "circle", key: `point-${s.id}-${i}`, role: "point", cx: x, cy: yOf(v), r: 4, fill: color, stroke: theme.surface, strokeWidth: 1.5, target, selected: selected || catSelected || ctx.seriesSelected(s.id) });
+      if (selected) marks.push({ kind: "circle", key: `point-${s.id}-${i}-selection`, role: "selection", cx: x, cy: yOf(v), r: 7.5, fill: "none", stroke: theme.selection, strokeWidth: 1.5 });
+      labels.push({ i, y: yOf(v) });
+    }
+  });
+  let moved = 0;
+  for (const [labels, x, anchor, text, width] of [[leftLabels, xL - 8, "end", leftText, leftW], [rightLabels, xR + 8, "start", rightText, rightW]]) {
+    labels.sort((p, q) => p.y - q.y);
+    const ys = dodge(labels.map((l) => l.y), fs * 1.15, plot.y - fs / 2, plot.y + plot.height + fs / 2);
+    labels.forEach((l, k) => {
+      if (Math.abs(ys[k] - l.y) > 0.5) moved++;
+      const target = { kind: "category", index: l.i };
+      const selected = ctx.isSelected(target);
+      marks.push({ kind: "text", key: `label-slope-${anchor === "end" ? "left" : "right"}-${l.i}`, role: "data-label", x, y: ys[k], text: truncate(text(l.i), width, fs, measure), anchor, baseline: "middle", size: fs, fill: selected ? theme.selection : theme.text, weight: selected ? 600 : void 0, target, selected });
+    });
+  }
+  if (moved) ctx.warn("labels-truncated", `${moved} slope label${moved === 1 ? " was" : "s were"} moved off its point so the labels do not overlap.`);
+  return { plot, valueScale: { axis: "y", domain: [scale.min, scale.max], range: [plot.y + plot.height, plot.y], ticks: scale.ticks } };
+}
+function layoutLikert(ctx, area, visible) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const n = visible.length;
+  const side = Math.floor(n / 2);
+  const neutral = n % 2 === 1 ? side : -1;
+  const separate = neutral >= 0 && spec.likertNeutral === "separate";
+  if (spec.likertNeutral === "separate" && neutral < 0) ctx.warn("type-fallback", "A separate neutral column needs an odd number of answers; the middle answer is not set apart.");
+  const shares = spec.categories.map((_, i) => {
+    const raw = visible.map((s) => {
+      const v = s.values[i];
+      return v !== null && Number.isFinite(v) ? Math.max(0, v) : 0;
+    });
+    const total = raw.reduce((t, v) => t + v, 0);
+    return raw.map((v) => total ? v / total : 0);
+  });
+  const sum = (p, from, to) => p.slice(from, to).reduce((t, v) => t + v, 0);
+  const negOf = (p) => sum(p, 0, side) + (neutral >= 0 && !separate ? p[neutral] / 2 : 0);
+  const posOf = (p) => sum(p, n - side, n) + (neutral >= 0 && !separate ? p[neutral] / 2 : 0);
+  const rows = spec.categories.map((_, i) => i);
+  if (spec.likertSort === "positive") rows.sort((p, q) => sum(shares[q], n - side, n) - sum(shares[p], n - side, n));
+  else if (spec.likertSort === "negative") rows.sort((p, q) => sum(shares[q], 0, side) - sum(shares[p], 0, side));
+  const extent = Math.max(0.01, ...shares.map((p) => Math.max(negOf(p), posOf(p))));
+  const labelW = spec.xAxis.show ? Math.min(area.width * 0.35, Math.max(0, ...spec.categories.map((c) => measure(c, fs)))) + 10 : 4;
+  const neutralW = separate ? Math.max(40, area.width * 0.18) : 0;
+  const axisH = spec.yAxis.show ? fs * 1.6 : 2;
+  const headH = separate ? fs * 1.5 : 0;
+  const plot = { x: area.x + labelW, y: area.y + headH, width: Math.max(1, area.width - labelW - (separate ? neutralW + 14 : 0)), height: Math.max(1, area.height - axisH - headH) };
+  const half = axisScale(0, extent, plot.width / 2, { ...spec.yAxis, min: 0, max: null, scale: void 0, reverse: void 0 });
+  const m = half.max;
+  const xOf = (v) => plot.x + (v + m) / (2 * m) * plot.width;
+  const percent = { style: "percent", decimals: spec.yAxis.format.decimals };
+  const ticks = [...half.ticks.slice(1).map((t) => -t).reverse(), ...half.ticks];
+  const axisTarget = { kind: "axis", axis: "y" };
+  ticks.forEach((t, k) => {
+    const x = xOf(t);
+    if (spec.yAxis.gridlines && t !== 0) marks.push({ kind: "line", key: `grid-y-${k}`, role: "grid", x1: x, y1: plot.y, x2: x, 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, y: plot.y + plot.height + 6, text: formatChartNumber(Math.abs(t), percent, percent.decimals ?? stepDecimals(half.step * 100)), anchor: "middle", baseline: "top", size: fs, fill: theme.mutedText, target: axisTarget });
+  });
+  const band = plot.height / Math.max(1, rows.length);
+  const barH = Math.max(2, band * (1 - Math.min(0.9, spec.gapWidth)));
+  const neutralMax = separate ? Math.max(0.01, ...shares.map((p) => p[neutral])) : 1;
+  const neutralX = plot.x + plot.width + 14;
+  if (separate) {
+    const s = visible[neutral];
+    marks.push({ kind: "text", key: "likert-neutral-title", role: "axis-title", x: neutralX, y: area.y, text: truncate(s.name, neutralW, fs, measure), anchor: "start", baseline: "top", size: fs, weight: 600, fill: theme.mutedText, target: { kind: "series", seriesId: s.id } });
+  }
+  let hidden = 0;
+  rows.forEach((i, r) => {
+    const p = shares[i];
+    const y = plot.y + r * band + (band - barH) / 2;
+    const catTarget = { kind: "category", index: i };
+    const catSelected = ctx.isSelected(catTarget);
+    if (spec.xAxis.show)
+      marks.push({ kind: "text", key: `tick-x-${i}`, role: "tick-label", x: plot.x - 8, y: y + barH / 2, text: truncate(spec.categories[i], labelW - 10, fs, measure), anchor: "end", baseline: "middle", size: fs, fill: catSelected ? theme.selection : theme.mutedText, target: catTarget, selected: catSelected });
+    const segment = (j, x0, x1, key) => {
+      const s = visible[j];
+      if (x1 - x0 <= 0) return;
+      const target = { kind: "point", seriesId: s.id, index: i };
+      const selected = ctx.isSelected(target);
+      const fill = s.pointColors?.[i] || chartSeriesColor(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 });
+      if (!(s.dataLabels ?? spec.dataLabels)) return;
+      const text = formatChartNumber(p[j], percent, percent.decimals ?? 0);
+      if (measure(text, fs - 1) + 6 > rect.width || barH < fs) {
+        hidden++;
+        return;
+      }
+      marks.push({ kind: "text", key: `label-${s.id}-${i}`, role: "data-label", x: rect.x + rect.width / 2, y: y + barH / 2, text, anchor: "middle", baseline: "middle", size: fs - 1, fill: contrastingTextColor(fill), target });
+    };
+    let cursor = -negOf(p);
+    visible.forEach((s, j) => {
+      if (separate && j === neutral) return;
+      segment(j, xOf(cursor), xOf(cursor + p[j]), `bar-${s.id}-${i}`);
+      cursor += p[j];
+    });
+    if (separate) segment(neutral, neutralX, neutralX + p[neutral] / neutralMax * neutralW, `bar-${visible[neutral].id}-${i}`);
+  });
+  marks.push({ kind: "line", key: "axis-likert-centre", role: "axis", x1: xOf(0), y1: plot.y, x2: xOf(0), y2: plot.y + plot.height, stroke: theme.axis, strokeWidth: 1.25, target: axisTarget });
+  if (hidden) ctx.warn("data-labels-hidden", `${hidden} data label${hidden === 1 ? "" : "s"} did not fit and ${hidden === 1 ? "is" : "are"} hidden.`);
+  return { plot, percent: true };
+}
+function layoutParliament(ctx, area, series) {
+  const { spec, theme, marks, fs } = ctx;
+  const seats = spec.categories.map((_, i) => {
+    const v = series.values[i];
+    return v !== null && Number.isFinite(v) ? Math.max(0, Math.round(v)) : 0;
+  });
+  if (series.values.some((v) => v !== null && Number.isFinite(v) && (v < 0 || !Number.isInteger(v)))) ctx.warn("values-skipped", "Seats are whole numbers of 0 or more; other values were rounded.");
+  const total = seats.reduce((t, v) => t + v, 0);
+  const empty = (text) => {
+    marks.push({ kind: "text", key: "empty", role: "empty", x: area.x + area.width / 2, y: area.y + area.height / 2, text, anchor: "middle", baseline: "middle", size: fs + 1, fill: theme.mutedText });
+    return { plot: area };
+  };
+  if (!total) return empty("No seats");
+  if (total > 2e3) return empty("Too many seats to draw (more than 2,000)");
+  const arc = spec.parliamentArc * Math.PI / 180;
+  const start = Math.PI / 2 + arc / 2;
+  const angles = [start, start - arc, ...[0, 0.5, 1, 1.5, 2, 2.5].map((k) => k * Math.PI).filter((t) => t < start && t > start - arc)];
+  const xs = [0, ...angles.map(Math.cos)];
+  const ys = [0, ...angles.map(Math.sin)];
+  const pad = fs * 1.2;
+  const radius = Math.max(8, Math.min((area.width - pad * 2) / (Math.max(...xs) - Math.min(...xs)), (area.height - pad * 2) / (Math.max(...ys) - Math.min(...ys))));
+  const cx = area.x + area.width / 2 - (Math.max(...xs) + Math.min(...xs)) / 2 * radius;
+  const cy = area.y + area.height / 2 + (Math.max(...ys) + Math.min(...ys)) / 2 * radius;
+  const inner = radius * 0.4;
+  let rows = 1;
+  for (; rows < 60; rows++) {
+    const gap2 = (radius - inner) / rows;
+    const length = Array.from({ length: rows }, (_, k) => (inner + gap2 * (k + 0.5)) * arc).reduce((t, l) => t + l, 0);
+    if (length / total >= gap2 * 0.9) break;
+  }
+  const gap = (radius - inner) / rows;
+  const radii = Array.from({ length: rows }, (_, k) => inner + gap * (k + 0.5));
+  const lengths = radii.map((r) => r * arc);
+  const all = lengths.reduce((t, l) => t + l, 0);
+  const exact = lengths.map((l) => l / all * total);
+  const counts = exact.map(Math.floor);
+  exact.map((e, k) => ({ k, rest: e - counts[k] })).sort((p, q) => q.rest - p.rest).slice(0, total - counts.reduce((t, c) => t + c, 0)).forEach(({ k }) => counts[k]++);
+  const places = [];
+  radii.forEach((r, k) => {
+    for (let j = 0; j < counts[k]; j++) places.push({ angle: counts[k] === 1 ? Math.PI / 2 : start - arc * (j + 0.5) / counts[k], r });
+  });
+  places.sort((p, q) => q.angle - p.angle || p.r - q.r);
+  const dot = Math.max(1, Math.min(gap, all / total) * 0.42);
+  let next = 0;
+  seats.forEach((count, i) => {
+    const target = { kind: "point", seriesId: series.id, index: i };
+    const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "category", index: i }) || ctx.seriesSelected(series.id);
+    const fill = sliceColor(ctx, series, i);
+    for (let k = 0; k < count; k++, next++) {
+      const { angle, r } = places[next];
+      marks.push({ kind: "circle", key: `seat-${i}-${k}`, role: "point", cx: cx + r * Math.cos(angle), cy: cy - r * Math.sin(angle), r: dot, fill, ...selected ? { stroke: theme.selection, strokeWidth: 1.5 } : {}, target, selected });
+    }
+  });
+  const majority = spec.parliamentMajority ?? Math.floor(total / 2) + 1;
+  if (majority <= total) {
+    const angle = start - arc * (majority / total);
+    const r0 = inner - gap * 0.3;
+    const r1 = radius + gap * 0.3;
+    marks.push({ kind: "line", key: "majority-line", role: "reference-line", x1: cx + r0 * Math.cos(angle), y1: cy - r0 * Math.sin(angle), x2: cx + r1 * Math.cos(angle), y2: cy - r1 * Math.sin(angle), stroke: theme.text, strokeWidth: 1.25, dash: "4 3", opacity: 0.8 });
+    const lr = r1 + fs * 0.4;
+    const lx = cx + lr * Math.cos(angle);
+    const ly = cy - lr * Math.sin(angle);
+    marks.push({ kind: "text", key: "majority-label", role: "reference-label", x: lx, y: ly, text: `Majority ${majority}`, anchor: Math.abs(Math.cos(angle)) < 0.25 ? "middle" : Math.cos(angle) > 0 ? "start" : "end", baseline: Math.sin(angle) >= 0 ? "bottom" : "top", size: fs - 1, weight: 500, fill: theme.text });
+  } else ctx.warn("values-skipped", `The majority of ${majority} is more than the ${total} seats; the majority line is not drawn.`);
+  if (inner > fs * 2.2) {
+    const size = Math.min(theme.titleSize + 8, inner * 0.6);
+    const ty = spec.parliamentArc <= 200 ? cy - size * 0.2 : cy;
+    const totalTarget = { kind: "series", seriesId: series.id };
+    marks.push({ kind: "text", key: "parliament-total", role: "data-label", x: cx, y: ty, text: formatChartNumber(total, {}), anchor: "middle", baseline: spec.parliamentArc <= 200 ? "bottom" : "middle", size, weight: 700, fill: theme.text, target: totalTarget });
+    marks.push({ kind: "text", key: "parliament-caption", role: "data-label", x: cx, y: spec.parliamentArc <= 200 ? ty + 2 : ty + size * 0.6, text: spec.parliamentLabel || "seats", anchor: "middle", baseline: "top", size: fs, fill: theme.mutedText, target: totalTarget });
+  }
+  return { plot: { x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 } };
+}
+function treeColor(ctx, series, node, group, base, shade) {
+  if (node.color) return node.color;
+  if (base === null) return series?.pointColors?.[group] || chartSliceColor(ctx.spec, group);
+  return shadeChartColor(base, shade);
+}
+function layoutTreemapTree(ctx, area, series) {
+  const { spec, marks, theme, fs, measure } = ctx;
+  const format = series?.format ?? spec.yAxis.format;
+  const labelsOn = series?.dataLabels ?? true;
+  let unlabelled = 0;
+  const draw = (nodes, rect, key, group, base) => {
+    const rects = chartSquarify(nodes.map(chartTreeTotal), rect);
+    nodes.forEach((node, k) => {
+      const r = rects[k];
+      if (r.width <= 0.5 || r.height <= 0.5) return;
+      const g = group ?? k;
+      const target = { kind: "category", index: g };
+      const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "point", seriesId: series?.id ?? "", index: g });
+      const id = `${key}-${k}`;
+      const fill = treeColor(ctx, series, node, g, base, base === null ? 0 : (k % 4 - 1.5) * 0.14);
+      if (node.children) {
+        const header = r.height > fs * 3.2 && r.width > fs * 3 ? fs * 1.5 : 0;
+        marks.push({ kind: "rect", key: `group-${id}`, role: "cell", ...r, fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2.5 : 2, target, selected });
+        if (header) marks.push({ kind: "text", key: `label-group-${id}`, role: "data-label", x: r.x + 5, y: r.y + 4, text: truncate(node.name, r.width - 10, fs, measure), anchor: "start", baseline: "top", size: fs, weight: 700, fill: contrastingTextColor(fill), target });
+        const inner = { x: r.x + 2, y: r.y + (header || 2), width: Math.max(0, r.width - 4), height: Math.max(0, r.height - (header || 2) - 2) };
+        draw(node.children, inner, id, g, base ?? fill);
+        return;
+      }
+      marks.push({ kind: "rect", key: `cell-${id}`, role: "cell", ...r, fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2.5 : 1, target, selected });
+      if (!labelsOn) return;
+      const room = r.width - 8;
+      if (room < fs * 2 || r.height < fs * 1.5) {
+        unlabelled++;
+        return;
+      }
+      const color = contrastingTextColor(fill);
+      marks.push({ kind: "text", key: `label-cell-${id}`, role: "data-label", x: r.x + 4, y: r.y + 4, text: truncate(node.name, room, fs, measure), anchor: "start", baseline: "top", size: fs, weight: 600, fill: color, target });
+      if (r.height >= fs * 3) marks.push({ kind: "text", key: `label-value-${id}`, role: "data-label", x: r.x + 4, y: r.y + 6 + fs * 1.2, text: truncate(formatChartNumber(node.value ?? 0, format), room, fs - 1, measure), anchor: "start", baseline: "top", size: fs - 1, fill: color, target });
+    });
+  };
+  draw(spec.tree, area, "n", null, null);
+  if (unlabelled) ctx.warn("data-labels-hidden", `${unlabelled} treemap cell${unlabelled === 1 ? " is" : "s are"} too small for a label.`);
+  return { plot: area };
+}
+function layoutSunburst(ctx, area, series) {
+  const { spec, marks, theme, fs, measure } = ctx;
+  const tree = spec.tree.length ? spec.tree : chartTreeFromSeries(spec.categories, series?.values ?? []);
+  const indexOf = new Map(spec.categories.map((c, i) => [c.trim() || `${i + 1}`, i]));
+  const depth = chartTreeDepth(tree);
+  const total = tree.reduce((t, n) => t + chartTreeTotal(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);
+  const plot = { x: cx - outer, y: cy - outer, width: outer * 2, height: outer * 2 };
+  if (!(total > 0)) {
+    marks.push({ kind: "text", key: "empty", role: "empty", x: cx, y: cy, text: "No positive values", anchor: "middle", baseline: "middle", size: fs + 1, fill: theme.mutedText });
+    return { plot };
+  }
+  const hole = outer * 0.28;
+  const ring = (outer - hole) / Math.max(1, depth);
+  const format = series?.format ?? spec.yAxis.format;
+  let unlabelled = 0;
+  const walk = (nodes, start, sweep, level, key, group, base) => {
+    const sum = nodes.reduce((t, n) => t + chartTreeTotal(n), 0);
+    let at = start;
+    nodes.forEach((node, k) => {
+      const value = chartTreeTotal(node);
+      if (!(value > 0) || !sum) return;
+      const a0 = at;
+      const a1 = at + sweep * value / sum;
+      at = a1;
+      const g = group ?? indexOf.get(node.name) ?? k;
+      const target = { kind: "category", index: g };
+      const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "point", seriesId: series?.id ?? "", index: g });
+      const fill = treeColor(ctx, series, node, g, base, 0.22 * level);
+      const id = `${key}-${k}`;
+      const r0 = hole + ring * level;
+      const r1 = r0 + ring;
+      marks.push({ kind: "path", key: `slice-${id}`, role: "slice", d: arcPath(cx, cy, r1, r0, a0, a1), fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2 : 1, target, selected });
+      const mid = (a0 + a1) / 2;
+      const rm = (r0 + r1) / 2;
+      const text = node.name;
+      const width = measure(text, fs - 1);
+      if (ring >= fs * 1.3 && 2 * rm * Math.sin(Math.min(Math.PI / 2, (a1 - a0) / 2)) >= width + 6) marks.push({ kind: "text", key: `label-slice-${id}`, role: "data-label", x: cx + rm * Math.sin(mid), y: cy - rm * Math.cos(mid), text, anchor: "middle", baseline: "middle", size: fs - 1, weight: level === 0 ? 600 : void 0, fill: contrastingTextColor(fill), target });
+      else unlabelled++;
+      if (node.children) walk(node.children, a0, a1 - a0, level + 1, id, g, base ?? fill);
+    });
+  };
+  walk(tree, 0, Math.PI * 2, 0, "n", null, null);
+  if (unlabelled) ctx.warn("data-labels-hidden", `${unlabelled} sunburst arc${unlabelled === 1 ? " is" : "s are"} too narrow for a label.`);
+  if (hole > fs * 2) {
+    const size = Math.min(theme.titleSize + 4, hole * 0.45);
+    const centre = series ? { kind: "series", seriesId: series.id } : void 0;
+    const caption = spec.sunburstLabel;
+    marks.push({ kind: "text", key: "sunburst-total", role: "data-label", x: cx, y: caption ? cy - 2 : cy, text: formatChartNumber(total, format), anchor: "middle", baseline: caption ? "bottom" : "middle", size, weight: 700, fill: theme.text, ...centre ? { target: centre } : {} });
+    if (caption) marks.push({ kind: "text", key: "sunburst-caption", role: "data-label", x: cx, y: cy + 2, text: truncate(caption, hole * 1.8, fs - 1, measure), anchor: "middle", baseline: "top", size: fs - 1, fill: theme.mutedText, ...centre ? { target: centre } : {} });
+  }
+  return { plot };
+}
 
 // src/chart/layout.ts
 function legendItems(spec, ctx) {
   const family = chartFamily(spec);
-  if (spec.type === "funnel") return [];
-  if (chartColorsByCategory(spec.type)) {
+  if (spec.type === "funnel" || spec.type === "slope") return [];
+  if (chartSpecColorsByCategory(spec)) {
     const first = spec.series.find((s) => !s.hidden);
+    const seats = (i) => Math.max(0, Math.round(first?.values[i] ?? 0));
     return spec.categories.map((c, i) => ({
-      label: c,
+      label: spec.type === "parliament" ? `${c} ${seats(i)}` : c,
       color: first?.pointColors?.[i] || chartSliceColor(spec, i),
       target: { kind: "category", index: i },
       faded: false,
@@ -1931,12 +2438,19 @@ function layoutChart(spec, options) {
   const family = chartFamily(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 };
+  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 || spec.series.length > 1 || spec.series.some((s) => s.hidden) || hasTrend);
+  const showLegend = spec.legend.show && items.length > 0 && (!seriesLegend || chartVariesColors(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(chartFamily(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.`);
+    }
+    applyHighlight(ctx);
+    drawNote(ctx, pad);
     if (options.readout) addReadout(ctx, options.readout, result.plot);
     const kept = finalizeMarks(marks, width, height);
     if (kept.length < marks.length) ctx.warn("values-skipped", `${marks.length - kept.length} mark${marks.length - kept.length === 1 ? " was" : "s were"} left out: their values are not finite numbers.`);
@@ -1978,7 +2492,19 @@ function layoutChart(spec, options) {
     case "funnel":
       return finish(layoutFunnel(ctx, area, visible[0]));
     case "treemap":
-      return finish(layoutTreemap(ctx, area, visible[0]));
+      return finish(spec.tree.length ? layoutTreemapTree(ctx, area, spec.series[0]) : layoutTreemap(ctx, area, visible[0]));
+    case "sunburst":
+      return finish(layoutSunburst(ctx, area, spec.tree.length ? spec.series[0] : visible[0]));
+    case "slope":
+      if (visible.length < 2) {
+        ctx.warn("type-fallback", "A slope chart needs two series (before and after); it is drawn as a line chart until then.");
+        return finish(layoutCartesian(ctx, area, visible));
+      }
+      return finish(layoutSlope(ctx, area, visible));
+    case "likert":
+      return finish(layoutLikert(ctx, area, visible));
+    case "parliament":
+      return finish(layoutParliament(ctx, area, visible[0]));
     case "xy":
       return finish(layoutXy(ctx, area, visible));
     default:
@@ -2157,6 +2683,7 @@ export {
   r2,
   chartHistogram,
   chartQuantile,
+  suggestChartReferences,
   chartBoxStats,
   chartSquarify,
   decimateChartPoints,