@diagrammo/dgmo 0.5.5 → 0.6.0

package/dist/index.js

@@ -3640,9 +3640,11 @@ var init_parser3 = __esm({
 // src/chart.ts
 function parseChart(content, palette) {
   const lines = content.split("\n");
+  const parsedEras = [];
   const result = {
     type: "bar",
     data: [],
+    eras: parsedEras,
     diagnostics: [],
     error: null
   };
@@ -3661,6 +3663,16 @@ function parseChart(content, palette) {
       continue;
     }
     if (trimmed.startsWith("//")) continue;
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/);
+    if (eraMatch) {
+      parsedEras.push({
+        start: eraMatch[1].trim(),
+        end: eraMatch[2].trim(),
+        label: eraMatch[3].trim(),
+        color: eraMatch[4] ? resolveColor(eraMatch[4].trim(), palette) : null
+      });
+      continue;
+    }
     const colonIndex = trimmed.indexOf(":");
     if (colonIndex === -1) continue;
     const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
@@ -3739,6 +3751,9 @@ function parseChart(content, palette) {
       });
     }
   }
+  if (result.type !== "line" && result.type !== "area") {
+    result.eras = void 0;
+  }
   const setChartError = (line10, message) => {
     const diag = makeDgmoError(line10, message);
     result.diagnostics.push(diag);
@@ -3793,7 +3808,7 @@ var init_chart = __esm({
 
 // src/echarts.ts
 import * as echarts from "echarts";
-function parseEChart(content, palette) {
+function parseExtendedChart(content, palette) {
   const lines = content.split("\n");
   const result = {
     type: "scatter",
@@ -4062,7 +4077,7 @@ function buildChartCommons(parsed, palette, isDark) {
   const tooltipTheme = { backgroundColor: palette.surface, borderColor: palette.border, textStyle: { color: palette.text } };
   return { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme };
 }
-function buildEChartsOption(parsed, palette, isDark) {
+function buildExtendedChartOption(parsed, palette, isDark) {
   if (parsed.error) {
     return {};
   }
@@ -4734,7 +4749,7 @@ function resolveAxisLabels(parsed) {
     yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
   };
 }
-function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint) {
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint, intervalOverride) {
   const defaultGap = type === "value" ? 75 : 40;
   let catFontSize = 16;
   let catLabelExtras = {};
@@ -4761,7 +4776,7 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
       fontSize: type === "category" && data ? catFontSize : 16,
       fontFamily: FONT_FAMILY,
       ...type === "category" && {
-        interval: 0,
+        interval: intervalOverride ?? 0,
         formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2"),
         ...catLabelExtras
       }
@@ -4775,7 +4790,7 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
     }
   };
 }
-function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
+function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
   if (parsed.error) return {};
   const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
   switch (parsed.type) {
@@ -4784,7 +4799,7 @@ function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
     case "bar-stacked":
       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, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
+      return parsed.seriesNames ? buildMultiLineOption(parsed, palette, 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, chartWidth);
     case "pie":
@@ -4837,11 +4852,57 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     ]
   };
 }
+function buildIntervalCallback(labels, eras) {
+  const count = labels.length;
+  if (count <= 8) return () => true;
+  const snapSteps = [1, 2, 4, 5, 10, 20, 25, 50];
+  const raw = Math.ceil(count / 8);
+  const N = [...snapSteps].reverse().find((s) => s <= raw) ?? 1;
+  const pinned = /* @__PURE__ */ new Set();
+  for (let i = 0; i < count; i += N) pinned.add(i);
+  for (const era of eras) {
+    const si = labels.indexOf(era.start);
+    const ei = labels.indexOf(era.end);
+    if (si >= 0) pinned.add(si);
+    if (ei >= 0) pinned.add(ei);
+  }
+  return (index) => pinned.has(index);
+}
+function buildMarkArea(eras, labels, textColor, defaultColor) {
+  if (eras.length === 0) return void 0;
+  return {
+    silent: false,
+    tooltip: { show: true },
+    data: eras.map((era) => {
+      const startIdx = labels.indexOf(era.start);
+      const endIdx = labels.indexOf(era.end);
+      const bandSlots = startIdx >= 0 && endIdx >= 0 ? endIdx - startIdx : Infinity;
+      const color = era.color ?? defaultColor;
+      return [
+        {
+          name: era.label,
+          xAxis: era.start,
+          itemStyle: { color, opacity: 0.15 },
+          label: {
+            show: bandSlots >= 3,
+            position: "insideTop",
+            fontSize: 11,
+            color: textColor
+          }
+        },
+        { xAxis: era.end }
+      ];
+    })
+  };
+}
 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);
   const values = parsed.data.map((d) => d.value);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalCallback(labels, eras);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4851,7 +4912,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4861,15 +4922,19 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
         symbolSize: 8,
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        ...markArea && { markArea }
       }
     ]
   };
 }
