diff --git a/src/App.tsx b/src/App.tsx
index a11503f..739ced5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -89,7 +89,7 @@ export default function App() {
-
+
diff --git a/src/components/latency-chart.test.tsx b/src/components/latency-chart.test.tsx
index 6f1bd7a..bbbcf68 100644
--- a/src/components/latency-chart.test.tsx
+++ b/src/components/latency-chart.test.tsx
@@ -141,6 +141,36 @@ describe('latency chart with no samples', () => {
})
})
+describe('latency chart on sample data', () => {
+ afterEach(cleanup)
+
+ /**
+ * With no platform the console draws a generated curve. The top bar says SAMPLE
+ * DATA, but this header said "rolling window" — a claim about where the numbers
+ * came from that a generated curve cannot make. The header has to say it instead.
+ */
+ it('says the curve is sample data, not a window', () => {
+ const { getByText, queryByText, getByRole } = render()
+ expect(getByText(/sample data/)).toBeTruthy()
+ expect(queryByText(/rolling window/), 'a generated curve claimed to be a window').toBeNull()
+ expect(getByRole('img').getAttribute('aria-label')).toMatch(/sample data/)
+ })
+
+ it('still draws the curve, so the demo stays explorable', () => {
+ // Every other card shows sample values too; an empty chart beside them would
+ // single this one out without making the screen any more honest.
+ const { container } = render()
+ expect(container.querySelector('polyline')).not.toBeNull()
+ })
+
+ it('drops the label once real samples replace it', () => {
+ const { getByText, queryByText, rerender } = render()
+ rerender()
+ expect(getByText(/rolling window/)).toBeTruthy()
+ expect(queryByText(/sample data/)).toBeNull()
+ })
+})
+
describe('status mix', () => {
afterEach(cleanup)
diff --git a/src/components/latency-chart.tsx b/src/components/latency-chart.tsx
index 976ffa7..7020808 100644
--- a/src/components/latency-chart.tsx
+++ b/src/components/latency-chart.tsx
@@ -33,8 +33,15 @@ function niceTicks(max: number, count = 4): number[] {
*/
const EMPTY_SCALE_MAX = 100
-/** Single-series p95 latency area with a crosshair+tooltip. One hue (telemetry), no legend needed. */
-export function LatencyChart({ series }: { series: number[] }) {
+/**
+ * Single-series p95 latency area with a crosshair+tooltip. One hue (telemetry), no legend needed.
+ *
+ * `sample` marks a series this console generated because no platform answered. The
+ * top bar already says SAMPLE DATA, but the chart is the one card whose header made
+ * a claim of its own — "rolling window" — and a generated curve is not a window onto
+ * anything. The header names what it is instead.
+ */
+export function LatencyChart({ series, sample = false }: { series: number[]; sample?: boolean }) {
const gradId = useId()
const svgRef = useRef(null)
const [hover, setHover] = useState(null)
@@ -67,7 +74,7 @@ export function LatencyChart({ series }: { series: number[] }) {
Latency p95 over time
- {empty ? 'ms · default scale' : 'ms · rolling window'}
+ {sample ? 'ms · sample data' : empty ? 'ms · default scale' : 'ms · rolling window'}
@@ -77,7 +84,7 @@ export function LatencyChart({ series }: { series: number[] }) {
className="block h-[190px] w-full touch-none"
preserveAspectRatio="none"
role="img"
- aria-label="p95 latency over the rolling window"
+ aria-label={sample ? 'p95 latency, generated sample data' : 'p95 latency over the rolling window'}
onPointerMove={onMove}
onPointerLeave={() => setHover(null)}
>