@diagrammo/dgmo 0.3.1 → 0.4.0

package/src/echarts.ts

@@ -82,13 +82,19 @@ export interface ParsedEChart {
 // Nord Colors for Charts
 // ============================================================
 
-import { resolveColor } from './colors';
 import type { PaletteColors } from './palettes';
 import { getSeriesColors, getSegmentColors } from './palettes';
 import { parseChart } from './chart';
 import type { ParsedChart } from './chart';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { collectIndentedValues } from './utils/parsing';
+import { collectIndentedValues, extractColor, parseSeriesNames } from './utils/parsing';
+
+// ============================================================
+// Shared Constants
+// ============================================================
+
+const EMPHASIS_SELF = { focus: 'self' as const, blurScope: 'global' as const };
+const CHART_BASE: Pick<EChartsOption, 'backgroundColor' | 'animation'> = { backgroundColor: 'transparent', animation: false };
 
 // ============================================================
 // Parser
@@ -133,13 +139,10 @@ export function parseEChart(
     // Check for markdown-style category header: ## Category Name or ## Category Name(color)
     const mdCategoryMatch = trimmed.match(/^#{2,}\s+(.+)$/);
     if (mdCategoryMatch) {
-      let catName = mdCategoryMatch[1].trim();
-      const catColorMatch = catName.match(/\(([^)]+)\)\s*$/);
-      if (catColorMatch) {
-        const resolved = resolveColor(catColorMatch[1].trim(), palette);
+      const { label: catName, color: catColor } = extractColor(mdCategoryMatch[1].trim(), palette);
+      if (catColor) {
         if (!result.categoryColors) result.categoryColors = {};
-        catName = catName.substring(0, catColorMatch.index!).trim();
-        result.categoryColors[catName] = resolved;
+        result.categoryColors[catName] = catColor;
       }
       currentCategory = catName;
       continue;
@@ -194,32 +197,13 @@ export function parseEChart(
     }
 
     if (key === 'series') {
-      let rawNames: string[];
-      if (value) {
-        result.series = value;
-        rawNames = value.split(',').map((s) => s.trim()).filter(Boolean);
-      } else {
-        const collected = collectIndentedValues(lines, i);
-        i = collected.newIndex;
-        rawNames = collected.values;
-        result.series = rawNames.join(', ');
+      const parsed = parseSeriesNames(value, lines, i, palette);
+      i = parsed.newIndex;
+      result.series = parsed.series;
+      if (parsed.names.length > 1) {
+        result.seriesNames = parsed.names;
       }
-      const names: string[] = [];
-      const nameColors: (string | undefined)[] = [];
-      for (const raw of rawNames) {
-        const colorMatch = raw.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          nameColors.push(resolveColor(colorMatch[1].trim(), palette));
-          names.push(raw.substring(0, colorMatch.index!).trim());
-        } else {
-          nameColors.push(undefined);
-          names.push(raw);
-        }
-      }
-      if (names.length === 1) {
-        result.series = names[0];
-      }
-      if (nameColors.some(Boolean)) result.seriesNameColors = nameColors;
+      if (parsed.nameColors.some(Boolean)) result.seriesNameColors = parsed.nameColors;
       continue;
     }
 
@@ -296,13 +280,7 @@ export function parseEChart(
 
     // For function charts, treat non-numeric values as function expressions
     if (result.type === 'function') {
-      let fnName = trimmed.substring(0, colonIndex).trim();
-      let fnColor: string | undefined;
-      const colorMatch = fnName.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        fnColor = resolveColor(colorMatch[1].trim(), palette);
-        fnName = fnName.substring(0, colorMatch.index!).trim();
-      }
+      const { label: fnName, color: fnColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
       if (!result.functions) result.functions = [];
       result.functions.push({
         name: fnName,
@@ -319,13 +297,7 @@ export function parseEChart(
         /^(-?[\d.]+)\s*,\s*(-?[\d.]+)(?:\s*,\s*(-?[\d.]+))?$/
       );
       if (scatterMatch) {
-        let scatterName = trimmed.substring(0, colonIndex).trim();
-        let scatterColor: string | undefined;
-        const colorMatch = scatterName.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          scatterColor = resolveColor(colorMatch[1].trim(), palette);
-          scatterName = scatterName.substring(0, colorMatch.index!).trim();
-        }
+        const { label: scatterName, color: scatterColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
         if (!result.scatterPoints) result.scatterPoints = [];
         result.scatterPoints.push({
           name: scatterName,
@@ -354,14 +326,7 @@ export function parseEChart(
     // Otherwise treat as data point (label: value)
     const numValue = parseFloat(value);
     if (!isNaN(numValue)) {
-      // Use the original case for the label (before lowercasing)
-      let rawLabel = trimmed.substring(0, colonIndex).trim();
-      let pointColor: string | undefined;
-      const colorMatch = rawLabel.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        pointColor = resolveColor(colorMatch[1].trim(), palette);
-        rawLabel = rawLabel.substring(0, colorMatch.index!).trim();
-      }
+      const { label: rawLabel, color: pointColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
       result.data.push({
         label: rawLabel,
         value: numValue,
@@ -416,6 +381,20 @@ export function parseEChart(
 // ECharts Option Builder
 // ============================================================
 
+/**
+ * Computes the shared set of theme-derived variables used by all chart option builders.
+ */
+function buildChartCommons(parsed: { title?: string; error?: string | null }, palette: PaletteColors, isDark: boolean) {
+  const textColor = palette.text;
+  const axisLineColor = palette.border;
+  const splitLineColor = palette.border;
+  const gridOpacity = isDark ? 0.7 : 0.55;
+  const colors = getSeriesColors(palette);
+  const titleConfig = parsed.title ? { text: parsed.title, left: 'center' as const, top: 8, textStyle: { color: textColor, fontSize: 20, fontWeight: 'bold' as const, fontFamily: FONT_FAMILY } } : undefined;
+  const tooltipTheme = { backgroundColor: palette.surface, borderColor: palette.border, textStyle: { color: palette.text } };
+  return { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme };
+}
+
 /**
  * Converts parsed echart data to ECharts option object.
  */
@@ -424,37 +403,12 @@ export function buildEChartsOption(
   palette: PaletteColors,
   isDark: boolean
 ): EChartsOption {
-  const textColor = palette.text;
-  const axisLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.55;
-  const colors = getSeriesColors(palette);
-
   if (parsed.error) {
     // Return empty option, error will be shown separately
     return {};
   }
 
-  // Common title configuration
-  const titleConfig = parsed.title
-    ? {
-        text: parsed.title,
-        left: 'center' as const,
-        top: 8,
-        textStyle: {
-          color: textColor,
-          fontSize: 20,
-          fontWeight: 'bold' as const,
-          fontFamily: FONT_FAMILY,
-        },
-      }
-    : undefined;
-
-  // Shared tooltip theme so tooltips match light/dark mode
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text },
-  };
+  const { textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
 
   // Sankey chart has different structure
   if (parsed.type === 'sankey') {
@@ -555,8 +509,7 @@ function buildSankeyOption(
   }));
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       show: false,
@@ -633,8 +586,7 @@ function buildChordOption(
   }));
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'item',
@@ -776,16 +728,12 @@ function buildFunctionOption(
       itemStyle: {
         color: fnColor,
       },
-      emphasis: {
-        focus: 'self' as const,
-        blurScope: 'global' as const,
-      },
+      emphasis: EMPHASIS_SELF,
     };
   });
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'axis',
@@ -971,8 +919,7 @@ function buildScatterOption(
   const yPad = (yMax - yMin) * 0.1 || 1;
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip,
     ...(legendData && {
@@ -1072,8 +1019,7 @@ function buildHeatmapOption(
   });
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'item',
@@ -1150,8 +1096,7 @@ function buildHeatmapOption(
           fontWeight: 'bold' as const,
         },
         emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
+          ...EMPHASIS_SELF,
           itemStyle: {
             shadowBlur: 10,
             shadowColor: 'rgba(0, 0, 0, 0.5)',
@@ -1206,8 +1151,7 @@ function buildFunnelOption(
   };
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'item',
@@ -1245,8 +1189,7 @@ function buildFunnelOption(
           lineStyle: { color: textColor, opacity: 0.3 },
         },
         emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
+          ...EMPHASIS_SELF,
           label: {
             fontSize: 15,
           },
@@ -1309,21 +1252,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,47 +1310,24 @@ function makeGridAxis(
 export function buildEChartsOptionFromChart(
   parsed: ParsedChart,
   palette: PaletteColors,
-  isDark: boolean
+  isDark: boolean,
+  chartWidth?: number
 ): EChartsOption {
   if (parsed.error) return {};
 
-  const textColor = palette.text;
-  const axisLineColor = palette.border;
-  const splitLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.55;
-  const colors = getSeriesColors(palette);
-
-  const titleConfig = parsed.title
-    ? {
-        text: parsed.title,
-        left: 'center' as const,
-        top: 8,
-        textStyle: {
-          color: textColor,
-          fontSize: 20,
-          fontWeight: 'bold' as const,
-          fontFamily: FONT_FAMILY,
-        },
-      }
-    : undefined;
-
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text },
-  };
+  const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(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);
+        ? 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':
@@ -1395,6 +1339,19 @@ export function buildEChartsOptionFromChart(
   }
 }
 
+/**
+ * Builds a standard chart grid object with consistent spacing rules.
+ */
+function makeChartGrid(options: { xLabel?: string; yLabel?: string; hasTitle: boolean; hasLegend?: boolean }): Record<string, unknown> {
+  return {
+    left: options.yLabel ? '12%' : '3%',
+    right: '4%',
+    bottom: options.hasLegend ? '15%' : options.xLabel ? '10%' : '3%',
+    top: options.hasTitle ? '15%' : '5%',
+    containLabel: true,
+  };
+}
+
 // ── Bar ──────────────────────────────────────────────────────
 
 function buildBarOption(
@@ -1405,7 +1362,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,37 +1378,27 @@ 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
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'axis',
       ...tooltipTheme,
       axisPointer: { type: 'shadow' },
     },
-    grid: {
-      left: yLabel ? '12%' : '3%',
-      right: '4%',
-      bottom: xLabel ? '10%' : '3%',
-      top: parsed.title ? '15%' : '5%',
-      containLabel: true,
-    },
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
     yAxis: isHorizontal ? categoryAxis : valueAxis,
     series: [
       {
         type: 'bar',
         data,
-        emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
-        },
+        emphasis: EMPHASIS_SELF,
       },
     ],
   };
@@ -1466,7 +1414,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;
@@ -1474,22 +1423,15 @@ function buildLineOption(
   const values = parsed.data.map((d) => d.value);
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'axis',
       ...tooltipTheme,
       axisPointer: { type: 'line' },
     },
-    grid: {
-      left: yLabel ? '12%' : '3%',
-      right: '4%',
-      bottom: xLabel ? '10%' : '3%',
-      top: parsed.title ? '15%' : '5%',
-      containLabel: true,
-    },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -1499,10 +1441,7 @@ function buildLineOption(
         symbolSize: 8,
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
-        emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
-        },
+        emphasis: EMPHASIS_SELF,
       },
     ],
   };
@@ -1518,7 +1457,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 ?? [];
@@ -1537,16 +1477,12 @@ function buildMultiLineOption(
       symbolSize: 8,
       lineStyle: { color, width: 3 },
       itemStyle: { color },
-      emphasis: {
-        focus: 'self' as const,
-        blurScope: 'global' as const,
-      },
+      emphasis: EMPHASIS_SELF,
     };
   });
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'axis',
@@ -1558,14 +1494,8 @@ function buildMultiLineOption(
       bottom: 10,
       textStyle: { color: textColor },
     },
-    grid: {
-      left: yLabel ? '12%' : '3%',
-      right: '4%',
-      bottom: '15%',
-      top: parsed.title ? '15%' : '5%',
-      containLabel: true,
-    },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series,
   };
@@ -1581,7 +1511,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;
@@ -1589,22 +1520,15 @@ function buildAreaOption(
   const values = parsed.data.map((d) => d.value);
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'axis',
       ...tooltipTheme,
       axisPointer: { type: 'line' },
     },
-    grid: {
-      left: yLabel ? '12%' : '3%',
-      right: '4%',
-      bottom: xLabel ? '10%' : '3%',
-      top: parsed.title ? '15%' : '5%',
-      containLabel: true,
-    },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -1615,10 +1539,7 @@ function buildAreaOption(
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
-        emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
-        },
+        emphasis: EMPHASIS_SELF,
       },
     ],
   };
@@ -1652,8 +1573,7 @@ function buildPieOption(
   }));
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'item',
@@ -1671,10 +1591,7 @@ function buildPieOption(
           fontFamily: FONT_FAMILY,
         },
         labelLine: { show: true },