-function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildMultiLineOption(parsed, palette, 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);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalCallback(labels, eras);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   const series = seriesNames.map((name, idx) => {
     const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
     const data = parsed.data.map(
@@ -4883,7 +4948,8 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       symbolSize: 8,
       lineStyle: { color, width: 3 },
       itemStyle: { color },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SELF,
+      ...idx === 0 && markArea && { markArea }
     };
   });
   return {
@@ -4900,7 +4966,7 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       textStyle: { color: textColor }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series
   };
@@ -4910,6 +4976,9 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
   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);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalCallback(labels, eras);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4919,7 +4988,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4930,7 +4999,8 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        ...markArea && { markArea }
       }
     ]
   };
@@ -5115,7 +5185,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
     series
   };
 }
-async function renderEChartsForExport(content, theme, palette, options) {
+async function renderExtendedChartForExport(content, theme, palette, options) {
   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);
@@ -5125,11 +5195,11 @@ 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, ECHART_EXPORT_WIDTH);
+    option = buildSimpleChartOption(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
   } else {
-    const parsed = parseEChart(content, effectivePalette);
+    const parsed = parseExtendedChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOption(parsed, effectivePalette, isDark);
+    option = buildExtendedChartOption(parsed, effectivePalette, isDark);
   }
   if (!option || Object.keys(option).length === 0) return "";
   const chart = echarts.init(null, null, {
@@ -5156,7 +5226,7 @@ async function renderEChartsForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT;
+var EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -5167,11 +5237,21 @@ var init_echarts = __esm({
     init_diagnostics();
     init_colors();
     init_parsing();
-    init_dgmo_router();
     EMPHASIS_SELF = { focus: "self", blurScope: "global" };
     CHART_BASE = { backgroundColor: "transparent", animation: false };
     ECHART_EXPORT_WIDTH = 1200;
     ECHART_EXPORT_HEIGHT = 800;
+    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "multi-line",
+      "area",
+      "pie",
+      "doughnut",
+      "radar",
+      "polar-area",
+      "bar-stacked"
+    ]);
   }
 });
 
