@skyhook-io/k8s-ui 1.14.4 → 1.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.4",
+  "version": "1.14.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/charts/AreaChart.test.tsx

@@ -0,0 +1,160 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { AreaChart } from './AreaChart'
+import { layoutAnnotations, ANNOTATION_LABEL_ROWS } from './annotations'
+import { formatTimestamp } from './format'
+import type { ChartAnnotation, TimeSeries } from './types'
+
+const t0 = 1_788_679_000
+
+function series(points: Array<[number, number | null]>, labels: Record<string, string> = {}): TimeSeries {
+  return { labels, dataPoints: points.map(([offset, value]) => ({ timestamp: t0 + offset, value })) }
+}
+
+function render(props: Partial<Parameters<typeof AreaChart>[0]> & { series: TimeSeries[] }) {
+  return renderToStaticMarkup(
+    <AreaChart color="#3b82f6" fillColor="#3b82f622" unit="" {...props} />,
+  )
+}
+
+function attrs(html: string, tag: string, attr: string): string[] {
+  const out: string[] = []
+  const re = new RegExp(`<${tag}\\b[^>]*\\s${attr}="([^"]*)"`, 'g')
+  for (const match of html.matchAll(re)) out.push(match[1])
+  return out
+}
+
+describe('AreaChart annotations', () => {
+  const base = [series([[0, 1], [600, 2], [1200, 3], [1800, 2]])]
+
+  it('renders a marker and label per annotation inside the domain and none outside', () => {
+    const annotations: ChartAnnotation[] = [
+      { timestamp: t0 + 600, label: 'ConfigMap api-config', kind: 'change' },
+      { timestamp: t0 + 9_000, label: 'outside', kind: 'change' },
+    ]
+    const html = render({ series: base, annotations })
+    expect(html.match(/data-chart-annotation="change"/g)).toHaveLength(1)
+    expect(html).toContain('data-chart-annotation-label="visible"')
+    expect(html).toContain('ConfigMap api-config')
+    expect(html).not.toContain('outside')
+  })
+
+  it('stacks overlapping labels into rows and hides labels past the row limit', () => {
+    const toX = (ts: number) => 84 + ((ts - t0) / 1800) * 876
+    const crowded: ChartAnnotation[] = Array.from({ length: ANNOTATION_LABEL_ROWS + 1 }, (_, i) => ({
+      timestamp: t0 + i * 5,
+      label: `Change ${i}`,
+      kind: 'change',
+    }))
+    const placed = layoutAnnotations(crowded, toX, { minTs: t0, maxTs: t0 + 1800 }, { left: 84, right: 960 })
+    expect(placed.map(p => p.row)).toEqual([0, 1, 2, -1])
+    expect(placed.at(-1)?.labelHidden).toBe(true)
+    const far: ChartAnnotation[] = [
+      { timestamp: t0, label: 'first', kind: 'change' },
+      { timestamp: t0 + 1200, label: 'second', kind: 'change' },
+    ]
+    expect(layoutAnnotations(far, toX, { minTs: t0, maxTs: t0 + 1800 }, { left: 84, right: 960 }).map(p => p.row)).toEqual([0, 0])
+    const html = render({ series: base, annotations: crowded })
+    expect(html.match(/data-chart-annotation-label="visible"/g)).toHaveLength(ANNOTATION_LABEL_ROWS)
+    expect(html.match(/data-chart-annotation-label="hidden"/g)).toHaveLength(1)
+  })
+
+  it('keeps a long label readable by truncating it', () => {
+    const html = render({
+      series: base,
+      annotations: [{ timestamp: t0 + 600, label: 'ConfigMap a-very-long-configmap-name-that-goes-on', kind: 'change' }],
+    })
+    expect(html).toContain('ConfigMap a-very-long-confi…')
+  })
+})
+
+describe('AreaChart domain and axes', () => {
+  it('uses an explicit domain wider than the samples for the X axis', () => {
+    const html = render({
+      series: [series([[600, 1], [1200, 2]])],
+      domain: { start: t0, end: t0 + 3600 },
+    })
+    const labels = attrs(html, 'text', 'text-anchor')
+    expect(labels.length).toBeGreaterThan(0)
+    expect(html).toContain(`>${formatTimestamp(t0)}<`)
+    expect(html).toContain(`>${formatTimestamp(t0 + 3600)}<`)
+    const xs = attrs(html, 'text', 'x').map(Number).filter(x => x >= 84)
+    expect(Math.max(...xs)).toBeCloseTo(960, 0)
+  })
+
+  it('extends the Y axis below zero and draws a zero line for negative values', () => {
+    const html = render({ series: [series([[0, -4], [600, 2], [1200, -1]])] })
+    expect(html).toContain('data-chart-zero-line')
+    expect(html).toContain('>-4.40<')
+    const positive = render({ series: [series([[0, 1], [600, 2]])] })
+    expect(positive).not.toContain('data-chart-zero-line')
+    expect(positive).toContain('>0<')
+  })
+
+  it('breaks the line across null gaps instead of bridging them', () => {
+    const html = render({ series: [series([[0, 1], [300, 2], [600, null], [900, 3], [1200, 4]])] })
+    const lines = attrs(html, 'path', 'fill').filter(fill => fill === 'none')
+    expect(lines).toHaveLength(2)
+  })
+
+  it('renders sparse samples without a path until two finite points exist', () => {
+    expect(attrs(render({ series: [series([[0, 1]])] }), 'path', 'fill')).toHaveLength(0)
+    expect(attrs(render({ series: [series([[0, 1], [3600, 5]])] }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(1)
+  })
+
+  it('renders nothing for an empty series list', () => {
+    expect(render({ series: [] })).toBe('')
+  })
+})
+
+describe('AreaChart compact layout and count axes', () => {
+  const base = [series([[0, 1], [600, 2], [1200, 3], [1800, 2]])]
+
+  it('keeps the full layout for existing callers', () => {
+    const html = render({ series: base })
+    expect(html).toContain('viewBox="0 0 1000 300"')
+    expect(html).toContain('data-chart-layout="full"')
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'end')).toHaveLength(5)
+  })
+
+  it('draws two ticks per axis, larger text and a taller plot when compact', () => {
+    const html = render({
+      series: base,
+      layout: 'compact',
+      annotations: [{ timestamp: t0 + 600, label: 'ConfigMap api-config', kind: 'change' }],
+    })
+    expect(html).toContain('viewBox="0 0 400 260"')
+    expect(html).toContain('data-chart-layout="compact"')
+    // Two Y labels plus the right-aligned last X label.
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'end')).toHaveLength(3)
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'start')).toHaveLength(1)
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'middle')).toHaveLength(0)
+    expect(html).toContain('font-size="14"')
+    expect(html).toContain('data-chart-annotation-label="hidden"')
+    expect(html).toContain(`>${formatTimestamp(t0)}<`)
+    expect(html).toContain(`>${formatTimestamp(t0 + 1800)}<`)
+  })
+
+  it('widens the compact left margin so a long Y label is not clipped', () => {
+    const html = render({ series: [series([[0, 100 * 1024 * 1024], [600, 161.5 * 1024 * 1024]])], unit: 'bytes', layout: 'compact' })
+    expect(html).toContain('177.7 MiB')
+    const yLabelX = Math.min(...attrs(html, 'text', 'x').map(Number).filter(x => x > 0))
+    expect(yLabelX).toBeGreaterThan(70)
+    const compactSmall = render({ series: [series([[0, 1], [600, 2]])], layout: 'compact' })
+    expect(Math.min(...attrs(compactSmall, 'text', 'x').map(Number).filter(x => x > 0))).toBe(52)
+  })
+
+  it('uses integer ticks with a nice step for count series', () => {
+    const zero = render({ series: [series([[0, 0], [600, 0], [1200, 0]])], unit: 'count' })
+    expect(zero).toContain('>0<')
+    expect(zero).toContain('>1<')
+    expect(zero).not.toContain('1.10')
+    const restarts = render({ series: [series([[0, 6], [600, 12], [1200, 18]])], unit: 'count' })
+    for (const tick of ['0', '5', '10', '15', '20']) expect(restarts).toContain(`>${tick}<`)
+    expect(restarts).not.toContain('6.05')
+    const compactCount = render({ series: [series([[0, 6], [600, 18]])], unit: 'count', layout: 'compact' })
+    expect(attrs(compactCount, 'text', 'text-anchor').filter(a => a === 'end')).toHaveLength(3)
+    expect(compactCount).toContain('>20<')
+    expect(compactCount).not.toContain('>10<')
+  })
+})

