ts-prorm-orm 1.1.0

package/dist/diagrams/gantt-diagram.js

@@ -0,0 +1,411 @@
+"use strict";
+/**
+ * GanttDiagram — generates a horizontal timeline / Gantt chart SVG.
+ *
+ * Features:
+ *  - Left label column listing task/row names
+ *  - Right time-axis area with vertical gridlines (days / weeks / months)
+ *  - One horizontal bar per task, positioned/sized by its start & end dates
+ *  - Tasks grouped into sections, each colored from a rotated accent palette
+ *  - Optional % complete overlay drawn on top of each bar
+ *  - Milestones rendered as diamonds
+ *  - Dependency arrows drawn between a task and the task it depends on
+ *  - Auto-sized SVG viewBox, light/dark theme aware
+ *
+ * The time scale is computed from the minimum start to the maximum end across
+ * all tasks; dates are mapped linearly to x. Everything is deterministic —
+ * no Date.now()/new Date()-with-no-args/Math.random() is used.
+ *
+ * Usage:
+ *   const g = new GanttDiagram({ tasks: [...], title: 'Migration' });
+ *   g.save('./diagrams/migration.svg');
+ *   const svg = g.generate();
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttDiagram = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const palette_1 = require("./palette");
+const svg_dom_1 = require("./svg-dom");
+// ─── Internal helpers ──────────────────────────────────────────────────────
+const DAY_MS = 24 * 60 * 60 * 1000;
+function parseDate(s) {
+    const t = new Date(s).getTime();
+    return Number.isNaN(t) ? 0 : t;
+}
+// ─── Main class ────────────────────────────────────────────────────────────
+class GanttDiagram {
+    constructor(options) {
+        this.opts = {
+            title: options.title ?? 'Timeline',
+            theme: options.theme ?? 'light',
+            color: options.color ?? '',
+            axis: options.axis ?? 'weeks',
+            tasks: options.tasks,
+        };
+    }
+    /** Group tasks into sections preserving first-seen order. */
+    buildSections() {
+        const palettes = (0, palette_1.rotatedPalettes)(this.opts.color);
+        const order = [];
+        const map = new Map();
+        this.opts.tasks.forEach((task, index) => {
+            const key = task.section ?? '';
+            if (!map.has(key)) {
+                map.set(key, []);
+                order.push(key);
+            }
+            map.get(key).push({ task, index });
+        });
+        return order.map((name, i) => ({
+            name,
+            accent: palettes[i % palettes.length],
+            tasks: map.get(name),
+        }));
+    }
+    generate() {
+        const { title, theme, color, axis, tasks } = this.opts;
+        const accent = (0, palette_1.resolveAccent)(color);
+        const t = (0, palette_1.resolveTheme)(theme);
+        const LABEL_W = GanttDiagram.LABEL_W;
+        const AXIS_W = GanttDiagram.AXIS_W;
+        const HDR = GanttDiagram.HDR;
+        const AXIS_HDR = GanttDiagram.AXIS_HDR;
+        const ROW_H = GanttDiagram.ROW_H;
+        const SECTION_H = GanttDiagram.SECTION_H;
+        const BAR_PAD = GanttDiagram.BAR_PAD;
+        const PAD = GanttDiagram.PAD;
+        const FOOTER = GanttDiagram.FOOTER;
+        const sections = this.buildSections();
+        // ── Time scale: min start → max end across all tasks ────────────────
+        let minStart = Infinity;
+        let maxEnd = -Infinity;
+        for (const task of tasks) {
+            const s = parseDate(task.start);
+            const e = parseDate(task.end);
+            if (s < minStart)
+                minStart = s;
+            if (e > maxEnd)
+                maxEnd = e;
+        }
+        if (!Number.isFinite(minStart))
+            minStart = 0;
+        if (!Number.isFinite(maxEnd) || maxEnd <= minStart)
+            maxEnd = minStart + DAY_MS;
+        const span = maxEnd - minStart;
+        // ── Row layout: sections add a heading row each ─────────────────────
+        const showSectionHeadings = sections.some((s) => s.name !== '');
+        let bodyH = 0;
+        for (const sec of sections) {
+            if (showSectionHeadings)
+                bodyH += SECTION_H;
+            bodyH += sec.tasks.length * ROW_H;
+        }
+        const chartTop = PAD + HDR + AXIS_HDR;
+        const chartLeft = PAD;
+        const axisLeft = chartLeft + LABEL_W;
+        const svgW = LABEL_W + AXIS_W + 2 * PAD;
+        const svgH = chartTop + bodyH + FOOTER + PAD;
+        const doc = new svg_dom_1.SvgDocument(svgW, svgH);
+        const svg = doc.root;
+        const uid = title.replace(/\W/g, '') || 'gantt';
+        // ── Map a date (ms) → x within the axis area ─────────────────────────
+        const xForMs = (ms) => axisLeft + ((ms - minStart) / span) * AXIS_W;
+        const xForDate = (s) => xForMs(parseDate(s));
+        // ── Background ──────────────────────────────────────────────────────
+        svg.child('rect', { class: 'canvas', width: svgW, height: svgH, fill: t.canvasBg });
+        // ── Defs: header gradient + arrow marker ────────────────────────────
+        doc.linearGradient(`hg${uid}`, [
+            [0, accent.from],
+            [55, accent.mid],
+            [100, accent.to],
+        ]);
+        const marker = doc
+            .defs()
+            .child('marker', {
+            id: `arrow${uid}`,
+            markerWidth: 8,
+            markerHeight: 8,
+            refX: 6,
+            refY: 3,
+            orient: 'auto',
+            markerUnits: 'userSpaceOnUse',
+        });
+        marker.child('path', { d: 'M0,0 L6,3 L0,6 Z', fill: t.textSecondary });
+        // ── Header bar ──────────────────────────────────────────────────────
+        svg.child('rect', {
+            class: 'header',
+            x: chartLeft,
+            y: PAD,
+            width: LABEL_W + AXIS_W,
+            height: HDR,
+            rx: 10,
+            fill: `url(#hg${uid})`,
+        });
+        svg
+            .child('text', {
+            x: chartLeft + 18,
+            y: PAD + 40,
+            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-size': 22,
+            'font-weight': 800,
+            fill: '#FFFFFF',
+        })
+            .text(title);
+        // ── Axis area geometry ──────────────────────────────────────────────
+        const axisTop = PAD + HDR;
+        const chartBottom = chartTop + bodyH;
+        // ── Gridlines + axis tick labels ────────────────────────────────────
+        const step = axis === 'days' ? DAY_MS : axis === 'months' ? 30 * DAY_MS : 7 * DAY_MS;
+        // Iterate from minStart to maxEnd inclusive, drawing a vertical line at each tick.
+        for (let ms = minStart; ms <= maxEnd + 1; ms += step) {
+            const x = xForMs(Math.min(ms, maxEnd));
+            svg.child('line', {
+                class: 'gridline',
+                x1: x,
+                y1: axisTop + AXIS_HDR,
+                x2: x,
+                y2: chartBottom,
+                stroke: t.border,
+                'stroke-width': 1,
+            });
+            const label = new Date(ms).toISOString().slice(0, 10);
+            svg
+                .child('text', {
+                class: 'axis-tick',
+                x: x + 3,
+                y: axisTop + AXIS_HDR - 8,
+                'font-family': "'SF Mono',monospace",
+                'font-size': 9,
+                fill: t.textSecondary,
+            })
+                .text(label);
+        }
+        // Ensure a closing gridline at maxEnd.
+        svg.child('line', {
+            class: 'gridline',
+            x1: xForMs(maxEnd),
+            y1: axisTop + AXIS_HDR,
+            x2: xForMs(maxEnd),
+            y2: chartBottom,
+            stroke: t.border,
+            'stroke-width': 1,
+        });
+        // Separator between label column and axis.
+        svg.child('line', {
+            class: 'axis-divider',
+            x1: axisLeft,
+            y1: axisTop,
+            x2: axisLeft,
+            y2: chartBottom,
+            stroke: t.border,
+            'stroke-width': 1.5,
+        });
+        // ── Rows: sections + tasks + bars ───────────────────────────────────
+        // Track each task's bar geometry by name for dependency arrows.
+        const barGeom = new Map();
+        let y = chartTop;
+        for (const sec of sections) {
+            if (showSectionHeadings) {
+                svg.child('rect', {
+                    class: 'section',
+                    x: chartLeft,
+                    y,
+                    width: LABEL_W + AXIS_W,
+                    height: SECTION_H,
+                    fill: sec.accent.light,
+                });
+                svg.child('rect', {
+                    class: 'section-accent',
+                    x: chartLeft,
+                    y,
+                    width: 5,
+                    height: SECTION_H,
+                    fill: sec.accent.mid,
+                });
+                svg
+                    .child('text', {
+                    class: 'section-label',
+                    x: chartLeft + 16,
+                    y: y + SECTION_H / 2 + 4,
+                    'font-family': 'system-ui,sans-serif',
+                    'font-size': 12,
+                    'font-weight': 700,
+                    fill: sec.accent.text,
+                    'letter-spacing': 0.5,
+                })
+                    .text(sec.name);
+                y += SECTION_H;
+            }
+            for (const { task } of sec.tasks) {
+                const rowY = y;
+                const midY = rowY + ROW_H / 2;
+                // Row label
+                const dispName = task.name.length > 26 ? task.name.slice(0, 25) + '…' : task.name;
+                svg
+                    .child('text', {
+                    class: 'task-label',
+                    x: chartLeft + 14,
+                    y: midY + 4,
+                    'font-family': 'system-ui,sans-serif',
+                    'font-size': 12,
+                    'font-weight': 600,
+                    fill: t.textPrimary,
+                })
+                    .text(dispName);
+                const sx = xForDate(task.start);
+                const ex = xForDate(task.end);
+                if (task.milestone) {
+                    // Diamond centered at the start date.
+                    const r = 8;
+                    const cx = sx;
+                    const cy = midY;
+                    svg.child('path', {
+                        class: 'milestone',
+                        d: `M${cx},${cy - r} L${cx + r},${cy} L${cx},${cy + r} L${cx - r},${cy} Z`,
+                        fill: sec.accent.from,
+                        stroke: sec.accent.mid,
+                        'stroke-width': 1.5,
+                    });
+                    barGeom.set(task.name, { x: cx - r, y: cy - r, w: 2 * r, h: 2 * r });
+                }
+                else {
+                    const barY = rowY + BAR_PAD;
+                    const barH = ROW_H - 2 * BAR_PAD;
+                    const barW = Math.max(2, ex - sx);
+                    // Full bar
+                    svg.child('rect', {
+                        class: 'bar',
+                        x: sx,
+                        y: barY,
+                        width: barW,
+                        height: barH,
+                        rx: 4,
+                        fill: sec.accent.mid,
+                        opacity: 0.85,
+                    });
+                    // % complete overlay
+                    if (typeof task.percent === 'number' && task.percent > 0) {
+                        const pct = Math.max(0, Math.min(100, task.percent));
+                        svg.child('rect', {
+                            class: 'bar-progress',
+                            x: sx,
+                            y: barY,
+                            width: Math.max(1, (barW * pct) / 100),
+                            height: barH,
+                            rx: 4,
+                            fill: sec.accent.from,
+                        });
+                        svg
+                            .child('text', {
+                            class: 'bar-pct',
+                            x: sx + barW + 6,
+                            y: midY + 4,
+                            'font-family': "'SF Mono',monospace",
+                            'font-size': 10,
+                            'font-weight': 700,
+                            fill: t.textSecondary,
+                        })
+                            .text(`${pct}%`);
+                    }
+                    barGeom.set(task.name, { x: sx, y: barY, w: barW, h: barH });
+                }
+                y += ROW_H;
+            }
+        }
+        // ── Dependency arrows ───────────────────────────────────────────────
+        for (const task of tasks) {
+            if (!task.dependsOn)
+                continue;
+            const from = barGeom.get(task.dependsOn);
+            const to = barGeom.get(task.name);
+            if (!from || !to)
+                continue;
+            const x1 = from.x + from.w;
+            const y1 = from.y + from.h / 2;
+            const x2 = to.x;
+            const y2 = to.y + to.h / 2;
+            const midX = (x1 + x2) / 2;
+            svg.child('path', {
+                class: 'dependency',
+                d: `M${x1},${y1} C${midX},${y1} ${midX},${y2} ${x2},${y2}`,
+                fill: 'none',
+                stroke: t.textSecondary,
+                'stroke-width': 1.5,
+                'stroke-dasharray': '4 3',
+                'marker-end': `url(#arrow${uid})`,
+            });
+        }
+        // ── Footer ──────────────────────────────────────────────────────────
+        const footerY = chartBottom + 10;
+        svg
+            .child('text', {
+            class: 'footer',
+            x: chartLeft + 2,
+            y: footerY + 22,
+            'font-family': 'system-ui,sans-serif',
+            'font-size': 11,
+            fill: t.textSecondary,
+        })
+            .text(`${tasks.length} task${tasks.length !== 1 ? 's' : ''} · ${new Date(minStart)
+            .toISOString()
+            .slice(0, 10)} → ${new Date(maxEnd).toISOString().slice(0, 10)}`);
+        return doc.toString('Generated by ts-prorm-orm GanttDiagram');
+    }
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath) {
+        const resolved = path.resolve(outputPath);
+        const dir = path.dirname(resolved);
+        if (!fs.existsSync(dir))
+            fs.mkdirSync(dir, { recursive: true });
+        fs.writeFileSync(resolved, this.generate(), 'utf-8');
+        return resolved;
+    }
+}
+exports.GanttDiagram = GanttDiagram;
+// Layout constants (px)
+GanttDiagram.LABEL_W = 220;
+GanttDiagram.AXIS_W = 640;
+GanttDiagram.HDR = 64;
+GanttDiagram.AXIS_HDR = 34;
+GanttDiagram.ROW_H = 38;
+GanttDiagram.SECTION_H = 30;
+GanttDiagram.BAR_PAD = 8;
+GanttDiagram.PAD = 24;
+GanttDiagram.FOOTER = 40;
+exports.default = GanttDiagram;