@diagrammo/dgmo 0.8.19 → 0.8.20

package/src/utils/time-ticks.ts

@@ -0,0 +1,213 @@
+// ============================================================
+// Time axis tick computation — shared by d3.ts and gantt/renderer.ts
+// ============================================================
+
+import * as d3Scale from 'd3-scale';
+
+export const MONTH_ABBR = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+function fractionalYearToDate(frac: number): Date {
+  const year = Math.floor(frac);
+  const remainder = frac - year;
+  // Inverse of: (month-1)/12 + (day-1)/365 + hour/8760 + minute/525600
+  const monthFrac = remainder * 12;
+  const month = Math.floor(monthFrac); // 0-based
+  const monthRemainder = remainder - month / 12;
+  const dayFrac = monthRemainder * 365; // fractional day-of-year offset
+  const day = Math.floor(dayFrac) + 1;
+  const dayRemainder = dayFrac - Math.floor(dayFrac);
+  const hourFrac = dayRemainder * 24;
+  const hour = Math.floor(hourFrac);
+  const minute = Math.round((hourFrac - hour) * 60);
+  return new Date(year, month, day, hour, minute);
+}
+
+/** Convert a Date to a fractional year number. */
+function dateToFractionalYear(d: Date): number {
+  return (
+    d.getFullYear() +
+    d.getMonth() / 12 +
+    (d.getDate() - 1) / 365 +
+    d.getHours() / 8760 +
+    d.getMinutes() / 525600
+  );
+}
+
+/**
+ * Generates adaptive tick marks along a time axis.
+ * Picks the right granularity (years, months, weeks, days, hours, minutes)
+ * based on the domain span.
+ *
+ * Optional boundary parameters add ticks at exact data start/end:
+ * - boundaryStart/boundaryEnd: numeric date values
+ * - boundaryStartLabel/boundaryEndLabel: formatted labels for those dates
+ */
+export function computeTimeTicks(
+  domainMin: number,
+  domainMax: number,
+  scale: d3Scale.ScaleLinear<number, number>,
+  boundaryStart?: number,
+  boundaryEnd?: number,
+  boundaryStartLabel?: string,
+  boundaryEndLabel?: string
+): { pos: number; label: string }[] {
+  const minYear = Math.floor(domainMin);
+  const maxYear = Math.floor(domainMax);
+  const span = domainMax - domainMin;
+
+  let ticks: { pos: number; label: string }[] = [];
+
+  // Year ticks for multi-year spans (need at least 2 boundaries)
+  const firstYear = Math.ceil(domainMin);
+  const lastYear = Math.floor(domainMax);
+  if (lastYear >= firstYear + 1) {
+    // Decimate ticks for long spans so labels don't overlap
+    const yearSpan = lastYear - firstYear;
+    let step = 1;
+    if (yearSpan > 80) step = 20;
+    else if (yearSpan > 40) step = 10;
+    else if (yearSpan > 20) step = 5;
+    else if (yearSpan > 10) step = 2;
+
+    // Align to step boundary so ticks land on round years (1700, 1710, …)
+    const alignedFirst = Math.ceil(firstYear / step) * step;
+    for (let y = alignedFirst; y <= lastYear; y += step) {
+      ticks.push({ pos: scale(y), label: String(y) });
+    }
+  } else if (span > 0.25) {
+    // Month ticks for spans > ~3 months
+    const crossesYear = maxYear > minYear;
+    for (let y = minYear; y <= maxYear + 1; y++) {
+      for (let m = 1; m <= 12; m++) {
+        const val = y + (m - 1) / 12;
+        if (val > domainMax) break;
+        if (val >= domainMin) {
+          ticks.push({
+            pos: scale(val),
+            label: crossesYear
+              ? `${MONTH_ABBR[m - 1]} '${String(y).slice(-2)}`
+              : MONTH_ABBR[m - 1],
+          });
+        }
+      }
+    }
+  } else if (span <= 0.000685) {
+    // Minute ticks for spans ≤ ~6 hours
+    // Adaptive step: >3h → 30min, >1h → 15min, >30min → 10min, else 5min
+    let stepMin = 5;
+    const spanHours = span * 8760;
+    if (spanHours > 3) stepMin = 30;
+    else if (spanHours > 1) stepMin = 15;
+    else if (spanHours > 0.5) stepMin = 10;
+
+    // Iterate from the start hour boundary
+    const startDate = fractionalYearToDate(domainMin);
+    // Round down to nearest step boundary
+    startDate.setMinutes(
+      Math.floor(startDate.getMinutes() / stepMin) * stepMin,
+      0,
+      0
+    );
+
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, '0');
+        const mm = String(startDate.getMinutes()).padStart(2, '0');
+        ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+      }
+      startDate.setMinutes(startDate.getMinutes() + stepMin);
+    }
+  } else if (span <= 0.00822) {
+    // Hour ticks for spans ≤ ~3 days
+    // Adaptive step: >2d → 6h, >1d → 3h, >12h → 2h, else 1h
+    let stepHour = 1;
+    const spanHours = span * 8760;
+    if (spanHours > 48) stepHour = 6;
+    else if (spanHours > 24) stepHour = 3;
+    else if (spanHours > 12) stepHour = 2;
+
+    // For single-day spans, just show HH:MM without the date prefix
+    const singleDay = spanHours <= 24;
+
+    const startDate = fractionalYearToDate(domainMin);
+    // Round down to nearest step boundary
+    startDate.setHours(
+      Math.floor(startDate.getHours() / stepHour) * stepHour,
+      0,
+      0,
+      0
+    );
+
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, '0');
+        const mm = String(startDate.getMinutes()).padStart(2, '0');
+        if (singleDay) {
+          ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+        } else {
+          const mon = MONTH_ABBR[startDate.getMonth()];
+          const d = startDate.getDate();
+          ticks.push({ pos: scale(val), label: `${mon} ${d} ${hh}:${mm}` });
+        }
+      }
+      startDate.setHours(startDate.getHours() + stepHour);
+    }
+  } else {
+    // Week ticks for spans ≤ ~3 months (1st, 8th, 15th, 22nd of each month)
+    for (let y = minYear; y <= maxYear + 1; y++) {
+      for (let m = 1; m <= 12; m++) {
+        for (const d of [1, 8, 15, 22]) {
+          const val = y + (m - 1) / 12 + (d - 1) / 365;
+          if (val > domainMax) break;
+          if (val >= domainMin) {
+            ticks.push({
+              pos: scale(val),
+              label: `${MONTH_ABBR[m - 1]} ${d}`,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  // Add boundary ticks at exact data start/end if provided
+  // When a boundary tick collides with a standard tick, replace the standard tick
+  const collisionThreshold = 40; // pixels
+
+  if (boundaryStart !== undefined && boundaryStartLabel) {
+    const boundaryPos = scale(boundaryStart);
+    // Remove any standard ticks that would collide with the start boundary
+    ticks = ticks.filter(
+      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
+    );
+    ticks.unshift({ pos: boundaryPos, label: boundaryStartLabel });
+  }
+
+  if (boundaryEnd !== undefined && boundaryEndLabel) {
+    const boundaryPos = scale(boundaryEnd);
+    // Remove any standard ticks that would collide with the end boundary
+    ticks = ticks.filter(
+      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
+    );
+    ticks.push({ pos: boundaryPos, label: boundaryEndLabel });
+  }
+
+  return ticks;
+}

package/src/branding.ts

@@ -1,67 +0,0 @@
-import { FONT_FAMILY } from './fonts';
-
-const BRANDING_HEIGHT = 20;
-
-/**
- * Injects `diagrammo.app` branding text into an SVG string.
- * Extends the SVG height by 20px and places the text at the bottom-right.
- */
-export function injectBranding(svgHtml: string, mutedColor: string): string {
-  if (!svgHtml) return svgHtml;
-
-  const brandingText = `<text x="0" y="0" font-size="10" font-family="${FONT_FAMILY}" fill="${mutedColor}" opacity="0.5" text-anchor="end">diagrammo.app</text>`;
-
-  // Parse viewBox
-  const vbMatch = svgHtml.match(/viewBox="([^"]+)"/);
-  const heightAttrMatch = svgHtml.match(/height="([^"]+)"/);
-
-  if (vbMatch) {
-    const parts = vbMatch[1].split(/\s+/).map(Number);
-    if (parts.length === 4) {
-      const [vx, vy, vw, vh] = parts;
-      const newVh = vh + BRANDING_HEIGHT;
-      const textX = vx + vw - 4;
-      const textY = vy + vh + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-
-      let result = svgHtml.replace(
-        /viewBox="[^"]+"/,
-        `viewBox="${vx} ${vy} ${vw} ${newVh}"`
-      );
-
-      // Update height attribute if present
-      if (heightAttrMatch) {
-        const oldH = parseFloat(heightAttrMatch[1]);
-        if (!isNaN(oldH)) {
-          result = result.replace(
-            `height="${heightAttrMatch[1]}"`,
-            `height="${oldH + BRANDING_HEIGHT}"`
-          );
-        }
-      }
-
-      result = result.replace('</svg>', `${positioned}</svg>`);
-      return result;
-    }
-  }
-
-  // Fallback: no viewBox, try width/height attributes
-  if (heightAttrMatch) {
-    const widthMatch = svgHtml.match(/width="([^"]+)"/);
-    const w = widthMatch ? parseFloat(widthMatch[1]) : 800;
-    const h = parseFloat(heightAttrMatch[1]);
-    if (!isNaN(h) && !isNaN(w)) {
-      const textX = w - 4;
-      const textY = h + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-      let result = svgHtml.replace(
-        `height="${heightAttrMatch[1]}"`,
-        `height="${h + BRANDING_HEIGHT}"`
-      );
-      result = result.replace('</svg>', `${positioned}</svg>`);
-      return result;
-    }
-  }
-
-  return svgHtml;
-}

package/src/dgmo-mermaid.ts

@@ -1,262 +0,0 @@
-// ============================================================
-// .dgmo → Mermaid Translation Layer
-// Parses dgmo quadrant syntax and generates valid Mermaid code.
-// ============================================================
-
-import { resolveColorWithDiagnostic } from './colors';
-import type { DgmoError } from './diagnostics';
-import { makeDgmoError, formatDgmoError } from './diagnostics';
-
-// ============================================================
-// Types
-// ============================================================
-
-interface QuadrantLabel {
-  text: string;
-  color: string | null;
-  lineNumber: number;
-}
-
-export interface ParsedQuadrant {
-  title: string | null;
-  titleLineNumber: number | null;
-  xAxis: [string, string] | null;
-  xAxisLineNumber: number | null;
-  yAxis: [string, string] | null;
-  yAxisLineNumber: number | null;
-  quadrants: {
-    topRight: QuadrantLabel | null;
-    topLeft: QuadrantLabel | null;
-    bottomLeft: QuadrantLabel | null;
-    bottomRight: QuadrantLabel | null;
-  };
-  points: { label: string; x: number; y: number; lineNumber: number }[];
-  diagnostics: DgmoError[];
-  error: string | null;
-}
-
-// ============================================================
-// Parser
-// ============================================================
-
-/** Regex for quadrant label lines: `top-right Promote (green)` */
-const QUADRANT_LABEL_RE = /^(.+?)(?:\s*\(([^)]+)\))?\s*$/;
-
-/** Regex for data point lines: `Label 0.9, 0.5` */
-const DATA_POINT_RE = /^(.+?)\s+([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/;
-
-const QUADRANT_POSITIONS = new Set([
-  'top-right',
-  'top-left',
-  'bottom-left',
-  'bottom-right',
-]);
-
-/**
- * Parses a .dgmo quadrant document into a structured object.
- * Lines are processed sequentially; unknown lines are silently skipped.
- */
-export function parseQuadrant(content: string): ParsedQuadrant {
-  const result: ParsedQuadrant = {
-    title: null,
-    titleLineNumber: null,
-    xAxis: null,
-    xAxisLineNumber: null,
-    yAxis: null,
-    yAxisLineNumber: null,
-    quadrants: {
-      topRight: null,
-      topLeft: null,
-      bottomLeft: null,
-      bottomRight: null,
-    },
-    points: [],
-    diagnostics: [],
-    error: null,
-  };
-
-  const lines = content.split('\n');
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
-    const lineNumber = i + 1; // 1-indexed for editor
-
-    // Skip empty lines and comments
-    if (!line || line.startsWith('//')) continue;
-
-    // Skip the chart: directive (already consumed by router)
-    if (/^chart\s*:/i.test(line)) continue;
-
-    // title <text>
-    const titleMatch = line.match(/^title\s+(.+)/i);
-    if (titleMatch) {
-      result.title = titleMatch[1].trim();
-      result.titleLineNumber = lineNumber;
-      continue;
-    }
-
-    // x-label Low, High
-    const xMatch = line.match(/^x-label\s+(.+)/i);
-    if (xMatch) {
-      const parts = xMatch[1].split(',').map((s) => s.trim());
-      if (parts.length >= 2) {
-        result.xAxis = [parts[0], parts[1]];
-        result.xAxisLineNumber = lineNumber;
-      }
-      continue;
-    }
-
-    // y-label Low, High
-    const yMatch = line.match(/^y-label\s+(.+)/i);
-    if (yMatch) {
-      const parts = yMatch[1].split(',').map((s) => s.trim());
-      if (parts.length >= 2) {
-        result.yAxis = [parts[0], parts[1]];
-        result.yAxisLineNumber = lineNumber;
-      }
-      continue;
-    }
-
-    // Quadrant position labels: top-right Label (color)
-    const posMatch = line.match(
-      /^(top-right|top-left|bottom-left|bottom-right)\s+(.+)/i
-    );
-    if (posMatch) {
-      const position = posMatch[1].toLowerCase();
-      const labelMatch = posMatch[2].match(QUADRANT_LABEL_RE);
-      if (labelMatch) {
-        const label: QuadrantLabel = {
-          text: labelMatch[1].trim(),
-          color: labelMatch[2]
-            ? (resolveColorWithDiagnostic(
-                labelMatch[2].trim(),
-                lineNumber,
-                result.diagnostics
-              ) ?? null)
-            : null,
-          lineNumber,
-        };
-        if (position === 'top-right') result.quadrants.topRight = label;
-        else if (position === 'top-left') result.quadrants.topLeft = label;
-        else if (position === 'bottom-left')
-          result.quadrants.bottomLeft = label;
-        else if (position === 'bottom-right')
-          result.quadrants.bottomRight = label;
-      }
-      continue;
-    }
-
-    // Data points: Label x, y
-    const pointMatch = line.match(DATA_POINT_RE);
-    if (pointMatch) {
-      // Make sure this isn't a quadrant position keyword
-      const key = pointMatch[1].trim().toLowerCase();
-      if (!QUADRANT_POSITIONS.has(key)) {
-        result.points.push({
-          label: pointMatch[1].trim(),
-          x: parseFloat(pointMatch[2]),
-          y: parseFloat(pointMatch[3]),
-          lineNumber,
-        });
-      }
-      continue;
-    }
-  }
-
-  if (result.points.length === 0) {
-    const diag = makeDgmoError(
-      1,
-      'No data points found. Add lines like: Label 0.5, 0.7'
-    );
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-  }
-
-  return result;
-}
-
-// ============================================================
-// Mermaid Builder
-// ============================================================
-
-/**
- * Generates valid Mermaid quadrantChart syntax from a parsed quadrant.
- * Returns a string ready for the Mermaid renderer.
- */
-export function buildMermaidQuadrant(
-  parsed: ParsedQuadrant,
-  options: {
-    isDark?: boolean;
-    textColor?: string;
-    mutedTextColor?: string;
-  } = {}
-): string {
-  const { isDark = false, textColor, mutedTextColor } = options;
-  const lines: string[] = [];
-
-  // %%{init}%% block — fill colors with reduced opacity + text color overrides
-  const fillAlpha = isDark ? '30' : '55';
-  const primaryText = textColor ?? (isDark ? '#d0d0d0' : '#333333');
-  const quadrantLabelText = mutedTextColor ?? (isDark ? '#888888' : '#666666');
-
-  const colorMap: Record<string, string> = {};
-  if (parsed.quadrants.topRight?.color)
-    colorMap.quadrant1Fill = parsed.quadrants.topRight.color + fillAlpha;
-  if (parsed.quadrants.topLeft?.color)
-    colorMap.quadrant2Fill = parsed.quadrants.topLeft.color + fillAlpha;
-  if (parsed.quadrants.bottomLeft?.color)
-    colorMap.quadrant3Fill = parsed.quadrants.bottomLeft.color + fillAlpha;
-  if (parsed.quadrants.bottomRight?.color)
-    colorMap.quadrant4Fill = parsed.quadrants.bottomRight.color + fillAlpha;
-
-  // Quadrant labels use muted color, points use primary text color
-  colorMap.quadrant1TextFill = quadrantLabelText;
-  colorMap.quadrant2TextFill = quadrantLabelText;
-  colorMap.quadrant3TextFill = quadrantLabelText;
-  colorMap.quadrant4TextFill = quadrantLabelText;
-  colorMap.quadrantPointTextFill = primaryText;
-  colorMap.quadrantXAxisTextFill = primaryText;
-  colorMap.quadrantYAxisTextFill = primaryText;
-  colorMap.quadrantTitleFill = primaryText;
-
-  const vars = JSON.stringify(colorMap);
-  lines.push(`%%{init: {"themeVariables": ${vars}}}%%`);
-
-  lines.push('quadrantChart');
-
-  if (parsed.title) {
-    lines.push(`    title ${parsed.title}`);
-  }
-
-  if (parsed.xAxis) {
-    lines.push(`    x-axis ${parsed.xAxis[0]} --> ${parsed.xAxis[1]}`);
-  }
-
-  if (parsed.yAxis) {
-    lines.push(`    y-axis ${parsed.yAxis[0]} --> ${parsed.yAxis[1]}`);
-  }
-
-  // Helper to quote labels that need it (contain spaces or special chars)
-  const quote = (s: string): string => (/[\s,:[\]]/.test(s) ? `"${s}"` : s);
-
-  // Quadrant labels: 1=top-right, 2=top-left, 3=bottom-left, 4=bottom-right
-  if (parsed.quadrants.topRight) {
-    lines.push(`    quadrant-1 ${quote(parsed.quadrants.topRight.text)}`);
-  }
-  if (parsed.quadrants.topLeft) {
-    lines.push(`    quadrant-2 ${quote(parsed.quadrants.topLeft.text)}`);
-  }
-  if (parsed.quadrants.bottomLeft) {
-    lines.push(`    quadrant-3 ${quote(parsed.quadrants.bottomLeft.text)}`);
-  }
-  if (parsed.quadrants.bottomRight) {
-    lines.push(`    quadrant-4 ${quote(parsed.quadrants.bottomRight.text)}`);
-  }
-
-  // Data points
-  for (const point of parsed.points) {
-    lines.push(`    ${quote(point.label)}: [${point.x}, ${point.y}]`);
-  }
-
-  return lines.join('\n');
-}