Openstatus
www.openstatus.dev
🧑🎨 improve chart
+15
-13
+15
-13
apps/web/src/components/ping-response-analysis/multi-region-chart.tsx
+15
-13
apps/web/src/components/ping-response-analysis/multi-region-chart.tsx
···
6
6
import { getTimingPhases, latencyFormatter, regionFormatter } from "./utils";
7
7
8
8
export function MultiRegionChart({ regions }: { regions: RegionChecker[] }) {
9
-
const data = regions.map((item) => {
10
-
const { dns, connection, tls, ttfb, transfer } = getTimingPhases(
11
-
item.timing
12
-
);
13
-
return {
14
-
region: regionFormatter(item.region),
15
-
dns,
16
-
connection,
17
-
tls,
18
-
ttfb,
19
-
transfer,
20
-
};
21
-
});
9
+
const data = regions
10
+
.sort((a, b) => a.latency - b.latency)
11
+
.map((item) => {
12
+
const { dns, connection, tls, ttfb, transfer } = getTimingPhases(
13
+
item.timing
14
+
);
15
+
return {
16
+
region: regionFormatter(item.region),
17
+
dns,
18
+
connection,
19
+
tls,
20
+
ttfb,
21
+
transfer,
22
+
};
23
+
});
22
24
return (
23
25
<BarChart
24
26
data={data}