@diagrammo/dgmo 0.1.7 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -30,13 +30,13 @@
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
-    "chart.js": "^4.4.8",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "d3-array": "^3.2.4",
+"d3-array": "^3.2.4",
     "d3-cloud": "^1.2.7",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
@@ -52,6 +52,7 @@
     "@types/d3-shape": "^3.1.7",
     "@types/jsdom": "^21.1.7",
     "tsup": "^8.5.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.0"
   }
 }

package/src/chart.ts

@@ -0,0 +1,231 @@
+// ============================================================
+// Types
+// ============================================================
+
+export type ChartType =
+  | 'bar'
+  | 'line'
+  | 'pie'
+  | 'doughnut'
+  | 'area'
+  | 'polar-area'
+  | 'radar'
+  | 'bar-stacked';
+
+export interface ChartDataPoint {
+  label: string;
+  value: number;
+  extraValues?: number[];
+  color?: string;
+  lineNumber: number;
+}
+
+export interface ParsedChart {
+  type: ChartType;
+  title?: string;
+  series?: string;
+  xlabel?: string;
+  ylabel?: string;
+  seriesNames?: string[];
+  seriesNameColors?: (string | undefined)[];
+  orientation?: 'horizontal' | 'vertical';
+  color?: string;
+  label?: string;
+  data: ChartDataPoint[];
+  error?: string;
+}
+
+// ============================================================
+// Colors
+// ============================================================
+
+import { resolveColor } from './colors';
+import type { PaletteColors } from './palettes';
+
+// ============================================================
+// Parser
+// ============================================================
+
+const VALID_TYPES = new Set<ChartType>([
+  'bar',
+  'line',
+  'pie',
+  'doughnut',
+  'area',
+  'polar-area',
+  'radar',
+  'bar-stacked',
+]);
+
+const TYPE_ALIASES: Record<string, ChartType> = {
+  'multi-line': 'line',
+};
+
+/**
+ * Parses the simple chart text format into a structured object.
+ *
+ * Format:
+ * ```
+ * chart: bar
+ * title: My Chart
+ * series: Revenue
+ *
+ * Jan: 120
+ * Feb: 200
+ * Mar: 150
+ * ```
+ */
+export function parseChart(
+  content: string,
+  palette?: PaletteColors
+): ParsedChart {
+  const lines = content.split('\n');
+  const result: ParsedChart = {
+    type: 'bar',
+    data: [],
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    const lineNumber = i + 1;
+
+    // Skip empty lines
+    if (!trimmed) continue;
+
+    // Recognize ## section headers (skip, but don't treat as comments)
+    if (/^#{2,}\s+/.test(trimmed)) continue;
+
+    // Skip comments
+    if (trimmed.startsWith('#') || trimmed.startsWith('//')) continue;
+
+    // Parse key: value pairs
+    const colonIndex = trimmed.indexOf(':');
+    if (colonIndex === -1) continue;
+
+    const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
+    const value = trimmed.substring(colonIndex + 1).trim();
+
+    // Handle metadata
+    if (key === 'chart') {
+      const raw = value.toLowerCase();
+      const chartType = (TYPE_ALIASES[raw] ?? raw) as ChartType;
+      if (VALID_TYPES.has(chartType)) {
+        result.type = chartType;
+      } else {
+        result.error = `Unsupported chart type: ${value}. Supported types: ${[...VALID_TYPES].join(', ')}.`;
+        return result;
+      }
+      continue;
+    }
+
+    if (key === 'title') {
+      result.title = value;
+      continue;
+    }
+
+    if (key === 'xlabel') {
+      result.xlabel = value;
+      continue;
+    }
+
+    if (key === 'ylabel') {
+      result.ylabel = value;
+      continue;
+    }
+
+    if (key === 'label') {
+      result.label = value;
+      continue;
+    }
+
+    if (key === 'orientation') {
+      const v = value.toLowerCase();
+      if (v === 'horizontal' || v === 'vertical') {
+        result.orientation = v;
+      }
+      continue;
+    }
+
+    if (key === 'color') {
+      result.color = resolveColor(value.trim(), palette);
+      continue;
+    }
+
+    if (key === 'series') {
+      result.series = value;
+      // Parse comma-separated series names for multi-series chart types
+      const rawNames = value
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+      const names: string[] = [];
+      const nameColors: (string | undefined)[] = [];
+      for (const raw of rawNames) {
+        const colorMatch = raw.match(/\(([^)]+)\)\s*$/);
+        if (colorMatch) {
+          const resolved = resolveColor(colorMatch[1].trim(), palette);
+          nameColors.push(resolved);
+          names.push(raw.substring(0, colorMatch.index!).trim());
+        } else {
+          nameColors.push(undefined);
+          names.push(raw);
+        }
+      }
+      if (names.length === 1) {
+        result.series = names[0];
+      }
+      if (names.length > 1) {
+        result.seriesNames = names;
+      }
+      if (nameColors.some(Boolean)) result.seriesNameColors = nameColors;
+      continue;
+    }
+
+    // Data point: Label: value  or  Label: v1, v2, ...
+    const parts = value.split(',').map((s) => s.trim());
+    const numValue = parseFloat(parts[0]);
+    if (!isNaN(numValue)) {
+      let rawLabel = trimmed.substring(0, colonIndex).trim();
+      let pointColor: string | undefined;
+      const colorMatch = rawLabel.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        const resolved = resolveColor(colorMatch[1].trim(), palette);
+        pointColor = resolved;
+        rawLabel = rawLabel.substring(0, colorMatch.index!).trim();
+      }
+      const extra = parts
+        .slice(1)
+        .map((s) => parseFloat(s))
+        .filter((n) => !isNaN(n));
+      result.data.push({
+        label: rawLabel,
+        value: numValue,
+        ...(extra.length > 0 && { extraValues: extra }),
+        ...(pointColor && { color: pointColor }),
+        lineNumber,
+      });
+    }
+  }
+
+  // Validation
+  if (!result.error && result.data.length === 0) {
+    result.error = 'No data points found. Add data in format: Label: 123';
+  }
+
+  if (!result.error && result.type === 'bar-stacked' && !result.seriesNames) {
+    result.error = `Chart type "bar-stacked" requires multiple series names. Use: series: Name1, Name2, Name3`;
+  }
+
+  if (!result.error && result.seriesNames) {
+    const expectedCount = result.seriesNames.length;
+    for (const dp of result.data) {
+      const actualCount = 1 + (dp.extraValues?.length ?? 0);
+      if (actualCount !== expectedCount) {
+        result.error = `Data point "${dp.label}" has ${actualCount} value(s), but ${expectedCount} series defined. Each row must have ${expectedCount} comma-separated values.`;
+        break;
+      }
+    }
+  }
+
+  return result;
+}

