@diagrammo/dgmo 0.48.1 → 0.49.0

package/dist/{chunk-OJR3MQYV.js → chunk-JFPY3UJ7.js}

@@ -1,3 +1,14 @@
+import {
+  computeQuadrantPointLabels,
+  rectCircleOverlap,
+  rectsOverlap
+} from "./chunk-HGN652MU.js";
+import {
+  getExtendedChartLegendGroups,
+  getSimpleChartLegendGroups,
+  parseChart,
+  parseExtendedChart
+} from "./chunk-KQAEKMIX.js";
 import {
   EXPORT_HEIGHT,
   EXPORT_WIDTH,
@@ -9,7 +20,7 @@ import {
 } from "./chunk-U6EQI3U6.js";
 import {
   computeLegendLayout
-} from "./chunk-YAA6IID3.js";
+} from "./chunk-7UEMZREK.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -18,17 +29,12 @@ import {
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_HEIGHT,
   LEGEND_PILL_FONT_SIZE
-} from "./chunk-QOOUC2J5.js";
+} from "./chunk-HQCHYB5F.js";
 import {
   measureText
-} from "./chunk-WCT3NYCV.js";
-import {
-  getExtendedChartLegendGroups,
-  getSimpleChartLegendGroups,
-  parseChart,
-  parseExtendedChart
-} from "./chunk-P235SVAH.js";
+} from "./chunk-5LWQH6QV.js";
 import {
+  contrastText,
   getSegmentColors,
   getSeriesColors,
   hexToHSL,
@@ -38,7 +44,7 @@ import {
 } from "./chunk-P6T66CCZ.js";
 import {
   tagAttrKey
-} from "./chunk-QLCCJEJI.js";
+} from "./chunk-HBVD67XG.js";
 
 // src/utils/legend-svg.ts
 function esc(s) {
@@ -396,6 +402,7 @@ function seriesValue(pt, s) {
 function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle) {
   const data = chart.data;
   const isArea = chart.fill === true;
+  const solid = chart.solidFill === true;
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const seriesCount = Math.max(
     1,
@@ -490,10 +497,11 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
     if (seriesLine !== void 0) g.attr("data-line-number", seriesLine);
     if (isArea) {
       const areaGen = d3area().x((p) => x(p.label) ?? 0).y0(yy(Math.max(yy.domain()[0], 0))).y1((p) => yy(p.v));
-      g.append("path").attr("class", "dgmo-series-area").attr("d", areaGen(pts) ?? "").attr("fill", shapeFill(palette, color, isDark)).attr("stroke", "none");
+      g.append("path").attr("class", "dgmo-series-area").attr("d", areaGen(pts) ?? "").attr("fill", solid ? color : shapeFill(palette, color, isDark)).attr("stroke", "none");
     }
     const lineGen = d3line().x((p) => x(p.label) ?? 0).y((p) => yy(p.v));
     g.append("path").attr("class", "dgmo-series-line").attr("d", lineGen(pts) ?? "").attr("fill", "none").attr("stroke", color).attr("stroke-width", 2.5).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+    g.append("path").attr("class", "dgmo-series-hit").attr("d", lineGen(pts) ?? "").attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 16).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
     const labelColor = mix(color, textColor, 60);
     for (const p of pts) {
       g.append("circle").attr("class", "dgmo-pt").attr("data-series-index", s).attr("data-series-name", name).attr("data-color", color).attr("data-x-index", p.xIndex).attr("data-x-label", p.label).attr("data-value", p.v).attr("data-line-number", p.lineNumber).attr("cx", x(p.label) ?? 0).attr("cy", yy(p.v)).attr("r", 3.5).attr("fill", bgColor).attr("stroke", color).attr("stroke-width", 2);
@@ -547,8 +555,30 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const total = data.reduce((a, d) => a + d.value, 0);
   const cx = width / 2;
   const top = topInset + 12;
-  const cy = top + (height - top) / 2;
-  const radius = Math.min(width / 2 - 220, (height - top) / 2 - 40);
+  const availH = height - top;
+  const cy = top + availH / 2;
+  const labels = data.map((d) => {
+    const pct = Math.round(d.value / total * 100);
+    const nm = chart.noName ? "" : d.label;
+    const tail = [
+      chart.noValue ? "" : fmtNum(d.value),
+      chart.noPercent ? "" : `(${pct}%)`
+    ].filter(Boolean).join(" ");
+    return [nm, tail].filter(Boolean).join(" \u2014 ");
+  });
+  const maxLabelLen = labels.reduce((m, s) => Math.max(m, s.length), 0);
+  const MARGIN2 = 6;
+  const halfW = width / 2 - MARGIN2;
+  const rH = availH / 2 - availH * 0.06;
+  const labelExtent = 1.268 + 0.0428 * maxLabelLen;
+  const rLabeled = Math.min(rH, halfW / labelExtent);
+  const showLabels = maxLabelLen > 0 && rLabeled >= 45;
+  const rPlain = Math.min(rH, halfW * 0.94);
+  const radius = Math.max(8, showLabels ? rLabeled : rPlain);
+  const labelScale = radius / 180;
+  const font = Math.max(7, LABEL_FONT * labelScale);
+  const elbowOut = radius * 0.09;
+  const elbowRun = radius * 0.155;
   const segColors = getSegmentColors(palette, data.length);
   const strokeFor = (i, override) => override ?? segColors[i % segColors.length];
   const arcs = d3pie().sort(null).value((d) => d.value)(data.map((d) => ({ value: d.value })));
@@ -566,26 +596,35 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
       value: `${fmtNum(data[i].value)} (${pct}%)`,
       color: stroke
     });
+    if (!showLabels) return;
     const mid = (a.startAngle + a.endAngle) / 2 - Math.PI / 2;
     const rightSide = Math.cos(mid) >= 0;
     const x0 = Math.cos(mid) * radius;
     const y0 = Math.sin(mid) * radius;
-    const x1 = Math.cos(mid) * (radius + 16);
-    const y1 = Math.sin(mid) * (radius + 16);
-    const x2 = x1 + (rightSide ? 28 : -28);
-    const nm = chart.noName ? "" : data[i].label;
-    const tail = [
-      chart.noValue ? "" : fmtNum(data[i].value),
-      chart.noPercent ? "" : `(${pct}%)`
-    ].filter(Boolean).join(" ");
-    const label = [nm, tail].filter(Boolean).join(" \u2014 ");
+    const x1 = Math.cos(mid) * (radius + elbowOut);
+    const y1 = Math.sin(mid) * (radius + elbowOut);
+    const x2 = x1 + (rightSide ? elbowRun : -elbowRun);
+    const label = labels[i];
     if (label) {
-      g.append("polyline").attr("points", `${x0},${y0} ${x1},${y1} ${x2},${y1}`).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 1);
-      g.append("text").attr("x", x2 + (rightSide ? 4 : -4)).attr("y", y1 + 4).attr("text-anchor", rightSide ? "start" : "end").attr("fill", textColor).attr("font-size", LABEL_FONT).attr("font-family", FONT_FAMILY).text(label);
+      const tag = {
+        line: data[i].lineNumber,
+        key: data[i].label,
+        name: data[i].label,
+        value: `${fmtNum(data[i].value)} (${pct}%)`,
+        color: stroke
+      };
+      tagDatum(
+        g.append("polyline").attr("points", `${x0},${y0} ${x1},${y1} ${x2},${y1}`).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 1),
+        tag
+      );
+      tagDatum(
+        g.append("text").attr("x", x2 + (rightSide ? font * 0.3 : -font * 0.3)).attr("y", y1 + font * 0.3).attr("text-anchor", rightSide ? "start" : "end").attr("fill", stroke).attr("font-size", font).attr("font-family", FONT_FAMILY).text(label),
+        tag
+      );
     }
   });
   if (hasHole && !chart.noCenterTotal) {
-    g.append("text").attr("text-anchor", "middle").attr("y", 8).attr("fill", textColor).attr("font-size", 26).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(total));
+    g.append("text").attr("text-anchor", "middle").attr("y", Math.max(4, 8 * labelScale)).attr("fill", textColor).attr("font-size", Math.max(11, 26 * labelScale)).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(total));
   }
 }
 
