@diagrammo/dgmo 0.1.6 → 0.2.0

package/dist/index.js

@@ -549,6 +549,15 @@ var init_colors = __esm({
   }
 });
 
+// src/fonts.ts
+var FONT_FAMILY;
+var init_fonts = __esm({
+  "src/fonts.ts"() {
+    "use strict";
+    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
+  }
+});
+
 // src/palettes/registry.ts
 function isValidHex(value) {
   return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
@@ -1595,15 +1604,6 @@ var init_palettes = __esm({
   }
 });
 
-// src/fonts.ts
-var FONT_FAMILY;
-var init_fonts = __esm({
-  "src/fonts.ts"() {
-    "use strict";
-    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
-  }
-});
-
 // src/sequence/renderer.ts
 var renderer_exports = {};
 __export(renderer_exports, {
@@ -2456,16 +2456,16 @@ var init_renderer = __esm({
 // src/dgmo-router.ts
 init_parser();
 var DGMO_CHART_TYPE_MAP = {
-  // Chart.js
-  bar: "chartjs",
-  line: "chartjs",
-  "multi-line": "chartjs",
-  area: "chartjs",
-  pie: "chartjs",
-  doughnut: "chartjs",
-  radar: "chartjs",
-  "polar-area": "chartjs",
-  "bar-stacked": "chartjs",
+  // Standard charts (via ECharts)
+  bar: "echart",
+  line: "echart",
+  "multi-line": "echart",
+  area: "echart",
+  pie: "echart",
+  doughnut: "echart",
+  radar: "echart",
+  "polar-area": "echart",
+  "bar-stacked": "echart",
   // ECharts
   scatter: "echart",
   sankey: "echart",
@@ -2498,10 +2498,8 @@ function parseDgmoChartType(content) {
   return null;
 }
 
-// src/chartjs.ts
+// src/chart.ts
 init_colors();
-init_palettes();
-import "chartjs-plugin-datalabels";
 var VALID_TYPES = /* @__PURE__ */ new Set([
   "bar",
   "line",
@@ -2515,7 +2513,7 @@ var VALID_TYPES = /* @__PURE__ */ new Set([
 var TYPE_ALIASES = {
   "multi-line": "line"
 };
-function parseChartJs(content, palette) {
+function parseChart(content, palette) {
   const lines = content.split("\n");
   const result = {
     type: "bar",
@@ -2633,459 +2631,12 @@ function parseChartJs(content, palette) {
   }
   return result;
 }
-function buildChartJsConfig(parsed, palette, _isDark) {
-  const textColor = palette.text;
-  const gridColor = palette.border + "80";
-  const crosshairColor = palette.border + "60";
-  const colors = getSeriesColors(palette);
-  const verticalCrosshairPlugin = {
-    id: "verticalCrosshair",
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    afterDraw(chart) {
-      const tooltip = chart.tooltip;
-      if (!tooltip || !tooltip.getActiveElements().length) return;
-      const { ctx, chartArea } = chart;
-      const x = tooltip.caretX;
-      ctx.save();
-      ctx.beginPath();
-      ctx.moveTo(x, chartArea.top);
-      ctx.lineTo(x, chartArea.bottom);
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = crosshairColor;
-      ctx.stroke();
-      ctx.restore();
-    }
-  };
-  const labels = parsed.data.map((d) => d.label);
-  const values = parsed.data.map((d) => d.value);
-  const perPointColors = parsed.data.map(
-    (d, i) => d.color ?? colors[i % colors.length]
-  );
-  const titlePlugin = parsed.title ? {
-    display: true,
-    text: parsed.title,
-    color: textColor,
-    font: { size: 18, weight: "bold" },
-    padding: { bottom: 16 }
-  } : { display: false };
-  const tooltipConfig = {
-    backgroundColor: palette.surface,
-    titleColor: palette.text,
-    bodyColor: palette.text,
-    borderColor: palette.border,
-    borderWidth: 1
-  };
-  const isHorizontalChart = parsed.orientation === "horizontal";
-  const resolvedXLabel = parsed.xlabel ?? (isHorizontalChart ? parsed.label : void 0);
-  const resolvedYLabel = parsed.ylabel ?? (isHorizontalChart ? void 0 : parsed.label);
-  const xAxisTitle = resolvedXLabel ? { display: true, text: resolvedXLabel, color: textColor } : void 0;
-  const yAxisTitle = resolvedYLabel ? { display: true, text: resolvedYLabel, color: textColor } : void 0;
-  if (parsed.type === "radar") {
-    const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
-    const radarGridColor = palette.border + "60";
-    const radarGridOverlayPlugin = {
-      id: "radarGridOverlay",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      afterDatasetsDraw(chart) {
-        const scale = chart.scales.r;
-        if (!scale) return;
-        const ticks = scale.ticks;
-        if (!ticks || ticks.length < 1) return;
-        const { ctx } = chart;
-        const pointCount = chart.data.labels?.length ?? 0;
-        if (pointCount < 3) return;
-        ctx.save();
-        ctx.strokeStyle = radarGridColor;
-        ctx.lineWidth = 1;
-        for (let i = 0; i < ticks.length; i++) {
-          const dist = scale.getDistanceFromCenterForValue(
-            ticks[i].value
-          );
-          if (dist <= 0) continue;
-          ctx.beginPath();
-          for (let p = 0; p < pointCount; p++) {
-            const pos = scale.getPointPosition(p, dist);
-            if (p === 0) ctx.moveTo(pos.x, pos.y);
-            else ctx.lineTo(pos.x, pos.y);
-          }
-          ctx.closePath();
-          ctx.stroke();
-        }
-        const outerDist = scale.getDistanceFromCenterForValue(
-          ticks[ticks.length - 1].value
-        );
-        for (let p = 0; p < pointCount; p++) {
-          const pos = scale.getPointPosition(p, outerDist);
-          ctx.beginPath();
-          ctx.moveTo(scale.xCenter, scale.yCenter);
-          ctx.lineTo(pos.x, pos.y);
-          ctx.stroke();
-        }
-        ctx.restore();
-      }
-    };
-    return {
-      type: "radar",
-      data: {
-        labels,
-        datasets: [
-          {
-            label: parsed.series ?? "Value",
-            data: values,
-            backgroundColor: radarColor,
-            borderColor: "transparent",
-            borderWidth: 0,
-            pointBackgroundColor: radarColor,
-            pointRadius: 5
-          }
-        ]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: false,
-        plugins: {
-          legend: { display: false },
-          title: titlePlugin,
-          tooltip: tooltipConfig,
-          datalabels: {
-            display: true,
-            color: textColor,
-            backgroundColor: palette.bg + "cc",
-            borderRadius: 3,
-            padding: { top: 2, bottom: 2, left: 4, right: 4 },
-            font: { size: 11, weight: "bold" },
-            anchor: "center",
-            align: "center",
-            formatter: (value) => value.toString()
-          }
-        },
-        scales: {
-          r: {
-            beginAtZero: true,
-            ticks: {
-              // Hide tick labels - we show actual values on data points instead
-              display: false
-            },
-            grid: {
-              // Hide default grid - we draw it on top via plugin
-              display: false
-            },
-            angleLines: {
-              // Hide default angle lines - we draw them on top via plugin
-              display: false
-            },
-            pointLabels: {
-              color: textColor,
-              font: { size: 12, weight: "bold" }
-            }
-          }
-        }
-      },
-      plugins: [radarGridOverlayPlugin]
-    };
-  }
-  if (parsed.type === "polar-area") {
-    const polarConnectorPlugin = {
-      id: "polarConnectorLines",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      afterDatasetsDraw(chart) {
-        const meta = chart.getDatasetMeta(0);
-        if (!meta?.data?.length) return;
-        const { ctx } = chart;
-        ctx.save();
-        ctx.strokeStyle = textColor;
-        ctx.lineWidth = 1;
-        meta.data.forEach((arc) => {
-          const {
-            startAngle,
-            endAngle,
-            outerRadius,
-            x: cx,
-            y: cy
-          } = arc.getProps(["startAngle", "endAngle", "outerRadius", "x", "y"]);
-          const midAngle = (startAngle + endAngle) / 2;
-          const r1 = outerRadius + 2;
-          const r2 = outerRadius + 14;
-          ctx.beginPath();
-          ctx.moveTo(
-            cx + Math.cos(midAngle) * r1,
-            cy + Math.sin(midAngle) * r1
-          );
-          ctx.lineTo(
-            cx + Math.cos(midAngle) * r2,
-            cy + Math.sin(midAngle) * r2
-          );
-          ctx.stroke();
-        });
-        ctx.restore();
-      }
-    };
-    const polarTitlePlugin = parsed.title ? {
-      display: true,
-      text: parsed.title,
-      color: textColor,
-      font: { size: 18, weight: "bold" },
-      padding: { bottom: 24 }
-    } : { display: false };
-    return {
-      type: "polarArea",
-      data: {
-        labels,
-        datasets: [
-          {
-            label: parsed.series ?? "Value",
-            data: values,
-            backgroundColor: perPointColors,
-            borderWidth: 0
-          }
-        ]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: false,
-        layout: { padding: { top: 10, bottom: 40, left: 60, right: 60 } },
-        plugins: {
-          legend: { display: false },
-          title: polarTitlePlugin,
-          tooltip: tooltipConfig,
-          datalabels: {
-            display: true,
-            color: textColor,
-            font: { weight: "bold" },
-            formatter: (_value, ctx) => labels[ctx.dataIndex] ?? "",
-            anchor: "end",
-            align: "end",
-            offset: 16
-          }
-        },
-        scales: {
-          r: {
-            ticks: { display: false },
-            grid: { color: gridColor }
-          }
-        }
-      },
-      plugins: [polarConnectorPlugin]
-    };
-  }
-  if (parsed.type === "pie" || parsed.type === "doughnut") {
-    const pieConnectorPlugin = {
-      id: "pieConnectorLines",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      afterDatasetsDraw(chart) {
-        const meta = chart.getDatasetMeta(0);
-        if (!meta?.data?.length) return;
-        const { ctx } = chart;
-        ctx.save();
-        ctx.strokeStyle = textColor;
-        ctx.lineWidth = 1;
-        meta.data.forEach((arc) => {
-          const {
-            startAngle,
-            endAngle,
-            outerRadius,
-            x: cx,
-            y: cy
-          } = arc.getProps(["startAngle", "endAngle", "outerRadius", "x", "y"]);
-          const midAngle = (startAngle + endAngle) / 2;
-          const r1 = outerRadius + 2;
-          const r2 = outerRadius + 14;
-          ctx.beginPath();
-          ctx.moveTo(
-            cx + Math.cos(midAngle) * r1,
-            cy + Math.sin(midAngle) * r1
-          );
-          ctx.lineTo(
-            cx + Math.cos(midAngle) * r2,
-            cy + Math.sin(midAngle) * r2
-          );
-          ctx.stroke();
-        });
-        ctx.restore();
-      }
-    };
-    const pieTitlePlugin = parsed.title ? {
-      display: true,
-      text: parsed.title,
-      color: textColor,
-      font: { size: 18, weight: "bold" },
-      padding: { bottom: 24 }
-    } : { display: false };
-    return {
-      type: parsed.type,
-      data: {
-        labels,
-        datasets: [
-          {
-            label: parsed.series ?? "Value",
-            data: values,
-            backgroundColor: perPointColors,
-            borderWidth: 0
-          }
-        ]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: false,
-        // radius is valid for pie/doughnut at runtime but not in the strict type
-        radius: "70%",
-        layout: { padding: { top: 10, bottom: 40, left: 60, right: 60 } },
-        plugins: {
-          legend: { display: false },
-          title: pieTitlePlugin,
-          tooltip: tooltipConfig,
-          datalabels: {
-            display: true,
-            color: textColor,
-            font: { weight: "bold" },
-            formatter: (_value, ctx) => labels[ctx.dataIndex] ?? "",
-            anchor: "end",
-            align: "end",
-            offset: 16
-          }
-        }
-      },
-      plugins: [pieConnectorPlugin]
-    };
-  }
-  const isMultiSeries = parsed.type === "bar-stacked" || parsed.type === "line" && parsed.seriesNames;
-  if (isMultiSeries) {
-    const seriesNames = parsed.seriesNames ?? ["Value"];
-    const isHorizontal2 = parsed.orientation === "horizontal";
-    const isMultiLine = parsed.type === "line";
-    const datasets = seriesNames.map((name, seriesIdx) => {
-      const data = parsed.data.map((dp) => {
-        if (seriesIdx === 0) return dp.value;
-        return dp.extraValues?.[seriesIdx - 1] ?? 0;
-      });
-      const color = parsed.seriesNameColors?.[seriesIdx] ?? colors[seriesIdx % colors.length];
-      if (isMultiLine) {
-        return {
-          label: name,
-          data,
-          borderColor: color,
-          backgroundColor: color + "40",
-          borderWidth: 3,
-          pointBackgroundColor: color,
-          pointRadius: 4,
-          tension: 0,
-          fill: false
-        };
-      }
-      return {
-        label: name,
-        data,
-        backgroundColor: color,
-        borderColor: color,
-        borderWidth: 1
-      };
-    });
-    const scaleOptions = isMultiLine ? {
-      x: {
-        grid: { color: gridColor },
-        ticks: { color: textColor },
-        ...xAxisTitle && { title: xAxisTitle }
-      },
-      y: {
-        grid: { color: gridColor },
-        ticks: { color: textColor },
-        ...yAxisTitle && { title: yAxisTitle }
-      }
-    } : {
-      x: {
-        stacked: true,
-        grid: { color: gridColor },
-        ticks: { color: textColor },
-        ...xAxisTitle && { title: xAxisTitle }
-      },
-      y: {
-        stacked: true,
-        grid: { color: gridColor },
-        ticks: { color: textColor },
-        ...yAxisTitle && { title: yAxisTitle }
-      }
-    };
-    return {
-      type: isMultiLine ? "line" : "bar",
-      data: {
-        labels,
-        datasets
-      },
-      options: {
-        indexAxis: isHorizontal2 ? "y" : "x",
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: false,
-        plugins: {
-          legend: { position: "top", labels: { color: textColor } },
-          title: titlePlugin,
-          tooltip: tooltipConfig,
-          datalabels: { display: false }
-        },
-        ...isMultiLine ? { interaction: { mode: "index", intersect: false } } : {},
-        scales: scaleOptions
-      },
-      ...isMultiLine ? { plugins: [verticalCrosshairPlugin] } : {}
-    };
-  }
-  const isHorizontal = parsed.orientation === "horizontal";
-  const isLine = parsed.type === "line" || parsed.type === "area";
-  const isArea = parsed.type === "area";
-  const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
-  return {
-    type: isLine ? "line" : "bar",
-    data: {
-      labels,
-      datasets: [
-        {
-          label: parsed.series ?? "Value",
-          data: values,
-          backgroundColor: isLine ? isArea ? lineColor + "40" : lineColor : perPointColors,
-          borderColor: isLine ? lineColor : void 0,
-          borderWidth: isLine ? 3 : 0,
-          pointBackgroundColor: isLine ? lineColor : void 0,
-          pointRadius: isLine ? 4 : void 0,
-          tension: isLine ? 0 : void 0,
-          fill: isArea ? true : void 0
-        }
-      ]
-    },
-    options: {
-      indexAxis: isHorizontal ? "y" : "x",
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: false,
-      ...isLine && !isArea ? { interaction: { mode: "index", intersect: false } } : {},
-      plugins: {
-        legend: { display: false },
-        title: titlePlugin,
-        tooltip: tooltipConfig,
-        datalabels: { display: false }
-      },
-      scales: {
-        x: {
-          grid: { color: gridColor },
-          ticks: { color: textColor },
-          ...xAxisTitle && { title: xAxisTitle }
-        },
-        y: {
-          grid: { color: gridColor },
-          ticks: { color: textColor },
-          ...yAxisTitle && { title: yAxisTitle }
-        }
-      }
-    },
-    ...isLine && !isArea ? { plugins: [verticalCrosshairPlugin] } : {}
-  };
-}
 
 // src/echarts.ts
 init_fonts();
 init_colors();
 init_palettes();
+import * as echarts from "echarts";
 function parseEChart(content, palette) {
   const lines = content.split("\n");
   const result = {
@@ -3959,6 +3510,431 @@ function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     ]
   };
 }
+function resolveAxisLabels(parsed) {
+  const isHorizontal = parsed.orientation === "horizontal";
+  return {
+    xLabel: parsed.xlabel ?? (isHorizontal ? parsed.label : void 0),
+    yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
+  };
+}
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, label, data) {
+  return {
+    type,
+    ...data && { data },
+    axisLine: { lineStyle: { color: axisLineColor } },
+    axisLabel: { color: textColor, fontFamily: FONT_FAMILY },
+    splitLine: { lineStyle: { color: splitLineColor } },
+    ...label && {
+      name: label,
+      nameLocation: "middle",
+      nameGap: 30,
+      nameTextStyle: { color: textColor, fontSize: 12, fontFamily: FONT_FAMILY }
+    }
+  };
+}
+function buildEChartsOptionFromChart(parsed, palette, _isDark) {
+  if (parsed.error) return {};
+  const textColor = palette.text;
+  const axisLineColor = palette.border;
+  const splitLineColor = palette.overlay;
+  const colors = getSeriesColors(palette);
+  const titleConfig = parsed.title ? {
+    text: parsed.title,
+    left: "center",
+    textStyle: {
+      color: textColor,
+      fontSize: 18,
+      fontWeight: "bold",
+      fontFamily: FONT_FAMILY
+    }
+  } : void 0;
+  const tooltipTheme = {
+    backgroundColor: palette.surface,
+    borderColor: palette.border,
+    textStyle: { color: palette.text }
+  };
+  switch (parsed.type) {
+    case "bar":
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+    case "bar-stacked":
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+    case "line":
+      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+    case "area":
+      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+    case "pie":
+      return buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, false);
+    case "doughnut":
+      return buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, true);
+    case "radar":
+      return buildRadarOption(parsed, palette, textColor, colors, titleConfig, tooltipTheme);
+    case "polar-area":
+      return buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme);
+  }
+}
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const isHorizontal = parsed.orientation === "horizontal";
+  const labels = parsed.data.map((d) => d.label);
+  const data = parsed.data.map((d, i) => ({
+    value: d.value,
+    itemStyle: { color: d.color ?? colors[i % colors.length] }
+  }));
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "shadow" }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: isHorizontal ? valueAxis : categoryAxis,
+    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    series: [
+      {
+        type: "bar",
+        data
+      }
+    ]
+  };
+}
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
+  const labels = parsed.data.map((d) => d.label);
+  const values = parsed.data.map((d) => d.value);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "line" }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    series: [
+      {
+        type: "line",
+        data: values,
+        smooth: false,
+        symbolSize: 8,
+        lineStyle: { color: lineColor, width: 3 },
+        itemStyle: { color: lineColor }
+      }
+    ]
+  };
+}
+function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const seriesNames = parsed.seriesNames ?? [];
+  const labels = parsed.data.map((d) => d.label);
+  const series = seriesNames.map((name, idx) => {
+    const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
+    const data = parsed.data.map(
+      (dp) => idx === 0 ? dp.value : dp.extraValues?.[idx - 1] ?? 0
+    );
+    return {
+      name,
+      type: "line",
+      data,
+      smooth: false,
+      symbolSize: 8,
+      lineStyle: { color, width: 3 },
+      itemStyle: { color }
+    };
+  });
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "line" }
+    },
+    legend: {
+      data: seriesNames,
+      bottom: 10,
+      textStyle: { color: textColor }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "15%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    series
+  };
+}
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
+  const labels = parsed.data.map((d) => d.label);
+  const values = parsed.data.map((d) => d.value);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "line" }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    series: [
+      {
+        type: "line",
+        data: values,
+        smooth: false,
+        symbolSize: 8,
+        lineStyle: { color: lineColor, width: 3 },
+        itemStyle: { color: lineColor },
+        areaStyle: { opacity: 0.25 }
+      }
+    ]
+  };
+}
+function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, isDoughnut) {
+  const data = parsed.data.map((d, i) => ({
+    name: d.label,
+    value: d.value,
+    itemStyle: { color: d.color ?? colors[i % colors.length] }
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme
+    },
+    series: [
+      {
+        type: "pie",
+        radius: isDoughnut ? ["40%", "70%"] : ["0%", "70%"],
+        data,
+        label: {
+          position: "outside",
+          formatter: "{b}",
+          color: textColor,
+          fontFamily: FONT_FAMILY
+        },
+        labelLine: { show: true }
+      }
+    ]
+  };
+}
+function buildRadarOption(parsed, palette, textColor, colors, titleConfig, tooltipTheme) {
+  const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
+  const values = parsed.data.map((d) => d.value);
+  const maxValue = Math.max(...values) * 1.15;
+  const gridOpacity = 0.6;
+  const indicator = parsed.data.map((d) => ({
+    name: d.label,
+    max: maxValue
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme
+    },
+    radar: {
+      indicator,
+      axisName: {
+        color: textColor,
+        fontFamily: FONT_FAMILY
+      },
+      splitLine: {
+        lineStyle: { color: palette.border, opacity: gridOpacity }
+      },
+      axisLine: {
+        lineStyle: { color: palette.border, opacity: gridOpacity }
+      },
+      splitArea: { show: false }
+    },
+    series: [
+      {
+        type: "radar",
+        data: [
+          {
+            value: values,
+            name: parsed.series ?? "Value",
+            areaStyle: { color: radarColor, opacity: 0.25 },
+            lineStyle: { color: radarColor },
+            itemStyle: { color: radarColor },
+            symbol: "circle",
+            symbolSize: 8,
+            label: {
+              show: true,
+              formatter: "{c}",
+              color: textColor,
+              fontSize: 11,
+              fontFamily: FONT_FAMILY
+            }
+          }
+        ]
+      }
+    ]
+  };
+}
+function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+  const data = parsed.data.map((d, i) => ({
+    name: d.label,
+    value: d.value,
+    itemStyle: { color: d.color ?? colors[i % colors.length] }
+  }));
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "item",
+      ...tooltipTheme
+    },
+    series: [
+      {
+        type: "pie",
+        roseType: "radius",
+        radius: ["10%", "70%"],
+        data,
+        label: {
+          position: "outside",
+          formatter: "{b}",
+          color: textColor,
+          fontFamily: FONT_FAMILY
+        },
+        labelLine: { show: true }
+      }
+    ]
+  };
+}
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+  const { xLabel, yLabel } = resolveAxisLabels(parsed);
+  const isHorizontal = parsed.orientation === "horizontal";
+  const seriesNames = parsed.seriesNames ?? [];
+  const labels = parsed.data.map((d) => d.label);
+  const series = seriesNames.map((name, idx) => {
+    const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
+    const data = parsed.data.map(
+      (dp) => idx === 0 ? dp.value : dp.extraValues?.[idx - 1] ?? 0
+    );
+    return {
+      name,
+      type: "bar",
+      stack: "total",
+      data,
+      itemStyle: { color }
+    };
+  });
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  return {
+    backgroundColor: "transparent",
+    animation: false,
+    title: titleConfig,
+    tooltip: {
+      trigger: "axis",
+      ...tooltipTheme,
+      axisPointer: { type: "shadow" }
+    },
+    legend: {
+      data: seriesNames,
+      bottom: 10,
+      textStyle: { color: textColor }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "15%",
+      top: parsed.title ? "15%" : "5%",
+      containLabel: true
+    },
+    xAxis: isHorizontal ? valueAxis : categoryAxis,
+    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    series
+  };
+}
+var ECHART_EXPORT_WIDTH = 1200;
+var ECHART_EXPORT_HEIGHT = 800;
+var STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+  "bar",
+  "line",
+  "multi-line",
+  "area",
+  "pie",
+  "doughnut",
+  "radar",
+  "polar-area",
+  "bar-stacked"
+]);
+async function renderEChartsForExport(content, theme, palette) {
+  const isDark = theme === "dark";
+  const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
+  const effectivePalette = palette ?? (isDark ? getPalette2("nord").dark : getPalette2("nord").light);
+  const chartLine = content.match(/^chart\s*:\s*(.+)/im);
+  const chartType = chartLine?.[1]?.trim().toLowerCase();
+  let option;
+  if (chartType && STANDARD_CHART_TYPES.has(chartType)) {
+    const parsed = parseChart(content, effectivePalette);
+    if (parsed.error) return "";
+    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark);
+  } else {
+    const parsed = parseEChart(content, effectivePalette);
+    if (parsed.error) return "";
+    option = buildEChartsOption(parsed, effectivePalette, isDark);
+  }
+  if (!option || Object.keys(option).length === 0) return "";
+  const chart = echarts.init(null, null, {
+    renderer: "svg",
+    ssr: true,
+    width: ECHART_EXPORT_WIDTH,
+    height: ECHART_EXPORT_HEIGHT
+  });
+  try {
+    chart.setOption(option);
+    const svgString = chart.renderToSVGString();
+    if (!svgString) return "";
+    return svgString.replace(
+      /^<svg /,
+      `<svg style="font-family: ${FONT_FAMILY}" `
+    );
+  } finally {
+    chart.dispose();
+  }
+}
 
 // src/d3.ts
 init_fonts();
@@ -6753,8 +6729,8 @@ export {
   applyGroupOrdering,
   applyPositionOverrides,
   boldPalette,
-  buildChartJsConfig,
   buildEChartsOption,
+  buildEChartsOptionFromChart,
   buildMermaidQuadrant,
   buildMermaidThemeVars,
   buildRenderSequence,
@@ -6783,7 +6759,7 @@ export {
   nordPalette,
   oneDarkPalette,
   orderArcNodes,
-  parseChartJs,
+  parseChart,
   parseD3,
   parseDgmoChartType,
   parseEChart,
@@ -6793,6 +6769,7 @@ export {
   registerPalette,
   renderArcDiagram,
   renderD3ForExport,
+  renderEChartsForExport,
   renderQuadrant,
   renderSequenceDiagram,
   renderSlopeChart,