From 825e71dda4eb1c5d6f1a632060cb3420ecea098b Mon Sep 17 00:00:00 2001
From: Piotr Jastrzebski <piotr@chiselstrike.com>
Date: Fri, 14 Apr 2023 09:43:21 +0200
Subject: [PATCH] Make labels on latency charts more clear

Many people I showed the application to got confused
by the Regional results.

Most of them started to understand what's going on
only after I explained that Regional is a case when
the edge function always runs in Washington instead of
the closest region to the client.

It seems that the labels on the chart could be updated
to remove this confusion and give more value to people
that don't have time to dive deep into the logic of the
app.

Signed-off-by: Piotr Jastrzebski <piotr@chiselstrike.com>
---
 pages/api/neon-regional.ts |  2 +-
 pages/index.tsx            | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/pages/api/neon-regional.ts b/pages/api/neon-regional.ts
index 14cc8ab..8016c23 100644
--- a/pages/api/neon-regional.ts
+++ b/pages/api/neon-regional.ts
@@ -1,6 +1,6 @@
 export const config = {
   runtime: "edge",
-  regions: ["cle1"],
+  regions: ["iad1"],
 };
 
 export { default } from "./neon-global";
diff --git a/pages/index.tsx b/pages/index.tsx
index 6fa9f3b..b8e4b8a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -291,16 +291,16 @@ export default function Page() {
                 data={new Array(ATTEMPTS).fill(0).map((_, i) => {
                   return {
                     attempt: `#${i + 1}`,
-                    Regional: data.regional[i]
+                    "Edge function in Washington, D.C., USA": data.regional[i]
                       ? data.regional[i].queryDuration
                       : null,
-                    Global: data.global[i]
+                    "Global Edge function": data.global[i]
                       ? data.global[i].queryDuration
                       : null,
                   };
                 })}
                 index="attempt"
-                categories={['Global', 'Regional']}
+                categories={['Global Edge function', 'Edge function in Washington, D.C., USA']}
                 colors={['indigo', 'cyan']}
                 valueFormatter={dataFormatter}
                 yAxisWidth={48}
@@ -322,14 +322,14 @@ export default function Page() {
                 data={new Array(ATTEMPTS).fill(0).map((_, i) => {
                   return {
                     attempt: `#${i + 1}`,
-                    Regional: data.regional[i]
+                    "Edge function in Washington, D.C., USA": data.regional[i]
                       ? data.regional[i].elapsed
                       : null,
-                    Global: data.global[i] ? data.global[i].elapsed : null,
+                    "Global Edge function": data.global[i] ? data.global[i].elapsed : null,
                   };
                 })}
                 index="attempt"
-                categories={['Global', 'Regional']}
+                categories={['Global Edge function', 'Edge function in Washington, D.C., USA']}
                 colors={['indigo', 'cyan']}
                 valueFormatter={dataFormatter}
                 yAxisWidth={48}