@@ -649,13 +688,19 @@ function renderRadar(svg, chart, width, height, colors, palette, isDark, textCol
       const vtx = g.append("circle").attr("cx", x).attr("cy", y).attr("r", 4).attr("fill", color);
       tagDatum(vtx, {
         line: d.lineNumber,
-        key: multi ? `${name}\0${d.label}` : d.label,
+        key: multi ? `${name} ${d.label}` : d.label,
         name: multi ? `${name} \u2014 ${d.label}` : d.label,
         value: fmtNum(v),
         color
       });
       if (!chart.noValue) {
-        g.append("text").attr("x", x).attr("y", y - 8).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        const [lx, ly] = pt(i, v / maxValue * radius + 14);
+        const c = Math.cos(angle(i));
+        const s2 = Math.sin(angle(i));
+        g.append("text").attr("x", lx).attr("y", ly + (s2 < -0.3 ? 0 : s2 > 0.3 ? 11 : 4)).attr(
+          "text-anchor",
+          Math.abs(c) < 0.3 ? "middle" : c > 0 ? "start" : "end"
+        ).attr("fill", multi ? color : textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(fmtNum(v));
       }
     });
   }
@@ -710,26 +755,72 @@ function renderPolarArea(svg, chart, width, height, palette, isDark, textColor,
 }
 
 // src/charts-d3/funnel.ts
