@diagrammo/dgmo 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/d3.ts

@@ -1074,6 +1074,29 @@ function tokenizeFreeformText(text: string): WordCloudWord[] {
 // Slope Chart Renderer
 // ============================================================
 
+/**
+ * Resolves vertical label collisions by nudging overlapping items apart.
+ * Takes items with a naturalY (center) and height, returns adjusted center Y positions.
+ */
+function resolveVerticalCollisions(
+  items: { naturalY: number; height: number }[],
+  minGap: number
+): number[] {
+  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<number>(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;
+}
+
 const SLOPE_MARGIN = { top: 80, bottom: 40, left: 80 };
 const SLOPE_LABEL_FONT_SIZE = 14;
 const SLOPE_CHAR_WIDTH = 8; // approximate px per character at 14px
@@ -1205,28 +1228,83 @@ export function renderSlopeChart(
     .x((_d, i) => xScale(periods[i])!)
     .y((d) => yScale(d));
 
-  // Render each data series
-  data.forEach((item, idx) => {
+  // Pre-compute per-series data for label collision resolution
+  const seriesInfo = data.map((item, idx) => {
     const color = item.color ?? colors[idx % colors.length];
-
-    // Wrap each series in a group with data-line-number for sync adapter
-    const seriesG = g
-      .append('g')
-      .attr('class', 'slope-series')
-      .attr('data-line-number', String(item.lineNumber));
-
-    // Tooltip content – overall change for this series
     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>');
 
+    // Compute right-side label text and wrapping info
+    const lastX = xScale(periods[periods.length - 1])!;
+    const labelText = `${lastVal} — ${item.label}`;
+    const availableWidth = rightMargin - 15;
+    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
+
+    let labelLineCount = 1;
+    let wrappedLines: string[] | null = null;
+    if (labelText.length > maxChars) {
+      const words = labelText.split(/\s+/);
+      const lines: string[] = [];
+      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,
+    };
+  });
+
+  // --- Resolve left-side label collisions per non-last period column ---
+  const leftLabelHeight = 20; // 16px font needs ~20px to avoid glyph overlap
+  const leftLabelCollisions: Map<number, number[]> = 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));
+  }
+
+  // --- Resolve right-side label collisions ---
+  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);
+
+  // Render each data series
+  data.forEach((item, idx) => {
+    const si = seriesInfo[idx];
+    const color = si.color;
+
+    // Wrap each series in a group with data-line-number for sync adapter
+    const seriesG = g
+      .append('g')
+      .attr('class', 'slope-series')
+      .attr('data-line-number', String(item.lineNumber));
+
     // Line
     seriesG.append('path')
       .datum(item.values)
@@ -1244,10 +1322,10 @@ export function renderSlopeChart(
       .attr('d', lineGen)
       .style('cursor', onClickItem ? 'pointer' : 'default')
       .on('mouseenter', (event: MouseEvent) =>
-        showTooltip(tooltip, tipHtml, event)
+        showTooltip(tooltip, si.tipHtml, event)
       )
       .on('mousemove', (event: MouseEvent) =>
-        showTooltip(tooltip, tipHtml, event)
+        showTooltip(tooltip, si.tipHtml, event)
       )
       .on('mouseleave', () => hideTooltip(tooltip))
       .on('click', () => {
@@ -1269,10 +1347,10 @@ export function renderSlopeChart(
         .attr('stroke-width', 1.5)
         .style('cursor', onClickItem ? 'pointer' : 'default')
         .on('mouseenter', (event: MouseEvent) =>
-          showTooltip(tooltip, tipHtml, event)
+          showTooltip(tooltip, si.tipHtml, event)
         )
         .on('mousemove', (event: MouseEvent) =>
-          showTooltip(tooltip, tipHtml, event)
+          showTooltip(tooltip, si.tipHtml, event)
         )
         .on('mouseleave', () => hideTooltip(tooltip))
         .on('click', () => {
@@ -1283,59 +1361,41 @@ export function renderSlopeChart(
       const isFirst = i === 0;
       const isLast = i === periods.length - 1;
       if (!isLast) {
+        const adjustedY = leftLabelCollisions.get(i)![idx];
         seriesG.append('text')
           .attr('x', isFirst ? x - 10 : x)
-          .attr('y', y)
+          .attr('y', adjustedY)
           .attr('dy', '0.35em')
           .attr('text-anchor', isFirst ? 'end' : 'middle')
-          .attr('fill', textColor)
+          .attr('fill', color)
           .attr('font-size', '16px')
           .text(val.toString());
       }
     });
 
     // Series label with value at end of line — wraps if it exceeds available space
-    const lastX = xScale(periods[periods.length - 1])!;
-    const lastY = yScale(lastVal);
-    const labelText = `${lastVal} — ${item.label}`;
-    const availableWidth = rightMargin - 15;
-    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
+    const adjustedLastY = rightAdjustedY[idx];
 
     const labelEl = seriesG
       .append('text')
-      .attr('x', lastX + 10)
-      .attr('y', lastY)
+      .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 (labelText.length <= maxChars) {
-      labelEl.attr('dy', '0.35em').text(labelText);
+    if (!si.wrappedLines) {
+      labelEl.attr('dy', '0.35em').text(si.labelText);
     } else {
-      // Wrap into lines that fit the available width
-      const words = labelText.split(/\s+/);
-      const lines: string[] = [];
-      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((line, li) => {
+      si.wrappedLines.forEach((line, li) => {
         labelEl
           .append('tspan')
-          .attr('x', lastX + 10)
+          .attr('x', si.lastX + 10)
           .attr(
             'dy',
             li === 0

package/src/echarts.ts

@@ -1309,21 +1309,45 @@ function makeGridAxis(
   gridOpacity: number,
   label?: string,
   data?: string[],
-  nameGapOverride?: number
+  nameGapOverride?: number,
+  chartWidthHint?: number
 ): Record<string, unknown> {
   const defaultGap = type === 'value' ? 75 : 40;
+
+  // Compute category label sizing: font size and width constraint
+  let catFontSize = 16;
+  let catLabelExtras: Record<string, unknown> = {};
+  if (type === 'category' && data && data.length > 0) {
+    const maxLabelLen = Math.max(...data.map((l) => l.length));
+    const count = data.length;
+    // Reduce font size based on density and label length
+    if (count > 10 || maxLabelLen > 20) catFontSize = 10;
+    else if (count > 5 || maxLabelLen > 14) catFontSize = 11;
+    else if (maxLabelLen > 8) catFontSize = 12;
+
+    // Constrain labels to their allotted slot width so ECharts wraps instead of hiding
+    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: string) =>
-          value.replace(/([a-z])([A-Z])/g, '$1\n$2').replace(/ /g, '\n'),
+          value.replace(/([a-z])([A-Z])/g, '$1\n$2'),
+        ...catLabelExtras,
       }),
     },
     splitLine: { lineStyle: { color: splitLineColor, opacity: gridOpacity } },
@@ -1343,7 +1367,8 @@ function makeGridAxis(
 export function buildEChartsOptionFromChart(
   parsed: ParsedChart,
   palette: PaletteColors,
-  isDark: boolean
+  isDark: boolean,
+  chartWidth?: number
 ): EChartsOption {
   if (parsed.error) return {};
 
@@ -1375,15 +1400,15 @@ export function buildEChartsOptionFromChart(
 
   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);
+        ? 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':
@@ -1405,7 +1430,8 @@ function buildBarOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === 'horizontal';
@@ -1420,7 +1446,7 @@ function buildBarOption(
   const hCatGap = isHorizontal && yLabel
     ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16)
     : undefined;
-  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 : undefined);
   const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
 
   // xAxis is always the bottom axis, yAxis is always the left axis in ECharts
@@ -1466,7 +1492,8 @@ function buildLineOption(
   splitLineColor: string,
   gridOpacity: number,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
@@ -1489,7 +1516,7 @@ function buildLineOption(
       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, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -1518,7 +1545,8 @@ function buildMultiLineOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
@@ -1565,7 +1593,7 @@ function buildMultiLineOption(
       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, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series,
   };
@@ -1581,7 +1609,8 @@ function buildAreaOption(
   splitLineColor: string,
   gridOpacity: number,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
@@ -1604,7 +1633,7 @@ function buildAreaOption(
       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, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -1808,7 +1837,8 @@ function buildBarStackedOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === 'horizontal';
@@ -1845,8 +1875,11 @@ function buildBarStackedOption(
   const hCatGap = isHorizontal && yLabel
     ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16)
     : undefined;
-  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 : undefined);
+  // For horizontal bars with a legend, use a smaller nameGap so the xlabel
+  // stays close to the axis ticks rather than drifting toward the legend.
+  const hValueGap = isHorizontal && xLabel ? 40 : undefined;
+  const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel, undefined, hValueGap);
 
   return {
     backgroundColor: 'transparent',
@@ -1919,7 +1952,7 @@ export async function renderEChartsForExport(
   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 '';