package/src/cli.ts

@@ -3,6 +3,8 @@ import { resolve, basename, extname } from 'node:path';
 import { JSDOM } from 'jsdom';
 import { Resvg } from '@resvg/resvg-js';
 import { renderD3ForExport } from './d3';
+import { renderEChartsForExport } from './echarts';
+import { parseDgmoChartType, getDgmoFramework } from './dgmo-router';
 import { getPalette } from './palettes/registry';
 import { DEFAULT_FONT_NAME } from './fonts';
 
@@ -215,19 +217,31 @@ async function main(): Promise<void> {
     noInput();
   }
 
-  // Set up jsdom before any d3/renderer code runs
-  setupDom();
-
   const isDark = opts.theme === 'dark';
   const paletteColors = isDark
     ? getPalette(opts.palette).dark
     : getPalette(opts.palette).light;
 
-  const svg = await renderD3ForExport(content, opts.theme, paletteColors);
+  // Determine which rendering framework to use
+  const chartType = parseDgmoChartType(content);
+  const framework = chartType ? getDgmoFramework(chartType) : null;
+
+  let svg: string;
+
+  if (framework === 'echart') {
+    svg = await renderEChartsForExport(content, opts.theme, paletteColors);
+  } else if (framework === 'd3' || framework === null) {
+    // Set up jsdom before any d3/renderer code runs
+    setupDom();
+    svg = await renderD3ForExport(content, opts.theme, paletteColors);
+  } else {
+    console.error(`Error: Unknown chart framework "${framework}".`);
+    process.exit(1);
+  }
 
   if (!svg) {
     console.error(
-      'Error: Failed to render diagram. The input may be empty, invalid, or use an unsupported chart type (e.g. Chart.js/ECharts charts require a browser).'
+      'Error: Failed to render diagram. The input may be empty, invalid, or use an unsupported chart type.'
     );
     process.exit(1);
   }

package/src/dgmo-router.ts

@@ -8,26 +8,25 @@ import { looksLikeSequence } from './sequence/parser';
  * Framework identifiers used by the .dgmo router.
  * Maps to the existing preview components and export paths.
  */
-export type DgmoFramework = 'chartjs' | 'echart' | 'd3' | 'mermaid';
+export type DgmoFramework = 'echart' | 'd3' | 'mermaid';
 
 /**
  * Maps every supported chart type string to its backing framework.
  *
- * Chart.js: standard chart types (bar, line, pie, etc.)
- * ECharts:  scatter, flow/relationship diagrams, math, heatmap
+ * ECharts:  standard chart types (bar, line, pie, etc.), scatter, flow/relationship diagrams, math, heatmap
  * D3:       slope, wordcloud, arc diagram, timeline
  */
 export const DGMO_CHART_TYPE_MAP: Record<string, DgmoFramework> = {
-  // 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',