-function renderFunnel(svg, chart, width, height, colors, palette, isDark, textColor, topInset) {
+var PAD = 12;
+var MARGIN = 8;
+function renderFunnel(svg, chart, width, height, colors, palette, isDark, topInset) {
   const sorted = [...chart.data].sort((a, b) => b.value - a.value);
   const n = sorted.length;
   if (n === 0) return;
   const solid = chart.solidFill === true;
-  const plotLeft = width * 0.2;
-  const plotW = width * 0.6;
-  const cx = width / 2;
   const top = topInset + 8;
   const bottom = height - 30;
   const H = bottom - top;
   const bandH = H / n;
   const maxValue = sorted[0].value || 1;
-  const minW = plotW * 0.08;
-  const scaleW = (v) => Math.max(minW, v / maxValue * plotW);
+  const sideFont = Math.max(11, Math.min(21, width / 52));
+  const est = (s, f) => s.length * f * 0.6;
+  const pctLabelFor = (i) => {
+    const pct = sorted[i].value / sorted[i - 1].value * 100;
+    return pct < 1 ? "<1%" : `${Math.round(pct)}%`;
+  };
+  const rightTextFor = (i, valueInside) => {
+    const parts = [];
+    if (!chart.noValue && !valueInside) parts.push(fmtNum(sorted[i].value));
+    if (!chart.noPercent && i > 0) parts.push(pctLabelFor(i));
+    return parts.join(" \xB7 ");
+  };
+  const nameW = chart.noName ? 0 : Math.max(...sorted.map((d) => est(d.label, sideFont))) + PAD;
+  const bandWidthsAt = (plotW2, i) => {
+    const minW = plotW2 * 0.14;
+    const scale = (v) => Math.max(minW, v / maxValue * plotW2);
+    const topW = scale(sorted[i].value);
+    const botW = i < n - 1 ? scale(sorted[i + 1].value) : topW * 0.7;
+    return { topW, botW };
+  };
+  const valueSizeAt = (plotW2, i) => {
+    const { topW, botW } = bandWidthsAt(plotW2, i);
+    const wMid = (topW + botW) / 2;
+    const label = fmtNum(sorted[i].value);
+    const fitByWidth = (wMid - 16) / (label.length * 0.6);
+    return Math.min(bandH * 0.55, fitByWidth);
+  };
+  const valueInsideAt = (plotW2, i) => !chart.noValue && valueSizeAt(plotW2, i) >= 13;
+  const layout = (rightW2) => {
+    const spanL = MARGIN + nameW;
+    const spanR = width - MARGIN - rightW2;
+    const plotW2 = Math.max(width * 0.25, Math.min(width * 0.6, spanR - spanL));
+    const lo = spanL + plotW2 / 2;
+    const hi = spanR - plotW2 / 2;
+    const cx2 = lo > hi ? (spanL + spanR) / 2 : Math.min(Math.max(width / 2, lo), hi);
+    return { plotW: plotW2, cx: cx2 };
+  };
+  const maxRightEst = (plotW2) => Math.max(
+    0,
+    ...sorted.map(
+      (_, i) => est(
+        rightTextFor(i, plotW2 === null ? true : valueInsideAt(plotW2, i)),
+        sideFont
+      )
+    )
+  );
+  let rightW = maxRightEst(null) + PAD;
+  let { plotW, cx } = layout(rightW);
+  rightW = maxRightEst(plotW) + PAD;
+  ({ plotW, cx } = layout(rightW));
   sorted.forEach((d, i) => {
     const stroke = d.color ?? colors[chart.data.indexOf(d) % colors.length];
     const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
-    const topW = scaleW(d.value);
-    const botW = i < n - 1 ? scaleW(sorted[i + 1].value) : minW;
+    const { topW, botW } = bandWidthsAt(plotW, i);
     const y0 = top + i * bandH;
     const y1 = y0 + bandH;
     const seg = svg.append("polygon").attr(
@@ -744,13 +835,26 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, textCo
       color: stroke
     });
     const yMid = (y0 + y1) / 2;
+    const halfEdge = (topW + botW) / 4;
     if (!chart.noName) {
-      svg.append("line").attr("x1", plotLeft - 8).attr("y1", yMid).attr("x2", cx - topW / 2).attr("y2", yMid).attr("stroke", textColor).attr("stroke-opacity", 0.3);
-      svg.append("text").attr("x", plotLeft - 12).attr("y", yMid + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(d.label);
+      svg.append("text").attr("x", cx - halfEdge - PAD).attr("y", yMid + sideFont * 0.35).attr("text-anchor", "end").attr("fill", stroke).attr("font-size", sideFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(d.label);
     }
-    if (!chart.noValue) {
-      svg.append("line").attr("x1", cx + topW / 2).attr("y1", yMid).attr("x2", plotLeft + plotW + 8).attr("y2", yMid).attr("stroke", textColor).attr("stroke-opacity", 0.3);
-      svg.append("text").attr("x", plotLeft + plotW + 12).attr("y", yMid + 4).attr("text-anchor", "start").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
+    const showPct = !chart.noPercent && i > 0;
+    const valueInside = valueInsideAt(plotW, i);
+    if (valueInside) {
+      const valueSize = valueSizeAt(plotW, i);
+      const valueFill = solid ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : stroke;
+      svg.append("text").attr("x", cx).attr("y", yMid + valueSize * 0.35).attr("text-anchor", "middle").attr("fill", valueFill).attr("font-size", valueSize).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
+    }
+    const showValueRight = !chart.noValue && !valueInside;
+    if (showValueRight || showPct) {
+      const text = svg.append("text").attr("x", cx + halfEdge + PAD).attr("y", yMid + sideFont * 0.35).attr("text-anchor", "start").attr("font-size", sideFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY);
+      if (showValueRight) {
+        text.append("tspan").attr("fill", stroke).text(fmtNum(d.value));
+      }
+      if (showPct) {
+        text.append("tspan").attr("fill", stroke).text(showValueRight ? ` \xB7 ${pctLabelFor(i)}` : pctLabelFor(i));
+      }
     }
   });
 }
@@ -801,11 +905,19 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
   const plotH = height - top - bottom;
   const cw = plotW / ncols;
   const ch = plotH / nrows;
-  const cellFont = Math.max(11, Math.min(18, Math.min(cw, ch) * 0.28));
+  const REF = 100;
+  const maxValueW = Math.max(
+    1,
+    ...rows.flatMap((r) => r.values.map((v) => measureText(fmtNum(v), REF)))
+  );
+  const cellFont = Math.max(
+    11,
+    Math.min(ch * 0.55, cw * 0.7 * REF / maxValueW)
+  );
   const rotate = cols.some((c) => measureText(c, 12) > cw * 0.85);
   cols.forEach((c, ci) => {
     const x = left + ci * cw + cw / 2;
-    const t = svg.append("text").attr("fill", textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(c);
+    const t = svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-col-key").attr("data-filter-value", c).attr("fill", textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(c);
     if (rotate) {
       t.attr("transform", `translate(${x},${top - 8}) rotate(-40)`).attr(
         "text-anchor",
@@ -816,30 +928,97 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
     }
   });
   rows.forEach((row, ri) => {
-    svg.append("text").attr("x", left - 10).attr("y", top + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
+    svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-row-key").attr("data-filter-value", row.label).attr("x", left - 10).attr("y", top + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
     row.values.forEach((v, ci) => {
       const t = maxValue === minValue ? 0.5 : (v - minValue) / (maxValue - minValue);
       const cell = gradientAt(t);
       const colLabel = cols[ci] ?? `Col ${ci + 1}`;
-      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", bgColor).attr("stroke-width", 2);
+      const cellKey = `${row.label} \xB7 ${colLabel}`;
+      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", bgColor).attr("stroke-width", 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
       tagDatum(r, {
         line: row.lineNumber,
-        key: row.label,
-        name: `${row.label} \xB7 ${colLabel}`,
+        key: cellKey,
+        name: cellKey,
         value: fmtNum(v),
         color: cell
       });
       if (!chart.noValue) {
-        svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(cell)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(cell)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        tagDatum(label, {
+          line: row.lineNumber,
+          key: cellKey,
+          name: cellKey,
+          value: fmtNum(v),
+          color: cell
+        });
+        label.attr("data-row-key", row.label).attr("data-col-key", colLabel);
       }
     });
   });
 }
 
 // src/charts-d3/scatter.ts
-import { scaleLinear as scaleLinear3 } from "d3-scale";
+import { scaleLinear as scaleLinear3, scaleSqrt } from "d3-scale";
 var FILL_OPACITY = 0.65;
 var DEFAULT_SIZE = 15;
+var LABEL_FONT2 = 11;
+var SIZEVAL_FONT = 20;
+var SIZEVAL_LINE = SIZEVAL_FONT + 4;
+var SIZEVAL_LABEL_FONT = 11;
+var SIZEVAL_LABEL_LINE = SIZEVAL_LABEL_FONT + 4;
+var SIZEVAL_BOLD_FACTOR = 1.08;
+function placeScatterHoverValue(cx, cy, r, labelText, valueText, labelRects, circles, bounds) {
+  const w = Math.max(
+    measureText(valueText, SIZEVAL_FONT) * SIZEVAL_BOLD_FACTOR,
+    measureText(labelText, SIZEVAL_LABEL_FONT)
+  ) + 6;
+  const h = SIZEVAL_LINE + SIZEVAL_LABEL_LINE;
+  const gap = 8;
+  const toResult = (rect2, anchor, numberFirst) => {
+    const numY = numberFirst ? rect2.y + SIZEVAL_LINE - 6 : rect2.y + h - 6;
+    const lblY = numberFirst ? rect2.y + h - 4 : rect2.y + SIZEVAL_LABEL_LINE - 4;
+    return {
+      x: anchor === "middle" ? cx : anchor === "start" ? rect2.x : rect2.x + rect2.w,
+      y: numY,
+      labelY: lblY,
+      anchor,
+      rect: rect2
+    };
+  };
+  const gens = [
+    (off) => ({
+      rect: { x: cx - w / 2, y: cy + r + off, w, h },
+      anchor: "middle",
+      numberFirst: true
+    }),
+    (off) => ({
+      rect: { x: cx - w / 2, y: cy - r - off - h, w, h },
+      anchor: "middle",
+      numberFirst: false
+    }),
+    (off) => ({
+      rect: { x: cx + r + off, y: cy - h / 2, w, h },
+      anchor: "start",
+      numberFirst: true
+    }),
+    (off) => ({
+      rect: { x: cx - r - off - w, y: cy - h / 2, w, h },
+      anchor: "end",
+      numberFirst: true
+    })
+  ];
+  for (let off = gap; off <= gap + 96; off += 12) {
+    for (const gen of gens) {
+      const { rect: rect2, anchor, numberFirst } = gen(off);
+      if (rect2.x < bounds.left || rect2.x + rect2.w > bounds.right || rect2.y < bounds.top || rect2.y + rect2.h > bounds.bottom)
+        continue;
+      if (labelRects.some((lr) => rectsOverlap(rect2, lr))) continue;
+      if (circles.some((c) => rectCircleOverlap(rect2, c))) continue;
+      return toResult(rect2, anchor, numberFirst);
+    }
+  }
+  return toResult({ x: cx - w / 2, y: cy + r + gap, w, h }, "middle", true);
+}
 function renderScatter(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, topInset) {
   const points = chart.scatterPoints ?? [];
   if (points.length === 0) return;
@@ -869,8 +1048,17 @@ function renderScatter(svg, chart, width, height, colors, palette, isDark, textC
   };
   const plotW = width - m.left - m.right;
   const plotH = height - m.top - m.bottom;
-  const x = scaleLinear3().domain([Math.floor(xMin - xPad), Math.ceil(xMax + xPad)]).range([m.left, m.left + plotW]);
-  const y = scaleLinear3().domain([Math.floor(yMin - yPad), Math.ceil(yMax + yPad)]).range([m.top + plotH, m.top]);
+  const sizes = points.map(
+    (p) => hasSize ? p.size ?? DEFAULT_SIZE : DEFAULT_SIZE
+  );
+  const rBudget = Math.max(12, Math.min(plotW, plotH) * 0.14);
+  const rScale = scaleSqrt().domain([0, Math.max(...sizes) || 1]).range([0, rBudget]);
+  const radii = points.map(
+    (_, i) => hasSize ? Math.max(5, rScale(sizes[i])) : DEFAULT_SIZE / 2
+  );
+  const rInset = Math.max(...radii) + 4;
+  const x = scaleLinear3().domain([Math.floor(xMin - xPad), Math.ceil(xMax + xPad)]).range([m.left + rInset, m.left + plotW - rInset]);
+  const y = scaleLinear3().domain([Math.floor(yMin - yPad), Math.ceil(yMax + yPad)]).range([m.top + plotH - rInset, m.top + rInset]);
   svg.append("rect").attr("class", "dgmo-plot-rect").attr("x", m.left).attr("y", m.top).attr("width", plotW).attr("height", plotH).attr("fill", "transparent").attr("pointer-events", "none");
   for (const t of y.ticks(6)) {
     const yy = y(t);
@@ -882,21 +1070,73 @@ function renderScatter(svg, chart, width, height, colors, palette, isDark, textC
     svg.append("line").attr("x1", xx).attr("x2", xx).attr("y1", m.top).attr("y2", m.top + plotH).attr("stroke", mutedColor).attr("stroke-opacity", 0.25);
     svg.append("text").attr("class", "dgmo-tick").attr("x", xx).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
   }
+  const placedLabels = chart.noName ? null : computeQuadrantPointLabels(
+    points.map((p, i) => ({
+      label: p.name,
+      cx: x(p.x),
+      cy: y(p.y),
+      r: radii[i]
+    })),
+    {
+      left: m.left,
+      top: m.top,
+      right: m.left + plotW,
+      bottom: m.top + plotH
+    },
+    [],
+    DEFAULT_SIZE / 2,
+    LABEL_FONT2
+  );
+  const plotBounds = {
+    left: m.left,
+    top: m.top,
+    right: m.left + plotW,
+    bottom: m.top + plotH
+  };
+  const ownLabelRect = (i) => {
+    const pl = placedLabels?.[i];
+    if (!pl) return [];
+    const w = measureText(points[i].name, LABEL_FONT2) + 8;
+    const h = LABEL_FONT2 + 4;
+    const lx = pl.anchor === "middle" ? pl.x - w / 2 : pl.anchor === "end" ? pl.x - w : pl.x;
+    return [{ x: lx, y: pl.y - h / 2, w, h }];
+  };
   points.forEach((p, i) => {
     const stroke = p.color ?? (p.category ? catColor(p.category, catIndex.get(p.category) ?? 0) : colors[i % colors.length]);
-    const r = (hasSize ? p.size ?? DEFAULT_SIZE : DEFAULT_SIZE) / 2;
+    const r = radii[i];
     const dot = svg.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", r).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(dot, {
       line: p.lineNumber,
       key: p.name,
       name: p.category ? `${p.name} \xB7 ${p.category}` : p.name,
-      value: `(${fmtNum(p.x)}, ${fmtNum(p.y)})`,
+      value: p.size !== void 0 ? `(${fmtNum(p.x)}, ${fmtNum(p.y)}) \xB7 ${chart.sizelabel ?? "size"}: ${fmtNum(p.size)}` : `(${fmtNum(p.x)}, ${fmtNum(p.y)})`,
       color: stroke
     });
     dot.attr("data-axval-x", fmtNum(p.x)).attr("data-axval-y", fmtNum(p.y));
-    if (p.category) dot.attr("data-category", p.category);
-    if (!chart.noName) {
-      svg.append("text").attr("x", x(p.x)).attr("y", y(p.y) - r - 5).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", 11).attr("font-family", FONT_FAMILY).text(p.name);
+    if (p.size !== void 0) {
+      const sizeLabel = chart.sizelabel ?? "size";
+      const pos = placeScatterHoverValue(
+        x(p.x),
+        y(p.y),
+        r,
+        sizeLabel,
+        fmtNum(p.size),
+        ownLabelRect(i),
+        [],
+        plotBounds
+      );
+      dot.attr("data-size", fmtNum(p.size)).attr("data-size-label", sizeLabel).attr("data-sizeval-x", pos.x).attr("data-sizeval-y", pos.y).attr("data-sizeval-ly", pos.labelY).attr("data-sizeval-anchor", pos.anchor);
+    }
+    if (p.category) {
+      dot.attr("data-category", p.category);
+      dot.attr("data-series-name", p.category);
+    }
+    if (placedLabels) {
+      const placed = placedLabels[i];
+      if (placed.connectorLine) {
+        svg.append("line").attr("class", "dgmo-ptlabel").attr("data-line-number", p.lineNumber).attr("x1", placed.connectorLine.x1).attr("y1", placed.connectorLine.y1).attr("x2", placed.connectorLine.x2).attr("y2", placed.connectorLine.y2).attr("stroke", stroke).attr("stroke-width", 1).attr("opacity", 0.5);
+      }
+      svg.append("text").attr("class", "dgmo-ptlabel").attr("data-line-number", p.lineNumber).attr("x", placed.x).attr("y", placed.y).attr("text-anchor", placed.anchor).attr("dominant-baseline", "central").attr("fill", stroke).attr("font-size", LABEL_FONT2).attr("font-family", FONT_FAMILY).text(p.name);
     }
   });
   drawXAxisTitle(
@@ -1355,7 +1595,6 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         seriesColors,
         palette,
         isDark,
-        textColor,
         hasTitle ? 52 : 24
       );
       return true;
@@ -1455,4 +1694,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-OJR3MQYV.js.map
+//# sourceMappingURL=chunk-JFPY3UJ7.js.map

package/dist/{chunk-5MLYVTYM.js → chunk-K6HNAY5V.js}

@@ -1,7 +1,7 @@
 import {
   extractColor,
   measureIndent
-} from "./chunk-Y3J7VR52.js";
+} from "./chunk-ZNQX6QWH.js";
 import {
   makeDgmoError
 } from "./chunk-CXK4DZH3.js";
@@ -73,4 +73,4 @@ function tryCollectNote(lines, index, indent, palette, diagnostics) {
 export {
   tryCollectNote
 };
-//# sourceMappingURL=chunk-5MLYVTYM.js.map
+//# sourceMappingURL=chunk-K6HNAY5V.js.map

package/dist/{chunk-P235SVAH.js → chunk-KQAEKMIX.js}

@@ -5,7 +5,7 @@ import {
   normalizeNumericToken,
   parseFirstLine,
   parseSeriesNames
-} from "./chunk-Y3J7VR52.js";
+} from "./chunk-ZNQX6QWH.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColorWithDiagnostic
@@ -1054,4 +1054,4 @@ export {
   getSimpleChartLegendGroups,
   getExtendedChartLegendGroups
 };
-//# sourceMappingURL=chunk-P235SVAH.js.map
+//# sourceMappingURL=chunk-KQAEKMIX.js.map

package/dist/{chunk-7DTWEFUE.js → chunk-KUBBJ2CD.js}

@@ -1,6 +1,3 @@
-import {
-  layoutClassDiagram
-} from "./chunk-WBRZJOEC.js";
 import {
   NOTE_BADGE_RADIUS,
   noteConnectorPoints,
@@ -12,16 +9,19 @@ import {
   extractExportSvg,
   runInExportContainer
 } from "./chunk-JTSMEYIZ.js";
+import {
+  layoutClassDiagram
+} from "./chunk-CMCR5WBW.js";
 import {
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
 } from "./chunk-3CIOJ5YJ.js";
-import {
-  renderIntegratedLegend
-} from "./chunk-PWIHZ6NJ.js";
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-4UDKKGHH.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -32,17 +32,17 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-QOOUC2J5.js";
+} from "./chunk-HQCHYB5F.js";
 import {
   measureText
-} from "./chunk-WCT3NYCV.js";
+} from "./chunk-5LWQH6QV.js";
 import {
   contrastText,
   shapeFill
 } from "./chunk-P6T66CCZ.js";
 import {
   parseClassDiagram
-} from "./chunk-RUNNI6VE.js";
+} from "./chunk-ZXL6MB4R.js";
 
 // src/class/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -407,4 +407,4 @@ export {
   renderClassDiagram,
   renderClassDiagramForExport
 };
-//# sourceMappingURL=chunk-7DTWEFUE.js.map
+//# sourceMappingURL=chunk-KUBBJ2CD.js.map

package/dist/{chunk-BUVJFRPY.js → chunk-KV6Y2HE6.js}

@@ -7,10 +7,10 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-QLCCJEJI.js";
+} from "./chunk-HBVD67XG.js";
 import {
   tryCollectNote
-} from "./chunk-5MLYVTYM.js";
+} from "./chunk-K6HNAY5V.js";
 import {
   resolveNotes
 } from "./chunk-FMDSF3OV.js";
@@ -30,7 +30,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-Y3J7VR52.js";
+} from "./chunk-ZNQX6QWH.js";
 import {
   makeDgmoError,
   suggest
@@ -884,4 +884,4 @@ export {
   looksLikeBoxesAndLines,
   parseBoxesAndLines
 };
-//# sourceMappingURL=chunk-BUVJFRPY.js.map
+//# sourceMappingURL=chunk-KV6Y2HE6.js.map