@diagrammo/dgmo 0.3.1 → 0.3.2

package/dist/index.d.cts

@@ -334,7 +334,7 @@ declare function buildEChartsOption(parsed: ParsedEChart, palette: PaletteColors
  * Converts a ParsedChart into an EChartsOption.
  * Renders standard chart types (bar, line, pie, etc.) with ECharts.
  */
-declare function buildEChartsOptionFromChart(parsed: ParsedChart, palette: PaletteColors, isDark: boolean): EChartsOption;
+declare function buildEChartsOptionFromChart(parsed: ParsedChart, palette: PaletteColors, isDark: boolean, chartWidth?: number): EChartsOption;
 /**
  * Renders an ECharts diagram to SVG using server-side rendering.
  * Mirrors the `renderD3ForExport` API — returns an SVG string or empty string on failure.

package/dist/index.d.ts

@@ -334,7 +334,7 @@ declare function buildEChartsOption(parsed: ParsedEChart, palette: PaletteColors
  * Converts a ParsedChart into an EChartsOption.
  * Renders standard chart types (bar, line, pie, etc.) with ECharts.
  */
-declare function buildEChartsOptionFromChart(parsed: ParsedChart, palette: PaletteColors, isDark: boolean): EChartsOption;
+declare function buildEChartsOptionFromChart(parsed: ParsedChart, palette: PaletteColors, isDark: boolean, chartWidth?: number): EChartsOption;
 /**
  * Renders an ECharts diagram to SVG using server-side rendering.
  * Mirrors the `renderD3ForExport` API — returns an SVG string or empty string on failure.

package/dist/index.js

@@ -4196,19 +4196,36 @@ function resolveAxisLabels(parsed) {
     yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
   };
 }
-function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride) {
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint) {
   const defaultGap = type === "value" ? 75 : 40;
+  let catFontSize = 16;
+  let catLabelExtras = {};
+  if (type === "category" && data && data.length > 0) {
+    const maxLabelLen = Math.max(...data.map((l) => l.length));
+    const count = data.length;
+    if (count > 10 || maxLabelLen > 20) catFontSize = 10;
+    else if (count > 5 || maxLabelLen > 14) catFontSize = 11;
+    else if (maxLabelLen > 8) catFontSize = 12;
+    if (chartWidthHint && count > 0) {
+      const availPerLabel = Math.floor(chartWidthHint * 0.85 / count);
+      catLabelExtras = {
+        width: availPerLabel,
+        overflow: "break"
+      };
+    }
+  }
   return {
     type,
     ...data && { data },
     axisLine: { lineStyle: { color: axisLineColor } },
     axisLabel: {
       color: textColor,
-      fontSize: type === "category" && data ? data.length > 10 ? 11 : data.length > 5 ? 12 : 16 : 16,
+      fontSize: type === "category" && data ? catFontSize : 16,
       fontFamily: FONT_FAMILY,
       ...type === "category" && {
         interval: 0,
-        formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2").replace(/ /g, "\n")
+        formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2"),
+        ...catLabelExtras
       }
     },
     splitLine: { lineStyle: { color: splitLineColor, opacity: gridOpacity } },
@@ -4220,7 +4237,7 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
     }
   };
 }
-function buildEChartsOptionFromChart(parsed, palette, isDark) {
+function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
   if (parsed.error) return {};
   const textColor = palette.text;
   const axisLineColor = palette.border;
@@ -4245,13 +4262,13 @@ function buildEChartsOptionFromChart(parsed, palette, isDark) {
   };
   switch (parsed.type) {
     case "bar":
-      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
     case "bar-stacked":
-      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
     case "line":
-      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
+      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "area":
-      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
+      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "pie":
       return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme, false);
     case "doughnut":
@@ -4262,7 +4279,7 @@ function buildEChartsOptionFromChart(parsed, palette, isDark) {
       return buildPolarAreaOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme);
   }
 }
-function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
@@ -4271,7 +4288,7 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     itemStyle: { color: d.color ?? colors[i % colors.length] }
   }));
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
-  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap);
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap, !isHorizontal ? chartWidth : void 0);
   const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
   return {
     backgroundColor: "transparent",
@@ -4303,7 +4320,7 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     ]
   };
 }
-function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme) {
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -4324,7 +4341,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4342,7 +4359,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
     ]
   };
 }
-function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
@@ -4386,12 +4403,12 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series
   };
 }
-function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme) {
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -4412,7 +4429,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4572,7 +4589,7 @@ function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipThe
     ]
   };
 }
-function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -4604,8 +4621,9 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
     };
   });
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
-  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap);
-  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap, !isHorizontal ? chartWidth : void 0);
+  const hValueGap = isHorizontal && xLabel ? 40 : void 0;
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel, void 0, hValueGap);
   return {
     backgroundColor: "transparent",
     animation: false,
@@ -4642,7 +4660,7 @@ async function renderEChartsForExport(content, theme, palette, options) {
   if (chartType && STANDARD_CHART_TYPES.has(chartType)) {
     const parsed = parseChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark);
+    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
   } else {
     const parsed = parseEChart(content, effectivePalette);
     if (parsed.error) return "";
@@ -13780,6 +13798,19 @@ function tokenizeFreeformText(text) {
   }
   return Array.from(counts.entries()).map(([text2, count]) => ({ text: text2, weight: count, lineNumber: 0 })).sort((a, b) => b.weight - a.weight);
 }
+function resolveVerticalCollisions(items, minGap) {
+  if (items.length === 0) return [];
+  const sorted = items.map((it, i) => ({ ...it, idx: i })).sort((a, b) => a.naturalY - b.naturalY);
+  const adjustedY = new Array(items.length);
+  let prevBottom = -Infinity;
+  for (const item of sorted) {
+    const halfH = item.height / 2;
+    const top = Math.max(item.naturalY - halfH, prevBottom + minGap);
+    adjustedY[item.idx] = top + halfH;
+    prevBottom = top + item.height;
+  }
+  return adjustedY;
+}
 function renderSlopeChart(container, parsed, palette, isDark, onClickItem, exportDims) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { periods, data, title } = parsed;
@@ -13830,25 +13861,80 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
     g.append("line").attr("x1", x).attr("y1", 0).attr("x2", x).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
   }
   const lineGen = d3Shape6.line().x((_d, i) => xScale(periods[i])).y((d) => yScale(d));
-  data.forEach((item, idx) => {
+  const seriesInfo = data.map((item, idx) => {
     const color = item.color ?? colors[idx % colors.length];
-    const seriesG = g.append("g").attr("class", "slope-series").attr("data-line-number", String(item.lineNumber));
     const firstVal = item.values[0];
     const lastVal = item.values[item.values.length - 1];
     const absChange = lastVal - firstVal;
     const pctChange = firstVal !== 0 ? absChange / firstVal * 100 : null;
     const sign = absChange > 0 ? "+" : "";
-    const pctPart = pctChange !== null ? ` (${sign}${pctChange.toFixed(1)}%)` : "";
-    const tipLines = [`${sign}${absChange}`];
+    const tipLines = [`${sign}${parseFloat(absChange.toFixed(2))}`];
     if (pctChange !== null) tipLines.push(`${sign}${pctChange.toFixed(1)}%`);
     const tipHtml = tipLines.join("<br>");
+    const lastX = xScale(periods[periods.length - 1]);
+    const labelText = `${lastVal} \u2014 ${item.label}`;
+    const availableWidth = rightMargin - 15;
+    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
+    let labelLineCount = 1;
+    let wrappedLines = null;
+    if (labelText.length > maxChars) {
+      const words = labelText.split(/\s+/);
+      const lines = [];
+      let current = "";
+      for (const word of words) {
+        const test = current ? `${current} ${word}` : word;
+        if (test.length > maxChars && current) {
+          lines.push(current);
+          current = word;
+        } else {
+          current = test;
+        }
+      }
+      if (current) lines.push(current);
+      labelLineCount = lines.length;
+      wrappedLines = lines;
+    }
+    const lineHeight = SLOPE_LABEL_FONT_SIZE * 1.2;
+    const labelHeight = labelLineCount === 1 ? SLOPE_LABEL_FONT_SIZE : labelLineCount * lineHeight;
+    return {
+      item,
+      idx,
+      color,
+      firstVal,
+      lastVal,
+      tipHtml,
+      lastX,
+      labelText,
+      maxChars,
+      wrappedLines,
+      labelHeight
+    };
+  });
+  const leftLabelHeight = 20;
+  const leftLabelCollisions = /* @__PURE__ */ new Map();
+  for (let pi = 0; pi < periods.length - 1; pi++) {
+    const entries = data.map((item) => ({
+      naturalY: yScale(item.values[pi]),
+      height: leftLabelHeight
+    }));
+    leftLabelCollisions.set(pi, resolveVerticalCollisions(entries, 4));
+  }
+  const rightEntries = seriesInfo.map((si) => ({
+    naturalY: yScale(si.lastVal),
+    height: Math.max(si.labelHeight, SLOPE_LABEL_FONT_SIZE * 1.4)
+  }));
+  const rightAdjustedY = resolveVerticalCollisions(rightEntries, 4);
+  data.forEach((item, idx) => {
+    const si = seriesInfo[idx];
+    const color = si.color;
+    const seriesG = g.append("g").attr("class", "slope-series").attr("data-line-number", String(item.lineNumber));
     seriesG.append("path").datum(item.values).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2.5).attr("d", lineGen);
     seriesG.append("path").datum(item.values).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 14).attr("d", lineGen).style("cursor", onClickItem ? "pointer" : "default").on(
       "mouseenter",
-      (event) => showTooltip(tooltip, tipHtml, event)
+      (event) => showTooltip(tooltip, si.tipHtml, event)
     ).on(
       "mousemove",
-      (event) => showTooltip(tooltip, tipHtml, event)
+      (event) => showTooltip(tooltip, si.tipHtml, event)
     ).on("mouseleave", () => hideTooltip(tooltip)).on("click", () => {
       if (onClickItem && item.lineNumber) onClickItem(item.lineNumber);
     });
@@ -13857,46 +13943,30 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
       const y = yScale(val);
       seriesG.append("circle").attr("cx", x).attr("cy", y).attr("r", 4).attr("fill", color).attr("stroke", bgColor).attr("stroke-width", 1.5).style("cursor", onClickItem ? "pointer" : "default").on(
         "mouseenter",
-        (event) => showTooltip(tooltip, tipHtml, event)
+        (event) => showTooltip(tooltip, si.tipHtml, event)
       ).on(
         "mousemove",
-        (event) => showTooltip(tooltip, tipHtml, event)
+        (event) => showTooltip(tooltip, si.tipHtml, event)
       ).on("mouseleave", () => hideTooltip(tooltip)).on("click", () => {
         if (onClickItem && item.lineNumber) onClickItem(item.lineNumber);
       });
       const isFirst = i === 0;
       const isLast = i === periods.length - 1;
       if (!isLast) {
-        seriesG.append("text").attr("x", isFirst ? x - 10 : x).attr("y", y).attr("dy", "0.35em").attr("text-anchor", isFirst ? "end" : "middle").attr("fill", textColor).attr("font-size", "16px").text(val.toString());
+        const adjustedY = leftLabelCollisions.get(i)[idx];
+        seriesG.append("text").attr("x", isFirst ? x - 10 : x).attr("y", adjustedY).attr("dy", "0.35em").attr("text-anchor", isFirst ? "end" : "middle").attr("fill", color).attr("font-size", "16px").text(val.toString());
       }
     });