package/src/components/charts/AreaChart.tsx

@@ -1,19 +1,48 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type * as React from 'react'
-import { seriesColor, seriesFill, computeShortLabels } from './colors'
+import { seriesColor, seriesFill, computeShortLabels, seriesDisplayLabels } from './colors'
 import { formatMetricValue, formatTimestamp } from './format'
-import type { TimeSeries, ReferenceLine } from './types'
+import { layoutAnnotations } from './annotations'
+import { chartLayout, integerAxisTop, isCountUnit, yAxisValues } from './axis'
+import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
 
-export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
+// Below this rendered width the annotation label pills would cover most of the
+// plot once the 1000-unit viewBox is scaled down; the lines stay and the label
+// text moves into the hover tooltip.
+export const ANNOTATION_LABEL_MIN_WIDTH_PX = 420
+const ANNOTATION_HOVER_TOLERANCE = 8
+
+export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, layout = 'full' }: {
   series: TimeSeries[]
   color: string
   fillColor: string
   unit: string
   referenceLines?: ReferenceLine[]
+  /** Vertical markers; only those inside the X domain render. */
+  annotations?: ChartAnnotation[]
+  /** X axis window in unix seconds. Defaults to the sample extent. */
+  domain?: { start: number; end: number }
+  /**
+   * Display name per series, parallel to `series`. Pass it when the chart
+   * shows a subset of a larger result so names stay distinguishable across
+   * the whole result; defaults to names derived from the labels given.
+   */
+  seriesLabels?: string[]
+  /**
+   * 'full' is the fixed wide layout every existing caller gets. 'auto' switches
+   * to the compact layout (two ticks per axis, larger text, taller plot) when
+   * the rendered chart is narrower than ANNOTATION_LABEL_MIN_WIDTH_PX;
+   * 'compact' forces it.
+   */
+  layout?: 'full' | 'auto' | 'compact'
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
+  const [labelsFit, setLabelsFit] = useState(true)
   const multiSeries = series.length > 1
+  const compact = layout === 'compact' || (layout === 'auto' && !labelsFit)
+  const countAxis = isCountUnit(unit)
 
   const chartData = useMemo(() => {
     if (!series.length) return null
@@ -21,17 +50,23 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
     let minTs = Infinity
     let maxTs = -Infinity
     let maxVal = 0
+    let minVal = 0
 
     for (const s of series) {
       for (const dp of s.dataPoints) {
         if (dp.timestamp < minTs) minTs = dp.timestamp
         if (dp.timestamp > maxTs) maxTs = dp.timestamp
         if (dp.value != null && dp.value > maxVal) maxVal = dp.value
+        if (dp.value != null && dp.value < minVal) minVal = dp.value
       }
     }
 
+    if (domain && Number.isFinite(domain.start) && Number.isFinite(domain.end) && domain.end > domain.start) {
+      minTs = domain.start
+      maxTs = domain.end
+    }
     if (minTs === maxTs) maxTs = minTs + 60
-    if (maxVal === 0) {
+    if (maxVal === 0 && minVal === 0) {
       // Unit-appropriate floor so the Y-axis isn't misleadingly large.
       maxVal = unit === 'cores' ? 0.01 : unit === 'bytes' ? 1024 * 1024 : unit === 'bytes/s' ? 1024 : 1
     }
@@ -44,21 +79,28 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       }
     }
 
-    const padding = maxVal * 0.1
-    const yMax = maxVal + padding
+    const padding = Math.max(maxVal, -minVal) * 0.1
+    // A count axis ends on a whole step so its ticks are integers; other
+    // units keep headroom above the maximum.
+    const yMax = countAxis && minVal >= 0 ? integerAxisTop(maxVal, compact ? 1 : 4) : maxVal + padding
+    const yMin = minVal < 0 ? minVal - padding : 0
 
-    return { minTs, maxTs, yMax, series }
-  }, [series, unit, referenceLines])
+    return { minTs, maxTs, yMax, yMin, series }
+  }, [series, unit, referenceLines, domain, countAxis, compact])
 
   // Layout constants. marginLeft sized for the widest expected Y-tick label
   // ("422.4 MiB" etc.) — narrow grid panels squeeze the X axis so labels
   // need extra viewBox-space to survive the down-scale.