@@ -7329,15 +7409,12 @@ var init_parser9 = __esm({
 // src/dgmo-router.ts
 var dgmo_router_exports = {};
 __export(dgmo_router_exports, {
-  DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
-  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
-  getDgmoFramework: () => getDgmoFramework,
+  getAllChartTypes: () => getAllChartTypes,
+  getRenderCategory: () => getRenderCategory,
+  isExtendedChartType: () => isExtendedChartType,
   parseDgmo: () => parseDgmo,
   parseDgmoChartType: () => parseDgmoChartType
 });
-function getDgmoFramework(chartType) {
-  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
-}
 function parseDgmoChartType(content) {
   const lines = content.split("\n");
   for (const line10 of lines) {
@@ -7357,22 +7434,39 @@ function parseDgmoChartType(content) {
   if (looksLikeOrg(content)) return "org";
   return null;
 }
+function getRenderCategory(chartType) {
+  const type = chartType.toLowerCase();
+  if (DATA_CHART_TYPES.has(type)) return "data-chart";
+  if (VISUALIZATION_TYPES.has(type)) return "visualization";
+  if (DIAGRAM_TYPES.has(type)) return "diagram";
+  return null;
+}
+function isExtendedChartType(chartType) {
+  return EXTENDED_CHART_TYPES.has(chartType.toLowerCase());
+}
+function getAllChartTypes() {
+  return [
+    ...DATA_CHART_TYPES,
+    ...VISUALIZATION_TYPES,
+    ...DIAGRAM_TYPES
+  ];
+}
 function parseDgmo(content) {
   const chartType = parseDgmoChartType(content);
   if (!chartType) {
-    return { diagnostics: parseD3(content).diagnostics };
+    return { diagnostics: parseVisualization(content).diagnostics };
   }
   const directParser = PARSE_DISPATCH.get(chartType);
   if (directParser) return { diagnostics: directParser(content).diagnostics };
-  if (STANDARD_CHART_TYPES.has(chartType)) {
+  if (STANDARD_CHART_TYPES2.has(chartType)) {
     return { diagnostics: parseChart(content).diagnostics };
   }
   if (ECHART_TYPES.has(chartType)) {
-    return { diagnostics: parseEChart(content).diagnostics };
+    return { diagnostics: parseExtendedChart(content).diagnostics };
   }
-  return { diagnostics: parseD3(content).diagnostics };
+  return { diagnostics: parseVisualization(content).diagnostics };
 }
-var DGMO_CHART_TYPE_MAP, STANDARD_CHART_TYPES, ECHART_TYPES, PARSE_DISPATCH;
+var DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, ECHART_TYPES, PARSE_DISPATCH;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -7390,44 +7484,53 @@ var init_dgmo_router = __esm({
     init_parser7();
     init_parser8();
     init_parser9();
-    DGMO_CHART_TYPE_MAP = {
-      // 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",
-      chord: "echart",
-      function: "echart",
-      heatmap: "echart",
-      funnel: "echart",
-      // D3
-      slope: "d3",
-      wordcloud: "d3",
-      arc: "d3",
-      timeline: "d3",
-      venn: "d3",
-      quadrant: "d3",
-      sequence: "d3",
-      flowchart: "d3",
-      class: "d3",
-      er: "d3",
-      org: "d3",
-      kanban: "d3",
-      c4: "d3",
-      "initiative-status": "d3",
-      state: "d3",
-      sitemap: "d3",
-      infra: "d3"
-    };
-    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+    DATA_CHART_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "pie",
+      "doughnut",
+      "area",
+      "polar-area",
+      "radar",
+      "bar-stacked",
+      "multi-line",
+      "scatter",
+      "sankey",
+      "chord",
+      "function",
+      "heatmap",
+      "funnel"
+    ]);
+    VISUALIZATION_TYPES = /* @__PURE__ */ new Set([
+      "slope",
+      "wordcloud",
+      "arc",
+      "timeline",
+      "venn",
+      "quadrant"
+    ]);
+    DIAGRAM_TYPES = /* @__PURE__ */ new Set([
+      "sequence",
+      "flowchart",
+      "class",
+      "er",
+      "org",
+      "kanban",
+      "c4",
+      "initiative-status",
+      "state",
+      "sitemap",
+      "infra"
+    ]);
+    EXTENDED_CHART_TYPES = /* @__PURE__ */ new Set([
+      "scatter",
+      "sankey",
+      "chord",
+      "function",
+      "heatmap",
+      "funnel"
+    ]);
+    STANDARD_CHART_TYPES2 = /* @__PURE__ */ new Set([
       "bar",
       "line",
       "multi-line",
@@ -18505,7 +18608,7 @@ function addDurationToDate(startDate, amount, unit) {
     return `${endYear}-${endMonth}-${endDay}`;
   }
 }
-function parseD3(content, palette) {
+function parseVisualization(content, palette) {
   const result = {
     type: null,
     title: null,
@@ -21459,7 +21562,7 @@ function finalizeSvgExport(container, theme, palette, options) {
   }
   return svgHtml;
 }
-async function renderD3ForExport(content, theme, palette, orgExportState, options) {
+async function renderForExport(content, theme, palette, orgExportState, options) {
   const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
   const detectedType = parseDgmoChartType2(content);
   if (detectedType === "org") {
@@ -21650,7 +21753,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     renderState2(container2, stateParsed, layout, effectivePalette2, theme === "dark", void 0, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
-  const parsed = parseD3(content, palette);
+  const parsed = parseVisualization(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
     const looksLikeSequence2 = /->|~>|<-/.test(content);
     if (!looksLikeSequence2) return "";
@@ -21877,12 +21980,12 @@ async function render(content, options) {
   const branding = options?.branding ?? true;
   const paletteColors = getPalette(paletteName)[theme === "dark" ? "dark" : "light"];
   const chartType = parseDgmoChartType(content);
-  const framework = chartType ? getDgmoFramework(chartType) : null;
-  if (framework === "echart") {
-    return renderEChartsForExport(content, theme, paletteColors, { branding });
+  const category = chartType ? getRenderCategory(chartType) : null;
+  if (category === "data-chart") {
+    return renderExtendedChartForExport(content, theme, paletteColors, { branding });
   }
   await ensureDom();
-  return renderD3ForExport(content, theme, paletteColors, void 0, {
+  return renderForExport(content, theme, paletteColors, void 0, {
     branding,
     c4Level: options?.c4Level,
     c4System: options?.c4System,
@@ -22663,20 +22766,18 @@ function decodeDiagramUrl(hash) {
 // src/index.ts
 init_branding();
 export {
-  DGMO_CHART_TYPE_MAP,
   INFRA_BEHAVIOR_KEYS,
   RULE_COUNT,
-  STANDARD_CHART_TYPES,
   addDurationToDate,
   applyGroupOrdering,
   applyPositionOverrides,
   boldPalette,
-  buildEChartsOption,
-  buildEChartsOptionFromChart,
+  buildExtendedChartOption,
   buildMermaidQuadrant,
   buildMermaidThemeVars,
   buildNoteMessageMap,
   buildRenderSequence,
+  buildSimpleChartOption,
   buildThemeCSS,
   catppuccinPalette,
   collapseInitiativeStatus,
@@ -22696,8 +22797,8 @@ export {
   formatDateLabel,
   formatDgmoError,
   getAvailablePalettes,
-  getDgmoFramework,
   getPalette,
+  getRenderCategory,
   getSeriesColors,
   groupMessagesBySection,
   gruvboxPalette,
@@ -22708,6 +22809,7 @@ export {
   inferRoles,
   injectBranding,
   isArchiveColumn,
+  isExtendedChartType,
   isSequenceBlock,
   isSequenceNote,
   isValidHex,
@@ -22739,11 +22841,10 @@ export {
   parseC4,
   parseChart,
   parseClassDiagram,
-  parseD3,
   parseDgmo,
   parseDgmoChartType,
-  parseEChart,
   parseERDiagram,
+  parseExtendedChart,
   parseFlowchart,
   parseInfra,
   parseInitiativeStatus,
@@ -22755,6 +22856,7 @@ export {
   parseSitemap,
   parseState,
   parseTimelineDate,
+  parseVisualization,
   registerPalette,
   render,
   renderArcDiagram,
@@ -22767,12 +22869,12 @@ export {
   renderC4DeploymentForExport,
   renderClassDiagram,
   renderClassDiagramForExport,
-  renderD3ForExport,
-  renderEChartsForExport,
   renderERDiagram,
   renderERDiagramForExport,
+  renderExtendedChartForExport,
   renderFlowchart,
   renderFlowchartForExport,
+  renderForExport,
   renderInfra,
   renderInitiativeStatus,
   renderInitiativeStatusForExport,