@openpresentation/opf-render 0.11.2 → 0.11.3

package/README.md

@@ -2,7 +2,7 @@
 
 **Aptos previews with Intos.** The Office pack includes Intos, Intos Display, Intos Narrow and Intos Serif (16 faces, about 12 MB, vendored under `fonts/intos/`, SIL OFL 1.1, pinned to upstream commit fef9315c14da9e4b23b4c3cac8e718998d4e4736 and per-file SHA-256, unmodified from the upstream files). They are the metric-compatible previews for Aptos, Aptos Display, Aptos Narrow and Aptos Serif, the default `aptos` font scheme: 0.000% mean and maximum width difference against Aptos 2.01 in all four styles, with equal vertical metrics. The letter shapes are Intos's own, not Aptos's. The exported PPTX still names Aptos; no Aptos file is bundled or embedded. A registry built without these faces (the base pack) has no Aptos substitute: visual policy falls back to Roboto or Carlito. Like the open families, Intos is `embed: "used"`: it is not in `registry.embeddedFonts` (the 33 eager npm faces), `prepareNodeFonts().options.embeddedFonts` supplies it, and an SVG embeds only the Intos faces its text draws. `registry.lazyFonts` lists the 51 vendored faces (35 open, 16 Intos) with package-relative file and sha256, and `loadBrowserFontRegistry(faces, {lazyFontsBaseUrl})` loads them on demand: `await registry.ensureLazyFonts(presentation)` fetches and verifies only the files the document's font families resolve to (the default Aptos scheme: Intos and Intos Display, 8 files, 5.9 MB), then adds them to the document and the registry together so measurement and painting never disagree. Hosts copy the vendored directories next to the page.
 
-Version 0.11.2 makes `scripts: 'auto'` load the script faces a font scheme names and adds `details.loadedFaceHasGlyph` to `missing-glyph` (no export change). Version 0.11.1 adds the open replacement font families the policy routes to and complete Red Hat styles (no API change). Version 0.11.0 requires `@openpresentation/opf` ^0.11.2 (cover centering, Intos Aptos previews, lazy font loading, automatic script fonts and glyph fallback); use it with PPTX 0.11.0 and editor 0.10.0 so preview and export resolve the same core. Version 0.10.0 required `@openpresentation/opf` ^0.11.1 (font policy table, script fonts and right-to-left paragraphs, socials, slide-image treatments, formatted slide-number and date furniture with the host `date` option, per-item alignment). See the changelog for the intentional preview-output changes.
+Version 0.11.3 previews the classic chart types natively, draws deprecated chart ids as their replacement and scales value axes like Office (no API change; the preview of chart slides changes). Version 0.11.2 makes `scripts: 'auto'` load the script faces a font scheme names and adds `details.loadedFaceHasGlyph` to `missing-glyph` (no export change). Version 0.11.1 adds the open replacement font families the policy routes to and complete Red Hat styles (no API change). Version 0.11.0 requires `@openpresentation/opf` ^0.11.2 (cover centering, Intos Aptos previews, lazy font loading, automatic script fonts and glyph fallback); use it with PPTX 0.11.0 and editor 0.10.0 so preview and export resolve the same core. Version 0.10.0 required `@openpresentation/opf` ^0.11.1 (font policy table, script fonts and right-to-left paragraphs, socials, slide-image treatments, formatted slide-number and date furniture with the host `date` option, per-item alignment). See the changelog for the intentional preview-output changes.
 
 Version 0.9.0 required `@openpresentation/opf` ^0.11.0 and resolved content ColorRef / `variables` through core `resolveColorRef()`. Authored `#RRGGBB` paint stays authored. It retains the existing rendering APIs.
 
@@ -244,6 +244,8 @@ Dependency policy:
 
 Browser support boundary: `renderSvg`, `renderSvgDeck`, and `resolvePresentation` are browser-importable pure JavaScript APIs. `svgToPng` and `svgToPdf` are Node APIs in this package version because they depend on the Node build of resvg.
 