-  const width = 1000
-  const height = 300
-  const marginLeft = 84
-  const marginRight = 40
-  const marginTop = 10
-  const marginBottom = 30
+  const base = chartLayout(compact)
+  const { width, height, marginRight, marginTop, marginBottom, fontSize, yIntervals, xIntervals } = base
+  const yValues = chartData ? yAxisValues(chartData.yMin, chartData.yMax, yIntervals, countAxis) : []
+  const yLabels = yValues.map(val => formatMetricValue(val, unit))
+  // The compact layout's larger text makes a label like "161.5 MiB" wider
+  // than the fixed margin, and SVG clips it; grow the margin to the widest
+  // label there. The full layout keeps its fixed margin for existing callers.
+  const marginLeft = compact
+    ? Math.max(base.marginLeft, Math.ceil(Math.max(0, ...yLabels.map(label => label.length)) * fontSize * 0.62 + 12))
+    : base.marginLeft
   const plotWidth = width - marginLeft - marginRight
   const plotHeight = height - marginTop - marginBottom
 
@@ -71,31 +113,31 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
   }
   const toY = (val: number) => {
     if (!chartData) return marginTop + plotHeight
-    return marginTop + plotHeight - (val / chartData.yMax) * plotHeight
+    return marginTop + plotHeight - ((val - chartData.yMin) / (chartData.yMax - chartData.yMin)) * plotHeight
   }
 
   const yTicks = useMemo(() => {
     if (!chartData) return []
-    const { yMax } = chartData
-    const count = 4
-    return Array.from({ length: count + 1 }, (_, i) => {
-      const val = (yMax / count) * i
-      return { val, y: toY(val), label: formatMetricValue(val, unit) }
-    })
-  }, [chartData, unit])
+    return yValues.map((val, i) => ({ val, y: toY(val), label: yLabels[i] }))
+  }, [chartData, yValues, yLabels])
 
   const xTicks = useMemo(() => {
     if (!chartData) return []
     const { minTs, maxTs } = chartData
-    const count = 6
-    return Array.from({ length: count + 1 }, (_, i) => {
-      const ts = minTs + ((maxTs - minTs) / count) * i
-      return { ts, x: toX(ts), label: formatTimestamp(ts) }
+    return Array.from({ length: xIntervals + 1 }, (_, i) => {
+      const ts = minTs + ((maxTs - minTs) / xIntervals) * i
+      // In the compact layout the two labels sit at the plot edges and would
+      // otherwise spill past the viewBox.
+      const anchor: 'start' | 'middle' | 'end' = !compact ? 'middle' : i === 0 ? 'start' : 'end'
+      return { ts, x: toX(ts), label: formatTimestamp(ts), anchor }
     })
-  }, [chartData])
+  }, [chartData, xIntervals, compact])
 
   const paths = useMemo(() => {
     if (!chartData) return []
+    // The area fills toward zero, not the plot floor, so a series that dips
+    // below zero is shaded on the correct side of the axis.
+    const baseline = toY(0)
     const segments: {
       linePath: string
       areaPath: string
@@ -118,8 +160,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
         if (run.length >= 2) {
           const linePath = run.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
           const areaPath = linePath +
-            ` L${run[run.length - 1].x},${marginTop + plotHeight}` +
-            ` L${run[0].x},${marginTop + plotHeight} Z`
+            ` L${run[run.length - 1].x},${baseline}` +
+            ` L${run[0].x},${baseline} Z`
           segments.push({
             linePath,
             areaPath,
@@ -145,6 +187,26 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
     return segments
   }, [chartData])
 
+  const placedAnnotations = useMemo(() => {
+    if (!chartData || !annotations?.length) return []
+    return layoutAnnotations(
+      annotations,
+      toX,
+      { minTs: chartData.minTs, maxTs: chartData.maxTs },
+      { left: marginLeft, right: width - marginRight },
+    )
+  }, [chartData, annotations])
+
+  useEffect(() => {
+    const el = wrapperRef.current
+    if (!el || (placedAnnotations.length === 0 && layout !== 'auto') || typeof ResizeObserver === 'undefined') return
+    const update = () => setLabelsFit(el.getBoundingClientRect().width >= ANNOTATION_LABEL_MIN_WIDTH_PX)
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [placedAnnotations.length, layout])
+
   // Hover: only emit a tooltip row when the hovered timestamp lies within
   // the series' actual sample range (with 2× median-step tolerance). Without
   // this filter a series that ended mid-window leaves stale ghost entries.
@@ -159,9 +221,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       .map((s, i) => ({ s, i }))
       .filter(({ s }) => s.dataPoints.filter(dp => dp.value != null).length >= 2)
 
-    const fullLabels = validSeries.map(({ s, i }) =>
-      s.labels.pod || s.labels.instance || s.labels.node || `series-${i}`
-    )
+    const allLabels = seriesLabels ?? seriesDisplayLabels(chartData.series)
+    const fullLabels = validSeries.map(({ i }) => allLabels[i] ?? `series-${i}`)
     const shortLabels = computeShortLabels(fullLabels)
 
     const points = validSeries.map(({ s, i }, vi) => {
@@ -197,8 +258,12 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       }
     }).filter((p): p is NonNullable<typeof p> => p !== null)
 
-    return { ts, x: clampedX, points }
-  }, [hoverX, chartData])
+    const nearbyAnnotations = placedAnnotations.filter(
+      p => Math.abs(p.x - clampedX) <= ANNOTATION_HOVER_TOLERANCE,
+    )
+
+    return { ts, x: clampedX, points, nearbyAnnotations }
+  }, [hoverX, chartData, placedAnnotations, seriesLabels])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current
@@ -212,13 +277,17 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
   // every hook has been invoked (Rules of Hooks).
   if (!chartData) return null
 
