From 952cda5af286fd174b9ee08b7452e4913b75bc83 Mon Sep 17 00:00:00 2001 From: Aliaksandr Radzivanovich Date: Thu, 5 Dec 2024 17:33:37 +0100 Subject: [PATCH] fix the rendering of the target speed threshold line --- package-lock.json | 1 + packages/keybr-chart/lib/KeyDetailsChart.tsx | 33 +++++++++++---- packages/keybr-chart/lib/KeySpeedChart.tsx | 42 ++++++++++++------- .../keybr-chart/lib/TimeToTypeHistogram.tsx | 8 ++-- packages/keybr-chart/lib/types.ts | 2 - packages/keybr-chart/package.json | 1 + 6 files changed, 59 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d87446b..7a7485b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12245,6 +12245,7 @@ "@keybr/phonetic-model": "*", "@keybr/result": "*", "@keybr/settings": "*", + "@keybr/textinput": "*", "@keybr/themes": "*", "@keybr/widget": "*" }, diff --git a/packages/keybr-chart/lib/KeyDetailsChart.tsx b/packages/keybr-chart/lib/KeyDetailsChart.tsx index 5e9d01fa..a0f20a85 100644 --- 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 index 4cbdea1a..55cf39cf 100644 --- 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 index 6d7474e7..c6dc7dcb 100644 --- a/packages/keybr-chart/lib/TimeToTypeHistogram.tsx +++ b/packages/keybr-chart/lib/TimeToTypeHistogram.tsx @@ -1,12 +1,12 @@ 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({ @@ -14,7 +14,7 @@ export function TimeToTypeHistogram({ 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 index ada411f4..e75cd07c 100644 --- 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 index 558d5a69..28cd30b4 100644 --- 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": "*" },