-    const lastX = xScale(periods[periods.length - 1]);
-    const lastY = yScale(lastVal);
-    const labelText = `${lastVal} \u2014 ${item.label}`;
-    const availableWidth = rightMargin - 15;
-    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
-    const labelEl = seriesG.append("text").attr("x", lastX + 10).attr("y", lastY).attr("text-anchor", "start").attr("fill", color).attr("font-size", `${SLOPE_LABEL_FONT_SIZE}px`).attr("font-weight", "500");
-    if (labelText.length <= maxChars) {
-      labelEl.attr("dy", "0.35em").text(labelText);
+    const adjustedLastY = rightAdjustedY[idx];
+    const labelEl = seriesG.append("text").attr("x", si.lastX + 10).attr("y", adjustedLastY).attr("text-anchor", "start").attr("fill", color).attr("font-size", `${SLOPE_LABEL_FONT_SIZE}px`).attr("font-weight", "500");
+    if (!si.wrappedLines) {
+      labelEl.attr("dy", "0.35em").text(si.labelText);
     } else {
-      const words = labelText.split(/\s+/);
-      const lines = [];
-      let current = "";
-      for (const word of words) {
-        const test = current ? `${current} ${word}` : word;
-        if (test.length > maxChars && current) {
-          lines.push(current);
-          current = word;
-        } else {
-          current = test;
-        }
-      }
-      if (current) lines.push(current);
       const lineHeight = SLOPE_LABEL_FONT_SIZE * 1.2;
-      const totalHeight = (lines.length - 1) * lineHeight;
+      const totalHeight = (si.wrappedLines.length - 1) * lineHeight;
       const startDy = -totalHeight / 2;
-      lines.forEach((line7, li) => {
-        labelEl.append("tspan").attr("x", lastX + 10).attr(
+      si.wrappedLines.forEach((line7, li) => {
+        labelEl.append("tspan").attr("x", si.lastX + 10).attr(
           "dy",
           li === 0 ? `${startDy + SLOPE_LABEL_FONT_SIZE * 0.35}px` : `${lineHeight}px`
         ).text(line7);