+  const annotationLabelHeight = 14
+  const zeroLineY = chartData.yMin < 0 ? toY(0) : null
+
   return (
-    <div className="relative">
+    <div className="relative" ref={wrapperRef}>
       <svg
         ref={svgRef}
         viewBox={`0 0 ${width} ${height}`}
         className="w-full h-full"
         preserveAspectRatio="xMidYMid meet"
+        data-chart-layout={compact ? 'compact' : 'full'}
       >
         {/* Grid lines */}
         {yTicks.map((tick, i) => (
@@ -235,6 +304,19 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
           />
         ))}
 
+        {zeroLineY !== null && (
+          <line
+            data-chart-zero-line
+            x1={marginLeft}
+            y1={zeroLineY}
+            x2={width - marginRight}
+            y2={zeroLineY}
+            stroke="currentColor"
+            className="text-theme-border/60"
+            strokeWidth="1"
+          />
+        )}
+
         {/* Y axis labels */}
         {yTicks.map((tick, i) => (
           <text
@@ -243,7 +325,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
             y={tick.y + 4}
             textAnchor="end"
             className="fill-theme-text-secondary"
-            fontSize="11"
+            fontSize={fontSize}
             fontFamily="ui-monospace, monospace"
           >
             {tick.label}
@@ -256,9 +338,9 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
             key={`xlabel-${i}`}
             x={tick.x}
             y={height - 4}
-            textAnchor="middle"
+            textAnchor={tick.anchor}
             className="fill-theme-text-secondary"
-            fontSize="11"
+            fontSize={fontSize}
             fontFamily="ui-monospace, monospace"
           >
             {tick.label}
@@ -335,6 +417,67 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
           )
         })}
 
