@c2l2c/backstage-plugin-dora-metrics 0.1.0

package/dist/components/DoraMetricsContent.esm.js

@@ -0,0 +1,1311 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { 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 { 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 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 DojoLoadingOverlay() {
+  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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("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__ */ jsxs("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"
+    }, children: [
+      /* @__PURE__ */ jsx("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__ */ jsx("span", { style: {
+        fontFamily: "Inter,system-ui,sans-serif",
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: "0.18em",
+        textTransform: "uppercase",
+        marginBottom: 6,
+        color: isDark ? "rgba(250,100,0,0.55)" : "rgba(180,70,0,0.55)",
+        animation: "dlsFadeUp 0.5s ease both"
+      }, children: "FleetPanda" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", lineHeight: 1, marginBottom: 6 }, children: ["D", "O", "J", "O"].map((letter, i) => /* @__PURE__ */ jsx("span", { 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`
+      }, children: letter }, i)) }),
+      /* @__PURE__ */ jsx("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"
+      }, children: "Developer Portal" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 0, marginBottom: 20, animation: "dlsFadeUp 0.4s ease 0.7s both" }, children: STAGES.map((stage, i) => {
+        const isActive = i === activeStage;
+        const isComplete = i < activeStage;
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 0 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 5, width: 64 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 12, height: 12 }, children: [
+              isActive && /* @__PURE__ */ jsx("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__ */ jsx("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__ */ jsx("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"
+            }, children: stage })
+          ] }),
+          i < STAGES.length - 1 && /* @__PURE__ */ jsx("div", { style: {
+            width: 32,
+            height: 2,
+            marginBottom: 14,
+            position: "relative",
+            overflow: "hidden",
+            background: isDark ? "#27272a" : "#e4e4e7",
+            borderRadius: 2
+          }, children: /* @__PURE__ */ jsx("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"
+          } }) })
+        ] }, stage);
+      }) }),
+      /* @__PURE__ */ jsx("span", { style: {
+        fontFamily: FONT_MONO,
+        fontSize: 11,
+        color: mutedColor,
+        letterSpacing: "0.04em",
+        animation: "dlsFadeUp 0.3s ease both"
+      }, children: LOADING_MESSAGES[msgIdx] }, msgKey)
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${VW} ${height}`,
+          width: "100%",
+          style: { display: "block", overflow: "visible" },
+          onMouseMove: handleMouseMove,
+          onMouseLeave: () => setHoverIdx(null),
+          children: [
+            values.map((v, i) => {
+              const h = Math.max(2, v / max2 * (height - 4));
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  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
+                },
+                i
+              );
+            }),
+            /* @__PURE__ */ jsx("line", { x1: 0, y1: height - 0.5, x2: VW, y2: height - 0.5, stroke: mutedBorder, strokeWidth: 1 }),
+            hoverIdx !== null && hoverX !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("rect", { x: tooltipX, y: 2, width: 72, height: 22, rx: 4, fill: tooltipBg, stroke: tooltipBdr, strokeWidth: 1 }),
+              /* @__PURE__ */ jsxs("text", { x: tooltipX + 36, y: 17, textAnchor: "middle", fill: tooltipText, fontSize: 9, fontWeight: 600, fontFamily: font, children: [
+                weekLabels[hoverIdx],
+                ": ",
+                formatValue(values[hoverIdx])
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 3 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" }, children: weekLabels[0] }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" }, children: 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${VW} ${height}`,
+        width: "100%",
+        style: { display: "block", overflow: "visible" },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: () => setHoverIdx(null),
+        children: [
+          /* @__PURE__ */ jsx("path", { d: area, fill: color, opacity: 0.07 }),
+          /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+          pts.map(([x, y], i) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: i === hoverIdx ? 3.5 : i === pts.length - 1 ? 2.5 : 0, fill: color }, i)),
+          /* @__PURE__ */ jsx("line", { x1: 0, y1: height - 0.5, x2: VW, y2: height - 0.5, stroke: mutedBorder, strokeWidth: 1 }),
+          hoverPt && hoverIdx !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("line", { x1: hoverPt[0], y1: 0, x2: hoverPt[0], y2: height, stroke: color, strokeWidth: 1, strokeDasharray: "2 2", opacity: 0.4 }),
+            /* @__PURE__ */ jsx("rect", { x: tooltipX2, y: 2, width: 72, height: 22, rx: 4, fill: tooltipBg, stroke: tooltipBdr, strokeWidth: 1 }),
+            /* @__PURE__ */ jsxs("text", { x: tooltipX2 + 36, y: 17, textAnchor: "middle", fill: tooltipText, fontSize: 9, fontWeight: 600, fontFamily: font, children: [
+              weekLabels[hoverIdx],
+              ": ",
+              formatValue(values[hoverIdx])
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 3 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" }, children: weekLabels[0] }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: isDark ? "#3f3f46" : "#a1a1aa" }, children: weekLabels[weekLabels.length - 1] })
+    ] })
+  ] });
+}
+function DetailedChart({
+  values,
+  weekLabels,
+  bucketMidMs,
+  color,
+  type,
+  formatValue,
+  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 dataMax = Math.max(...values, 0.01);
+  const dataMin = type === "line" ? Math.min(...values, 0) : 0;
+  const dataRange = dataMax - dataMin || dataMax || 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 yTicks = [0, 0.25, 0.5, 0.75, 1].map((t) => dataMin + t * dataRange);
+  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__ */ jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${W} ${H}`,
+        width: "100%",
+        style: { display: "block" },
+        onMouseMove: handleSvgMouseMove,
+        onMouseLeave: () => {
+          setHoverIdx(null);
+          setTooltip(null);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+            ] }),
+            /* @__PURE__ */ jsx("clipPath", { id: `prClip_${gradId}`, children: /* @__PURE__ */ jsx("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__ */ jsxs("g", { children: [
+              i > 0 && /* @__PURE__ */ jsx("line", { x1: PAD.left, y1: y, x2: PAD.left + cW, y2: y, stroke: gridColor, strokeWidth: 1, strokeDasharray: "3 4" }),
+              /* @__PURE__ */ jsx("text", { x: PAD.left - 6, y: y + 4, textAnchor: "end", fill: labelColor, fontSize: 10, fontFamily: font, children: formatValue(v) })
+            ] }, i);
+          }),
+          /* @__PURE__ */ jsx("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__ */ jsx(
+              "rect",
+              {
+                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
+              },
+              i
+            );
+          }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradId})` }),
+            /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 2.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+            pts.map(([x, y], i) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: x,
+                cy: y,
+                r: i === hoverIdx ? 5.5 : 4,
+                fill: isDark ? "#0f0f12" : "#ffffff",
+                stroke: color,
+                strokeWidth: i === hoverIdx ? 2.5 : 1.5
+              },
+              i
+            ))
+          ] }),
+          prs && type === "line" && /* @__PURE__ */ jsx("g", { clipPath: `url(#prClip_${gradId})`, children: 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;
+            const trendPt = pts[bIdx];
+            return /* @__PURE__ */ jsxs(
+              "g",
+              {
+                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);
+                },
+                children: [
+                  trendPt && /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: px,
+                      y1: py,
+                      x2: trendPt[0],
+                      y2: trendPt[1],
+                      stroke: color,
+                      strokeWidth: isHov ? 1 : 0.5,
+                      strokeDasharray: "2 3",
+                      opacity: isHov ? 0.5 : 0.2
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("circle", { cx: px, cy: py, r: isHov ? 11 : 7, fill: color, opacity: isHov ? 0.2 : 0.1 }),
+                  /* @__PURE__ */ jsx(
+                    "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
+                    }
+                  )
+                ]
+              },
+              pr.number
+            );
+          }) }),
+          hoverIdx !== null && type === "line" && pts[hoverIdx] && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "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__ */ jsx(
+              "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__ */ jsx("text", { x, y: H - 8, textAnchor: "middle", fill: labelColor, fontSize: 10, fontFamily: font, children: lbl }, i);
+          })
+        ]
+      }
+    ),
+    tooltip && (() => {
+      const TW = 220;
+      const cW2 = containerRef.current?.offsetWidth ?? 800;
+      const nearRight = tooltip.x + TW + 12 > cW2;
+      return /* @__PURE__ */ jsxs("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
+      }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          fontSize: 12,
+          fontWeight: 600,
+          color: isDark ? "#ededef" : "#111114",
+          fontFamily: font,
+          lineHeight: 1.4
+        }, children: tooltip.primary }),
+        tooltip.secondary && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: isDark ? "#71717a" : "#a1a1aa", fontFamily: font, marginTop: 2 }, children: 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, weekLabels, bucketMidMs, prs } = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("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__ */ jsxs("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)"
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        padding: "20px 24px 16px",
+        borderBottom: `1px solid ${borderColor}`,
+        flexShrink: 0
+      }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, fontWeight: 700, color: mutedColor, textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 8 }, children: [
+            title,
+            " \xB7 ",
+            weekLabels[0],
+            " \u2013 ",
+            weekLabels[weekLabels.length - 1]
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 52, fontWeight: 700, color: theme.palette.text.primary, lineHeight: 1, letterSpacing: "-0.02em" }, children: displayValue }),
+            displayUnit && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, color: mutedColor, fontWeight: 500 }, children: displayUnit }),
+            /* @__PURE__ */ jsx(RatingBadge, { rating: metric.rating })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: mutedColor, marginTop: 6 }, children: [
+            description,
+            " \xB7 ",
+            /* @__PURE__ */ jsx("span", { style: { fontStyle: "italic" }, children: targetLabel })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "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)";
+            },
+            children: "\u2715"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "20px 24px", display: "flex", flexDirection: "column", gap: 20 }, children: [
+        weekLabels.length >= 2 ? /* @__PURE__ */ jsx(
+          DetailedChart,
+          {
+            values: sparklineValues,
+            weekLabels,
+            bucketMidMs,
+            color: sparklineColor,
+            type: sparklineType,
+            formatValue: formatVal,
+            prs: isDeployFreq ? void 0 : prs,
+            days,
+            hoveredPrNumber,
+            onPrHover: setHoveredPrNumber
+          }
+        ) : /* @__PURE__ */ jsx("div", { style: { color: mutedColor, fontSize: 13, textAlign: "center", padding: "48px 0" }, children: "Not enough data \u2014 select a wider date range." }),
+        isDeployFreq && prs && prs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { style: {
+            fontSize: 10,
+            fontWeight: 700,
+            color: mutedColor,
+            textTransform: "uppercase",
+            letterSpacing: "0.12em",
+            marginBottom: 12,
+            borderTop: `1px solid ${borderColor}`,
+            paddingTop: 12
+          }, children: [
+            "All deployments \xB7 ",
+            prs.length,
+            " PRs merged"
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: sortedDates.map((date) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { style: {
+              fontSize: 11,
+              fontWeight: 700,
+              color: sparklineColor,
+              marginBottom: 6,
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            }, children: [
+              /* @__PURE__ */ jsx("span", { children: date }),
+              /* @__PURE__ */ jsxs("span", { style: { color: mutedColor, fontWeight: 500 }, children: [
+                "\xB7 ",
+                prsByDate[date].length,
+                " PR",
+                prsByDate[date].length > 1 ? "s" : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              paddingLeft: 12,
+              borderLeft: `2px solid ${sparklineColor}22`
+            }, children: prsByDate[date].map((pr) => /* @__PURE__ */ jsxs("div", { style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 5,
+              padding: "7px 10px",
+              borderRadius: 7,
+              background: isDark ? "#0d0d10" : "#f7f7f9",
+              border: `1px solid ${borderColor}`,
+              transition: "background 0.12s"
+            }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, fontWeight: 700, color: mutedColor, flexShrink: 0, minWidth: 36 }, children: [
+                  "#",
+                  pr.number
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: {
+                  fontSize: 12,
+                  color: theme.palette.text.primary,
+                  flex: 1,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                }, title: pr.title, children: pr.title }),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: mutedColor, flexShrink: 0 }, children: [
+                  formatDuration(pr.durationHours),
+                  " lead"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: pr.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: { color: mutedColor, flexShrink: 0 },
+                    children: /* @__PURE__ */ jsx(ExternalLink, { size: 11 })
+                  }
+                )
+              ] }),
+              pr.author && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [
+                pr.authorAvatar ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: pr.authorAvatar,
+                    alt: pr.author,
+                    style: {
+                      width: 16,
+                      height: 16,
+                      borderRadius: "50%",
+                      flexShrink: 0,
+                      border: `1px solid ${isDark ? "#3f3f46" : "#e4e4e7"}`
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx("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
+                }, children: pr.author[0].toUpperCase() }),
+                /* @__PURE__ */ jsxs(
+                  "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;
+                    },
+                    children: [
+                      "@",
+                      pr.author
+                    ]
+                  }
+                )
+              ] })
+            ] }, pr.number)) })
+          ] }, date)) })
+        ] }),
+        !isDeployFreq && prs && prs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { style: {
+            fontSize: 10,
+            fontWeight: 700,
+            color: mutedColor,
+            textTransform: "uppercase",
+            letterSpacing: "0.12em",
+            marginBottom: 10,
+            borderTop: `1px solid ${borderColor}`,
+            paddingTop: 12
+          }, children: [
+            title.toLowerCase().includes("restore") ? "Slowest Hotfix PRs" : "Slowest PRs",
+            " ",
+            "\xB7 hover a row to highlight on chart"
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: 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__ */ jsxs(
+              "div",
+              {
+                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"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, fontWeight: 700, color: col, flexShrink: 0 }, children: [
+                      "#",
+                      pr.number
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      fontSize: 12,
+                      color: theme.palette.text.primary,
+                      flex: 1,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    }, title: pr.title, children: pr.title }),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: mutedColor, flexShrink: 0 }, children: new Date(pr.mergedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" }) }),
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: pr.url,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: { color: mutedColor, flexShrink: 0, transition: "color 0.12s" },
+                        children: /* @__PURE__ */ jsx(ExternalLink, { size: 11 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                    /* @__PURE__ */ jsx(AnimatedBar, { widthPct: barPct, color: col }),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: 700, color: col, minWidth: 52, textAlign: "right", flexShrink: 0 }, children: formatDuration(pr.durationHours) })
+                  ] })
+                ]
+              },
+              pr.number
+            );
+          }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @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__ */ jsx(
+    "div",
+    {
+      ref,
+      style: {
+        background: isDark ? "#1a1a1e" : "#f0f0f2",
+        borderRadius: 4,
+        height: 5,
+        overflow: "hidden",
+        flex: 1,
+        minWidth: 40
+      },
+      children: /* @__PURE__ */ jsx(
+        "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
+}) {
+  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__ */ jsxs(
+    Card,
+    {
+      style: { cursor: onExpand ? "pointer" : void 0 },
+      onClick: onExpand,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(CardLabel, { children: title }),
+          onExpand && /* @__PURE__ */ jsx("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
+          }, children: "expand \u2197" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }, children: [
+          delta && /* @__PURE__ */ jsx("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"
+          }, children: delta.text }),
+          /* @__PURE__ */ jsx("span", { style: {
+            fontSize: 10,
+            fontWeight: 600,
+            color: isDark ? "#3f3f46" : "#d4d4d8",
+            whiteSpace: "nowrap"
+          }, children: lowerIsBetter ? "\u2193 lower = better" : "\u2191 higher = better" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 36, fontWeight: 700, color: isDark ? "#f4f4f5" : "#111114", lineHeight: 1 }, children: displayValue }),
+          displayUnit && /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: isDark ? "#71717a" : "#71717a", fontWeight: 500 }, children: displayUnit })
+        ] }),
+        /* @__PURE__ */ jsx(RatingBadge, { rating: metric.rating }),
+        hasSparkline && /* @__PURE__ */ jsx("div", { style: { marginTop: 2 }, children: /* @__PURE__ */ jsx(
+          CompactSparkline,
+          {
+            values: sparklineData,
+            weekLabels,
+            color: sparklineColor ?? "#FA6400",
+            type: sparklineType,
+            formatValue: formatVal
+          }
+        ) }),
+        /* @__PURE__ */ jsx(CardDescription, { children: description }),
+        /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: isDark ? "#a1a1aa" : "#52525b" }, children: targetLabel }) })
+      ]
+    }
+  );
+}
+function NaCard({ title, description }) {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardLabel, { children: title }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "baseline", gap: 6 }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 36, fontWeight: 700, color: "#52525b", lineHeight: 1 }, children: "N/A" }) }),
+    /* @__PURE__ */ jsx(CardDescription, { muted: true, children: description })
+  ] });
+}
+function FilterLabel({ children }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx("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 environments = doraApi.getEnvironments();
+  const defaultEnv = environments[0];
+  const defaultDays = doraApi.getDefaultDays();
+  const [selectedBranch, setSelectedBranch] = useState(defaultEnv?.branch ?? "");
+  const [selectedDays, setSelectedDays] = useState(String(defaultDays));
+  const selectedEnv = environments.find((e) => e.branch === selectedBranch) ?? 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(() => {
+    if (!projectSlug) {
+      setError(new Error(`Entity is missing the "${ANNOTATION_PROJECT_SLUG}" annotation.`));
+      setLoading(false);
+      return;
+    }
+    if (!selectedEnv) {
+      setError(new Error("No environments configured for DORA metrics."));
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setHistory(null);
+    doraApi.getMetrics(projectSlug, selectedEnv.branch, selectedEnv.isProduction, selectedEnv.label, days).then((data) => {
+      if (!cancelled) {
+        setMetrics(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err);
+        setLoading(false);
+      }
+    });
+    doraApi.getHistory(projectSlug, selectedEnv.branch, selectedEnv.isProduction, selectedEnv.label, days).then((data) => {
+      if (!cancelled) setHistory(data);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [doraApi, projectSlug, selectedEnv?.branch, days]);
+  if (loading) return /* @__PURE__ */ jsx(DojoLoadingOverlay, {});
+  if (error) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "DORA Metrics", children: /* @__PURE__ */ jsxs("div", { style: { padding: 24, color: "#f87171" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: "Error: " }),
+      error.message
+    ] }) });
+  }
+  if (!metrics) return null;
+  return /* @__PURE__ */ jsx(InfoCard, { title: " ", children: /* @__PURE__ */ jsxs("div", { style: { padding: "4px 0", position: "relative" }, children: [
+    expanded && /* @__PURE__ */ jsx(DetailedOverlay, { data: expanded, days, onClose: () => setExpanded(null) }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 22, fontWeight: 700, color: textPrimary, letterSpacing: "-0.02em" }, children: "DORA Metrics" }),
+      selectedEnv && /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: textSecondary, marginTop: 5 }, children: [
+        "Showing metrics for branch",
+        " ",
+        /* @__PURE__ */ jsx("strong", { style: { color: textPrimary, fontFamily: "monospace" }, children: selectedEnv.branch })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", gap: 16, flexWrap: "wrap", marginBottom: 20 }, children: [
+      environments.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(FilterLabel, { children: "Branch" }),
+        /* @__PURE__ */ jsxs(Select, { value: selectedBranch, onValueChange: setSelectedBranch, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select branch" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: environments.map((env) => /* @__PURE__ */ jsxs(SelectItem, { value: env.branch, children: [
+            env.branch,
+            " (",
+            env.name,
+            ")"
+          ] }, env.branch)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(FilterLabel, { children: "Date Range" }),
+        /* @__PURE__ */ jsxs(Select, { value: selectedDays, onValueChange: setSelectedDays, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select date range" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: DATE_RANGE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+        ] })
+      ] })
+    ] }),
+    (() => {
+      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) => () => setExpanded({
+        title,
+        metric,
+        description,
+        lowerIsBetter,
+        sparklineValues,
+        sparklineType,
+        sparklineColor,
+        weekLabels: wkLabels,
+        bucketMidMs: bmMs,
+        prs
+      });
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 12 }, children: [
+        /* @__PURE__ */ jsx(
+          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
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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
+            )
+          }
+        ),
+        metrics.changeFailureRate !== null ? /* @__PURE__ */ jsx(
+          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"
+            )
+          }
+        ) : /* @__PURE__ */ jsx(NaCard, { title: "Change Failure Rate", description: "Only tracked on production branches" }),
+        metrics.mttr !== null ? /* @__PURE__ */ jsx(
+          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
+            )
+          }
+        ) : /* @__PURE__ */ jsx(NaCard, { title: "Mean Time to Restore", description: "Only tracked on production branches" }),
+        metrics.numberOfHotfixes !== null ? /* @__PURE__ */ jsx(
+          MetricCard,
+          {
+            title: "Hotfixes to Production",
+            metric: metrics.numberOfHotfixes,
+            description: `PRs labeled '${selectedEnv?.label ?? "hotfix"}' merged to production`,
+            lowerIsBetter: true
+          }
+        ) : /* @__PURE__ */ jsx(NaCard, { title: "Hotfixes to Production", description: "Only tracked on production branches" })
+      ] });
+    })()
+  ] }) });
+}
+
+export { DoraMetricsContent };
+//# sourceMappingURL=DoraMetricsContent.esm.js.map