feat: add the typing speed change over time chart

Author: aradzie

packages/keybr-chart/lib/RollingSpeedChart.tsx

@@ -0,0 +1,126 @@
+import { useFormatter } from "@keybr/lesson-ui";
+import { Range, Vector } from "@keybr/math";
+import { computeSpeed, type Stats, type Step } from "@keybr/textinput";
+import {
+  Canvas,
+  formatDuration,
+  type Rect,
+  type ShapeList,
+  Shapes,
+} from "@keybr/widget";
+import { type ReactNode } from "react";
+import { Chart, chartArea, type SizeProps } from "./Chart.tsx";
+import { withStyles } from "./decoration.ts";
+import { paintScatterPlot, projection } from "./graph.ts";
+import { type ChartStyles, useChartStyles } from "./use-chart-styles.ts";
+
+export function RollingSpeedChart({
+  stats,
+  steps,
+  width,
+  height,
+}: {
+  readonly stats: Stats;
+  readonly steps: readonly Step[];
+} & SizeProps): ReactNode {
+  const styles = useChartStyles();
+  const paint = usePaint(styles, stats, steps);
+  return (
+    <Chart width={width} height={height}>
+      <Canvas paint={chartArea(styles, paint)} />
+    </Chart>
+  );
+}
+
+function usePaint(styles: ChartStyles, stats: Stats, steps: readonly Step[]) {
+  const { formatSpeed } = useFormatter();
+  const g = withStyles(styles);
+
+  const vTime = new Vector();
+  const vSpeed = new Vector();
+  const vBumps = new Vector();
+  const head = steps[0];
+  for (let index = 1; index < steps.length; index++) {
+    const delta = Math.min(10, index);
+    const prev = steps[index - delta];
+    const curr = steps[index];
+    const speed = computeSpeed(delta, curr.timeStamp - prev.timeStamp);
+    vTime.add(curr.timeStamp - head.timeStamp);
+    vSpeed.add(speed);
+    if (curr.typo) {
+      vBumps.add(curr.timeStamp - head.timeStamp);
+    }
+  }
+
+  const rTime = Range.from(vTime);
+  const rSpeed = Range.from(vSpeed);
+
+  return (box: Rect): ShapeList => {
+    const proj = projection(box, rTime, rSpeed);
+    return [
+      g.paintGrid(box, "horizontal", { lines: 5 }),
+      g.paintGrid(box, "vertical", { lines: 5 }),
+      g.paintAxis(box, "bottom"),
+      g.paintAxis(box, "left"),
+      paintScatterPlot(proj, vTime, vSpeed, {
+        style: styles.speed,
+      }),
+      pointAverageSpeedLine(),
+      paintBumps(),
+      g.paintTicks(box, rTime, "bottom", {
+        lines: 5,
+        fmt: (value) => formatDuration(value, { showMillis: true }),
+      }),
+      g.paintTicks(box, rSpeed, "left", { fmt: formatSpeed }),
+    ];
+
+    function pointAverageSpeedLine(): ShapeList {
+      const y = Math.round(proj.y(stats.speed));
+      return [
+        Shapes.fill(styles.threshold, [
+          Shapes.rect({
+            x: box.x - 10,
+            y: y,
+            width: box.width + 20,
+            height: 1,
+          }),
+        ]),
+        Shapes.fillText({
+          x: box.x + box.width + 15,
+          y: y,
+          value: formatSpeed(stats.speed),
+          style: {
+            ...styles.thresholdLabel,
+            textAlign: "left",
+            textBaseline: "middle",
+          },
+        }),
+      ];
+    }
+
+    function paintBumps(): ShapeList {
+      const r = Math.round(
+        Math.min(Math.max(proj.box.width / vTime.length, 2), 6),
+      );
+      return Shapes.fill(
+        styles.accuracy,
+        [...vBumps].map((time) => {
+          const x = Math.round(proj.x(time));
+          return [
+            Shapes.rect({
+              x: x,
+              y: box.y,
+              width: 1,
+              height: box.height,
+            }),
+            Shapes.circle({
+              cx: x,
+              cy: box.y + box.height,
+              r,
+            }),
+          ];
+        }),
+      );
+    }
+  };
+}

packages/keybr-chart/lib/index.ts

@@ -10,6 +10,7 @@ export * from "./KeySpeedChart.tsx";
 export * from "./KeySpeedHistogram.tsx";
 export * from "./Marker.tsx";
 export * from "./ProgressOverviewChart.tsx";
+export * from "./RollingSpeedChart.tsx";
 export * from "./SpeedChart.tsx";
 export * from "./SpeedHistogram.tsx";
 export * from "./TimeToTypeHistogram.tsx";

packages/page-typing-test/lib/components/ReportScreen.tsx

@@ -2,6 +2,7 @@ import {
   AccuracyHistogram,
   makeAccuracyDistribution,
   makeSpeedDistribution,
+  RollingSpeedChart,
   SpeedHistogram,
   TimeToTypeHistogram,
 } from "@keybr/chart";
@@ -127,6 +128,17 @@ export function ReportScreen({ result }: { readonly result: TestResult }) {
 
       <Para align="center">Time to type a character histogram.</Para>
 
+      <Box alignItems="center" justifyContent="center">
+        <RollingSpeedChart
+          stats={result.stats}
+          steps={result.steps}
+          width="45rem"
+          height="15rem"
+        />
+      </Box>
+
+      <Para align="center">Typing speed change over time chart.</Para>
+
       <Spacer size={3} />
 
       <Replay result={result} />

packages/page-typing-test/lib/mock.ts

@@ -45,7 +45,7 @@ export const mockSteps: readonly Step[] = [
     timeStamp: 1762.234,
     codePoint: 32,
     timeToType: 96.30099999999993,
-    typo: false,
+    typo: true,
   },
   {
     timeStamp: 1910.01,
@@ -153,7 +153,7 @@ export const mockSteps: readonly Step[] = [
     timeStamp: 4137.875,
     codePoint: 101,
     timeToType: 79.90999999999985,
-    typo: false,
+    typo: true,
   },
   {
     timeStamp: 4217.762,
@@ -273,7 +273,7 @@ export const mockSteps: readonly Step[] = [
     timeStamp: 6953.907,
     codePoint: 110,
     timeToType: 59.72400000000016,
-    typo: false,
+    typo: true,
   },
   {
     timeStamp: 7097.736,
@@ -561,7 +561,7 @@ export const mockSteps: readonly Step[] = [
     timeStamp: 14890.601,
     codePoint: 32,
     timeToType: 132.44900000000052,
-    typo: false,
+    typo: true,
   },
   {
     timeStamp: 15086.195,