+        {/* Annotation markers: a vertical line per recorded instant, labelled
+            in stacked rows at the top of the plot. */}
+        {placedAnnotations.map((placed, i) => {
+          const labelY = marginTop + placed.row * (annotationLabelHeight + 2)
+          const showLabel = labelsFit && !compact && !placed.labelHidden
+          return (
+            <g
+              key={`annotation-${i}`}
+              data-chart-annotation={placed.annotation.kind}
+              data-chart-annotation-label={showLabel ? 'visible' : 'hidden'}
+            >
+              <line
+                x1={placed.x}
+                y1={marginTop}
+                x2={placed.x}
+                y2={marginTop + plotHeight}
+                stroke="currentColor"
+                className="text-accent"
+                strokeWidth="1.5"
+                strokeDasharray="3 3"
+                opacity="0.9"
+              />
+              {showLabel && (
+                <>
+                  <rect
+                    x={placed.labelX}
+                    y={labelY}
+                    width={placed.labelWidth}
+                    height={annotationLabelHeight}
+                    rx="3"
+                    fill="currentColor"
+                    className="text-theme-surface"
+                    opacity="0.9"
+                  />
+                  <rect
+                    x={placed.labelX}
+                    y={labelY}
+                    width={placed.labelWidth}
+                    height={annotationLabelHeight}
+                    rx="3"
+                    fill="none"
+                    stroke="currentColor"
+                    className="text-accent/50"
+                    strokeWidth="1"
+                  />
+                  <text
+                    x={placed.labelX + 5}
+                    y={labelY + annotationLabelHeight - 3.5}
+                    fontSize="11"
+                    fontFamily="ui-monospace, monospace"
+                    fontWeight="500"
+                    className="fill-accent-text"
+                  >
+                    {placed.labelText}
+                  </text>
+                </>
+              )}
+            </g>
+          )
+        })}
+
         {/* Hover crosshair + dots */}
         {hoverData && (
           <>
@@ -383,6 +526,15 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
             <div className="text-theme-text-tertiary mb-1.5 font-mono">
               {new Date(hoverData.ts * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
             </div>
+            {hoverData.nearbyAnnotations.map((placed, i) => (
+              <div key={`annotation-${i}`} className="flex items-center gap-2 py-0.5">
+                <span className="w-2 h-2 rounded-full shrink-0 bg-accent" />
+                <span className="text-accent-text">Change recorded</span>
+                <span className="text-theme-text-primary font-mono ml-auto pl-3">
+                  {placed.annotation.label}
+                </span>
+              </div>
+            ))}
             {hoverData.points.map((p, i) => (
               <div key={i} className="flex items-center gap-2 py-0.5">
                 <div

package/src/components/charts/PrometheusChartsView.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { describePodCoverage } from "./PrometheusChartsView";
+import type { PrometheusResourceMetricsResult } from "./PrometheusChartsView";
+
+function result(
+  patch: Partial<PrometheusResourceMetricsResult>,
+): PrometheusResourceMetricsResult {
+  return { unit: "cores", ...patch } as PrometheusResourceMetricsResult;
+}
+
+describe("describePodCoverage", () => {
+  it("names the pods a chart covers and what it therefore misses", () => {
+    expect(describePodCoverage(result({ pods: 3, podsTotal: 3 }))).toBe(
+      "3 current pods; pods replaced during the window are not included",
+    );
+    expect(describePodCoverage(result({ pods: 1, podsTotal: 1 }))).toBe(
+      "1 current pod; pods replaced during the window are not included",
+    );
+  });
+
+  it("says when the cap cut the list, so a short count is not read as the workload", () => {
+    expect(describePodCoverage(result({ pods: 50, podsTotal: 120 }))).toBe(
+      "first 50 of 120 current pods; pods replaced during the window are not included",
+    );
+  });
+
+  it("distinguishes a workload with no pods from a kind that has none to report", () => {
+    expect(describePodCoverage(result({ pods: 0 }))).toBe(
+      "This workload has no pods running, so there is nothing to chart",
+    );
+    // A Node chart carries no pod count at all; it gets no caption rather
+    // than a claim about pods.
+    expect(describePodCoverage(result({}))).toBeUndefined();
+  });
+});