+Classic chart previews keep finite axis coordinates for subnormal values and values up to `Number.MAX_VALUE`, including mixed positive/negative ranges. At these limits, available numeric precision can merge adjacent axis ticks or prevent extra headroom. Authored values are unchanged. Stacked, percentage or pie/doughnut totals that overflow the finite numeric range are still unsupported: rendering throws a `RangeError` naming the chart path and asking the caller to rescale the values. It does not substitute an empty chart or silently discard the overflowing values.
+
 ## Development
 
 ```sh

package/dist/charts.js

@@ -0,0 +1,644 @@
+// Chart previews for the OPF chart type catalog (FF-22).
+//
+// The core catalog keeps one chart type per Office chart construct and
+// deprecates the rest with a replacement id (`deprecation.replacedBy`,
+// `mappings.openxml`). The tables below are carried here so the preview stays
+// synchronous and self-contained; test/chart-catalog.mjs checks them against
+// the installed core catalog. Kept ids render the construct PowerPoint shows
+// for the exported chart; deprecated ids render exactly like their replacement;
+// any other id returns null so the caller keeps its legacy single-series preview.
+import { chartColorForFill, resolveTextStyle, textColorForFill, textWidthMeasurer } from "@openpresentation/opf/composition";
+
+// Ordered series palette written by opf-pptx (`CHART_COLORS`), before the same
+// per-surface contrast adjustment (`chartColorForFill`).
+export const CHART_SERIES_COLORS = Object.freeze([
+  "#2874A6", "#1B4F72", "#5499C7", "#7BDBB2", "#3AC67A", "#24A89E",
+  "#F59E0B", "#EF4444", "#8B5CF6", "#14B8A6", "#0F172A", "#64748B"
+]);
+
+const bar = (dir, grouping) => ({ kind: "bar", dir, grouping });
+const line = (grouping, markers) => ({ kind: "line", grouping, markers });
+const area = (grouping) => ({ kind: "area", grouping });
+const radar = (style) => ({ kind: "radar", style, markers: style === "marker" });
+
+export const CHART_TYPES = Object.freeze({
+  column: bar("col", "clustered"),
+  "stacked-column-3x": bar("col", "stacked"),
+  "100pct-stacked-column-3x": bar("col", "percentStacked"),
+  bar: bar("bar", "clustered"),
+  "stacked-bar-3x": bar("bar", "stacked"),
+  "100pct-stacked-bar-3x": bar("bar", "percentStacked"),
+  line: line("standard", false),
+  "line-with-markers": line("standard", true),
+  "stacked-line-3x": line("stacked", false),
+  "stacked-line-with-markers-3x": line("stacked", true),
+  area: area("standard"),
+  "stacked-area-3x": area("stacked"),
+  "100pct-stacked-area-3x": area("percentStacked"),
+  pie: { kind: "pie" },
+  doughnut: { kind: "doughnut" },
+  scatter: { kind: "scatter" },
+  radar: radar("standard"),
+  "radar-with-markers": radar("marker"),
+  "filled-radar": radar("filled"),
+  treemap: { kind: "treemap" },
+  histogram: { kind: "histogram" },
+  pareto: { kind: "pareto" },
+  "box-and-whisker": { kind: "box" },
+  waterfall: { kind: "waterfall" },
+  funnel: { kind: "funnel" },
+  world: { kind: "map" }
+});
+
+const variants = (base, target) => Object.fromEntries([base, `${base}-2x`, `${base}-3x`].map((id) => [id, target]));
+const suffixes = (base, target) => Object.fromEntries(["", "-2x", "-3x", "-4x", "-5x", "-6x"].map((suffix) => [`${base}${suffix}`, target]));
+
+// Deprecated core ids -> kept replacement (core spec/catalogs/chart-types `deprecation.replacedBy`).
+export const DEPRECATED_CHART_TYPES = Object.freeze({
+  ...variants("100pct-bullet-bar", "100pct-stacked-bar-3x"),
+  "100pct-progress-bar": "100pct-stacked-bar-3x",
+  "100pct-stacked-bar-2x": "100pct-stacked-bar-3x",
+  ...variants("100pct-bullet-column", "100pct-stacked-column-3x"),
+  "100pct-stacked-column-2x": "100pct-stacked-column-3x",
+  "100pct-stacked-area-2x": "100pct-stacked-area-3x",
+  australia: "world",
+  canada: "world",
+  "united-kingdom": "world",
+  "united-states": "world",
+  "box-and-whisker-2x": "box-and-whisker",
+  "box-and-whisker-3x": "box-and-whisker",
+  ...variants("bullet-bar", "bar"),
+  "clustered-bar-2x": "bar",
+  ...variants("bullet-column", "column"),
+  "clustered-column": "column",
+  ...suffixes("dot-plot", "scatter"),
+  dumbbell: "scatter",
+  "line-2x": "line",
+  "line-3x": "line",
+  "line-with-high-low": "line",
+  ...suffixes("sparkline", "line"),
+  "line-with-high-low-and-markers": "line-with-markers",
+  "line-with-markers-2x": "line-with-markers",
+  "line-with-markers-3x": "line-with-markers",
+  "stacked-area-2x": "stacked-area-3x",
+  "stacked-bar-2x": "stacked-bar-3x",
+  "stacked-column-2x": "stacked-column-3x",
+  "stacked-line-2x": "stacked-line-3x",
+  "stacked-line-with-markers-2x": "stacked-line-with-markers-3x",
+  "treemap-2x": "treemap",
+  "treemap-3x": "treemap"
+});
+
+const ALIASES = Object.freeze({ donut: "doughnut" });
+
+/** Resolve a chart type id to its kept catalog id, or null for ids outside the catalog. */
+export function resolveChartType(type) {
+  const raw = String(type ?? "").trim().toLowerCase();
+  const id = ALIASES[raw] ?? DEPRECATED_CHART_TYPES[raw] ?? raw;
+  return Object.hasOwn(CHART_TYPES, id) ? id : null;
+}
+
+const RENDERERS = {
+  bar: renderCategoryChart,
+  line: renderCategoryChart,
+  area: renderCategoryChart,
+  pie: renderCircularChart,
+  doughnut: renderCircularChart,
+  scatter: renderScatterChart,
+  radar: renderRadarChart
+};
+
+/**
+ * Render a catalog chart. Returns null when the id is outside the catalog, has
+ * no preview renderer, or carries no inline category-major data, so the caller
+ * can keep its legacy output ("No chart data" for unresolved sources).
+ */
+export function renderCatalogChart(item, box, bound, options, svg) {
+  const id = resolveChartType(item.value?.type);
+  const spec = id && CHART_TYPES[id];
+  const render = spec && RENDERERS[spec.kind];
+  const data = item.value?.data;
+  const rows = Array.isArray(data?.rows) ? data.rows.map((row) => Array.isArray(row) ? row : [row]) : [];
+  const columns = Array.isArray(data?.columns) ? data.columns : [];
+  if (!render || !rows.length || columns.length < 2) return null;
+  const c = chartContext(item, box, bound, options, svg, rows, columns);
+  c.mark("rect", { x: box.x, y: box.y, width: box.width, height: box.height, fill: c.surface, stroke: bound.design.colors.border, "stroke-width": 1 }, item.path);
+  render(c, spec);
+  return svg.tag("g", { ...svg.traceAttrs(options, item.path), "data-opf-chart": options.trace ? id : undefined }, c.children.join("\n"));
+}
+
+function chartContext(item, box, bound, options, svg, rows, columns) {
+  const u = Math.min(bound.design.dimensions.width, bound.design.dimensions.height) / 720;
+  const composition = bound.composition ?? bound.geometry.composition ?? {};
+  const requested = 14, fontPx = Math.max(requested, composition.minFontSize ?? 16) * u;
+  const surface = bound.design.colors.surface;
+  const labelColor = textColorForFill(surface, bound.design.colors.text);
+  const style = resolveTextStyle({ fontFamily: bound.design.fonts.body, fontWeight: 400, italic: false, path: item.path }, options.textMeasurement);
+  const measure = textWidthMeasurer(style, options.textMeasurement);
+  const children = [];
+  const n = svg.stableNumber;
+  const numericAttrs = new Set(["x", "y", "width", "height", "cx", "cy", "r", "x1", "x2", "y1", "y2", "stroke-width"]);
+  const c = {
+    item, box, bound, options, svg, rows, columns, children, u, fontPx, surface, labelColor,
+    path: item.path,
+    pt: u * 4 / 3,
+    pad: 10 * u,
+    lineHeight: fontPx * 1.5,
+    colors: CHART_SERIES_COLORS.map((color) => chartColorForFill(surface, color)),
+    gridColor: bound.design.colors.border,
+    axisColor: "#888888",
+    number: chartNumber,
+    label: (value) => value === null || value === undefined ? "" : String(value),
+    width: (value) => measure(String(value), fontPx),
+    num: n,
+    mark(name, attrs, path) {
+      const out = {};
+      for (const [key, value] of Object.entries(attrs)) out[key] = numericAttrs.has(key) && typeof value === "number" ? n(value) : value;
+      children.push(svg.tag(name, { ...out, ...(path ? svg.traceAttrs(options, path) : {}) }));
+    },
+    text(value, rect, path, align = "center") {
+      if (!(rect.width > 0 && rect.height > 0)) return;
+      children.push(svg.renderTextBox(String(value), rect, bound, {
+        path, fontSize: requested, fontFamily: bound.design.fonts.body, fontWeight: 400,
+        fill: labelColor, options, align, verticalAlign: "middle"
+      }));
+    },
+    series(first = 1) {
+      return columns.slice(first).map((name, offset) => ({
+        name: c.label(name), column: first + offset, index: offset,
+        values: rows.map((row) => chartNumber(row[first + offset]))
+      }));
+    }
+  };
+  return c;
+}
+
+export function chartNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Shared axis and legend helpers
+
+/**
+ * Office-like automatic value axis: include zero unless every value sits in
+ * the top sixth of the range, add 5% headroom, then choose the smallest
+ * 1/2/5 x 10^k major unit that fits `maxIntervals`.
+ */
+export function niceScale(dataMin, dataMax, maxIntervals = 10, { percent = false } = {}) {
+  const limit = Number.isFinite(maxIntervals) ? Math.max(1, Math.floor(maxIntervals)) : 10;
+  if (percent) {
+    const min = dataMin < -1e-9 ? -1 : 0, max = dataMax > 1e-9 || min === 0 ? 1 : 0;
+    return scaleFrom(min, max, pickStep(min, max, limit, [0.1, 0.2, 0.25, 0.5, 1]));
+  }
+  if (!Number.isFinite(dataMin) || !Number.isFinite(dataMax)) { dataMin = 0; dataMax = 1; }
+  let lo = Math.min(dataMin, 0), hi = Math.max(dataMax, 0);
+  if (dataMin > 0 && dataMax - dataMin < dataMax / 6) lo = dataMin;
+  if (dataMax < 0 && dataMax - dataMin < -dataMin / 6) hi = dataMax;
+  if (hi === lo) {
+    if (hi === 0) hi = 1;
+    else if (hi > 0) lo = 0;
+    else hi = 0;
+  }
+  const span = hi - lo;
+  const top = hi > 0 ? hi + span / 20 : hi;
+  const bottom = lo < 0 ? lo - span / 20 : lo > 0 ? Math.max(0, lo - span / 20) : lo;
+  const raw = (top - bottom) / limit;
+  if (!(raw > 0) || !Number.isFinite(raw)) return normalizedScale(dataMin, dataMax, limit);
+  let exponent = Math.floor(Math.log10(raw)) - 1;
+  for (; exponent <= 308; exponent++) {
+    for (const mantissa of [1, 2, 5]) {
+      const step = mantissa * 10 ** exponent;
+      if (!(step > 0) || !Number.isFinite(step)) continue;
+      const min = Math.floor(bottom / step + 1e-9) * step, max = Math.ceil(top / step - 1e-9) * step;
+      if (Number.isFinite(min) && Number.isFinite(max) && Math.round((max - min) / step) <= limit) return scaleFrom(clean(min), clean(max), step);
+    }
+  }
+  return normalizedScale(dataMin, dataMax, limit);
+}
+
+// Work in representable units when headroom or a tick step exceeds Number's
+// range. Only axis bounds/ticks saturate at the representable endpoints; data
+// values keep their actual positions. Subnormal rounding may merge ticks.
+function normalizedScale(dataMin, dataMax, limit) {
+  const magnitude = Math.max(Math.abs(dataMin), Math.abs(dataMax));
+  const unit = 10 ** Math.floor(Math.log10(magnitude)) || Number.MIN_VALUE;
+  const normalized = niceScale(dataMin / unit, dataMax / unit, limit);
+  const restore = (value) => {
+    const scaled = value * unit;
+    return Number.isFinite(scaled) ? scaled : Math.sign(value) * Number.MAX_VALUE;
+  };
+  const min = Math.min(restore(normalized.min), dataMin);
+  const max = Math.max(restore(normalized.max), dataMax);
+  const ticks = [...new Set([min, ...normalized.ticks.map(restore), max])].sort((a, b) => a - b);
+  return { min, max, step: restore(normalized.step) || Number.MIN_VALUE, ticks };
+}
+
+// Keep ordinary arithmetic unchanged. A range spanning both finite endpoints
+// can overflow even though every value/bound is finite; divide before subtracting.
+function axisFraction(value, scale, reverse = false) {
+  const range = scale.max - scale.min;
+  const distance = reverse ? scale.max - value : value - scale.min;
+  if (Number.isFinite(range) && Number.isFinite(distance)) return distance / (range || 1);
+  const unit = Math.max(Math.abs(scale.min), Math.abs(scale.max));
+  const min = scale.min / unit, max = scale.max / unit, position = value / unit;
+  return (reverse ? max - position : position - min) / (max - min);
+}
+
+function pickStep(min, max, limit, steps) {
+  return steps.find((step) => Math.round((max - min) / step) <= limit) ?? max - min;
+}
+
+function scaleFrom(min, max, step) {
+  const ticks = [];
+  const count = Math.round((max - min) / step);
+  for (let index = 0; index <= count; index++) ticks.push(clean(min + index * step));
+  return { min, max, step, ticks };
+}
+
+function clean(value) {
+  const rounded = Number(value.toPrecision(12));
+  return Object.is(rounded, -0) ? 0 : rounded;
+}
+
+/** Office General / 0% tick labels. */
+export function formatTick(value, percent = false) {
+  if (percent) return `${clean(value * 100)}%`;
+  return String(clean(value));
+}
+
+function legendEntries(c, entries) {
+  // PowerPoint places the exported legend on the right (PptxGenJS legendPos r).
+  if (!entries.length) return 0;
+  const swatch = c.fontPx * 0.6, gap = c.fontPx * 0.4, keyWidth = entries.some((entry) => entry.key === "line") ? c.fontPx * 1.4 : swatch;
+  const textWidth = Math.max(...entries.map((entry) => c.width(entry.name)));
+  const width = Math.min(c.box.width * 0.45, keyWidth + gap + textWidth + c.fontPx * 0.5);
+  const rowHeight = Math.min(c.lineHeight, (c.box.height - 2 * c.pad) / entries.length);
+  const x = c.box.x + c.box.width - c.pad - width;
+  let y = c.box.y + Math.max(c.pad, (c.box.height - rowHeight * entries.length) / 2);
+  for (const entry of entries) {
+    const middle = y + rowHeight / 2;
+    // Legend keys follow the series format: a line (with marker) for line/radar
+    // series, a marker for scatter series, a filled square otherwise.
+    if (entry.key === "line") c.mark("polyline", { points: `${c.num(x)},${c.num(middle)} ${c.num(x + keyWidth)},${c.num(middle)}`, fill: "none", stroke: entry.color, "stroke-width": 2 * c.pt }, entry.path);
+    if (entry.key === "marker" || (entry.key === "line" && entry.marker)) c.mark("circle", { cx: x + keyWidth / 2, cy: middle, r: 3 * c.pt, fill: entry.color, stroke: entry.color, "stroke-width": 0.75 * c.pt }, entry.path);
+    if (!entry.key) c.mark("rect", { x, y: middle - swatch / 2, width: swatch, height: swatch, fill: entry.color }, entry.path);
+    c.text(entry.name, { x: x + keyWidth + gap, y, width: Math.max(1, width - keyWidth - gap), height: rowHeight }, entry.path, "left");
+    y += rowHeight;
+  }
+  return width + c.pad;
+}
+
+function seriesLegend(c, series, key, marker = false) {
+  return series.length > 1
+    ? legendEntries(c, series.map((s) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, key, marker })))
+    : 0;
+}
+
+function gridline(c, x1, y1, x2, y2) {
+  c.mark("line", { x1, y1, x2, y2, stroke: c.gridColor, "stroke-opacity": 0.7, "stroke-width": c.pt });
+}
+
+function axisLine(c, x1, y1, x2, y2) {
+  c.mark("line", { x1, y1, x2, y2, stroke: c.axisColor, "stroke-width": c.pt });
+}
+
+function maxIntervalsFor(length, labelExtent) {
+  return Math.max(1, Math.min(10, Math.floor(length / Math.max(1, labelExtent))));
+}
+
+// ---------------------------------------------------------------------------
+// Category charts: column, bar, line and area (standard, stacked, 100%).
+
+/**
+ * Plotted extents per series point. Bars stack positive and negative values
+ * separately; lines and areas accumulate the signed sum. 100% groupings divide
+ * by the category's sum of absolute values first.
+ */
+export function stackCategoryValues(series, count, kind, grouping, path = "chart") {
+  const percent = grouping === "percentStacked";
+  const stacked = grouping === "stacked" || percent;
+  const totals = Array.from({ length: count }, (_, i) => series.reduce((sum, s) => sum + Math.abs(s.values[i] ?? 0), 0));
+  if (percent && totals.some((total) => !Number.isFinite(total))) throw chartAggregateError(path, "percentage total");
+  const positive = new Array(count).fill(0), negative = new Array(count).fill(0), running = new Array(count).fill(0);
+  return series.map((s) => s.values.map((raw, i) => {
+    if (raw === null && kind !== "area") return null;
+    let value = raw ?? 0;
+    if (percent) value = totals[i] ? value / totals[i] : 0;
+    if (!stacked) return { value, from: 0, to: value };
+    if (kind === "bar") {
+      const base = value >= 0 ? positive : negative;
+      const from = base[i];
+      base[i] += value;
+      if (!Number.isFinite(base[i])) throw chartAggregateError(path, "stacked total");
+      return { value, from, to: base[i] };
+    }
+    const from = running[i];
+    running[i] += value;
+    if (!Number.isFinite(running[i])) throw chartAggregateError(path, "stacked total");
+    return { value, from, to: running[i] };
+  }));
+}
+
+function chartAggregateError(path, aggregate) {
+  return new RangeError(`Cannot render ${path}: ${aggregate} exceeds the finite numeric range. Rescale the chart values before rendering.`);
+}
+
+function renderCategoryChart(c, spec) {
+  const { box, pad, fontPx } = c;
+  const horizontal = spec.kind === "bar" && spec.dir === "bar";
+  const percent = spec.grouping === "percentStacked";
+  const series = c.series();
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const count = categories.length;
+  const stacks = stackCategoryValues(series, count, spec.kind, spec.grouping, c.path);
+  // The scale follows the plotted values. Only stacked bars and areas plot from a
+  // base (the running total below them); an unstacked series has a synthetic zero
+  // `from`, which must not force zero onto the axis, and a line plots `to` alone.
+  const stackedGrouping = spec.grouping === "stacked" || percent;
+  const extents = stacks.flat().filter(Boolean).flatMap((point) => spec.kind === "line" || !stackedGrouping ? [point.to] : [point.from, point.to]);
+  const dataMin = extents.length ? Math.min(...extents) : 0, dataMax = extents.length ? Math.max(...extents) : 1;
+  const legendWidth = seriesLegend(c, series, spec.kind === "line" ? "line" : undefined, spec.markers);
+  const right = box.x + box.width - pad - legendWidth;
+  const top = box.y + pad + c.lineHeight / 2;
+  let plot, scale;
+  if (horizontal) {
+    const categoryWidth = Math.min(box.width * 0.3, Math.max(0, ...categories.map(c.width)) + fontPx * 0.5);
+    const x = box.x + pad + categoryWidth + c.pad / 2;
+    const bottom = box.y + box.height - pad - c.lineHeight;
+    const width = Math.max(1, right - x - fontPx);
+    const tickWidth = Math.max(c.width(formatTick(dataMax, percent)), c.width(formatTick(dataMin, percent)), c.width("100%")) + fontPx;
+    scale = niceScale(dataMin, dataMax, maxIntervalsFor(width, tickWidth), { percent });
+    plot = { x, y: top, width, height: Math.max(1, bottom - top) };
+    categories.forEach((name, i) => {
+      const band = plot.height / count;
+      c.text(name, { x: box.x + pad, y: plot.y + plot.height - (i + 1) * band, width: categoryWidth, height: band }, `${c.path}.data.rows.${i}.0`, "right");
+    });
+  } else {
+    const bottom = box.y + box.height - pad - c.lineHeight;
+    const height = Math.max(1, bottom - top);
+    scale = niceScale(dataMin, dataMax, maxIntervalsFor(height, c.lineHeight * 1.2), { percent });
+    const tickWidth = Math.max(...scale.ticks.map((tick) => c.width(formatTick(tick, percent)))) + fontPx * 0.5;
+    const x = box.x + pad + tickWidth;
+    plot = { x, y: top, width: Math.max(1, right - x - fontPx / 2), height };
+    const band = plot.width / count;
+    categories.forEach((name, i) => c.text(name, { x: plot.x + i * band, y: plot.y + plot.height, width: band, height: c.lineHeight }, `${c.path}.data.rows.${i}.0`));
+  }
+  const at = (value) => horizontal ? plot.x + axisFraction(value, scale) * plot.width : plot.y + axisFraction(value, scale, true) * plot.height;
+  // Category axis crosses at zero when zero is on the axis (autoZero).
+  const crossing = at(Math.min(scale.max, Math.max(scale.min, 0)));
+  for (const tick of scale.ticks) {
+    const position = at(tick), label = formatTick(tick, percent);
+    if (horizontal) {
+      gridline(c, position, plot.y, position, plot.y + plot.height);
+      const width = c.width(label) + fontPx;
+      c.text(label, { x: position - width / 2, y: plot.y + plot.height, width, height: c.lineHeight }, c.path);
+    } else {
+      gridline(c, plot.x, position, plot.x + plot.width, position);
+      c.text(label, { x: box.x + pad, y: position - c.lineHeight / 2, width: plot.x - box.x - pad - fontPx * 0.35, height: c.lineHeight }, c.path, "right");
+    }
+  }
+  const band = (horizontal ? plot.height : plot.width) / count;
+  if (spec.kind === "bar") drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale });
+  else if (spec.kind === "line") drawLines(c, spec, series, stacks, { plot, band, at });
+  else drawAreas(c, series, stacks, { plot, band, at, crossing });
+  if (horizontal) {
+    axisLine(c, crossing, plot.y, crossing, plot.y + plot.height);
+    axisLine(c, plot.x, plot.y + plot.height, plot.x + plot.width, plot.y + plot.height);
+  } else {
+    axisLine(c, plot.x, plot.y, plot.x, plot.y + plot.height);
+    axisLine(c, plot.x, crossing, plot.x + plot.width, crossing);
+  }
+}
+
+// PptxGenJS gap widths: clustered 150%, stacked 50% (overlap 100).
+export function barGeometry(band, seriesCount, grouping) {
+  if (grouping === "clustered") {
+    const group = band / 2.5;
+    return { group, width: group / seriesCount, offset: (band - group) / 2, clustered: true };
+  }
+  const width = band / 1.5;
+  return { group: width, width, offset: (band - width) / 2, clustered: false };
+}
+
+function drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale }) {
+  // Bars grow from zero, or from the axis minimum (maximum, for all-negative data) when zero is off the axis.
+  const base = (value) => Math.min(scale.max, Math.max(scale.min, value));
+  const geometry = barGeometry(band, series.length, spec.grouping);
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length];
+    stacks[j].forEach((point, i) => {
+      if (!point) return;
+      const slot = geometry.clustered ? j * geometry.width : 0;
+      const a = at(base(point.from)), b = at(point.to);
+      const path = `${c.path}.data.rows.${i}.${s.column}`;
+      if (horizontal) {
+        // Office bar charts draw the first category and first series nearest the origin (bottom).
+        const y = plot.y + plot.height - i * band - geometry.offset - slot - geometry.width;
+        c.mark("rect", { x: Math.min(a, b), y, width: Math.abs(b - a), height: geometry.width, fill: color }, path);
+      } else {
+        const x = plot.x + i * band + geometry.offset + slot;
+        c.mark("rect", { x, y: Math.min(a, b), width: geometry.width, height: Math.abs(b - a), fill: color }, path);
+      }
+    });
+  });
+}
+
+function drawLines(c, spec, series, stacks, { plot, band, at }) {
+  const radius = 3 * c.pt;
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length];
+    let run = [];
+    const flush = () => {
+      if (run.length > 1) c.mark("polyline", { points: run.map(([x, y]) => `${c.num(x)},${c.num(y)}`).join(" "), fill: "none", stroke: color, "stroke-width": 2 * c.pt, "stroke-linejoin": "round", "stroke-linecap": "round" }, `${c.path}.data.columns.${s.column}`);
+      run = [];
+    };
+    stacks[j].forEach((point, i) => {
+      if (!point) { flush(); return; }
+      run.push([plot.x + (i + 0.5) * band, at(point.to)]);
+    });
+    flush();
+    if (spec.markers) stacks[j].forEach((point, i) => {
+      if (point) c.mark("circle", { cx: plot.x + (i + 0.5) * band, cy: at(point.to), r: radius, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    });
+  });
+}
+
+function drawAreas(c, series, stacks, { plot, band, at, crossing }) {
+  series.forEach((s, j) => {
+    const points = stacks[j].map((point, i) => ({ x: plot.x + (i + 0.5) * band, from: point.from, to: point.to }));
+    const upper = points.map((p) => `${c.num(p.x)} ${c.num(at(p.to))}`);
+    const lower = points.slice().reverse().map((p) => `${c.num(p.x)} ${c.num(p.from === 0 ? crossing : at(p.from))}`);
+    c.mark("path", { d: `M ${upper.join(" L ")} L ${lower.join(" L ")} Z`, fill: c.colors[j % c.colors.length] }, `${c.path}.data.columns.${s.column}`);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Pie and doughnut: first series only, clockwise from 12 o'clock, one colour per category.
+
+function renderCircularChart(c, spec) {
+  const { box, pad } = c;
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const values = c.rows.map((row) => Math.abs(chartNumber(row[1]) ?? 0));
+  const legendWidth = legendEntries(c, categories.map((name, i) => ({
+    name, color: c.colors[i % c.colors.length], path: `${c.path}.data.rows.${i}.0`
+  })));
+  const area = { x: box.x + pad, y: box.y + pad, width: Math.max(1, box.width - 2 * pad - legendWidth), height: Math.max(1, box.height - 2 * pad) };
+  const cx = area.x + area.width / 2, cy = area.y + area.height / 2;
+  const r = Math.max(1, Math.min(area.width, area.height) / 2 * 0.9);
+  const inner = spec.kind === "doughnut" ? r * 0.5 : 0;
+  const total = values.reduce((sum, value) => sum + value, 0);
+  if (!Number.isFinite(total)) throw chartAggregateError(c.path, "slice total");
+  if (!total) {
+    c.text("No positive chart values", area, c.path);
+    return;
+  }
+  const border = { stroke: "#F9F9F9", "stroke-width": 0.75 * c.pt };
+  let angle = -Math.PI / 2;
+  values.forEach((value, i) => {
+    const delta = value / total * Math.PI * 2, end = angle + delta;
+    const fill = c.colors[i % c.colors.length], path = `${c.path}.data.rows.${i}.1`;
+    if (delta >= Math.PI * 2 - 1e-9) {
+      if (inner) c.mark("path", { d: `${circlePath(c, cx, cy, r)} ${circlePath(c, cx, cy, inner)}`, fill, "fill-rule": "evenodd", ...border }, path);
+      else c.mark("circle", { cx, cy, r, fill, ...border }, path);
+    } else if (delta > 0) {
+      c.mark("path", { d: slicePath(c, cx, cy, r, inner, angle, end), fill, ...border }, path);
+    }
+    angle = end;
+  });
+}
+
+function polar(cx, cy, r, angle) {
+  return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+}
+
+function circlePath(c, cx, cy, r) {
+  const n = c.num;
+  return `M ${n(cx - r)} ${n(cy)} A ${n(r)} ${n(r)} 0 1 0 ${n(cx + r)} ${n(cy)} A ${n(r)} ${n(r)} 0 1 0 ${n(cx - r)} ${n(cy)} Z`;
+}
+
+function slicePath(c, cx, cy, r, inner, start, end) {
+  const n = c.num, large = end - start > Math.PI ? 1 : 0;
+  const [x1, y1] = polar(cx, cy, r, start), [x2, y2] = polar(cx, cy, r, end);
+  if (!inner) return `M ${n(cx)} ${n(cy)} L ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 ${large} 1 ${n(x2)} ${n(y2)} Z`;
+  const [x3, y3] = polar(cx, cy, inner, end), [x4, y4] = polar(cx, cy, inner, start);
+  return `M ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 ${large} 1 ${n(x2)} ${n(y2)} L ${n(x3)} ${n(y3)} A ${n(inner)} ${n(inner)} 0 ${large} 0 ${n(x4)} ${n(y4)} Z`;
+}
+
+// ---------------------------------------------------------------------------
+// Scatter: X from columns[1], Y series from columns[2..], markers only.
+
+export function scatterSeries(rows, columns) {
+  const numericX = columns.length > 2;
+  const xs = rows.map((row, i) => numericX ? chartNumber(row[1]) : i + 1);
+  const first = numericX ? 2 : 1;
+  const series = columns.slice(first).map((name, offset) => ({
+    name: name === null || name === undefined ? "" : String(name), column: first + offset, index: offset,
+    points: rows.map((row, i) => ({ row: i, x: xs[i], y: chartNumber(row[first + offset]) })).filter((p) => p.x !== null && p.y !== null)
+  }));
+  return { series, xs };
+}
+
+function renderScatterChart(c) {
+  const { box, pad, fontPx } = c;
+  const { series } = scatterSeries(c.rows, c.columns);
+  const points = series.flatMap((s) => s.points);
+  const xs = points.map((p) => p.x), ys = points.map((p) => p.y);
+  const legendWidth = seriesLegend(c, series, "marker");
+  const top = box.y + pad + c.lineHeight / 2, bottom = box.y + box.height - pad - c.lineHeight;
+  const height = Math.max(1, bottom - top);
+  const yScale = niceScale(ys.length ? Math.min(...ys) : 0, ys.length ? Math.max(...ys) : 1, maxIntervalsFor(height, c.lineHeight * 1.2));
+  const tickWidth = Math.max(...yScale.ticks.map((tick) => c.width(formatTick(tick)))) + fontPx * 0.5;
+  const plot = { x: box.x + pad + tickWidth, y: top, height };
+  plot.width = Math.max(1, box.x + box.width - pad - legendWidth - fontPx - plot.x);
+  const xLabelWidth = Math.max(c.width(formatTick(xs.length ? Math.max(...xs) : 1)), c.width(formatTick(xs.length ? Math.min(...xs) : 0))) + fontPx;
+  const xScale = niceScale(xs.length ? Math.min(...xs) : 0, xs.length ? Math.max(...xs) : 1, maxIntervalsFor(plot.width, xLabelWidth));
+  const xAt = (v) => plot.x + axisFraction(v, xScale) * plot.width;
+  const yAt = (v) => plot.y + axisFraction(v, yScale, true) * plot.height;
+  for (const tick of yScale.ticks) {
+    const y = yAt(tick);
+    gridline(c, plot.x, y, plot.x + plot.width, y);
+    c.text(formatTick(tick), { x: box.x + pad, y: y - c.lineHeight / 2, width: plot.x - box.x - pad - fontPx * 0.35, height: c.lineHeight }, c.path, "right");
+  }
+  for (const tick of xScale.ticks) {
+    const label = formatTick(tick), width = c.width(label) + fontPx;
+    c.text(label, { x: xAt(tick) - width / 2, y: plot.y + plot.height, width, height: c.lineHeight }, c.path);
+  }
+  const yCross = yAt(Math.min(yScale.max, Math.max(yScale.min, 0))), xCross = xAt(Math.min(xScale.max, Math.max(xScale.min, 0)));
+  axisLine(c, xCross, plot.y, xCross, plot.y + plot.height);
+  axisLine(c, plot.x, yCross, plot.x + plot.width, yCross);
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length];
+    for (const point of s.points) c.mark("circle", { cx: xAt(point.x), cy: yAt(point.y), r: 3 * c.pt, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${point.row}.${s.column}`);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Radar: categories clockwise from 12 o'clock, value axis on the vertical spoke.
+
+function renderRadarChart(c, spec) {
+  const { box, pad, fontPx } = c;
+  const series = c.series();
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const count = categories.length;
+  const values = series.flatMap((s) => s.values).filter((v) => v !== null);
+  const legendWidth = seriesLegend(c, series, spec.style === "filled" ? undefined : "line", spec.markers);
+  const labelWidth = Math.min(box.width * 0.2, Math.max(0, ...categories.map(c.width)) + fontPx * 0.5);
+  const area = { x: box.x + pad, y: box.y + pad, width: Math.max(1, box.width - 2 * pad - legendWidth), height: Math.max(1, box.height - 2 * pad) };
+  const cx = area.x + area.width / 2, cy = area.y + area.height / 2;
+  const radius = Math.max(1, Math.min(area.width / 2 - labelWidth, area.height / 2 - c.lineHeight));
+  const scale = niceScale(values.length ? Math.min(...values) : 0, values.length ? Math.max(...values) : 1, maxIntervalsFor(radius, c.lineHeight));
+  const angle = (i) => -Math.PI / 2 + i / count * Math.PI * 2;
+  const rAt = (v) => axisFraction(Math.min(scale.max, Math.max(scale.min, v)), scale) * radius;
+  const point = (i, v) => polar(cx, cy, rAt(v), angle(i));
+  const n = c.num;
+  for (const tick of scale.ticks) {
+    if (tick === scale.min) continue;
+    const ring = categories.map((_, i) => point(i, tick).map(n).join(" "));
+    c.mark("path", { d: `M ${ring.join(" L ")} Z`, fill: "none", stroke: c.gridColor, "stroke-opacity": 0.7, "stroke-width": c.pt });
+  }
+  categories.forEach((name, i) => {
+    const [x, y] = polar(cx, cy, radius, angle(i));
+    axisLine(c, cx, cy, x, y);
+    const [lx, ly] = polar(cx, cy, radius + fontPx * 0.4, angle(i));
+    const cos = Math.cos(angle(i)), sin = Math.sin(angle(i));
+    const align = Math.abs(cos) < 0.2 ? "center" : cos > 0 ? "left" : "right";
+    const rect = {
+      x: align === "center" ? lx - labelWidth / 2 : align === "left" ? lx : lx - labelWidth,
+      y: Math.abs(sin) < 0.2 ? ly - c.lineHeight / 2 : sin < 0 ? ly - c.lineHeight : ly,
+      width: labelWidth, height: c.lineHeight
+    };
+    c.text(name, rect, `${c.path}.data.rows.${i}.0`, align);
+  });
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length], path = `${c.path}.data.columns.${s.column}`;
+    if (spec.style === "filled") {
+      const outline = s.values.map((v, i) => point(i, v ?? scale.min).map(n).join(" "));
+      c.mark("path", { d: `M ${outline.join(" L ")} Z`, fill: color }, path);
+      return;
+    }
+    const at = (i) => point(i, s.values[i]).map(n).join(" ");
+    let d = "";
+    if (s.values.every((v) => v !== null)) d = `M ${s.values.map((_, i) => at(i)).join(" L ")}${count > 2 ? " Z" : ""}`;
+    else for (let i = 0; i < count; i++) {
+      const next = (i + 1) % count;
+      if (s.values[i] !== null && s.values[next] !== null && next !== i) d += `${d ? " " : ""}M ${at(i)} L ${at(next)}`;
+    }
+    if (d) c.mark("path", { d, fill: "none", stroke: color, "stroke-width": 2 * c.pt, "stroke-linejoin": "round", "stroke-linecap": "round" }, path);
+    if (spec.markers) s.values.forEach((v, i) => {
+      if (v === null) return;
+      const [x, y] = point(i, v);
+      c.mark("circle", { cx: x, cy: y, r: 3 * c.pt, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    });
+  });
+  // Value axis labels sit on top of filled series, as in PowerPoint.
+  for (const tick of scale.ticks) {
+    const label = formatTick(tick), width = c.width(label) + fontPx * 0.5;
+    c.text(label, { x: cx - width - fontPx * 0.2, y: cy - rAt(tick) - c.lineHeight / 2, width, height: c.lineHeight }, c.path, "right");
+  }
+}