-        emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
-        },
+        emphasis: EMPHASIS_SELF,
       },
     ],
   };
@@ -1701,8 +1618,7 @@ function buildRadarOption(
   }));
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'item',
@@ -1744,10 +1660,7 @@ function buildRadarOption(
             },
           },
         ],
-        emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
-        },
+        emphasis: EMPHASIS_SELF,
       },
     ],
   };
@@ -1769,8 +1682,7 @@ function buildPolarAreaOption(
   }));
 
   return {
-    backgroundColor: 'transparent',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'item',
@@ -1789,10 +1701,7 @@ function buildPolarAreaOption(
           fontFamily: FONT_FAMILY,
         },
         labelLine: { show: true },
-        emphasis: {
-          focus: 'self' as const,
-          blurScope: 'global' as const,
-        },
+        emphasis: EMPHASIS_SELF,
       },
     ],
   };
@@ -1808,7 +1717,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';
@@ -1835,22 +1745,21 @@ function buildBarStackedOption(
         fontWeight: 'bold' as const,
         fontFamily: FONT_FAMILY,
       },
-      emphasis: {
-        focus: 'self' as const,
-        blurScope: 'global' as const,
-      },
+      emphasis: EMPHASIS_SELF,
     };
   });
 
   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',
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: 'axis',
@@ -1862,13 +1771,7 @@ function buildBarStackedOption(
       bottom: 10,
       textStyle: { color: textColor },
     },
-    grid: {
-      left: yLabel ? '12%' : '3%',
-      right: '4%',
-      bottom: '15%',
-      top: parsed.title ? '15%' : '5%',
-      containLabel: true,
-    },
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
     yAxis: isHorizontal ? categoryAxis : valueAxis,
     series,
@@ -1882,17 +1785,7 @@ function buildBarStackedOption(
 const ECHART_EXPORT_WIDTH = 1200;
 const ECHART_EXPORT_HEIGHT = 800;
 
-const STANDARD_CHART_TYPES = new Set([
-  'bar',
-  'line',
-  'multi-line',
-  'area',
-  'pie',
-  'doughnut',
-  'radar',
-  'polar-area',
-  'bar-stacked',
-]);
+import { STANDARD_CHART_TYPES } from './dgmo-router';
 
 /**
  * Renders an ECharts diagram to SVG using server-side rendering.
@@ -1919,7 +1812,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 '';