Add latency chart

Author: JulienLavocat

tools/tpcc-dashboard/src/App.tsx

@@ -9,6 +9,7 @@ import { useAppDispatch, useAppSelector } from './hooks';
 import NewOrderThroughtputChart from './NewOrderThroughtputChart';
 import StatsCards from './StatsCards';
 import './App.css';
+import LatencyDistributionChart from './LatencyDistributionChart';
 
 function App() {
   const conn = useContext(SpacetimeDBContext);
@@ -57,13 +58,14 @@ function App() {
   }, [conn, dispatch]);
 
   if (!isReady) {
-    return <div>Waiting for data...</div>;
+    return <div className="heading-7">Waiting for data...</div>;
   }
 
   return (
     <div className="app">
       <StatsCards />
       <NewOrderThroughtputChart />
+      <LatencyDistributionChart />
     </div>
   );
 }

tools/tpcc-dashboard/src/ConnectedGuard.tsx

@@ -10,7 +10,7 @@ export function ConnectedGuard({ children }: { children: React.ReactNode }) {
     }
 
     DbConnection.builder()
-      // .withUri('https://tpc-c-benchmark.spacetimedb.com')
+      .withUri('https://tpc-c-benchmark.spacetimedb.com')
       .withUri('http://localhost:3000')
       .withDatabaseName('tpcc-metrics')
       .onConnect(conn => {
@@ -21,7 +21,7 @@ export function ConnectedGuard({ children }: { children: React.ReactNode }) {
   }, [conn]);
 
   if (!conn || !conn.isActive) {
-    return <div>Connecting to SpacetimeDB...</div>;
+    return <div className="heading-7">Connecting to SpacetimeDB...</div>;
   }
 
   return (

tools/tpcc-dashboard/src/LatencyDistributionChart.tsx

@@ -0,0 +1,53 @@
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { useAppSelector } from './hooks';
+import { useMemo } from 'react';
+
+export default function LatencyDistributionChart() {
+  const latencyData = useAppSelector(state => state.globalState.latencyData);
+
+  const chartData = useMemo(() => {
+    const sortedLatencies = Object.keys(latencyData)
+      .map(key => parseInt(key))
+      .sort((a, b) => a - b);
+
+    return sortedLatencies.map(latency => ({
+      latency,
+      count: latencyData[latency],
+    }));
+  }, [latencyData]);
+
+  return (
+    <div className="chart">
+      <ResponsiveContainer width="100%" height={460}>
+        <LineChart data={chartData}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="latency"
+            label={{
+              value: 'Response Time (ms)',
+              position: 'insideBottomRight',
+              offset: -10,
+            }}
+          />
+          <YAxis
+            label={{
+              value: 'Number of transactions',
+              angle: -90,
+              position: 'insideLeft',
+            }}
+          />
+          <Tooltip />
+          <Line type="monotone" dataKey="count" stroke="#8884d8" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

tools/tpcc-dashboard/src/features/globalState.ts

@@ -11,6 +11,8 @@ export interface GlobalState {
   measuredTransactionCount: number;
   /// Time in ms when the transaction was measured
   throughputData: number[];
+  /// Latency frequency distribution, where the key is the latency in ms and the value is the count of transactions with that latency.
+  latencyData: Record<number, number>;
 }
 
 const initialState: GlobalState = {
@@ -23,6 +25,7 @@ const initialState: GlobalState = {
   totalTransactionCount: 0,
   measuredTransactionCount: 0,
   throughputData: [],
+  latencyData: {},
 };
 
 export const globalStateSlice = createSlice({
@@ -50,6 +53,7 @@ export const globalStateSlice = createSlice({
       state.totalTransactionCount = 0;
       state.measuredTransactionCount = 0;
       state.throughputData = [];
+      state.latencyData = {};
     },
     deleteState: state => {
       console.log('State deleted, resetting to initial state');
@@ -71,6 +75,13 @@ export const globalStateSlice = createSlice({
       }
 
       state.throughputData.push(Number(payload.measurementTimeMs));
+
+      const latency = Number(payload.latencyMs);
+      if (state.latencyData[latency]) {
+        state.latencyData[latency] += 1;
+      } else {
+        state.latencyData[latency] = 1;
+      }
     },
   },
 });