From adb1937f343d36b840f3a1bb1bde3f1abdca54ea Mon Sep 17 00:00:00 2001 From: tani <15674971+tanishqsh@users.noreply.github.com> Date: Mon, 24 Aug 2026 20:36:47 +0000 Subject: [PATCH 1/2] fix: limit performance chart to one week Co-authored-by: Derek Cofausper <256792747+decofe@users.noreply.github.com> --- src/marketing/app/performance/page.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/marketing/app/performance/page.tsx b/src/marketing/app/performance/page.tsx index 4cc51023a..4f9bd2bdd 100644 --- a/src/marketing/app/performance/page.tsx +++ b/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() {
- {/* Hero: headline + live gradient chart of the full nightly feed */} + {/* Hero: headline + live gradient chart of the latest week of nightly runs */}

@@ -285,9 +293,9 @@ export default function PerformancePage() { {!runsLoaded ? ( - ) : hasRuns ? ( + ) : hasChartRuns ? ( - +

Transactions per second From b41cc212c413294e3e97fbe214f3d6b6c1731a0f Mon Sep 17 00:00:00 2001 From: tani <15674971+tanishqsh@users.noreply.github.com> Date: Tue, 25 Aug 2026 16:08:22 +0000 Subject: [PATCH 2/2] fix: scale performance chart to weekly range Co-authored-by: Derek Cofausper <256792747+decofe@users.noreply.github.com> --- .../performance/_components/TpsTrendChart.tsx | 25 +++++++++---------- .../_components/TpsTrendChartFrame.tsx | 8 +++++- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/marketing/app/performance/_components/TpsTrendChart.tsx b/src/marketing/app/performance/_components/TpsTrendChart.tsx index c30d666b5..55106299a 100644 --- a/src/marketing/app/performance/_components/TpsTrendChart.tsx +++ b/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]) diff --git a/src/marketing/app/performance/_components/TpsTrendChartFrame.tsx b/src/marketing/app/performance/_components/TpsTrendChartFrame.tsx index 0b2d93b7f..a89f96817 100644 --- a/src/marketing/app/performance/_components/TpsTrendChartFrame.tsx +++ b/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)} ) : null}