package/dist/svg.js

@@ -9,6 +9,7 @@ import {
 import * as opfCore from "@openpresentation/opf";
 import { createScriptFonts } from "./script-fonts.js";
 import { disabledFeaturesStyle } from "./font-compatibility.js";
+import { renderCatalogChart } from "./charts.js";
 
 export const packageName = "@openpresentation/opf-render";
 
@@ -1217,88 +1218,11 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)
   });
 }
 
-function renderImportedChart(item, box, bound, options) {
-  const chart=item.value, rows=chart.data?.rows??[], columns=chart.data?.columns??[];
-  if(!rows.length||columns.length<2)return null;
-  const kind=chart.type, circular=['pie','donut','doughnut'].includes(kind);
-  const colors=[bound.design.colors.primary,bound.design.colors.secondary,'#9B6BCC','#D98944','#429B85','#CB5D79'].map(color=>chartColorForFill(bound.design.colors.surface,color));
-  const children=[];
-  const labelColor=textColorForFill(bound.design.colors.surface,bound.design.colors.text);
-  const text=(value,rect,path,size=16,align='center')=>renderTextBox(String(value),rect,bound,{path,fontSize:size,fontFamily:bound.design.fonts.body,fontWeight:400,fill:labelColor,options,align,verticalAlign:'middle'});
-  const number=value=>typeof value==='number'&&Number.isFinite(value)?value:typeof value==='string'&&value.trim()&&Number.isFinite(Number(value))?Number(value):null;
-  const series=columns.slice(1).map((name,j)=>({name,values:rows.map(row=>number(row[j+1]))}));
-  children.push(tag('rect',{x:box.x,y:box.y,width:box.width,height:box.height,fill:bound.design.colors.surface,stroke:bound.design.colors.border,...traceAttrs(options,item.path)}));
-  if(circular){
-    if(series.length!==1||series[0].values.some(v=>v!==null&&v<0)){
-      children.push(text('Pie charts need one nonnegative series',box,item.path,18));return tag('g',traceAttrs(options,item.path),children.join('\n'));
-    }
-    const values=series[0].values,total=values.reduce((sum,v)=>sum+(v??0),0),cx=box.x+box.width*.35,cy=box.y+box.height*.5,r=Math.max(1,Math.min(box.width*.3,box.height*.42));
-    if(!total){children.push(text('No positive chart values',box,item.path,18));return tag('g',traceAttrs(options,item.path),children.join('\n'));}
-    let angle=-Math.PI/2;
-    values.forEach((v,i)=>{
-      const delta=(v??0)/total*Math.PI*2,end=angle+delta,color=colors[i%colors.length];
-      if(delta>=Math.PI*2-1e-8)children.push(tag('circle',{cx,cy,r,fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.1`)}));
-      else if(delta>0)children.push(tag('path',{d:`M ${cx} ${cy} L ${cx+r*Math.cos(angle)} ${cy+r*Math.sin(angle)} A ${r} ${r} 0 ${delta>Math.PI?1:0} 1 ${cx+r*Math.cos(end)} ${cy+r*Math.sin(end)} Z`,fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.1`)}));
-      angle=end;
-      const y=box.y+15+i*Math.min(30,(box.height-30)/rows.length);
-      children.push(tag('rect',{x:box.x+box.width*.69,y:y+6,width:12,height:12,fill:color}));
-      children.push(text(`${rows[i][0]}: ${v??'—'}`,{x:box.x+box.width*.69+20,y,width:box.width*.29-20,height:28},`${item.path}.data.rows.${i}`,14,'left'));
-    });
-    if(kind!=='pie')children.push(tag('circle',{cx,cy,r:r*.57,fill:bound.design.colors.surface}));
-  }else{
-    const horizontal=kind==='bar',legendHeight=series.length>1?34:8;
-    const plot={x:box.x+(horizontal?100:64),y:box.y+legendHeight+14,width:Math.max(1,box.width-(horizontal?124:84)),height:Math.max(1,box.height-legendHeight-62)};
-    const values=series.flatMap(s=>s.values).filter(v=>v!==null),min=Math.min(0,...values),rawMax=Math.max(0,...values),max=rawMax===min?min+1:rawMax,range=max-min;
-    const fraction=(v,reverse=false)=>{
-      const distance=reverse?max-v:v-min;
-      if(Number.isFinite(range)&&Number.isFinite(distance))return distance/range;
-      // Finite endpoints can overflow during subtraction. Keep ordinary
-      // arithmetic unchanged and normalize only that exceptional range.
-      const unit=Math.max(Math.abs(min),Math.abs(max)),low=min/unit,high=max/unit,position=v/unit;
-      return (reverse?high-position:position-low)/(high-low);
-    };
-    const xValue=v=>plot.x+fraction(v)*plot.width,yValue=v=>plot.y+fraction(v,true)*plot.height;
-    const zero=horizontal?xValue(0):yValue(0);
-    for(let tick=0;tick<=4;tick++){
-      const direct=min+range*tick/4;
-      const value=Number.isFinite(direct)?direct:min*(1-tick/4)+max*(tick/4);
-      const at=horizontal?xValue(value):yValue(value),rounded=Number(value.toPrecision(4));
-      // Rounding MAX_VALUE to four digits can overflow although the tick is
-      // finite. Its exact shortest decimal remains truthful and parseable.
-      const label=Number.isFinite(rounded)?rounded:String(value);
-      children.push(tag('line',{x1:horizontal?at:plot.x,x2:horizontal?at:plot.x+plot.width,y1:horizontal?plot.y:at,y2:horizontal?plot.y+plot.height:at,stroke:bound.design.colors.border,'stroke-width':1}));
-      children.push(text(label,horizontal?{x:at-32,y:plot.y+plot.height+6,width:64,height:26}:{x:box.x+4,y:at-12,width:52,height:24},item.path,13,horizontal?'center':'right'));
-    }
-    if(series.length>1)series.forEach((s,j)=>{
-      const width=(box.width-24)/series.length,x=box.x+12+j*width;
-      children.push(tag('rect',{x,y:box.y+12,width:12,height:12,fill:colors[j%colors.length]}));
-      children.push(text(s.name,{x:x+18,y:box.y+5,width:Math.max(1,width-22),height:28},`${item.path}.data.columns.${j+1}`,14,'left'));
-    });
-    const categorySize=(horizontal?plot.height:plot.width)/rows.length;
-    rows.forEach((row,i)=>children.push(text(row[0],horizontal?{x:box.x+4,y:plot.y+i*categorySize,width:88,height:categorySize}:{x:plot.x+i*categorySize,y:plot.y+plot.height+7,width:categorySize,height:30},`${item.path}.data.rows.${i}.0`,14,horizontal?'right':'center')));
-    series.forEach((s,j)=>{
-      const color=colors[j%colors.length];
-      if(kind==='line'||kind==='area'){
-        let points=[];
-        const flush=()=>{if(!points.length)return;const pairs=points.map(p=>p.join(',')).join(' ');if(kind==='area')children.push(tag('polygon',{points:`${points[0][0]},${zero} ${pairs} ${points.at(-1)[0]},${zero}`,fill:color,'fill-opacity':.18}));children.push(tag('polyline',{points:pairs,fill:'none',stroke:color,'stroke-width':3,...traceAttrs(options,`${item.path}.data`)}));points=[];};
-        s.values.forEach((v,i)=>{if(v===null){flush();return;}const x=plot.x+(i+.5)*categorySize,y=yValue(v);points.push([x,y]);children.push(tag('circle',{cx:x,cy:y,r:4,fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.${j+1}`)}));});flush();
-      }else{
-        const bar=categorySize*.8/series.length;
-        s.values.forEach((v,i)=>{if(v===null)return;const at=(horizontal?plot.y:plot.x)+i*categorySize+categorySize*.1+j*bar;
-          children.push(tag('rect',horizontal?{x:Math.min(zero,xValue(v)),y:at,width:Math.abs(xValue(v)-zero),height:Math.max(.1,bar*.9),fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.${j+1}`)}:{x:at,y:Math.min(zero,yValue(v)),width:Math.max(.1,bar*.9),height:Math.abs(yValue(v)-zero),fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.${j+1}`)}));
-        });
-      }
-    });
-    children.push(tag('line',{x1:horizontal?zero:plot.x,x2:horizontal?zero:plot.x+plot.width,y1:horizontal?plot.y:zero,y2:horizontal?plot.y+plot.height:zero,stroke:labelColor,'stroke-width':1}));
-  }
-  return tag('g',traceAttrs(options,item.path),children.join('\n'));
-}
-
 function renderChart(item, box, bound, options) {
-  if (["column","bar","line","area","pie","donut","doughnut"].includes(item.value?.type)) {
-    const rendered = renderImportedChart(item, box, bound, options);
-    if (rendered) return rendered;
-  }
+  // Catalog chart types (kept, deprecated and aliased ids) preview the native
+  // construct opf-pptx exports; other ids keep the legacy single-series preview.
+  const rendered = renderCatalogChart(item, box, bound, options, { tag, traceAttrs, stableNumber, renderTextBox });
+  if (rendered) return rendered;
   const chart = item.value ?? {};
   const chartType = chart.type ?? engineDefaults.chartTypes[0];
   const data = inlineChartRows(chart.data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -56,9 +56,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/script-fonts.js && node --check src/script-font-pack.js && node --check test/script-fonts.mjs && node --check test/glyph-fallback.mjs && node --check test/script-fonts-browser.mjs && node --check test/script-fonts-auto.mjs && node --check test/script-fonts-auto-robust.mjs && node --check test/script-fonts-auto-browser.mjs && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check test/font-policy.mjs && node --check test/open-fonts.mjs && node --check test/aptos-preview.mjs && node --check test/aptos-preview-browser.mjs && node --check test/lazy-fonts.mjs && node --check test/lazy-fonts-browser.mjs && node --check test/lazy-face-fallback.mjs && node --check test/lazy-face-fallback-browser.mjs && node --check src/font-policy.js && node --check scripts/update-font-policy.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs && node --check test/rich-tab.mjs && node --check test/rich-tab-browser.mjs && node --check test/rich-tab-estimated-browser.mjs && node --check test/styled-table.mjs && node --check test/color-references.mjs && node --check test/default-font-scheme.mjs && node --check test/chart-colors.mjs && node --check test/chart-axis.mjs && node --check test/image-placeholders.mjs && node --check test/image-placeholders-browser.mjs && node --check test/accepted-text.mjs && node --check test/accepted-text-fixtures.mjs && node --check test/accepted-text-browser.mjs && node --check test/rich-spacing-browser.mjs && node --check test/rich-flow-browser.mjs && node --check test/rich-flow-review-sheets.mjs && node --check test/furniture.mjs && node --check test/socials.mjs && node --check test/slide-image.mjs && node --check test/slide-image-treatments.mjs && node --check test/item-alignment.mjs && node --check test/cover-centering.mjs && node --check scripts/font-license.mjs && node --check test/font-licenses.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs",
+    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/script-fonts.js && node --check src/script-font-pack.js && node --check test/script-fonts.mjs && node --check test/glyph-fallback.mjs && node --check test/script-fonts-browser.mjs && node --check test/script-fonts-auto.mjs && node --check test/script-fonts-auto-robust.mjs && node --check test/script-fonts-auto-browser.mjs && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check test/font-policy.mjs && node --check test/open-fonts.mjs && node --check test/aptos-preview.mjs && node --check test/aptos-preview-browser.mjs && node --check test/lazy-fonts.mjs && node --check test/lazy-fonts-browser.mjs && node --check test/lazy-face-fallback.mjs && node --check test/lazy-face-fallback-browser.mjs && node --check src/font-policy.js && node --check scripts/update-font-policy.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs && node --check test/rich-tab.mjs && node --check test/rich-tab-browser.mjs && node --check test/rich-tab-estimated-browser.mjs && node --check test/styled-table.mjs && node --check test/color-references.mjs && node --check test/default-font-scheme.mjs && node --check test/chart-colors.mjs && node --check test/chart-axis.mjs && node --check src/charts.js && node --check test/chart-types.mjs && node --check test/chart-scale.mjs && node --check test/chart-catalog.mjs && node --check test/image-placeholders.mjs && node --check test/image-placeholders-browser.mjs && node --check test/accepted-text.mjs && node --check test/accepted-text-fixtures.mjs && node --check test/accepted-text-browser.mjs && node --check test/rich-spacing-browser.mjs && node --check test/rich-flow-browser.mjs && node --check test/rich-flow-review-sheets.mjs && node --check test/furniture.mjs && node --check test/socials.mjs && node --check test/slide-image.mjs && node --check test/slide-image-treatments.mjs && node --check test/item-alignment.mjs && node --check test/cover-centering.mjs && node --check scripts/font-license.mjs && node --check test/font-licenses.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs",
     "validate": "node scripts/validate-package.mjs",
-    "test": "npm run build && npm run check:fonts && node test/furniture.mjs && node test/socials.mjs && node test/font-outlines.mjs && node test/accepted-text.mjs && node test/image-placeholders.mjs && node test/slide-image.mjs && node test/slide-image-treatments.mjs && node test/chart-colors.mjs && node test/chart-axis.mjs && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/font-policy.mjs && node test/open-fonts.mjs && node test/aptos-preview.mjs && node test/lazy-fonts.mjs && node test/lazy-face-fallback.mjs && node test/timeline.mjs && node test/quote-footer.mjs && node test/shared-quote.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/rich-tab.mjs && node test/color-references.mjs && node test/default-font-scheme.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/script-fonts.mjs && node test/glyph-fallback.mjs && node test/script-fonts-auto.mjs && node test/script-fonts-auto-robust.mjs && node test/design-preview.mjs && node test/item-alignment.mjs && node test/cover-centering.mjs && npm run build:browser-check && npm run test:styled-table",
+    "test": "npm run build && npm run check:fonts && node test/furniture.mjs && node test/socials.mjs && node test/font-outlines.mjs && node test/accepted-text.mjs && node test/image-placeholders.mjs && node test/slide-image.mjs && node test/slide-image-treatments.mjs && node test/chart-colors.mjs && node test/chart-axis.mjs && node test/chart-types.mjs && node test/chart-scale.mjs && node test/chart-catalog.mjs && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/font-policy.mjs && node test/open-fonts.mjs && node test/aptos-preview.mjs && node test/lazy-fonts.mjs && node test/lazy-face-fallback.mjs && node test/timeline.mjs && node test/quote-footer.mjs && node test/shared-quote.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/rich-tab.mjs && node test/color-references.mjs && node test/default-font-scheme.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/script-fonts.mjs && node test/glyph-fallback.mjs && node test/script-fonts-auto.mjs && node test/script-fonts-auto-robust.mjs && node test/design-preview.mjs && node test/item-alignment.mjs && node test/cover-centering.mjs && npm run build:browser-check && npm run test:styled-table",
     "check:fonts": "node test/font-licenses.mjs && npm run check:font-hotlinks",
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "test:golden": "npm run build && node test/golden.mjs",