@classic-homes/slides 0.5.12 → 0.6.0

package/dist/{chunk-25NZMEQG.js → chunk-KQXT376T.js}

@@ -241,15 +241,40 @@ var CHART_TYPES = [
   "funnel",
   "gauge",
   "scatter",
-  "radar"
+  "radar",
+  "percent-column",
+  "percent-bar",
+  "combo",
+  "waterfall",
+  "heatmap",
+  "dumbbell",
+  "bullet",
+  "treemap",
+  "ring",
+  "sankey",
+  "pictogram"
+];
+var SINGLE_SERIES_CHARTS = [
+  "pie",
+  "donut",
+  "funnel",
+  "gauge",
+  "waterfall",
+  "treemap",
+  "ring",
+  "pictogram"
 ];
 var ChartSeries = z3.object({
   name: z3.string().min(1).max(40),
-  values: z3.array(z3.number()).min(1).max(40)
+  values: z3.array(z3.number()).min(1).max(40),
+  as: z3.enum(["bar", "line"]).optional().describe(
+    "combo only: draw this series as bars or a line. Default: first series bars, the rest lines."
+  ),
+  axis: z3.enum(["primary", "secondary"]).optional().describe("combo only: secondary puts this series on a right-hand axis with its own scale.")
 });
 var ChartSpec = z3.object({
   type: z3.enum(CHART_TYPES).describe(
-    "column/bar compare categories; stacked-* show parts of a whole per category; line/area show change over time; pie/donut show shares (one series); funnel shows drop-off; gauge shows one value against a max; scatter pairs two series; radar compares profiles."
+    "column/bar compare categories; stacked-* show parts of a whole per category; percent-column/percent-bar show each category as 100%; line/area show change over time; combo mixes bars and lines (optionally on two axes); pie/donut show shares (one series); treemap shows shares of many categories; funnel shows drop-off; waterfall walks from a start to an end through gains and losses; gauge shows one value against a max; ring shows each label as a progress ring against max; bullet compares actual (series 1) with target (series 2); dumbbell compares two or more points per category (before/after); heatmap colours a rows \xD7 columns grid (labels are rows, series are columns); sankey shows flows (labels are sources, series names are destinations); pictogram counts in house icons; scatter pairs two series; radar compares profiles."
   ),
   labels: z3.array(z3.string().max(40)).min(1).max(40).describe("Category labels (x-axis, slices, stages). One per value."),
   series: z3.array(ChartSeries).min(1).max(6).describe(
@@ -261,7 +286,14 @@ var ChartSpec = z3.object({
   legend: z3.enum(["auto", "show", "hide"]).default("auto"),
   labelsOnData: z3.boolean().default(true).describe("Print values on bars, slices and points."),
   highlight: z3.string().optional().describe("A label to emphasise; other categories are muted."),
-  max: z3.number().optional().describe("Axis or gauge maximum.")
+  max: z3.number().optional().describe("Axis, gauge, ring or bullet maximum."),
+  secondaryFormat: z3.enum(["number", "percent", "currency", "compact"]).optional().describe("combo only: how the secondary axis values are shown (default: format)."),
+  totals: z3.array(z3.string().max(40)).max(40).optional().describe(
+    'waterfall only: labels drawn as running-total bars (e.g. "Subtotal", "End"); their values are ignored.'
+  ),
+  perIcon: z3.number().positive().optional().describe(
+    "pictogram only: what one house icon stands for (default: a round step, \u2264 20 icons)."
+  )
 }).strict();
 function chartIssues(spec) {
   const out = [];
@@ -275,8 +307,69 @@ function chartIssues(spec) {
   if (spec.type === "scatter" && spec.series.length < 2)
     out.push("Scatter needs two series (x and y).");
   if (spec.type === "gauge" && spec.max === void 0) out.push("Gauge needs a max.");
+  if (spec.type === "ring" && ringMax(spec) === void 0) {
+    out.push("Ring needs a max (or format percent, which defaults to 100).");
+  }
+  if (spec.type === "dumbbell" && spec.series.length < 2) {
+    out.push("Dumbbell needs at least two series (e.g. before and after).");
+  }
+  if (["treemap", "ring", "pictogram", "sankey"].includes(spec.type)) {
+    const used = spec.type === "sankey" ? spec.series : spec.series.slice(0, 1);
+    if (used.some((s) => s.values.some((v) => v < 0))) {
+      out.push(`${spec.type} values can't be negative.`);
+    }
+  }
+  if (spec.type === "waterfall") {
+    for (const t of spec.totals ?? []) {
+      if (!spec.labels.includes(t)) out.push(`Total "${t}" isn't one of the labels.`);
+    }
+  }
+  if (spec.type === "sankey") out.push(...sankeyIssues(spec));
+  if (spec.type === "pictogram" && spec.perIcon !== void 0) {
+    const most = Math.round(Math.max(...spec.series[0].values) / spec.perIcon);
+    if (most > 60)
+      out.push(`perIcon ${spec.perIcon} draws ${most} icons in a row; use a larger perIcon.`);
+  }
+  return out;
+}
+function ringMax(spec) {
+  return spec.max ?? (spec.format === "percent" ? 100 : void 0);
+}
+function sankeyIssues(spec) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const l of spec.labels) {
+    if (seen.has(l)) out.push(`Source "${l}" appears twice; combine the rows.`);
+    seen.add(l);
+  }
+  const edges = sankeyLinks(spec);
+  if (!edges.length) out.push("Sankey needs at least one flow above zero.");
+  for (const e of edges) {
+    if (e.source === e.target) out.push(`"${e.source}" can't flow to itself.`);
+  }
+  const next = /* @__PURE__ */ new Map();
+  for (const e of edges) {
+    if (e.source !== e.target) next.set(e.source, [...next.get(e.source) ?? [], e.target]);
+  }
+  const state = /* @__PURE__ */ new Map();
+  const cyclic = (n) => {
+    if (state.get(n) === "open") return true;
+    if (state.get(n) === "done") return false;
+    state.set(n, "open");
+    const hit = (next.get(n) ?? []).some(cyclic);
+    state.set(n, "done");
+    return hit;
+  };
+  if (edges.some((e) => cyclic(e.source))) {
+    out.push("Flows loop back on themselves; a sankey must only flow one way.");
+  }
   return out;
 }
+function sankeyLinks(spec) {
+  return spec.labels.flatMap(
+    (source, i) => spec.series.filter((s) => (s.values[i] ?? 0) > 0).map((s) => ({ source, target: s.name, value: s.values[i] }))
+  );
+}
 function chartWarnings(spec) {
   const out = [];
   if (["pie", "donut"].includes(spec.type) && spec.labels.length > 7) {
@@ -284,10 +377,49 @@ function chartWarnings(spec) {
       `${spec.labels.length} slices is hard to read; group small ones into "Other" or use a bar chart.`
     );
   }
-  if (["pie", "donut", "funnel", "gauge"].includes(spec.type) && spec.series.length > 1) {
+  if (SINGLE_SERIES_CHARTS.includes(spec.type) && spec.series.length > 1) {
     out.push(`${spec.type} charts only show the first series.`);
   }
-  if (spec.labels.length > 16 && ["column", "bar", "stacked-column", "stacked-bar"].includes(spec.type)) {
+  if (spec.type === "bullet" && spec.series.length > 2) {
+    out.push("Bullet charts show series 1 as actual and series 2 as target; the rest are ignored.");
+  }
+  if (spec.type === "ring" && spec.labels.length > 4) {
+    out.push("More than 4 rings gets small; show the rest in a table or bar chart.");
+  }
+  if (spec.type === "treemap" && spec.labels.length > 20) {
+    out.push('More than 20 boxes is hard to label; group small ones into "Other".');
+  }
+  if (spec.type === "heatmap" && spec.series.length > 12) {
+    out.push("More than 12 columns crowds the heatmap.");
+  }
+  if (spec.type === "sankey" && (/* @__PURE__ */ new Set([...spec.labels, ...spec.series.map((s) => s.name)])).size > 12) {
+    out.push("More than 12 nodes makes a sankey hard to follow.");
+  }
+  if (spec.type === "pictogram" && spec.labels.length > 8) {
+    out.push("More than 8 rows of icons gets cramped; use a bar chart.");
+  }
+  if (spec.type !== "combo" && spec.series.some((s) => s.as || s.axis)) {
+    out.push('Series "as" and "axis" only apply to combo charts.');
+  }
+  if (spec.type !== "combo" && spec.secondaryFormat) {
+    out.push("secondaryFormat only applies to combo charts.");
+  }
+  if (spec.type !== "waterfall" && spec.totals?.length) {
+    out.push("totals only apply to waterfall charts.");
+  }
+  if (spec.type !== "pictogram" && spec.perIcon !== void 0) {
+    out.push("perIcon only applies to pictogram charts.");
+  }
+  if (spec.labels.length > 16 && [
+    "column",
+    "bar",
+    "stacked-column",
+    "stacked-bar",
+    "percent-column",
+    "percent-bar",
+    "combo",
+    "waterfall"
+  ].includes(spec.type)) {
     out.push("More than 16 categories crowds the axis; consider a line chart or fewer categories.");
   }
   return out;
@@ -320,6 +452,35 @@ function chartColors(palette) {
 var MUTED = "#c9ccc6";
 var TEXT = "#4f4f4f";
 var AXIS = "#d1d5db";
+var TRACK = "#e5e7eb";
+var SPLIT = "#eef0ec";
+var HOUSE = "path://M12 2L1.5 11H5v11h5.5v-7h3v7H19V11h3.5z";
+function mix(a, b, t) {
+  const ch = (hex, i) => parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16);
+  const out = [0, 1, 2].map((i) => Math.round(ch(a, i) + (ch(b, i) - ch(a, i)) * t));
+  return `#${out.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+function niceCeil(v, steps = [1, 2, 2.5, 5, 10]) {
+  if (v <= 0) return 1;
+  const pow = 10 ** Math.floor(Math.log10(v));
+  return (steps.find((m) => m * pow >= v) ?? 10) * pow;
+}
+function toPercent(spec) {
+  const totals = spec.labels.map(
+    (_, i) => spec.series.reduce((sum, s) => sum + Math.abs(s.values[i] ?? 0), 0)
+  );
+  return {
+    ...spec,
+    type: spec.type === "percent-bar" ? "stacked-bar" : "stacked-column",
+    format: "percent",
+    unit: void 0,
+    max: 100,
+    series: spec.series.map((s) => ({
+      ...s,
+      values: s.values.map((v, i) => totals[i] ? Math.abs(v) / totals[i] * 100 : 0)
+    }))
+  };
+}
 function chartOption(spec, palette) {
   const colors3 = chartColors(palette);
   const fmt = (v) => formatValue(v, spec);
@@ -339,6 +500,363 @@ function chartOption(spec, palette) {
     fontSize: 13,
     formatter: (p) => fmt(p.value)
   };
+  const categoryAxis = (gap) => ({
+    type: "category",
+    data: spec.labels,
+    axisLine: { lineStyle: { color: AXIS } },
+    axisTick: { show: false },
+    axisLabel: { color: TEXT, fontSize: 14, interval: 0, hideOverlap: true },
+    boundaryGap: gap
+  });
+  const valueAxis = (s = spec) => ({
+    type: "value",
+    max: spec.max,
+    axisLine: { show: false },
+    splitLine: { lineStyle: { color: SPLIT } },
+    axisLabel: {
+      color: "#7a7a7a",
+      fontSize: 13,
+      formatter: (v) => formatValue(v, { ...s, unit: void 0 })
+    }
+  });
+  const rowAxis = () => ({ ...categoryAxis(true), inverse: true });
+  if (spec.type === "percent-column" || spec.type === "percent-bar") {
+    return chartOption(toPercent(spec), palette);
+  }
+  if (spec.type === "waterfall") {
+    const totals = new Set(spec.totals ?? []);
+    let running = 0;
+    const steps = spec.labels.map((name, i) => {
+      if (totals.has(name)) return { name, base: 0, delta: running, total: true };
+      const delta = first.values[i] ?? 0;
+      const step = { name, base: running, delta, total: false };
+      running += delta;
+      return step;
+    });
+    const stack = { type: "bar", stack: "waterfall", stackStrategy: "all", barMaxWidth: 56 };
+    return {
+      ...base,
+      legend: { show: false },
+      grid: { left: 16, right: 24, top: 28, bottom: 12, containLabel: true },
+      xAxis: categoryAxis(true),
+      yAxis: valueAxis(),
+      series: [
+        // Invisible spacer lifts each step to the running total.
+        {
+          ...stack,
+          silent: true,
+          itemStyle: { color: "transparent" },
+          data: steps.map((s) => s.base)
+        },
+        {
+          ...stack,
+          data: steps.map((s) => ({
+            value: s.delta,
+            itemStyle: {
+              color: muted(s.name, s.total ? colors3[2] : s.delta >= 0 ? colors3[1] : colors3[0]),
+              borderRadius: 3
+            },
+            label: { position: s.delta < 0 ? "bottom" : "top" }
+          })),
+          label: {
+            ...labelStyle,
+            formatter: (p) => {
+              const s = steps[p.dataIndex];
+              if (s.total || p.dataIndex === 0) return fmt(s.delta);
+              return `${s.delta < 0 ? "\u2212" : "+"}${fmt(Math.abs(s.delta))}`;
+            }
+          }
+        }
+      ]
+    };
+  }
+  if (spec.type === "heatmap") {
+    const all = spec.series.flatMap((s) => s.values);
+    const lo = Math.min(...all);
+    const span = (spec.max ?? Math.max(...all)) - lo || 1;
+    const light = mix(colors3[1], "#ffffff", 0.88);
+    return {
+      ...base,
+      legend: { show: false },
+      // ECharts heatmaps need a visualMap; ours is hidden (cells carry their values).
+      visualMap: {
+        show: false,
+        min: lo,
+        max: lo + span,
+        dimension: 2,
+        inRange: { color: [light, colors3[1], colors3[2]] }
+      },
+      grid: { left: 16, right: 16, top: 36, bottom: 8, containLabel: true },
+      xAxis: {
+        type: "category",
+        data: spec.series.map((s) => s.name),
+        position: "top",
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: TEXT, fontSize: 14, interval: 0 }
+      },
+      yAxis: { ...rowAxis(), axisLine: { show: false } },
+      series: [
+        {
+          type: "heatmap",
+          itemStyle: { borderColor: "#fff", borderWidth: 3 },
+          data: spec.labels.flatMap(
+            (_, y) => spec.series.map((s, x) => {
+              const v = s.values[y] ?? 0;
+              const t = Math.min(1, Math.max(0, (v - lo) / span));
+              return {
+                value: [x, y, v],
+                label: { color: t > 0.3 ? "#fff" : TEXT }
+              };
+            })
+          ),
+          label: {
+            show: spec.labelsOnData,
+            fontSize: 14,
+            formatter: (p) => fmt(p.value[2])
+          }
+        }
+      ]
+    };
+  }
+  if (spec.type === "dumbbell") {
+    const lows = spec.labels.map((_, i) => Math.min(...spec.series.map((s) => s.values[i] ?? 0)));
+    const highs = spec.labels.map((_, i) => Math.max(...spec.series.map((s) => s.values[i] ?? 0)));
+    const bar = { type: "bar", stack: "span", stackStrategy: "all", silent: true, barWidth: 4 };
+    return {
+      ...base,
+      legend: spec.legend === "hide" ? { show: false } : { ...base.legend, show: true, data: spec.series.map((s) => s.name) },
+      grid: { left: 16, right: 90, top: 48, bottom: 12, containLabel: true },
+      xAxis: { ...valueAxis(), scale: true },
+      yAxis: rowAxis(),
+      series: [
+        // The connector: an invisible spacer to the low dot, then a thin bar to the high one.
+        { ...bar, itemStyle: { color: "transparent" }, data: lows },
+        { ...bar, itemStyle: { color: AXIS }, data: highs.map((h, i) => h - lows[i]) },
+        ...spec.series.map((s, si) => ({
+          type: "scatter",
+          name: s.name,
+          symbolSize: 18,
+          z: 3,
+          itemStyle: { color: colors3[si % colors3.length], opacity: 1 },
+          data: s.values.map((v, i) => ({
+            value: [v, i],
+            itemStyle: { color: muted(spec.labels[i], colors3[si % colors3.length]), opacity: 1 },
+            label: {
+              position: lows[i] === highs[i] ? "top" : v === lows[i] ? "left" : v === highs[i] ? "right" : "top"
+            }
+          })),
+          label: {
+            ...labelStyle,
+            distance: 10,
+            formatter: (p) => fmt(p.value[0])
+          }
+        }))
+      ]
+    };
+  }
+  if (spec.type === "bullet") {
+    const [actual, target] = spec.series;
+    const top = spec.max ?? niceCeil(Math.max(...actual.values, ...target?.values ?? []) * 1.05);
+    const showTarget = Boolean(target) && spec.legend !== "hide";
+    return {
+      ...base,
+      legend: showTarget || spec.legend === "show" ? { ...base.legend, show: true, data: spec.series.slice(0, 2).map((s) => s.name) } : { show: false },
+      grid: { left: 16, right: 40, top: showTarget ? 48 : 20, bottom: 12, containLabel: true },
+      xAxis: { ...valueAxis(), max: top },
+      yAxis: rowAxis(),
+      series: [
+        {
+          type: "bar",
+          name: actual.name,
+          barWidth: 16,
+          showBackground: true,
+          backgroundStyle: { color: TRACK, borderRadius: 3 },
+          data: actual.values.map((v, i) => ({
+            value: v,
+            itemStyle: { color: muted(spec.labels[i], colors3[0]), borderRadius: 3 }
+          })),
+          label: { ...labelStyle, position: "right", distance: 10 }
+        },
+        ...target ? [
+          {
+            type: "scatter",
+            name: target.name,
+            symbol: "rect",
+            symbolSize: [5, 34],
+            z: 3,
+            itemStyle: { color: colors3[2] },
+            data: target.values.map((v, i) => [v, i])
+          }
+        ] : []
+      ]
+    };
+  }
+  if (spec.type === "treemap") {
+    return {
+      ...base,
+      legend: { show: false },
+      series: [
+        {
+          type: "treemap",
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          roam: false,
+          nodeClick: false,
+          breadcrumb: { show: false },
+          itemStyle: { borderColor: "#fff", borderWidth: 3, gapWidth: 3 },
+          data: spec.labels.map((name, i) => ({
+            name,
+            value: first.values[i],
+            itemStyle: { color: muted(name, colors3[i % colors3.length]) }
+          })),
+          label: {
+            show: true,
+            color: "#fff",
+            fontSize: 15,
+            overflow: "truncate",
+            formatter: (p) => spec.labelsOnData ? `${p.name}
+${fmt(p.value)}` : p.name
+          }
+        }
+      ]
+    };
+  }
+  if (spec.type === "ring") {
+    const top = ringMax(spec) ?? 100;
+    const n = Math.min(spec.labels.length, 4);
+    const outer = [72, 64, 46, 34][n - 1];
+    const size = [44, 40, 30, 24][n - 1];
+    const plain2 = (s) => s.replace(/[{}|]/g, "");
+    return {
+      ...base,
+      legend: { show: false },
+      series: spec.labels.slice(0, n).map((name, i) => {
+        const v = first.values[i] ?? 0;
+        return {
+          type: "pie",
+          silent: true,
+          startAngle: 90,
+          radius: [`${outer - 12}%`, `${outer}%`],
+          center: [`${(i + 0.5) / n * 100}%`, "50%"],
+          labelLine: { show: false },
+          data: [
+            {
+              value: Math.min(Math.max(v, 0), top),
+              name,
+              itemStyle: { color: muted(name, colors3[i % colors3.length]) },
+              label: {
+                show: true,
+                position: "center",
+                formatter: `{v|${plain2(fmt(v))}}
+{l|${plain2(name)}}`,
+                rich: {
+                  v: { fontSize: size, fontWeight: 600, color: colors3[2], lineHeight: size * 1.2 },
+                  l: { fontSize: 15, color: TEXT, lineHeight: 22 }
+                }
+              }
+            },
+            {
+              value: Math.max(0, top - v),
+              name: "",
+              itemStyle: { color: TRACK },
+              label: { show: false }
+            }
+          ]
+        };
+      })
+    };
+  }
+  if (spec.type === "sankey") {
+    const nodes = [.../* @__PURE__ */ new Set([...spec.labels, ...spec.series.map((s) => s.name)])];
+    return {
+      ...base,
+      legend: { show: false },
+      series: [
+        {
+          type: "sankey",
+          left: 16,
+          right: 150,
+          top: 16,
+          bottom: 16,
+          nodeWidth: 18,
+          nodeGap: 14,
+          draggable: false,
+          emphasis: { disabled: true },
+          data: nodes.map((name, i) => ({
+            name,
+            itemStyle: { color: muted(name, colors3[i % colors3.length]), borderWidth: 0 }
+          })),
+          links: sankeyLinks(spec),
+          lineStyle: { color: "source", opacity: 0.3, curveness: 0.5 },
+          label: {
+            color: TEXT,
+            fontSize: 14,
+            formatter: (p) => spec.labelsOnData ? `${p.name}  ${fmt(p.value)}` : p.name
+          }
+        }
+      ]
+    };
+  }
+  if (spec.type === "pictogram") {
+    const per = spec.perIcon ?? Math.max(1, niceCeil(Math.max(...first.values) / 20, [1, 2, 5, 10]));
+    const icons = first.values.map((v) => Math.round(v / per));
+    const slots = Math.max(1, ...icons);
+    const glyph = {
+      type: "pictorialBar",
+      symbol: HOUSE,
+      symbolRepeat: slots,
+      symbolBoundingData: slots,
+      // Fixed size keeps houses square; ECharts spaces them across each slot.
+      symbolSize: Math.round(Math.min(40, 260 / spec.labels.length)),
+      symbolClip: true,
+      barCategoryGap: "25%"
+    };
+    return {
+      ...base,
+      legend: { show: false },
+      grid: { left: 16, right: 16, top: 36, bottom: 8, containLabel: true },
+      xAxis: { type: "value", max: slots, show: false },
+      yAxis: [
+        {
+          ...rowAxis(),
+          axisLine: { show: false },
+          name: `\u2302 = ${formatValue(per, { ...spec, decimals: Math.min(3, (String(per).split(".")[1] ?? "").length) })}`,
+          nameLocation: "start",
+          nameTextStyle: { color: "#7a7a7a", fontSize: 13, align: "left" }
+        },
+        {
+          ...rowAxis(),
+          position: "right",
+          axisLine: { show: false },
+          data: first.values.map(fmt),
+          axisLabel: {
+            show: spec.labelsOnData,
+            color: colors3[2],
+            fontSize: 15,
+            fontWeight: 600
+          }
+        }
+      ],
+      series: [
+        // Faded full row behind the filled icons.
+        { ...glyph, silent: true, itemStyle: { color: TRACK }, data: icons.map(() => slots) },
+        {
+          ...glyph,
+          barGap: "-100%",
+          z: 3,
+          data: icons.map((v, i) => ({
+            value: v,
+            // Clipping a full row trims the last icon's edge; partial rows clip between icons.
+            symbolClip: v < slots,
+            itemStyle: { color: muted(spec.labels[i], colors3[0]) }
+          }))
+        }
+      ]
+    };
+  }
   if (spec.type === "pie" || spec.type === "donut") {
     return {
       ...base,
@@ -492,37 +1010,32 @@ ${fmt(p.value)}` : p.name
   }
   const horizontal = spec.type === "bar" || spec.type === "stacked-bar";
   const stacked = spec.type.startsWith("stacked");
-  const isLine = spec.type === "line" || spec.type === "area";
-  const category = {
-    type: "category",
-    data: spec.labels,
-    axisLine: { lineStyle: { color: AXIS } },
-    axisTick: { show: false },
-    axisLabel: { color: TEXT, fontSize: 14, interval: 0, hideOverlap: true },
-    boundaryGap: !isLine
-  };
-  const value = {
-    type: "value",
-    max: spec.max,
-    axisLine: { show: false },
-    splitLine: { lineStyle: { color: "#eef0ec" } },
-    axisLabel: {
-      color: "#7a7a7a",
-      fontSize: 13,
-      formatter: (v) => formatValue(v, { ...spec, unit: void 0 })
-    }
-  };
+  const combo = spec.type === "combo";
+  const lineAt = (si) => combo ? (spec.series[si].as ?? (si === 0 ? "bar" : "line")) === "line" : spec.type === "line" || spec.type === "area";
+  const secondaryAt = (si) => combo && spec.series[si].axis === "secondary";
+  const hasSecondary = spec.series.some((_, si) => secondaryAt(si));
+  const secondary = { ...spec, format: spec.secondaryFormat ?? spec.format };
+  const category = categoryAxis(!spec.series.every((_, si) => lineAt(si)));
+  const value = valueAxis();
+  const yAxis = horizontal ? { ...category, inverse: true } : hasSecondary ? [
+    value,
+    { ...valueAxis(secondary), max: void 0, scale: true, splitLine: { show: false } }
+  ] : value;
   return {
     ...base,
     grid: { left: 16, right: 24, top: showLegend ? 48 : 20, bottom: 12, containLabel: true },
     xAxis: horizontal ? value : category,
-    yAxis: horizontal ? { ...category, inverse: true } : value,
+    yAxis,
     series: spec.series.map((s, si) => {
       const color = colors3[si % colors3.length];
+      const isLine = lineAt(si);
+      const own = secondaryAt(si) ? secondary : spec;
       return {
         type: isLine ? "line" : "bar",
         name: s.name,
         stack: stacked ? "total" : void 0,
+        yAxisIndex: secondaryAt(si) ? 1 : 0,
+        z: isLine ? 3 : 2,
         smooth: false,
         symbolSize: 8,
         lineStyle: isLine ? { width: 3 } : void 0,
@@ -538,9 +1051,12 @@ ${fmt(p.value)}` : p.name
         })),
         label: {
           ...labelStyle,
+          // Combo line labels sit over bars; a backing keeps them legible.
+          ...combo && isLine ? { backgroundColor: "#fff", padding: [2, 5], borderRadius: 3 } : {},
+          formatter: (p) => formatValue(p.value, own),
           show: spec.labelsOnData && (!stacked || spec.series.length <= 3),
           position: stacked ? "inside" : horizontal ? "right" : "top",
-          color: stacked ? "#fff" : TEXT
+          color: stacked ? "#fff" : combo && isLine ? color : TEXT
         }
       };
     })
@@ -548,7 +1064,7 @@ ${fmt(p.value)}` : p.name
 }
 var renderer;
 function loadChartRenderer() {
-  renderer ??= import("./echarts-render-2QVSBZ6V.js").then((m) => m.createRenderer());
+  renderer ??= import("./echarts-render-GDCT5QAF.js").then((m) => m.createRenderer());
   return renderer;
 }
 async function renderChartSvg(spec, opts = {}) {
@@ -563,10 +1079,23 @@ async function renderChartSvg(spec, opts = {}) {
   return svg.replace(/^<svg([^>]*?) width="\d+" height="\d+"/, "<svg$1").replace(/^<svg/, `<svg role="img" aria-label="${label}" preserveAspectRatio="xMidYMid meet"`);
 }
 function describeChart(spec) {
-  const parts = spec.series.slice(0, ["pie", "donut", "funnel", "gauge"].includes(spec.type) ? 1 : 6).map(
-    (s) => `${s.name}: ${spec.labels.map((l, i) => `${l} ${formatValue(s.values[i] ?? 0, spec)}`).join(", ")}`
+  const kind = `${spec.type.replace("-", " ")} chart.`;
+  const fmt = (v) => formatValue(v, spec);
+  if (spec.type === "sankey") {
+    const flows = sankeyLinks(spec).map((l) => `${l.source} to ${l.target} ${fmt(l.value)}`);
+    return `${kind} ${flows.join(", ")}.`;
+  }
+  if (spec.type === "bullet") {
+    const [actual, target] = spec.series;
+    const rows = spec.labels.map(
+      (l, i) => `${l} ${fmt(actual.values[i] ?? 0)}${target ? ` against a target of ${fmt(target.values[i] ?? 0)}` : ""}`
+    );
+    return `${kind} ${rows.join(", ")}.`;
+  }
+  const parts = spec.series.slice(0, SINGLE_SERIES_CHARTS.includes(spec.type) ? 1 : 6).map(
+    (s) => `${s.name}: ${spec.labels.map((l, i) => `${l} ${fmt(s.values[i] ?? 0)}`).join(", ")}`
   );
-  return `${spec.type.replace("-", " ")} chart. ${parts.join(". ")}.`;
+  return `${kind} ${parts.join(". ")}.`;
 }
 
 // src/inline.ts
@@ -1074,7 +1603,7 @@ import { z as z5 } from "zod";
 var CHART_SIZE = { wide: { width: 1040, height: 500 }, side: { width: 720, height: 500 } };
 var chart = defineLayout({
   name: "chart",
-  description: "A branded chart (column, bar, stacked, line, area, pie, donut, funnel, gauge, scatter, radar) with an optional takeaway column.",
+  description: "A branded chart (column, bar, stacked, 100% stacked, line, area, combo, pie, donut, treemap, funnel, waterfall, gauge, ring, bullet, dumbbell, heatmap, sankey, pictogram, scatter, radar) with an optional takeaway column.",
   whenToUse: "Numbers that tell a story: sales by quarter, timelines, shares, survey scores. State the takeaway in the title.",
   shape: {
     eyebrow: Text.optional(),
@@ -3939,6 +4468,7 @@ export {
   LOGO_SVG,
   logoLockup,
   CHART_TYPES,
+  SINGLE_SERIES_CHARTS,
   ChartSpec,
   formatValue,
   chartOption,
@@ -3988,4 +4518,4 @@ export {
   inlineDeckImages,
   externalizeDeckImages
 };
-//# sourceMappingURL=chunk-25NZMEQG.js.map
+//# sourceMappingURL=chunk-KQXT376T.js.map