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

package/dist/components/DoraMetricsContent.esm.js

@@ -1,1116 +0,0 @@
-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 { 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,
-  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__ */ 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, areaPath && /* @__PURE__ */ React.createElement("path", { d: areaPath, fill: `url(#${gradId})` }), /* @__PURE__ */ React.createElement("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 2.5, strokeLinejoin: "round", strokeLinecap: "round" }), pts.map(([x, y], i) => /* @__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;
-      const trendPt = 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);
-          }
-        },
-        trendPt && /* @__PURE__ */ React.createElement(
-          "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__ */ 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, 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,
-      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) => () => setExpanded({
-      title,
-      metric,
-      description,
-      lowerIsBetter,
-      sparklineValues,
-      sparklineType,
-      sparklineColor,
-      weekLabels: wkLabels,
-      bucketMidMs: bmMs,
-      prs,
-      prListLabel
-    });
-    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
-        )
-      }
-    ), /* @__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
-        )
-      }
-    ), 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"
-        )
-      }
-    ) : /* @__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
-        )
-      }
-    ) : /* @__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,
-          [],
-          "bar",
-          "#f87171",
-          metrics.numberOfHotfixes.slowestPRs,
-          "All hotfixes"
-        )
-      }
-    ) : /* @__PURE__ */ React.createElement(NaCard, { title: "Hotfixes to Production", description: "Only tracked on production branches" }));
-  })()));
-}
-
-export { DoraMetricsContent };
-//# sourceMappingURL=DoraMetricsContent.esm.js.map