fix: limit performance chart to one week

src/marketing/app/performance/_components/TpsTrendChart.tsx

@@ -6,13 +6,7 @@ import { useEffect, useState } from 'react'
 import { linePath, scaleLinear, ticks } from '../_lib/chart'
 import { fmtInt, type PerfRun } from '../_lib/runs'
 import ChartTooltip from './ChartTooltip'
-import {
-  TPS_CHART_DEFAULT_DOMAIN,
-  TPS_CHART_DEFAULT_TICKS,
-  TPS_CHART_MOBILE_BP,
-  TpsChartGrid,
-  tpsChartPad,
-} from './TpsTrendChartFrame'
+import { TPS_CHART_MOBILE_BP, TpsChartGrid, tpsChartPad } from './TpsTrendChartFrame'
 import useMeasure from './useMeasure'
 
 // Vercel-hero-style throughput chart: settled TPS per nightly run, drawn with
@@ -21,6 +15,8 @@ import useMeasure from './useMeasure'
 // left-to-right on mount, with each dot popping in as the stroke reaches it.
 
 const DRAW_MS = 1600
+const MIN_DOMAIN_SPAN_RATIO = 0.04
+const DOMAIN_PADDING_RATIO = 1.4
 
 export default function TpsTrendChart({
   runs,
@@ -75,12 +71,15 @@ export default function TpsTrendChart({
   const values = runs.map((r) => r.settledTps)
   const min = Math.min(...values)
   const max = Math.max(...values)
-  const dynamicYDomain = [min * 0.9, max * 1.06] as [number, number]
-  const stableYDomainFits =
-    dynamicYDomain[0] >= TPS_CHART_DEFAULT_DOMAIN[0] &&
-    dynamicYDomain[1] <= TPS_CHART_DEFAULT_DOMAIN[1]
-  const yDomain = stableYDomainFits ? TPS_CHART_DEFAULT_DOMAIN : dynamicYDomain
-  const yTicks = stableYDomainFits ? TPS_CHART_DEFAULT_TICKS : ticks(yDomain[0], yDomain[1], 4)
+  const midpoint = (min + max) / 2
+  // Keep week-to-week movement legible without letting a nearly flat series
+  // fill the entire plot and overstate tiny changes.
+  const domainSpan = Math.max((max - min) * DOMAIN_PADDING_RATIO, midpoint * MIN_DOMAIN_SPAN_RATIO)
+  const yDomain = [Math.max(0, midpoint - domainSpan / 2), midpoint + domainSpan / 2] as [
+    number,
+    number,
+  ]
+  const yTicks = ticks(yDomain[0], yDomain[1], 4)
 
   const xAt = scaleLinear([0, n - 1], [PAD.l, Math.max(width - PAD.r, PAD.l + 1)])
   const yAt = scaleLinear(yDomain, [height - PAD.b, PAD.t])

src/marketing/app/performance/_components/TpsTrendChartFrame.tsx

@@ -20,6 +20,12 @@ export function tpsChartPad(width: number) {
 export const TPS_CHART_DEFAULT_DOMAIN = [9500, 25_200] as [number, number]
 export const TPS_CHART_DEFAULT_TICKS = [10_000, 15_000, 20_000, 25_000]
 
+function formatTpsTick(value: number, yTicks: number[]) {
+  const tickStep = yTicks.length >= 2 ? Math.abs(yTicks[1] - yTicks[0]) : 1000
+  const precision = tickStep >= 1000 ? 0 : tickStep % 100 === 0 ? 1 : 2
+  return `${(value / 1000).toFixed(precision)}K`
+}
+
 export function TpsChartGrid({
   height,
   showLabels = true,
@@ -48,7 +54,7 @@ export function TpsChartGrid({
               textAnchor="end"
               className="fill-foreground/35 font-mono text-[11px]"
             >
-              {Math.round(t / 1000)}K
+              {formatTpsTick(t, yTicks)}
             </text>
           ) : null}
         </g>

src/marketing/app/performance/page.tsx

@@ -13,6 +13,7 @@ import { fetchPerfRuns, fmtInt, type PerfRun } from './_lib/runs'
 
 const STATUS_PAGE_URL = 'https://status.tempo.xyz'
 const PERF_DASHBOARD_URL = 'https://perf.tempo.xyz/'
+const ONE_WEEK_MS = 7 * 24 * 60 * 60 * 1000
 const HERO_STAT_LABELS = ['Transactions per second', 'Avg block time', 'Average fee']
 const SETTLEMENT_SKELETON_CELLS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
 const UPTIME_SKELETON_BARS = Array.from({ length: 90 }, (_, i) => `bar-${i}`)
@@ -252,6 +253,13 @@ export default function PerformancePage() {
 
   const latest = runs[runs.length - 1]
   const hasRuns = runs.length >= 2
+  const chartRuns = latest
+    ? runs.filter(
+        (run) =>
+          new Date(run.startedAt).getTime() >= new Date(latest.startedAt).getTime() - ONE_WEEK_MS,
+      )
+    : []
+  const hasChartRuns = chartRuns.length >= 2
 
   const heroStats = latest
     ? [
@@ -275,7 +283,7 @@ export default function PerformancePage() {
       <div className="mx-auto w-full max-w-7xl border-line border-x bg-surface-shell">
         <Header />
 
-        {/* Hero: headline + live gradient chart of the full nightly feed */}
+        {/* Hero: headline + live gradient chart of the latest week of nightly runs */}
         <section className="relative border-line border-b px-5 pt-20 pb-12 lg:px-8 lg:pt-28">
           <Reveal className="flex flex-col items-center text-center">
             <h1 className="max-w-[880px] text-balance font-sans text-[clamp(2.5rem,6vw,3.5rem)] text-foreground leading-[1.05] tracking-[-0.03em] antialiased">
@@ -285,9 +293,9 @@ export default function PerformancePage() {
 
           {!runsLoaded ? (
             <HeroChartSkeleton />
-          ) : hasRuns ? (
+          ) : hasChartRuns ? (
             <Reveal delay={150} className="mt-16">
-              <TpsTrendChart runs={runs} />
+              <TpsTrendChart runs={chartRuns} />
               <div className="mt-10 text-center">
                 <p className="font-sans text-[20px] text-foreground leading-tight tracking-[0]">
                   Transactions per second