@taloswork/ose-shared 0.1.12 → 0.1.14

package/skills/document/bin/deck-chart.cjs

@@ -168,23 +168,32 @@ function renderChartSvg(spec, opts) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" class="talos-chart-svg" data-chart-type="${type}" ${size} viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${aria}" style="display:block;overflow:visible;font-family:var(--font-body, inherit);font-size:${base}px">${body}</svg>`;
   return { svg, warnings, errors };
 }
-function legendRow(names, colors, x, y, base, maxW) {
-  let cx = x;
-  let cy = y;
+function legendRow(names, colors, x, y, base, maxW, centre = false) {
   const size = Math.round(base * 0.75);
   const rowH = Math.round(base * 1.6);
-  const parts = [];
+  const rows = [[]];
+  let rowW = 0;
   names.forEach((name, i) => {
     const w = size + 6 + textW(name, base) + 18;
-    if (cx > x && cx + w > x + maxW) {
-      cx = x;
-      cy += rowH;
+    if (rowW > 0 && rowW + w > maxW) {
+      rows.push([]);
+      rowW = 0;
     }
-    parts.push(`<rect x="${r1(cx)}" y="${r1(cy + (rowH - size) / 2 - 2)}" width="${size}" height="${size}" rx="2" style="fill:${colors[i]}"/>`);
-    parts.push(`<text x="${r1(cx + size + 6)}" y="${r1(cy + rowH / 2 + base * 0.35 - 2)}" style="fill:${TXT}">${esc(name)}</text>`);
-    cx += w;
+    rows[rows.length - 1].push({ name, color: colors[i], w });
+    rowW += w;
   });
-  return [parts.join(""), cy - y + rowH];
+  const parts = [];
+  rows.forEach((row, ri) => {
+    const used = row.reduce((sum, it) => sum + it.w, 0) - 18;
+    let cx = centre ? x + Math.max(0, (maxW - used) / 2) : x;
+    const cy = y + ri * rowH;
+    for (const it of row) {
+      parts.push(`<rect x="${r1(cx)}" y="${r1(cy + (rowH - size) / 2 - 2)}" width="${size}" height="${size}" rx="2" style="fill:${it.color}"/>`);
+      parts.push(`<text x="${r1(cx + size + 6)}" y="${r1(cy + rowH / 2 + base * 0.35 - 2)}" style="fill:${TXT}">${esc(it.name)}</text>`);
+      cx += it.w;
+    }
+  });
+  return [parts.join(""), rows.length * rowH];
 }
 function seriesColors(n) {
   return n.series.length === 1 ? [SINGLE] : n.series.map((_, i) => RAMP[i]);
@@ -468,7 +477,7 @@ function radarBody(n, W, H, base, spec, label, warnings) {
   const parts = [];
   let top = 0;
   if (n.series.length > 1) {
-    const [lg, h] = legendRow(n.series.map((s) => s.name || "\u2014"), colors, 0, 0, base, W);
+    const [lg, h] = legendRow(n.series.map((s) => s.name || "\u2014"), colors, 0, 0, base, W, true);
     parts.push(lg);
     top = h + 4;
   }