shipwright-cli 2.2.2 → 2.3.1

package/dashboard/src/components/charts/pipeline-rail.ts

@@ -0,0 +1,105 @@
+// SVG Pipeline Stage Visualization
+
+import { STAGES, STAGE_SHORT, STAGE_HEX } from "../../design/tokens";
+import { escapeHtml } from "../../core/helpers";
+import type { PipelineInfo } from "../../types/api";
+
+export function renderPipelineSVG(pipeline: PipelineInfo): string {
+  const stagesDone = pipeline.stagesDone || [];
+  const currentStage = pipeline.stage || "";
+  const failed = pipeline.status === "failed";
+
+  const nodeSpacing = 80;
+  const nodeR = 14;
+  const svgWidth = STAGES.length * nodeSpacing + 40;
+  const svgHeight = 72;
+  const yCenter = 28;
+  const yLabel = 60;
+
+  let svg = `<svg class="pipeline-svg" viewBox="0 0 ${svgWidth} ${svgHeight}" width="100%" height="${svgHeight}" xmlns="http://www.w3.org/2000/svg">`;
+
+  // Connecting lines
+  for (let i = 0; i < STAGES.length - 1; i++) {
+    const x1 = 20 + i * nodeSpacing + nodeR;
+    const x2 = 20 + (i + 1) * nodeSpacing - nodeR;
+    const isDone = stagesDone.indexOf(STAGES[i]) !== -1;
+    const lineColor = isDone ? "#4ade80" : "#1a3a6a";
+    const dashAttr = isDone ? "" : ' stroke-dasharray="4,3"';
+    svg += `<line x1="${x1}" y1="${yCenter}" x2="${x2}" y2="${yCenter}" stroke="${lineColor}" stroke-width="2"${dashAttr}/>`;
+  }
+
+  // Stage nodes
+  for (let i = 0; i < STAGES.length; i++) {
+    const s = STAGES[i];
+    const cx = 20 + i * nodeSpacing;
+    const isDone = stagesDone.indexOf(s) !== -1;
+    const isActive = s === currentStage;
+    const isFailed = failed && isActive;
+
+    let fillColor = "#0d1f3c";
+    let strokeColor = "#1a3a6a";
+    let textColor = "#5a6d8a";
+    let extra = "";
+
+    if (isDone) {
+      fillColor = "#4ade80";
+      strokeColor = "#4ade80";
+      textColor = "#060a14";
+    } else if (isFailed) {
+      fillColor = "#f43f5e";
+      strokeColor = "#f43f5e";
+      textColor = "#fff";
+    } else if (isActive) {
+      fillColor = "#00d4ff";
+      strokeColor = "#00d4ff";
+      textColor = "#060a14";
+      extra = ' class="stage-node-active"';
+    }
+
+    if (isActive && !isFailed) {
+      svg +=
+        `<circle cx="${cx}" cy="${yCenter}" r="${nodeR + 4}" fill="none" stroke="${strokeColor}" stroke-width="1" opacity="0.3"${extra}>` +
+        `<animate attributeName="r" values="${nodeR + 2};${nodeR + 6};${nodeR + 2}" dur="2s" repeatCount="indefinite"/>` +
+        `<animate attributeName="opacity" values="0.3;0.1;0.3" dur="2s" repeatCount="indefinite"/></circle>`;
+    }
+
+    svg += `<circle cx="${cx}" cy="${yCenter}" r="${nodeR}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="2"/>`;
+    svg += `<text x="${cx}" y="${yCenter + 4}" text-anchor="middle" fill="${textColor}" font-family="'JetBrains Mono', monospace" font-size="8" font-weight="600">${STAGE_SHORT[s]}</text>`;
+    svg += `<text x="${cx}" y="${yLabel}" text-anchor="middle" fill="#5a6d8a" font-family="'JetBrains Mono', monospace" font-size="7">${escapeHtml(s === "compound_quality" ? "quality" : s)}</text>`;
+  }
+
+  svg += "</svg>";
+  return svg;
+}
+
+export function renderDoraGrades(
+  dora:
+    | Record<string, { grade: string; value: number; unit: string }>
+    | null
+    | undefined,
+): string {
+  if (!dora) return "";
+
+  const metrics = [
+    { key: "deploy_freq", label: "Deploy Frequency" },
+    { key: "lead_time", label: "Lead Time" },
+    { key: "cfr", label: "Change Failure Rate" },
+    { key: "mttr", label: "Mean Time to Recovery" },
+  ];
+
+  let html = '<div class="dora-grades-row">';
+  for (const m of metrics) {
+    const d = (dora as Record<string, any>)[m.key];
+    if (!d) continue;
+    const grade = (d.grade || "N/A").toLowerCase();
+    const gradeClass = "dora-" + grade;
+    html +=
+      `<div class="dora-grade-card">` +
+      `<span class="dora-grade-label">${escapeHtml(m.label)}</span>` +
+      `<span class="dora-badge ${gradeClass}">${escapeHtml(d.grade || "N/A")}</span>` +
+      `<span class="dora-grade-value">${d.value != null ? d.value.toFixed(1) : "\u2014"} ${escapeHtml(d.unit || "")}</span>` +
+      `</div>`;
+  }
+  html += "</div>";
+  return html;
+}

