fix the rendering of the target speed threshold line

Merwin4 · Dec 5, 2024 · 952cda5 · 952cda5
1 parent bb2fcd6
commit 952cda5
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/keybr-chart/lib/KeyDetailsChart.tsx b/packages/keybr-chart/lib/KeyDetailsChart.tsx
@@ -1,7 +1,7 @@
 import { useIntlNumbers } from "@keybr/intl";
 import { type LearningRate, type LessonKey, Target } from "@keybr/lesson";
 import { useFormatter } from "@keybr/lesson-ui";
-import { constModel, Range } from "@keybr/math";
+import { Range } from "@keybr/math";
 import { useSettings } from "@keybr/settings";
 import { Canvas, type Rect, type ShapeList, Shapes } from "@keybr/widget";
 import { type ReactNode } from "react";
@@ -84,16 +84,35 @@ function usePaint(
           lineWidth: 2,
         },
       }),
-      paintCurve(proj, constModel(target.targetSpeed), {
-        style: {
-          ...styles.threshold,
-          lineWidth: 2,
-        },
-      }),
+      paintTargetSpeedLine(),
       g.paintTicks(box, rIndex, "bottom", { lines: 5, fmt: formatInteger }),
       g.paintTicks(box, rSpeed, "left", { fmt: formatSpeed }),
     ];
 
+    function paintTargetSpeedLine(): ShapeList {
+      const y = Math.round(proj.y(target.targetSpeed));
+      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(target.targetSpeed),
+          style: {
+            ...styles.thresholdLabel,
+            textAlign: "left",
+            textBaseline: "middle",
+          },
+        }),
+      ];
+    }
+
     function paintThresholdLine({
       label,
       value,

diff --git a/packages/keybr-chart/lib/KeySpeedChart.tsx b/packages/keybr-chart/lib/KeySpeedChart.tsx
@@ -1,17 +1,10 @@
 import { useIntlNumbers } from "@keybr/intl";
 import { Target } from "@keybr/lesson";
 import { useFormatter } from "@keybr/lesson-ui";
-import {
-  constModel,
-  hasData,
-  linearRegression,
-  Range,
-  smooth,
-  Vector,
-} from "@keybr/math";
+import { hasData, linearRegression, Range, smooth, Vector } from "@keybr/math";
 import { type KeySample, timeToSpeed } from "@keybr/result";
 import { useSettings } from "@keybr/settings";
-import { Canvas, type Rect, type ShapeList } from "@keybr/widget";
+import { Canvas, type Rect, type ShapeList, Shapes } from "@keybr/widget";
 import { type ReactNode } from "react";
 import { useIntl } from "react-intl";
 import { Chart, chartArea, type SizeProps } from "./Chart.tsx";
@@ -93,14 +86,33 @@ function usePaint(
           lineWidth: 2,
         },
       }),
-      paintCurve(proj, constModel(target.targetSpeed), {
-        style: {
-          ...styles.threshold,
-          lineWidth: 2,
-        },
-      }),
+      paintTargetSpeedLine(),
       g.paintTicks(box, rIndex, "bottom", { lines: 5, fmt: formatInteger }),
       g.paintTicks(box, rSpeed, "left", { fmt: formatSpeed }),
     ];
+
+    function paintTargetSpeedLine(): ShapeList {
+      const y = Math.round(proj.y(target.targetSpeed));
+      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(target.targetSpeed),
+          style: {
+            ...styles.thresholdLabel,
+            textAlign: "left",
+            textBaseline: "middle",
+          },
+        }),
+      ];
+    }
   };
 }
diff --git a/packages/keybr-chart/lib/TimeToTypeHistogram.tsx b/packages/keybr-chart/lib/TimeToTypeHistogram.tsx
@@ -1,20 +1,20 @@
 import { useFormatter } from "@keybr/lesson-ui";
 import { Range, Vector } from "@keybr/math";
 import { timeToSpeed } from "@keybr/result";
+import { type Step } from "@keybr/textinput";
 import { Canvas, 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 { bucketize } from "./dist/util.ts";
-import { type TimeToType } from "./types.ts";
 import { type ChartStyles, useChartStyles } from "./use-chart-styles.ts";
 
 export function TimeToTypeHistogram({
   steps,
   width,
   height,
 }: {
-  readonly steps: readonly TimeToType[];
+  readonly steps: readonly Step[];
 } & SizeProps): ReactNode {
   const styles = useChartStyles();
   const paint = usePaint(styles, steps);
@@ -25,7 +25,7 @@ export function TimeToTypeHistogram({
   );
 }
 
-function usePaint(styles: ChartStyles, steps: readonly TimeToType[]) {
+function usePaint(styles: ChartStyles, steps: readonly Step[]) {
   const { formatSpeed } = useFormatter();
   const g = withStyles(styles);
 
@@ -73,7 +73,7 @@ function usePaint(styles: ChartStyles, steps: readonly TimeToType[]) {
   };
 }
 
-function buildHistogram(steps: readonly TimeToType[]) {
+function buildHistogram(steps: readonly Step[]) {
   const histogram = new Array(1501).fill(0);
   for (const { timeToType } of steps) {
     if (timeToType > 0) {

diff --git a/packages/keybr-chart/lib/types.ts b/packages/keybr-chart/lib/types.ts
@@ -2,5 +2,3 @@ export type Threshold = {
   readonly label: string;
   readonly value: number;
 };
-
-export type TimeToType = { readonly timeToType: number };
diff --git a/packages/keybr-chart/package.json b/packages/keybr-chart/package.json
@@ -15,6 +15,7 @@
     "@keybr/phonetic-model": "*",
     "@keybr/result": "*",
     "@keybr/settings": "*",
+    "@keybr/textinput": "*",
     "@keybr/themes": "*",
     "@keybr/widget": "*"
   },