@c2l2c/backstage-plugin-dora-metrics 0.4.0 → 0.4.2

package/dist/components/DoraMetricsContent.esm.js

@@ -0,0 +1,1134 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useTheme } from '@material-ui/core/styles';
+import { useApi } from '@backstage/core-plugin-api';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { InfoCard } from '@backstage/core-components';
+import { doraMetricsApiRef } from '../api/types.esm.js';
+import { niceHourTicks, niceCountTicks } from '../api/chartUtils.esm.js';
+import { RatingBadge } from './ui/badge.esm.js';
+import { Card, CardLabel, CardDescription, CardFooter } from './ui/card.esm.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './ui/select.esm.js';
+import { ExternalLink } from 'lucide-react';
+
+const ANNOTATION_PROJECT_SLUG = "github.com/project-slug";
+const ANNOTATION_ENVIRONMENTS = "dora-metrics/environments";
+const ANNOTATION_TARGETS = "dora-metrics/targets";
+function parseAnnotationJson(raw) {
+  if (!raw) return void 0;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
+const DATE_RANGE_OPTIONS = [
+  { value: "7", label: "Last 7 days" },
+  { value: "14", label: "Last 14 days" },
+  { value: "30", label: "Last 30 days" },
+  { value: "60", label: "Last 60 days" },
+  { value: "90", label: "Last 90 days" }
+];
+function formatDuration(hours) {
+  const totalMinutes = Math.round(hours * 60);
+  const d = Math.floor(totalMinutes / (24 * 60));
+  const h = Math.floor(totalMinutes % (24 * 60) / 60);
+  const m = totalMinutes % 60;
+  if (d > 0) return h > 0 ? `${d}d ${h}h` : `${d}d`;
+  if (h > 0) return m > 0 ? `${h}h ${m}m` : `${h}h`;
+  return `${m}m`;
+}
+const DURATION_GRADIENT = ["#f87171", "#fb923c", "#fbbf24", "#a3e635", "#4ade80"];
+function durationColor(index, total) {
+  if (total <= 1) return DURATION_GRADIENT[0];
+  const step = (DURATION_GRADIENT.length - 1) / (total - 1);
+  return DURATION_GRADIENT[Math.round(index * step)];
+}
+function buildDeltaLabel(values, unit, lowerIsBetter) {
+  if (values.length < 2) return null;
+  const curr = values[values.length - 1];
+  const prev = values[values.length - 2];
+  const diff = curr - prev;
+  if (Math.abs(diff) < 1e-3) return null;
+  const good = lowerIsBetter ? diff < 0 : diff > 0;
+  const arrow = diff > 0 ? "\u2191" : "\u2193";
+  const fmt = (v) => unit === "hours" ? formatDuration(v) : unit === "%" ? `${Math.round(v * 10) / 10}%` : unit === "per week" ? `${Math.round(v * 10) / 10}/wk` : `${Math.round(v * 10) / 10} ${unit}`;
+  const direction = good ? "improving" : "worsening";
+  return {
+    text: `${arrow} ${fmt(Math.abs(diff))} ${direction}`,
+    tooltip: `Latest period: ${fmt(curr)} \xB7 Previous period: ${fmt(prev)}
+Each period = one time bucket (~1/7th of your selected date range)`,
+    good
+  };
+}
+const LOADING_MESSAGES = [
+  "Establishing routes\u2026",
+  "Syncing catalog\u2026",
+  "Loading plugins\u2026",
+  "Fetching PR data\u2026",
+  "Reading entity graph\u2026"
+];
+const STAGES = ["FETCH", "PARSE", "SCORE", "RENDER"];
+const FONT_IMPACT = '"Impact","Haettenschweiler","Franklin Gothic Heavy","Arial Black",sans-serif';
+const FONT_MONO = '"JetBrains Mono","Fira Code","Consolas",monospace';
+function DoraLoadingOverlay() {
+  const theme = useTheme();
+  const isDark = theme.palette.type === "dark";
+  const [activeStage, setActiveStage] = useState(0);
+  const [msgKey, setMsgKey] = useState(0);
+  const [msgIdx, setMsgIdx] = useState(0);
+  useEffect(() => {
+    const st = setInterval(() => setActiveStage((s) => (s + 1) % STAGES.length), 800);
+    return () => clearInterval(st);
+  }, []);
+  useEffect(() => {
+    const mt = setInterval(() => {
+      setMsgIdx((i) => (i + 1) % LOADING_MESSAGES.length);
+      setMsgKey((k) => k + 1);
+    }, 2200);
+    return () => clearInterval(mt);
+  }, []);
+  const textShadow = isDark ? "3px 3px 0 #C24E00, 6px 6px 0 #902800, 9px 9px 0 #5A1800, 12px 12px 0 rgba(0,0,0,0.55), 0 0 60px rgba(250,100,0,0.45)" : "3px 3px 0 #C24E00, 6px 6px 0 #902800, 9px 9px 0 rgba(80,20,0,0.28), 0 0 32px rgba(250,100,0,0.22)";
+  const mutedColor = isDark ? "#3f3f46" : "#a1a1aa";
+  const subtitleColor = isDark ? "#52525b" : "#71717a";
+  const borderColor = isDark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { "aria-hidden": true, style: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 900,
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    background: isDark ? "rgba(6,6,9,0.65)" : "rgba(253,252,251,0.70)"
+  } }), /* @__PURE__ */ React.createElement("div", { style: {
+    position: "fixed",
+    zIndex: 901,
+    top: "50%",
+    left: "50%",
+    transform: "translateX(-50%) translateY(-50%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "48px 56px 40px",
+    borderRadius: 20,
+    background: isDark ? "rgba(9,9,12,0.82)" : "rgba(255,255,255,0.88)",
+    border: `1px solid ${borderColor}`,
+    boxShadow: isDark ? "0 0 0 1px rgba(250,100,0,0.06), 0 32px 80px rgba(0,0,0,0.65)" : "0 32px 80px rgba(0,0,0,0.12)",
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    animation: "dlsCardIn 0.35s cubic-bezier(0.34,1.2,0.64,1) both",
+    overflow: "visible"
+  } }, /* @__PURE__ */ React.createElement("div", { "aria-hidden": true, style: {
+    position: "absolute",
+    width: 500,
+    height: 360,
+    left: "50%",
+    top: "50%",
+    transform: "translateX(-50%) translateY(-50%)",
+    background: `radial-gradient(ellipse at center, ${isDark ? "rgba(250,100,0,0.08)" : "rgba(250,100,0,0.05)"} 0%, transparent 70%)`,
+    animation: "dlsBreath 3.2s ease-in-out infinite",
+    pointerEvents: "none",
+    borderRadius: 20
+  } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", lineHeight: 1, marginBottom: 6 } }, ["D", "O", "R", "A"].map((letter, i) => /* @__PURE__ */ React.createElement("span", { key: i, style: {
+    fontFamily: FONT_IMPACT,
+    fontWeight: 900,
+    fontSize: 110,
+    color: "#FA6400",
+    letterSpacing: "0.04em",
+    display: "inline-block",
+    transform: "skewX(-6deg)",
+    textShadow,
+    WebkitTextStroke: "0.5px #C24E00",
+    animation: `dlsLetterDrop 0.6s cubic-bezier(0.34,1.45,0.64,1) ${i * 0.1}s both`
+  } }, letter))), /* @__PURE__ */ React.createElement("span", { style: {
+    fontFamily: "Inter,system-ui,sans-serif",
+    fontSize: 13,
+    fontWeight: 400,
+    letterSpacing: "0.06em",
+    color: subtitleColor,
+    marginBottom: 32,
+    animation: "dlsFadeUp 0.4s ease 0.55s both"
+  } }, "Metrics"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0, marginBottom: 20, animation: "dlsFadeUp 0.4s ease 0.7s both" } }, STAGES.map((stage, i) => {
+    const isActive = i === activeStage;
+    const isComplete = i < activeStage;
+    return /* @__PURE__ */ React.createElement("div", { key: stage, style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 5, width: 64 } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: 12, height: 12 } }, isActive && /* @__PURE__ */ React.createElement("div", { style: {
+      position: "absolute",
+      inset: -6,
+      borderRadius: "50%",
+      border: "1.5px solid rgba(250,100,0,0.5)",
+      animation: "dlsPulse 1s ease-out infinite"
+    } }), /* @__PURE__ */ React.createElement("div", { style: {
+      width: 12,
+      height: 12,
+      borderRadius: "50%",
+      background: isActive || isComplete ? "#FA6400" : isDark ? "#27272a" : "#e4e4e7",
+      border: `2px solid ${isActive || isComplete ? "#C24E00" : isDark ? "#3f3f46" : "#d4d4d8"}`,
+      boxShadow: isActive ? "0 0 14px rgba(250,100,0,0.7)" : "none",
+      transition: "background 0.3s, box-shadow 0.3s"
+    } })), /* @__PURE__ */ React.createElement("span", { style: {
+      fontFamily: "Inter,system-ui,sans-serif",
+      fontSize: 8,
+      fontWeight: 700,
+      letterSpacing: "0.12em",
+      textTransform: "uppercase",
+      color: isActive ? "#FA6400" : isComplete ? mutedColor : mutedColor,
+      transition: "color 0.3s"
+    } }, stage)), i < STAGES.length - 1 && /* @__PURE__ */ React.createElement("div", { style: {
+      width: 32,
+      height: 2,
+      marginBottom: 14,
+      position: "relative",
+      overflow: "hidden",
+      background: isDark ? "#27272a" : "#e4e4e7",
+      borderRadius: 2
+    } }, /* @__PURE__ */ React.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      borderRadius: 2,
+      background: "#FA6400",
+      transformOrigin: "left center",
+      transform: `scaleX(${i < activeStage ? 1 : isActive ? 0.5 : 0})`,
+      transition: "transform 0.4s ease"
+    } })));
+  })), /* @__PURE__ */ React.createElement("span", { key: msgKey, style: {
+    fontFamily: FONT_MONO,
+    fontSize: 11,
+    color: mutedColor,
+    letterSpacing: "0.04em",
+    animation: "dlsFadeUp 0.3s ease both"
+  } }, LOADING_MESSAGES[msgIdx])), /* @__PURE__ */ React.createElement("style", null, `
+        @keyframes dlsLetterDrop {
+          from { opacity: 0; transform: skewX(-6deg) translateY(-32px) scale(1.1); }
+          65%  { transform: skewX(-6deg) translateY(6px) scale(0.95); }
+          to   { opacity: 1; transform: skewX(-6deg) translateY(0) scale(1); }
+        }
+        @keyframes dlsFadeUp {
+          from { opacity: 0; transform: translateY(10px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes dlsBreath {
+          0%, 100% { transform: translateX(-50%) translateY(-50%) scale(0.85); opacity: 0.6; }
+          50%       { transform: translateX(-50%) translateY(-50%) scale(1.2);  opacity: 1; }
+        }
+        @keyframes dlsPulse {
+          from { transform: scale(0.6); opacity: 0.9; }
+          to   { transform: scale(2.2); opacity: 0; }
+        }
+        @keyframes dlsCardIn {
+          from { opacity: 0; transform: translateX(-50%) translateY(-46%); }
+          to   { opacity: 1; transform: translateX(-50%) translateY(-50%); }
+        }
+      `));
+}
+function CompactSparkline({
+  values,
+  weekLabels,
+  color,
+  type,
+  formatValue,
+  height = 36
+}) {
+  const theme = useTheme();
+  const isDark = theme.palette.type === "dark";
+  const [hoverIdx, setHoverIdx] = useState(null);
+  const VW = 400;
+  const mutedBorder = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)";
+  const tooltipBg = isDark ? "#1c1c20" : "#ffffff";
+  const tooltipBdr = isDark ? "#3f3f46" : "#e4e4e7";
+  const tooltipText = isDark ? "#ededef" : "#111114";
+  const font = "Inter,system-ui,sans-serif";
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const relX = (e.clientX - rect.left) / rect.width;
+    setHoverIdx(Math.max(0, Math.min(values.length - 1, Math.round(relX * (values.length - 1)))));
+  };
+  if (type === "bar") {
+    const max2 = Math.max(...values, 1);
+    const gap = 4;
+    const barW = (VW - gap * (values.length - 1)) / values.length;
+    const hoverX = hoverIdx !== null ? hoverIdx * (barW + gap) + barW / 2 : null;
+    const tooltipX = hoverX !== null ? Math.min(hoverX - 34, VW - 72) : 0;
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        viewBox: `0 0 ${VW} ${height}`,
+        width: "100%",
+        style: { display: "block", overflow: "visible" },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: () => setHoverIdx(null)
+      },
+      values.map((v, i) => {
+        const h = Math.max(2, v / max2 * (height - 4));
+        return /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            key: i,
+            x: i * (barW + gap),
+            y: height - h,
+            width: barW,
+            height: h,
+            rx: 1.5,
+            fill: color,
+            opacity: i === hoverIdx ? 1 : 0.3 + i / values.length * 0.55
+          }
+        );
+      }),
+      /* @__PURE__ */ React.createElement("line", { x1: 0, y1: height - 0.5, x2: VW, y2: height - 0.5, stroke: mutedBorder, strokeWidth: 1 }),
+      hoverIdx !== null && hoverX !== null && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("rect", { x: tooltipX, y: 2, width: 72, height: 22, rx: 4, fill: tooltipBg, stroke: tooltipBdr, strokeWidth: 1 }), /* @__PURE__ */ React.createElement("text", { x: tooltipX + 36, y: 17, textAnchor: "middle", fill: tooltipText, fontSize: 9, fontWeight: 600, fontFamily: font }, weekLabels[hoverIdx], ": ", formatValue(values[hoverIdx])))
+    ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 3 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" } }, weekLabels[0]), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" } }, weekLabels[weekLabels.length - 1])));
+  }
+  if (values.length < 2) return null;
+  const max = Math.max(...values, 0.01);
+  const min = Math.min(...values);
+  const range = max - min || max || 1;
+  const pad = 3;
+  const pts = values.map((v, i) => [
+    i / (values.length - 1) * (VW - pad * 2) + pad,
+    height - pad * 2 - (v - min) / range * (height - pad * 2 - 2) + pad
+  ]);
+  const d = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
+  const area = `${d} L${pts[pts.length - 1][0]},${height} L${pts[0][0]},${height} Z`;
+  const hoverPt = hoverIdx !== null ? pts[hoverIdx] : null;
+  const tooltipX2 = hoverPt ? Math.min(hoverPt[0] - 34, VW - 72) : 0;
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: `0 0 ${VW} ${height}`,
+      width: "100%",
+      style: { display: "block", overflow: "visible" },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => setHoverIdx(null)
+    },
+    /* @__PURE__ */ React.createElement("path", { d: area, fill: color, opacity: 0.07 }),
+    /* @__PURE__ */ React.createElement("path", { d, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+    pts.map(([x, y], i) => /* @__PURE__ */ React.createElement("circle", { key: i, cx: x, cy: y, r: i === hoverIdx ? 3.5 : i === pts.length - 1 ? 2.5 : 0, fill: color })),
+    /* @__PURE__ */ React.createElement("line", { x1: 0, y1: height - 0.5, x2: VW, y2: height - 0.5, stroke: mutedBorder, strokeWidth: 1 }),
+    hoverPt && hoverIdx !== null && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("line", { x1: hoverPt[0], y1: 0, x2: hoverPt[0], y2: height, stroke: color, strokeWidth: 1, strokeDasharray: "2 2", opacity: 0.4 }), /* @__PURE__ */ React.createElement("rect", { x: tooltipX2, y: 2, width: 72, height: 22, rx: 4, fill: tooltipBg, stroke: tooltipBdr, strokeWidth: 1 }), /* @__PURE__ */ React.createElement("text", { x: tooltipX2 + 36, y: 17, textAnchor: "middle", fill: tooltipText, fontSize: 9, fontWeight: 600, fontFamily: font }, weekLabels[hoverIdx], ": ", formatValue(values[hoverIdx])))
+  ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 3 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" } }, weekLabels[0]), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" } }, weekLabels[weekLabels.length - 1])));
+}
+function DetailedChart({
+  values,
+  weekLabels,
+  bucketMidMs,
+  color,
+  type,
+  formatValue,
+  tickUnit,
+  prs,
+  days,
+  hoveredPrNumber,
+  onPrHover
+}) {
+  const theme = useTheme();
+  const isDark = theme.palette.type === "dark";
+  const [hoverIdx, setHoverIdx] = useState(null);
+  const [tooltip, setTooltip] = useState(null);
+  const containerRef = useRef(null);
+  const W = 800, H = 260;
+  const PAD = { top: 16, right: 16, bottom: 36, left: 56 };
+  const cW = W - PAD.left - PAD.right;
+  const cH = H - PAD.top - PAD.bottom;
+  const prMaxDuration = prs && prs.length > 0 ? Math.max(...prs.map((p) => p.durationHours)) : 0;
+  const rawDataMax = Math.max(...values.filter((v) => v > 0), prMaxDuration, 0.01);
+  const yTicks = tickUnit === "hours" ? niceHourTicks(rawDataMax) : tickUnit === "count" ? niceCountTicks(rawDataMax) : [0, 0.25, 0.5, 0.75, 1].map((t) => t * rawDataMax);
+  const dataMin = 0;
+  const dataMax = yTicks[yTicks.length - 1];
+  const dataRange = dataMax - dataMin || 1;
+  const yScale = (v) => cH - (v - dataMin) / dataRange * cH;
+  const cutoffMs = Date.now() - days * 24 * 60 * 60 * 1e3;
+  const rangeMs = days * 24 * 60 * 60 * 1e3;
+  const xTime = (ms) => Math.max(0, Math.min(cW, (ms - cutoffMs) / rangeMs * cW));
+  const xIdx = (i) => bucketMidMs.length === values.length ? xTime(bucketMidMs[i]) : values.length > 1 ? i / (values.length - 1) * cW : cW / 2;
+  const pts = values.map((v, i) => [PAD.left + xIdx(i), PAD.top + yScale(v)]);
+  const linePath = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
+  const areaPath = pts.length > 1 ? `${linePath} L${pts[pts.length - 1][0]},${PAD.top + cH} L${pts[0][0]},${PAD.top + cH} Z` : "";
+  const gap = 6;
+  const barW = values.length > 1 ? (cW - gap * (values.length - 1)) / values.length : cW;
+  const gridColor = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)";
+  const axisColor = isDark ? "#3f3f46" : "#d4d4d8";
+  const labelColor = isDark ? "#52525b" : "#a1a1aa";
+  const font = "Inter,system-ui,sans-serif";
+  const gradId = `dg_${color.replace("#", "")}`;
+  const nearestBucket = (ms) => {
+    if (bucketMidMs.length === 0) return 0;
+    let best = 0, bestDist = Infinity;
+    bucketMidMs.forEach((mid, i) => {
+      const d = Math.abs(ms - mid);
+      if (d < bestDist) {
+        bestDist = d;
+        best = i;
+      }
+    });
+    return best;
+  };
+  const handleSvgMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const relX = (e.clientX - rect.left - PAD.left * (rect.width / W)) / (rect.width * cW / W);
+    const idx = Math.max(0, Math.min(values.length - 1, Math.round(relX * (values.length - 1))));
+    setHoverIdx(idx);
+    const cRect = containerRef.current?.getBoundingClientRect();
+    const x = cRect ? e.clientX - cRect.left : 0;
+    const y = cRect ? e.clientY - cRect.top : 0;
+    setTooltip({ x, y, primary: formatValue(values[idx]), secondary: weekLabels[idx] });
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, style: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: `0 0 ${W} ${H}`,
+      width: "100%",
+      style: { display: "block" },
+      onMouseMove: handleSvgMouseMove,
+      onMouseLeave: () => {
+        setHoverIdx(null);
+        setTooltip(null);
+      }
+    },
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React.createElement("stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }), /* @__PURE__ */ React.createElement("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })), /* @__PURE__ */ React.createElement("clipPath", { id: `prClip_${gradId}` }, /* @__PURE__ */ React.createElement("rect", { x: PAD.left, y: PAD.top - 8, width: cW, height: cH + 16 }))),
+    yTicks.map((v, i) => {
+      const y = PAD.top + yScale(v);
+      return /* @__PURE__ */ React.createElement("g", { key: i }, i > 0 && /* @__PURE__ */ React.createElement("line", { x1: PAD.left, y1: y, x2: PAD.left + cW, y2: y, stroke: gridColor, strokeWidth: 1, strokeDasharray: "3 4" }), /* @__PURE__ */ React.createElement("text", { x: PAD.left - 6, y: y + 4, textAnchor: "end", fill: labelColor, fontSize: 10, fontFamily: font }, formatValue(v)));
+    }),
+    /* @__PURE__ */ React.createElement("line", { x1: PAD.left, y1: PAD.top + cH, x2: PAD.left + cW, y2: PAD.top + cH, stroke: axisColor, strokeWidth: 1 }),
+    type === "bar" ? values.map((v, i) => {
+      const bH = Math.max(2, (v - dataMin) / dataRange * cH);
+      const x = PAD.left + i * (barW + gap);
+      return /* @__PURE__ */ React.createElement(
+        "rect",
+        {
+          key: i,
+          x,
+          y: PAD.top + cH - bH,
+          width: barW,
+          height: bH,
+          rx: 3,
+          fill: color,
+          opacity: i === hoverIdx ? 0.95 : 0.4 + i / Math.max(values.length - 1, 1) * 0.45
+        }
+      );
+    }) : /* @__PURE__ */ React.createElement(React.Fragment, null, !prs && areaPath && /* @__PURE__ */ React.createElement("path", { d: areaPath, fill: `url(#${gradId})` }), !prs && /* @__PURE__ */ React.createElement("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }), !prs && pts.map(([x, y], i) => values[i] > 0 && /* @__PURE__ */ React.createElement(
+      "circle",
+      {
+        key: i,
+        cx: x,
+        cy: y,
+        r: i === hoverIdx ? 5.5 : 4,
+        fill: isDark ? "#0f0f12" : "#ffffff",
+        stroke: color,
+        strokeWidth: i === hoverIdx ? 2.5 : 1.5
+      }
+    ))),
+    prs && type === "line" && /* @__PURE__ */ React.createElement("g", { clipPath: `url(#prClip_${gradId})` }, prs.map((pr, dotIdx) => {
+      const mergedMs = new Date(pr.mergedAt).getTime();
+      const bIdx = nearestBucket(mergedMs);
+      const jitter = ((pr.number * 17 + dotIdx * 11) % 13 - 6) * 5;
+      const px = PAD.left + xIdx(bIdx) + jitter;
+      const rawPy = PAD.top + yScale(pr.durationHours);
+      const py = Math.max(PAD.top + 4, Math.min(PAD.top + cH - 4, rawPy));
+      const isHov = pr.number === hoveredPrNumber;
+      pts[bIdx];
+      return /* @__PURE__ */ React.createElement(
+        "g",
+        {
+          key: pr.number,
+          style: { cursor: "pointer" },
+          onMouseEnter: (e) => {
+            e.stopPropagation();
+            const cRect = containerRef.current?.getBoundingClientRect();
+            const x = cRect ? e.clientX - cRect.left : 0;
+            const y = cRect ? e.clientY - cRect.top : 0;
+            setTooltip({
+              x,
+              y,
+              primary: `#${pr.number}: ${pr.title}`,
+              secondary: `${formatValue(pr.durationHours)} \xB7 ${new Date(pr.mergedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`
+            });
+            onPrHover?.(pr.number);
+          },
+          onMouseLeave: () => {
+            setTooltip(null);
+            onPrHover?.(null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("circle", { cx: px, cy: py, r: isHov ? 11 : 7, fill: color, opacity: isHov ? 0.2 : 0.1 }),
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            cx: px,
+            cy: py,
+            r: isHov ? 5.5 : 3.5,
+            fill: isHov ? color : isDark ? "#1a1a20" : "#fff",
+            stroke: color,
+            strokeWidth: isHov ? 0 : 1.5,
+            opacity: isHov ? 1 : 0.8
+          }
+        )
+      );
+    })),
+    hoverIdx !== null && type === "line" && pts[hoverIdx] && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "line",
+      {
+        x1: pts[hoverIdx][0],
+        y1: PAD.top,
+        x2: pts[hoverIdx][0],
+        y2: PAD.top + cH,
+        stroke: color,
+        strokeWidth: 1,
+        strokeDasharray: "3 3",
+        opacity: 0.3
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "line",
+      {
+        x1: PAD.left,
+        y1: pts[hoverIdx][1],
+        x2: PAD.left + cW,
+        y2: pts[hoverIdx][1],
+        stroke: color,
+        strokeWidth: 1,
+        strokeDasharray: "3 3",
+        opacity: 0.2
+      }
+    )),
+    weekLabels.map((lbl, i) => {
+      const total = weekLabels.length;
+      const step = Math.max(1, Math.floor(total / 5));
+      if (i !== 0 && i !== total - 1 && i % step !== 0) return null;
+      const x = type === "bar" ? PAD.left + i * (barW + gap) + barW / 2 : PAD.left + xIdx(i);
+      return /* @__PURE__ */ React.createElement("text", { key: i, x, y: H - 8, textAnchor: "middle", fill: labelColor, fontSize: 10, fontFamily: font }, lbl);
+    })
+  ), tooltip && (() => {
+    const TW = 220;
+    const cW2 = containerRef.current?.offsetWidth ?? 800;
+    const nearRight = tooltip.x + TW + 12 > cW2;
+    return /* @__PURE__ */ React.createElement("div", { style: {
+      position: "absolute",
+      left: nearRight ? tooltip.x - TW - 8 : tooltip.x + 8,
+      top: tooltip.y - 36,
+      zIndex: 9999,
+      pointerEvents: "none",
+      background: isDark ? "#18181b" : "#ffffff",
+      border: `1px solid ${isDark ? "#3f3f46" : "#e4e4e7"}`,
+      borderRadius: 7,
+      padding: "7px 10px",
+      boxShadow: isDark ? "0 6px 20px rgba(0,0,0,0.55)" : "0 6px 20px rgba(0,0,0,0.10)",
+      width: TW
+    } }, /* @__PURE__ */ React.createElement("div", { style: {
+      fontSize: 12,
+      fontWeight: 600,
+      color: isDark ? "#ededef" : "#111114",
+      fontFamily: font,
+      lineHeight: 1.4
+    } }, tooltip.primary), tooltip.secondary && /* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: isDark ? "#71717a" : "#a1a1aa", fontFamily: font, marginTop: 2 } }, tooltip.secondary));
+  })());
+}
+function DetailedOverlay({
+  data,
+  days,
+  onClose
+}) {
+  const theme = useTheme();
+  const isDark = theme.palette.type === "dark";
+  const [hoveredPrNumber, setHoveredPrNumber] = useState(null);
+  const prRowRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  useEffect(() => {
+    if (hoveredPrNumber !== null) {
+      const el = prRowRefs.current.get(hoveredPrNumber);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [hoveredPrNumber]);
+  const { title, metric, description, lowerIsBetter, sparklineValues, sparklineType, sparklineColor, tickUnit, weekLabels, bucketMidMs, prs, prListLabel } = data;
+  const isDeployFreq = sparklineType === "bar";
+  const displayValue = metric.unit === "hours" ? formatDuration(metric.value) : String(metric.value);
+  const displayUnit = metric.unit === "hours" ? "" : metric.unit;
+  const formatVal = (v) => metric.unit === "hours" ? formatDuration(v) : `${Math.round(v * 10) / 10}`;
+  const borderColor = isDark ? "#27272a" : "#e4e4e7";
+  const mutedColor = isDark ? "#52525b" : "#a1a1aa";
+  const targetLabel = lowerIsBetter ? `Target: < ${metric.unit === "hours" ? formatDuration(metric.target) : metric.target} ${displayUnit}` : `Target: \u2265 ${metric.target} ${displayUnit}`;
+  const prsByDate = isDeployFreq && prs ? prs.reduce((acc, pr) => {
+    const date = new Date(pr.mergedAt).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+    if (!acc[date]) acc[date] = [];
+    acc[date].push(pr);
+    return acc;
+  }, {}) : {};
+  const sortedDates = Object.keys(prsByDate).sort(
+    (a, b) => new Date(prsByDate[b][0].mergedAt).getTime() - new Date(prsByDate[a][0].mergedAt).getTime()
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { onClick: onClose, style: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 499,
+    background: isDark ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.3)",
+    backdropFilter: "blur(4px)"
+  } }), /* @__PURE__ */ React.createElement("div", { style: {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translateX(-50%) translateY(-50%)",
+    width: "min(92vw, 960px)",
+    maxHeight: "calc(100vh - 80px)",
+    zIndex: 500,
+    background: isDark ? "#09090c" : "#fafafa",
+    border: `1px solid ${borderColor}`,
+    borderRadius: 14,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    animation: "detailExpandIn 0.2s cubic-bezier(0.34,1.2,0.64,1)",
+    boxShadow: isDark ? "0 24px 64px rgba(0,0,0,0.7)" : "0 24px 64px rgba(0,0,0,0.18)"
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    padding: "20px 24px 16px",
+    borderBottom: `1px solid ${borderColor}`,
+    flexShrink: 0
+  } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 10, fontWeight: 700, color: mutedColor, textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 8 } }, title, " \xB7 ", weekLabels[0], " \u2013 ", weekLabels[weekLabels.length - 1]), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 52, fontWeight: 700, color: theme.palette.text.primary, lineHeight: 1, letterSpacing: "-0.02em" } }, displayValue), displayUnit && /* @__PURE__ */ React.createElement("span", { style: { fontSize: 18, color: mutedColor, fontWeight: 500 } }, displayUnit), /* @__PURE__ */ React.createElement(RatingBadge, { rating: metric.rating })), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 12, color: mutedColor, marginTop: 6 } }, description, " \xB7 ", /* @__PURE__ */ React.createElement("span", { style: { fontStyle: "italic" } }, targetLabel))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onClose,
+      style: {
+        all: "unset",
+        cursor: "pointer",
+        width: 30,
+        height: 30,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",
+        color: mutedColor,
+        fontSize: 18,
+        fontWeight: 300,
+        transition: "all 0.12s",
+        flexShrink: 0
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)";
+      }
+    },
+    "\u2715"
+  )), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", padding: "20px 24px", display: "flex", flexDirection: "column", gap: 20 } }, weekLabels.length >= 2 ? /* @__PURE__ */ React.createElement(
+    DetailedChart,
+    {
+      values: sparklineValues,
+      weekLabels,
+      bucketMidMs,
+      color: sparklineColor,
+      type: sparklineType,
+      tickUnit,
+      formatValue: formatVal,
+      prs: isDeployFreq ? void 0 : prs,
+      days,
+      hoveredPrNumber,
+      onPrHover: setHoveredPrNumber
+    }
+  ) : /* @__PURE__ */ React.createElement("div", { style: { color: mutedColor, fontSize: 13, textAlign: "center", padding: "48px 0" } }, "Not enough data \u2014 select a wider date range."), isDeployFreq && prs && prs.length > 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: mutedColor,
+    textTransform: "uppercase",
+    letterSpacing: "0.12em",
+    marginBottom: 12,
+    borderTop: `1px solid ${borderColor}`,
+    paddingTop: 12
+  } }, prListLabel ?? "All deployments", " \xB7 ", prs.length, " PR", prs.length !== 1 ? "s" : ""), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, sortedDates.map((date) => /* @__PURE__ */ React.createElement("div", { key: date }, /* @__PURE__ */ React.createElement("div", { style: {
+    fontSize: 11,
+    fontWeight: 700,
+    color: sparklineColor,
+    marginBottom: 6,
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  } }, /* @__PURE__ */ React.createElement("span", null, date), /* @__PURE__ */ React.createElement("span", { style: { color: mutedColor, fontWeight: 500 } }, "\xB7 ", prsByDate[date].length, " PR", prsByDate[date].length > 1 ? "s" : "")), /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    paddingLeft: 12,
+    borderLeft: `2px solid ${sparklineColor}22`
+  } }, prsByDate[date].map((pr) => /* @__PURE__ */ React.createElement("div", { key: pr.number, style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 5,
+    padding: "7px 10px",
+    borderRadius: 7,
+    background: isDark ? "#0d0d10" : "#f7f7f9",
+    border: `1px solid ${borderColor}`,
+    transition: "background 0.12s"
+  } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: mutedColor, flexShrink: 0, minWidth: 36 } }, "#", pr.number), /* @__PURE__ */ React.createElement("span", { style: {
+    fontSize: 12,
+    color: theme.palette.text.primary,
+    flex: 1,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }, title: pr.title }, pr.title), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 10, color: mutedColor, flexShrink: 0 } }, formatDuration(pr.durationHours), " lead"), /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: pr.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: { color: mutedColor, flexShrink: 0 }
+    },
+    /* @__PURE__ */ React.createElement(ExternalLink, { size: 11 })
+  )), pr.author && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, pr.authorAvatar ? /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: pr.authorAvatar,
+      alt: pr.author,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        flexShrink: 0,
+        border: `1px solid ${isDark ? "#3f3f46" : "#e4e4e7"}`
+      }
+    }
+  ) : /* @__PURE__ */ React.createElement("div", { style: {
+    width: 16,
+    height: 16,
+    borderRadius: "50%",
+    flexShrink: 0,
+    background: isDark ? "#27272a" : "#e4e4e7",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 8,
+    fontWeight: 700,
+    color: mutedColor
+  } }, pr.author[0].toUpperCase()), /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: `https://github.com/${pr.author}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        fontSize: 10,
+        fontWeight: 500,
+        color: mutedColor,
+        textDecoration: "none",
+        letterSpacing: "0.01em"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.color = "#FA6400";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.color = mutedColor;
+      }
+    },
+    "@",
+    pr.author
+  ))))))))), !isDeployFreq && prs && prs.length > 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: mutedColor,
+    textTransform: "uppercase",
+    letterSpacing: "0.12em",
+    marginBottom: 10,
+    borderTop: `1px solid ${borderColor}`,
+    paddingTop: 12
+  } }, title.toLowerCase().includes("restore") ? "Slowest Hotfix PRs" : "Slowest PRs", " ", "\xB7 hover a row to highlight on chart"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, prs.map((pr, i) => {
+    const col = durationColor(i, prs.length);
+    const maxDur = prs[0].durationHours;
+    const barPct = maxDur > 0 ? pr.durationHours / maxDur * 100 : 0;
+    const isHov = pr.number === hoveredPrNumber;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: pr.number,
+        ref: (el) => {
+          if (el) prRowRefs.current.set(pr.number, el);
+          else prRowRefs.current.delete(pr.number);
+        },
+        onMouseEnter: () => setHoveredPrNumber(pr.number),
+        onMouseLeave: () => setHoveredPrNumber(null),
+        style: {
+          padding: "8px 12px",
+          borderRadius: 8,
+          background: isHov ? isDark ? "#18181f" : "#f0f0ff" : isDark ? "#111114" : "#f4f4f6",
+          border: `1px solid ${isHov ? `${sparklineColor}55` : borderColor}`,
+          display: "flex",
+          flexDirection: "column",
+          gap: 5,
+          transition: "background 0.12s, border-color 0.12s",
+          cursor: "default"
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, minWidth: 0 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: col, flexShrink: 0 } }, "#", pr.number), /* @__PURE__ */ React.createElement("span", { style: {
+        fontSize: 12,
+        color: theme.palette.text.primary,
+        flex: 1,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }, title: pr.title }, pr.title), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 10, color: mutedColor, flexShrink: 0 } }, new Date(pr.mergedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })), /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: pr.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { color: mutedColor, flexShrink: 0, transition: "color 0.12s" }
+        },
+        /* @__PURE__ */ React.createElement(ExternalLink, { size: 11 })
+      )),
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(AnimatedBar, { widthPct: barPct, color: col }), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 11, fontWeight: 700, color: col, minWidth: 52, textAlign: "right", flexShrink: 0 } }, formatDuration(pr.durationHours)))
+    );
+  }))))), /* @__PURE__ */ React.createElement("style", null, `
+        @keyframes detailExpandIn {
+          from { opacity: 0; transform: translateX(-50%) translateY(-46%); }
+          to   { opacity: 1; transform: translateX(-50%) translateY(-50%); }
+        }
+      `));
+}
+function AnimatedBar({ widthPct, color }) {
+  const [width, setWidth] = useState(0);
+  const ref = useRef(null);
+  const theme = useTheme();
+  const isDark = theme.palette.type === "dark";
+  useEffect(() => {
+    const timer = setTimeout(() => setWidth(widthPct), 80);
+    return () => clearTimeout(timer);
+  }, [widthPct]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        background: isDark ? "#1a1a1e" : "#f0f0f2",
+        borderRadius: 4,
+        height: 5,
+        overflow: "hidden",
+        flex: 1,
+        minWidth: 40
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: "100%",
+          width: `${width}%`,
+          background: color,
+          borderRadius: 4,
+          transition: "width 0.55s cubic-bezier(0.4, 0, 0.2, 1)",
+          boxShadow: `0 0 6px ${color}88`
+        }
+      }
+    )
+  );
+}
+function MetricCard({
+  title,
+  metric,
+  description,
+  lowerIsBetter = false,
+  sparklineData,
+  sparklineType = "line",
+  sparklineColor,
+  weekLabels,
+  onExpand,
+  expandLabel
+}) {
+  const theme = useTheme();
+  const isDark = theme.palette.type === "dark";
+  const [hovered, setHovered] = useState(false);
+  const displayValue = metric.unit === "hours" ? formatDuration(metric.value) : metric.value;
+  const displayUnit = metric.unit === "hours" ? "" : metric.unit;
+  const targetValue = metric.unit === "hours" ? formatDuration(metric.target) : metric.target;
+  const targetLabel = lowerIsBetter ? `Target: < ${targetValue} ${displayUnit}`.trim() : `Target: \u2265 ${targetValue} ${displayUnit}`.trim();
+  const hasSparkline = sparklineData && sparklineData.length >= 2 && weekLabels && weekLabels.length >= 2;
+  const delta = hasSparkline ? buildDeltaLabel(sparklineData, metric.unit, lowerIsBetter) : null;
+  const formatVal = (v) => metric.unit === "hours" ? formatDuration(v) : `${Math.round(v * 10) / 10}`;
+  return /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      style: { cursor: onExpand ? "pointer" : void 0 },
+      onClick: onExpand,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 } }, /* @__PURE__ */ React.createElement(CardLabel, null, title), onExpand && /* @__PURE__ */ React.createElement("span", { style: {
+      fontSize: 9,
+      fontWeight: 600,
+      color: isDark ? "#3f3f46" : "#d4d4d8",
+      opacity: hovered ? 1 : 0,
+      transition: "opacity 0.15s",
+      letterSpacing: "0.05em",
+      textTransform: "uppercase",
+      flexShrink: 0
+    } }, "expand \u2197")),
+    /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 } }, delta && /* @__PURE__ */ React.createElement("span", { title: delta.tooltip, style: {
+      fontSize: 10,
+      fontWeight: 600,
+      cursor: "help",
+      color: delta.good ? "#4ade80" : "#f87171",
+      background: delta.good ? isDark ? "rgba(74,222,128,0.08)" : "rgba(74,222,128,0.12)" : isDark ? "rgba(248,113,113,0.08)" : "rgba(248,113,113,0.12)",
+      padding: "2px 8px",
+      borderRadius: 4,
+      whiteSpace: "nowrap"
+    } }, delta.text), /* @__PURE__ */ React.createElement("span", { style: {
+      fontSize: 10,
+      fontWeight: 600,
+      color: isDark ? "#3f3f46" : "#d4d4d8",
+      whiteSpace: "nowrap"
+    } }, lowerIsBetter ? "\u2193 lower = better" : "\u2191 higher = better")),
+    /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 36, fontWeight: 700, color: isDark ? "#f4f4f5" : "#111114", lineHeight: 1 } }, displayValue), displayUnit && /* @__PURE__ */ React.createElement("span", { style: { fontSize: 14, color: isDark ? "#71717a" : "#71717a", fontWeight: 500 } }, displayUnit)),
+    /* @__PURE__ */ React.createElement(RatingBadge, { rating: metric.rating }),
+    hasSparkline && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 2 } }, /* @__PURE__ */ React.createElement(
+      CompactSparkline,
+      {
+        values: sparklineData,
+        weekLabels,
+        color: sparklineColor ?? "#FA6400",
+        type: sparklineType,
+        formatValue: formatVal
+      }
+    )),
+    /* @__PURE__ */ React.createElement(CardDescription, null, description),
+    /* @__PURE__ */ React.createElement(CardFooter, null, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 600, color: isDark ? "#a1a1aa" : "#52525b" } }, targetLabel), expandLabel && onExpand && /* @__PURE__ */ React.createElement("span", { style: {
+      fontSize: 10,
+      fontWeight: 700,
+      color: "#FA6400",
+      letterSpacing: "0.04em",
+      marginLeft: "auto"
+    } }, expandLabel))
+  );
+}
+function NaCard({ title, description }) {
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardLabel, null, title), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 36, fontWeight: 700, color: "#52525b", lineHeight: 1 } }, "N/A")), /* @__PURE__ */ React.createElement(CardDescription, { muted: true }, description));
+}
+function FilterLabel({ children }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, fontWeight: 600, color: theme.palette.text.primary, marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.06em" } }, children);
+}
+function DoraMetricsContent() {
+  const { entity } = useEntity();
+  const doraApi = useApi(doraMetricsApiRef);
+  const muiTheme = useTheme();
+  const textPrimary = muiTheme.palette.text.primary;
+  const textSecondary = muiTheme.palette.text.secondary;
+  const projectSlug = entity.metadata.annotations?.[ANNOTATION_PROJECT_SLUG] ?? "";
+  const annotations = entity.metadata.annotations ?? {};
+  const annotationEnvs = parseAnnotationJson(annotations[ANNOTATION_ENVIRONMENTS]);
+  const annotationTargets = parseAnnotationJson(annotations[ANNOTATION_TARGETS]);
+  const environments = annotationEnvs ?? doraApi.getEnvironments();
+  const defaultEnv = environments[0];
+  const defaultDays = doraApi.getDefaultDays();
+  const [selectedEnvName, setSelectedEnvName] = useState(defaultEnv?.name ?? "");
+  const [selectedDays, setSelectedDays] = useState(String(defaultDays));
+  const selectedEnv = environments.find((e) => e.name === selectedEnvName) ?? defaultEnv;
+  const days = parseInt(selectedDays, 10);
+  const [metrics, setMetrics] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [history, setHistory] = useState(null);
+  const [expanded, setExpanded] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    if (!projectSlug) {
+      setError(new Error(`Entity is missing the "${ANNOTATION_PROJECT_SLUG}" annotation.`));
+      setLoading(false);
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (!selectedEnv) {
+      setError(new Error("No environments configured for DORA metrics."));
+      setLoading(false);
+      return () => {
+        cancelled = true;
+      };
+    }
+    setLoading(true);
+    setError(null);
+    setHistory(null);
+    doraApi.getMetrics(projectSlug, selectedEnv, days, annotationTargets ?? void 0).then((data) => {
+      if (!cancelled) {
+        setMetrics(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err);
+        setLoading(false);
+      }
+    });
+    doraApi.getHistory(projectSlug, selectedEnv, days).then((data) => {
+      if (!cancelled) setHistory(data);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [doraApi, projectSlug, selectedEnv?.name, days, annotationTargets]);
+  if (loading) return /* @__PURE__ */ React.createElement(DoraLoadingOverlay, null);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(InfoCard, { title: "DORA Metrics" }, /* @__PURE__ */ React.createElement("div", { style: { padding: 24, color: "#f87171" } }, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 600 } }, "Error: "), error.message));
+  }
+  if (!metrics) return null;
+  return /* @__PURE__ */ React.createElement(InfoCard, { title: " " }, /* @__PURE__ */ React.createElement("div", { style: { padding: "4px 0", position: "relative" } }, expanded && /* @__PURE__ */ React.createElement(DetailedOverlay, { data: expanded, days, onClose: () => setExpanded(null) }), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 22, fontWeight: 700, color: textPrimary, letterSpacing: "-0.02em" } }, "DORA Metrics"), selectedEnv && /* @__PURE__ */ React.createElement("div", { style: { fontSize: 12, color: textSecondary, marginTop: 5 } }, "Showing metrics for", " ", /* @__PURE__ */ React.createElement("strong", { style: { color: textPrimary } }, selectedEnv.name), " ", "\u2014", " ", /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "monospace" } }, selectedEnv.branch))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: 16, flexWrap: "wrap", marginBottom: 20 } }, environments.length > 1 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FilterLabel, null, "Environment"), /* @__PURE__ */ React.createElement(Select, { value: selectedEnvName, onValueChange: setSelectedEnvName }, /* @__PURE__ */ React.createElement(SelectTrigger, null, /* @__PURE__ */ React.createElement(SelectValue, { placeholder: "Select environment" })), /* @__PURE__ */ React.createElement(SelectContent, null, environments.map((env) => /* @__PURE__ */ React.createElement(SelectItem, { key: env.name, value: env.name }, env.name, " (", env.branch, ")"))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FilterLabel, null, "Date Range"), /* @__PURE__ */ React.createElement(Select, { value: selectedDays, onValueChange: setSelectedDays }, /* @__PURE__ */ React.createElement(SelectTrigger, null, /* @__PURE__ */ React.createElement(SelectValue, { placeholder: "Select date range" })), /* @__PURE__ */ React.createElement(SelectContent, null, DATE_RANGE_OPTIONS.map((opt) => /* @__PURE__ */ React.createElement(SelectItem, { key: opt.value, value: opt.value }, opt.label)))))), (() => {
+    const wkLabels = history?.map((h) => h.weekLabel) ?? [];
+    const deployData = history?.map((h) => h.deploymentCount) ?? [];
+    const leadData = history?.map((h) => h.leadTimeHours) ?? [];
+    const cfrData = history?.map((h) => h.changeFailureRate ?? 0) ?? [];
+    const mttrData = history?.map((h) => h.mttrHours ?? 0) ?? [];
+    const bmMs = history?.map((h) => h.bucketMidMs) ?? [];
+    const mkExpand = (title, metric, description, lowerIsBetter, sparklineValues, sparklineType, sparklineColor, prs, prListLabel, tickUnit) => () => setExpanded({
+      title,
+      metric,
+      description,
+      lowerIsBetter,
+      sparklineValues,
+      sparklineType,
+      sparklineColor,
+      tickUnit,
+      weekLabels: wkLabels,
+      bucketMidMs: bmMs,
+      prs,
+      prListLabel
+    });
+    const hotfixSparkData = bmMs.map(() => 0);
+    if (bmMs.length > 0 && metrics?.numberOfHotfixes?.slowestPRs) {
+      for (const pr of metrics.numberOfHotfixes.slowestPRs) {
+        const t = new Date(pr.mergedAt).getTime();
+        let bestIdx = 0, bestDist = Infinity;
+        bmMs.forEach((mid, i) => {
+          const d = Math.abs(t - mid);
+          if (d < bestDist) {
+            bestDist = d;
+            bestIdx = i;
+          }
+        });
+        hotfixSparkData[bestIdx]++;
+      }
+    }
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 12 } }, /* @__PURE__ */ React.createElement(
+      MetricCard,
+      {
+        title: "Deployment Frequency",
+        metric: metrics.deploymentFrequency,
+        description: "How often code is deployed to this branch",
+        sparklineData: deployData,
+        sparklineType: "bar",
+        sparklineColor: "#FA6400",
+        weekLabels: wkLabels,
+        onExpand: mkExpand(
+          "Deployment Frequency",
+          metrics.deploymentFrequency,
+          "How often code is deployed to this branch",
+          false,
+          deployData,
+          "bar",
+          "#FA6400",
+          metrics.deploymentFrequency.slowestPRs,
+          void 0,
+          "count"
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      MetricCard,
+      {
+        title: "Lead Time for Changes",
+        metric: metrics.leadTime,
+        description: "Average time from PR creation to merge",
+        lowerIsBetter: true,
+        sparklineData: leadData,
+        sparklineType: "line",
+        sparklineColor: "#818cf8",
+        weekLabels: wkLabels,
+        onExpand: mkExpand(
+          "Lead Time for Changes",
+          metrics.leadTime,
+          "Average time from PR creation to merge",
+          true,
+          leadData,
+          "line",
+          "#818cf8",
+          metrics.leadTime.slowestPRs,
+          void 0,
+          "hours"
+        )
+      }
+    ), metrics.changeFailureRate !== null ? /* @__PURE__ */ React.createElement(
+      MetricCard,
+      {
+        title: "Change Failure Rate",
+        metric: metrics.changeFailureRate,
+        description: "% of all merged PRs that were hotfixes",
+        lowerIsBetter: true,
+        sparklineData: cfrData,
+        sparklineType: "line",
+        sparklineColor: "#f87171",
+        weekLabels: wkLabels,
+        onExpand: mkExpand(
+          "Change Failure Rate",
+          metrics.changeFailureRate,
+          "% of all merged PRs that were hotfixes",
+          true,
+          cfrData,
+          "line",
+          "#f87171",
+          void 0,
+          void 0,
+          "count"
+        )
+      }
+    ) : /* @__PURE__ */ React.createElement(NaCard, { title: "Change Failure Rate", description: "Only tracked on production branches" }), metrics.mttr !== null ? /* @__PURE__ */ React.createElement(
+      MetricCard,
+      {
+        title: "Mean Time to Restore",
+        metric: metrics.mttr,
+        description: "Avg time from hotfix PR open to merge",
+        lowerIsBetter: true,
+        sparklineData: mttrData,
+        sparklineType: "line",
+        sparklineColor: "#fbbf24",
+        weekLabels: wkLabels,
+        onExpand: mkExpand(
+          "Mean Time to Restore",
+          metrics.mttr,
+          "Avg time from hotfix PR open to merge",
+          true,
+          mttrData,
+          "line",
+          "#fbbf24",
+          metrics.mttr.slowestPRs,
+          void 0,
+          "hours"
+        )
+      }
+    ) : /* @__PURE__ */ React.createElement(NaCard, { title: "Mean Time to Restore", description: "Only tracked on production branches" }), metrics.numberOfHotfixes !== null ? /* @__PURE__ */ React.createElement(
+      MetricCard,
+      {
+        title: "Hotfixes to Production",
+        metric: metrics.numberOfHotfixes,
+        description: `PRs labeled '${selectedEnv?.label ?? "hotfix"}' merged to production`,
+        lowerIsBetter: true,
+        expandLabel: metrics.numberOfHotfixes.value > 0 ? `View ${metrics.numberOfHotfixes.value} PR${metrics.numberOfHotfixes.value !== 1 ? "s" : ""} \u2192` : void 0,
+        onExpand: mkExpand(
+          "Hotfixes to Production",
+          metrics.numberOfHotfixes,
+          `PRs labeled '${selectedEnv?.label ?? "hotfix"}' merged to production`,
+          true,
+          hotfixSparkData,
+          "bar",
+          "#f87171",
+          metrics.numberOfHotfixes.slowestPRs,
+          "All hotfixes",
+          "count"
+        )
+      }
+    ) : /* @__PURE__ */ React.createElement(NaCard, { title: "Hotfixes to Production", description: "Only tracked on production branches" }));
+  })()));
+}
+
+export { DoraMetricsContent };
+//# sourceMappingURL=DoraMetricsContent.esm.js.map