package/dashboard/src/components/charts/sparkline.ts

@@ -0,0 +1,82 @@
+// SVG Sparkline / Line Chart
+
+export function renderSparkline(
+  points: Array<number | { value: number }>,
+  color: string,
+  width: number,
+  height: number,
+): string {
+  if (!points || points.length < 2) return "";
+
+  let maxVal = 0;
+  let minVal = Infinity;
+  for (const p of points) {
+    const v = typeof p === "object" ? p.value || 0 : p;
+    if (v > maxVal) maxVal = v;
+    if (v < minVal) minVal = v;
+  }
+  const range = maxVal - minVal || 1;
+  const padding = 2;
+  const w = width - padding * 2;
+  const h = height - padding * 2;
+
+  const pathParts: string[] = [];
+  for (let i = 0; i < points.length; i++) {
+    const v =
+      typeof points[i] === "object"
+        ? (points[i] as { value: number }).value || 0
+        : (points[i] as number);
+    const x = padding + (i / (points.length - 1)) * w;
+    const y = padding + h - ((v - minVal) / range) * h;
+    pathParts.push((i === 0 ? "M" : "L") + x.toFixed(1) + "," + y.toFixed(1));
+  }
+
+  return (
+    `<svg class="sparkline" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
+    `<path d="${pathParts.join(" ")}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round"/></svg>`
+  );
+}
+
+export function renderSVGLineChart(
+  points: Array<Record<string, number>>,
+  valueKey: string,
+  color: string,
+  width: number,
+  height: number,
+): string {
+  if (!points || points.length < 2)
+    return '<div class="empty-state"><p>Not enough data</p></div>';
+
+  let maxVal = 0;
+  for (const p of points) {
+    const v = p[valueKey] ?? p.value ?? 0;
+    if (v > maxVal) maxVal = v;
+  }
+  if (maxVal === 0) maxVal = 1;
+
+  const padding = 20;
+  const chartW = width - padding * 2;
+  const chartH = height - padding * 2;
+
+  let svg = `<svg class="svg-line-chart" viewBox="0 0 ${width} ${height}" width="100%" height="${height}">`;
+
+  for (let g = 0; g <= 4; g++) {
+    const gy = padding + (g / 4) * chartH;
+    svg += `<line x1="${padding}" y1="${gy}" x2="${width - padding}" y2="${gy}" stroke="#1a3a6a" stroke-width="0.5"/>`;
+  }
+
+  const pathParts: string[] = [];
+  for (let i = 0; i < points.length; i++) {
+    const v = points[i][valueKey] ?? points[i].value ?? 0;
+    const x = padding + (i / (points.length - 1)) * chartW;
+    const y = padding + chartH - (v / maxVal) * chartH;
+    pathParts.push((i === 0 ? "M" : "L") + x.toFixed(1) + "," + y.toFixed(1));
+  }
+
+  const lastX = padding + chartW;
+  const firstX = padding;
+  svg += `<path d="${pathParts.join(" ")} L${lastX},${padding + chartH} L${firstX},${padding + chartH} Z" fill="${color}" opacity="0.1"/>`;
+  svg += `<path d="${pathParts.join(" ")}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`;
+  svg += "</svg>";
+  return svg;
+}