From 22df52eb0dbdafbad2c3fa41269f7a3a3cbf044b Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Fri, 21 Aug 2026 14:49:11 +0200
Subject: [PATCH] chore: bring global speed checker chart back (#2597)

* chore: bring global speed checker chart back

* fix: remove transfer from the list
---
 .../(landing)/play/checker/[slug]/chart.tsx   | 206 +++++++++++
 .../(landing)/play/checker/[slug]/client.tsx  | 327 ++++++++++--------
 .../(landing)/play/checker/[slug]/page.tsx    |   4 +-
 .../src/content/pages/tools/checker-slug.mdx  |   4 -
 4 files changed, 384 insertions(+), 157 deletions(-)
 create mode 100644 apps/web/src/app/(landing)/play/checker/[slug]/chart.tsx

diff --git a/apps/web/src/app/(landing)/play/checker/[slug]/chart.tsx b/apps/web/src/app/(landing)/play/checker/[slug]/chart.tsx
new file mode 100644
index 000000000..005c7eec6
--- /dev/null
+++ b/apps/web/src/app/(landing)/play/checker/[slug]/chart.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { formatRegionCode, getRegionInfo } from "@openstatus/regions";
+import { Button } from "@openstatus/ui/components/ui/button";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@openstatus/ui/components/ui/chart";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  type CachedRegionChecker,
+  getTimingPhases,
+} from "../../../../../lib/checker/utils";
+
+const chartConfig = {
+  dns: { label: "DNS", color: "var(--chart-1)" },
+  connection: { label: "Connection", color: "var(--chart-2)" },
+  tls: { label: "TLS", color: "var(--chart-3)" },
+  ttfb: { label: "TTFB", color: "var(--chart-4)" },
+} satisfies ChartConfig;
+
+const PHASES = Object.keys(chartConfig) as (keyof typeof chartConfig)[];
+
+interface ChartProps {
+  checks: CachedRegionChecker["checks"];
+  desc: boolean;
+  onToggleSort: () => void;
+}
+
+export function Chart({ checks, desc, onToggleSort }: ChartProps) {
+  // `transfer` is left out: the checker stops its latency clock when the
+  // response headers land, before the body is read. sorts on the stacked
+  // total rather than `check.latency` — the two disagree whenever a checker
+  // reports phases that don't add up to its round-trip
+  const chartData = checks
+    .map((check) => {
+      const { dns, connection, tls, ttfb } = getTimingPhases(check.timing);
+      return {
+        region: check.region,
+        total: dns + connection + tls + ttfb,
+        dns,
+        connection,
+        tls,
+        ttfb,
+      };
+    })
+    .sort((a, b) => (desc ? b.total - a.total : a.total - b.total));
+
+  return (
+    <div className="border-border border">
+      <div className="border-border flex flex-wrap items-center justify-between gap-x-2 border-b">
+        <div className="p-4">
+          latency by region{" "}
+          <span className="text-muted-foreground">
+            — {checks.length} regions
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          className="h-auto! rounded-none p-4 text-base md:text-base"
+          onClick={onToggleSort}
+        >
+          <span className="text-muted-foreground">sorted by</span> latency{" "}
+          <span aria-hidden="true">{desc ? "↓" : "↑"}</span>
+        </Button>
+      </div>
+      <div className="overflow-x-auto p-4">
+        <div className="min-w-2xl">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[420px] w-full"
+          >
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              margin={{ top: 8, right: 0, bottom: 0, left: 0 }}
+            >
+              <CartesianGrid vertical={false} strokeDasharray="4 4" />
+              <XAxis
+                dataKey="region"
+                tickLine={false}
+                axisLine={false}
+                interval={0}
+                height={64}
+                tickMargin={8}
+                tick={<RegionTick />}
+              />
+              <YAxis
+                mirror
+                orientation="right"
+                tickLine={false}
+                axisLine={false}
+                width={44}
+                tickCount={5}
+                tickFormatter={(value) => `${value}ms`}
+              />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    className="min-w-56 gap-3 rounded-none p-4 text-sm"
+                    labelFormatter={(label) => {
+                      const region = getRegionInfo(String(label));
+                      return (
+                        <div className="flex items-center justify-between gap-4">
+                          <span>{region.location}</span>
+                          <span className="text-muted-foreground">
+                            {formatRegionCode(label)}
+                          </span>
+                        </div>
+                      );
+                    }}
+                    formatter={(value, name, item, index) => (
+                      <>
+                        <div
+                          className="size-3 shrink-0 bg-(--color-bg)"
+                          style={
+                            {
+                              "--color-bg": `var(--color-${name})`,
+                            } as React.CSSProperties
+                          }
+                        />
+                        {chartConfig[name as keyof typeof chartConfig]?.label ||
+                          name}
+                        <TooltipValue value={Number(value)} />
+                        {index === PHASES.length - 1 ? (
+                          <div className="border-border text-foreground mt-1 flex basis-full items-center border-t pt-3 font-medium">
+                            latency
+                            <TooltipValue value={item.payload.total} />
+                          </div>
+                        ) : null}
+                      </>
+                    )}
+                  />
+                }
+              />
+              {PHASES.map((phase) => (
+                <Bar
+                  key={phase}
+                  dataKey={phase}
+                  stackId="a"
+                  fill={`var(--color-${phase})`}
+                  fillOpacity={0.6}
+                  activeBar={{ fillOpacity: 1 }}
+                  isAnimationActive={false}
+                />
+              ))}
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </div>
+      <div className="border-border flex flex-wrap items-center gap-4 border-t p-4">
+        {PHASES.map((phase) => (
+          <div key={phase} className="flex items-center gap-2">
+            <div
+              className="size-3 shrink-0"
+              style={{ backgroundColor: chartConfig[phase].color }}
+            />
+            <span className="text-muted-foreground">
+              {chartConfig[phase].label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TooltipValue({ value }: { value: number }) {
+  return (
+    <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-medium tabular-nums">
+      {Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value)}
+      <span className="text-muted-foreground font-normal">ms</span>
+    </div>
+  );
+}
+
+/** Region codes are rotated to fit ~30 regions on the axis. */
+function RegionTick({
+  x,
+  y,
+  payload,
+}: {
+  x?: number;
+  y?: number;
+  payload?: { value: string };
+}) {
+  if (!payload) return null;
+  const code = formatRegionCode(payload.value);
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text
+        x={0}
+        y={0}
+        dy={4}
+        textAnchor="end"
+        transform="rotate(-90)"
+        className="fill-muted-foreground text-[10px]"
+      >
+        {code.length > 8 ? `${code.slice(0, 7)}…` : code}
+      </text>
+    </g>
+  );
+}
diff --git a/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx b/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx
index 6b979138b..44fe7b432 100644
--- a/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx
+++ b/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx
@@ -28,6 +28,10 @@ import {
 } from "../../../../../lib/checker/utils";
 import { cn } from "../../../../../lib/utils";
 import { handleExportCSV } from "../utils";
+import { Chart } from "./chart";
+
+const views = ["table", "chart"] as const;
+type View = (typeof views)[number];
 
 const STATUS_CODES = {
   "1": "text-muted-foreground",
@@ -37,16 +41,17 @@ const STATUS_CODES = {
   "5": "text-destructive",
 };
 
-interface TableProps {
+interface ResultsProps {
   data: CachedRegionChecker;
 }
 
-export function Table({ data }: TableProps) {
+export function Results({ data }: ResultsProps) {
+  const [view, setView] = useState<View>("table");
   const [input, setInput] = useState("");
   const [sort, setSort] = useState<{
     value: "latency" | "status" | "region";
     desc: boolean;
-  }>({ value: "latency", desc: false });
+  }>({ value: "latency", desc: true });
 
   // Filter successful checks and calculate timing phases
   const checks = data.checks
@@ -59,160 +64,180 @@ export function Table({ data }: TableProps) {
       };
     });
 
-  const filteredAndSorted = checks
-    .filter((check) => {
-      const regionInfo = regionDict[check.region as Region];
-      if (!regionInfo) return false;
-      return [
-        regionInfo.code,
-        regionInfo.location,
-        regionInfo.flag,
-        regionInfo.continent,
-        regionInfo.provider,
-      ].some((value) => value?.toLowerCase().includes(input.toLowerCase()));
-    })
-    .sort((a, b) => {
-      if (sort.value === "status") {
-        return sort.desc ? b.status - a.status : a.status - b.status;
-      }
-      if (sort.value === "latency") {
-        return sort.desc ? b.latency - a.latency : a.latency - b.latency;
-      }
-      return sort.desc
-        ? b.region.localeCompare(a.region)
-        : a.region.localeCompare(b.region);
-    });
+  const sorted = checks.sort((a, b) => {
+    if (sort.value === "status") {
+      return sort.desc ? b.status - a.status : a.status - b.status;
+    }
+    if (sort.value === "latency") {
+      return sort.desc ? b.latency - a.latency : a.latency - b.latency;
+    }
+    return sort.desc
+      ? b.region.localeCompare(a.region)
+      : a.region.localeCompare(b.region);
+  });
+
+  const filteredAndSorted = sorted.filter((check) => {
+    const regionInfo = regionDict[check.region as Region];
+    if (!regionInfo) return false;
+    return [
+      regionInfo.code,
+      regionInfo.location,
+      regionInfo.flag,
+      regionInfo.continent,
+      regionInfo.provider,
+    ].some((value) => value?.toLowerCase().includes(input.toLowerCase()));
+  });
 
   return (
-    <div>
-      <div className="flex flex-col gap-2 sm:flex-row">
-        <Input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Search by region, flag, location code, cloud provider or continent"
-          className="h-auto! flex-1 rounded-none p-4 text-base md:text-base"
-        />
-        <Button
-          variant="outline"
-          className="h-auto! rounded-none p-4 text-base"
-          onClick={() => handleExportCSV(checks, data.url)}
-        >
-          Export to CSV
-        </Button>
-      </div>
-      <div className="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              <th className="w-12" />
-              <th>Region</th>
-              <th>Status</th>
-              <th>DNS</th>
-              <th>Connect</th>
-              <th>TLS</th>
-              <th>TTFB</th>
-              <th className="p-0! text-right!">
-                <TableSort
-                  onClick={() =>
-                    setSort({ value: "latency", desc: !sort.desc })
-                  }
-                  direction={
-                    sort.value === "latency"
-                      ? sort.desc
-                        ? "desc"
-                        : "asc"
-                      : undefined
-                  }
-                >
-                  Latency
-                </TableSort>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {filteredAndSorted.length === 0 ? (
+    <Tabs value={view} onValueChange={(value) => setView(value as View)}>
+      <TabsList className="h-auto w-full rounded-none">
+        {views.map((value) => (
+          <TabsTrigger
+            key={value}
+            value={value}
+            className="h-auto w-full truncate rounded-none p-4 text-base capitalize"
+          >
+            {value}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      <TabsContent value="table" className="rounded-none">
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Search by region, flag, location code, cloud provider or continent"
+            className="h-auto! flex-1 rounded-none p-4 text-base md:text-base"
+          />
+          <Button
+            variant="outline"
+            className="h-auto! rounded-none p-4 text-base"
+            onClick={() => handleExportCSV(checks, data.url)}
+          >
+            Export to CSV
+          </Button>
+        </div>
+        <div className="table-wrapper">
+          <table>
+            <thead>
               <tr>
-                <td
-                  colSpan={8}
-                  className="border-border border border-dashed text-center"
-                >
-                  No data available
-                </td>
+                <th className="w-12" />
+                <th>Region</th>
+                <th>Status</th>
+                <th>DNS</th>
+                <th>Connect</th>
+                <th>TLS</th>
+                <th>TTFB</th>
+                <th className="p-0! text-right!">
+                  <TableSort
+                    onClick={() =>
+                      setSort({ value: "latency", desc: !sort.desc })
+                    }
+                    direction={
+                      sort.value === "latency"
+                        ? sort.desc
+                          ? "desc"
+                          : "asc"
+                        : undefined
+                    }
+                  >
+                    Latency
+                  </TableSort>
+                </th>
               </tr>
-            ) : (
-              filteredAndSorted.map((check) => {
-                const regionInfo = regionDict[check.region as Region];
-                if (!regionInfo) return null;
+            </thead>
+            <tbody>
+              {filteredAndSorted.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={8}
+                    className="border-border border border-dashed text-center"
+                  >
+                    No data available
+                  </td>
+                </tr>
+              ) : (
+                filteredAndSorted.map((check) => {
+                  const regionInfo = regionDict[check.region as Region];
+                  if (!regionInfo) return null;
 
-                const { dns, connection, tls, ttfb } = check.timingPhases;
+                  const { dns, connection, tls, ttfb } = check.timingPhases;
 
-                return (
-                  <InfoDialog key={check.region} check={check}>
-                    <tr className="hover:bg-muted/50">
-                      <td>
-                        <IconCloudProvider
-                          provider={regionInfo.provider}
-                          className="size-4"
-                        />
-                      </td>
-                      <td>
-                        {regionInfo.flag} {regionInfo.code}{" "}
-                        <span className="text-muted-foreground">
-                          {regionInfo.location}
-                        </span>
-                      </td>
-                      <td
-                        className={cn(
-                          STATUS_CODES[
-                            check.status.toString()[0] as keyof typeof STATUS_CODES
-                          ],
-                        )}
-                      >
-                        {check.status}
-                      </td>
-                      <td>
-                        {Intl.NumberFormat("en-US", {
-                          maximumFractionDigits: 0,
-                        }).format(dns)}
-                        ms
-                      </td>
-                      <td>
-                        {Intl.NumberFormat("en-US", {
-                          maximumFractionDigits: 0,
-                        }).format(connection)}
-                        ms
-                      </td>
-                      <td>
-                        {Intl.NumberFormat("en-US", {
-                          maximumFractionDigits: 0,
-                        }).format(tls)}
-                        ms
-                      </td>
-                      <td>
-                        {Intl.NumberFormat("en-US", {
-                          maximumFractionDigits: 0,
-                        }).format(ttfb)}
-                        ms
-                      </td>
-                      <td className="text-right!">
-                        {Intl.NumberFormat("en-US", {
-                          maximumFractionDigits: 0,
-                        }).format(check.latency)}
-                        ms
-                      </td>
-                    </tr>
-                  </InfoDialog>
-                );
-              })
-            )}
-          </tbody>
-          <caption>
-            Results of your check ({filteredAndSorted.length} / {checks.length}{" "}
-            regions)
-          </caption>
-        </table>
-      </div>
-    </div>
+                  return (
+                    <InfoDialog key={check.region} check={check}>
+                      <tr className="hover:bg-muted/50">
+                        <td>
+                          <IconCloudProvider
+                            provider={regionInfo.provider}
+                            className="size-4"
+                          />
+                        </td>
+                        <td>
+                          {regionInfo.flag} {regionInfo.code}{" "}
+                          <span className="text-muted-foreground">
+                            {regionInfo.location}
+                          </span>
+                        </td>
+                        <td
+                          className={cn(
+                            STATUS_CODES[
+                              check.status.toString()[0] as keyof typeof STATUS_CODES
+                            ],
+                          )}
+                        >
+                          {check.status}
+                        </td>
+                        <td>
+                          {Intl.NumberFormat("en-US", {
+                            maximumFractionDigits: 0,
+                          }).format(dns)}
+                          ms
+                        </td>
+                        <td>
+                          {Intl.NumberFormat("en-US", {
+                            maximumFractionDigits: 0,
+                          }).format(connection)}
+                          ms
+                        </td>
+                        <td>
+                          {Intl.NumberFormat("en-US", {
+                            maximumFractionDigits: 0,
+                          }).format(tls)}
+                          ms
+                        </td>
+                        <td>
+                          {Intl.NumberFormat("en-US", {
+                            maximumFractionDigits: 0,
+                          }).format(ttfb)}
+                          ms
+                        </td>
+                        <td className="text-right!">
+                          {Intl.NumberFormat("en-US", {
+                            maximumFractionDigits: 0,
+                          }).format(check.latency)}
+                          ms
+                        </td>
+                      </tr>
+                    </InfoDialog>
+                  );
+                })
+              )}
+            </tbody>
+            <caption>
+              Results of your check ({filteredAndSorted.length} /{" "}
+              {checks.length} regions)
+            </caption>
+          </table>
+        </div>
+      </TabsContent>
+      <TabsContent value="chart" className="rounded-none">
+        <Chart
+          checks={checks}
+          desc={sort.desc}
+          onToggleSort={() => setSort({ ...sort, desc: !sort.desc })}
+        />
+      </TabsContent>
+    </Tabs>
   );
 }
 
diff --git a/apps/web/src/app/(landing)/play/checker/[slug]/page.tsx b/apps/web/src/app/(landing)/play/checker/[slug]/page.tsx
index f07f70f0c..65c06f078 100644
--- a/apps/web/src/app/(landing)/play/checker/[slug]/page.tsx
+++ b/apps/web/src/app/(landing)/play/checker/[slug]/page.tsx
@@ -19,7 +19,7 @@ import {
   getJsonLDBreadcrumbList,
   getJsonLDWebPage,
 } from "../../../../../lib/metadata/structured-data";
-import { Table } from "./client";
+import { Results } from "./client";
 
 function formatDate(date: Date) {
   return date.toLocaleDateString("en-US", {
@@ -116,7 +116,7 @@ export default async function Page({
       <JsonLd graph={jsonLDGraph} />
       <h1>{data.url}</h1>
       <p className="text-lg">{formatDate(new Date(data.timestamp))}</p>
-      <Table data={data} />
+      <Results data={data} />
       <CustomMDX source={page.content} />
     </section>
   );
diff --git a/apps/web/src/content/pages/tools/checker-slug.mdx b/apps/web/src/content/pages/tools/checker-slug.mdx
index 31765b12e..aa0dca7ca 100644
--- a/apps/web/src/content/pages/tools/checker-slug.mdx
+++ b/apps/web/src/content/pages/tools/checker-slug.mdx
@@ -11,10 +11,6 @@ faq:
 
 The data is getting stored for **7 days**. If you want to keep it longer, consider [creating an account](https://app.openstatus.dev) and use our cloud solution.
 
----
-
-> **We have reworked the checker experience ([go back to v1](https://v1.openstatus.dev/play/checker))**. Please let us know if you are missing a feature from the older version. Contact us directly or send us a message to [ping@openstatus.dev](mailto:ping@openstatus.dev). Happy to bring stuff back!
-
 ## Frequently asked questions
 
 <Details summary="How long is the data stored?">
-- 
2.51.2