feat: measure effort relative to the daily goal

Author: aradzie

packages/keybr-intl/lib/messages/ar.json

@@ -267,6 +267,7 @@
   "profile.accuracy.legend": "Above are listed the longest continuous sequences of lessons with accuracy above a given threshold, along with statistics about every such sequence. The longer the sequence of lessons, the better.",
   "profile.accuracy.noData": "You don’t have any accuracy streaks. Consider completing a lesson with a highest accuracy possible, regardless of typing speed.",
   "profile.calendar.averageSpeed.description": "Average speed: {value}",
+  "profile.calendar.dailyGoal.description": "Daily goal: {value}",
   "profile.calendar.topSpeed.description": "Top speed: {value}",
   "profile.calendar.totalLessons.description": "Number of lessons: {value}",
   "profile.calendar.totalTime.description": "Time of lessons: {value}",

packages/keybr-intl/lib/messages/bg.json

@@ -12,21 +12,19 @@
 .table {
   table-layout: fixed;
   border-collapse: collapse;
+  cursor: default;
 }
 
-.caption {
-  background-color: var(--Calendar-caption__background-color);
-  text-align: center;
-}
-
+.caption,
 .headerCell,
 .cell {
-  vertical-align: middle;
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-  font-size: 0.75rem;
+  margin: 0;
+  padding: 0;
+}
+
+.caption {
+  background-color: var(--Calendar-caption__background-color);
   text-align: center;
-  cursor: default;
 }
 
 .headerCell {
@@ -36,3 +34,12 @@
 .cell {
   background-color: var(--Calendar-cell--background-color);
 }
+
+.item {
+  display: block;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  text-align: center;
+}

packages/keybr-intl/lib/messages/ca.json

@@ -1,4 +1,5 @@
 import { test } from "node:test";
+import { Color } from "@keybr/color";
 import { FakeIntlProvider } from "@keybr/intl";
 import { LocalDate, ResultFaker, ResultSummary } from "@keybr/result";
 import { FakeSettingsContext } from "@keybr/settings";
@@ -16,7 +17,13 @@ test("no results", () => {
   const r = render(
     <FakeIntlProvider>
       <FakeSettingsContext>
-        <Calendar summary={summary} />
+        <Calendar
+          summary={summary}
+          effort={{
+            effort: () => 0,
+            shade: () => Color.parse("#ffffff"),
+          }}
+        />
       </FakeSettingsContext>
     </FakeIntlProvider>,
   );
@@ -40,7 +47,13 @@ test("no results today", () => {
   const r = render(
     <FakeIntlProvider>
       <FakeSettingsContext>
-        <Calendar summary={summary} />
+        <Calendar
+          summary={summary}
+          effort={{
+            effort: () => 0,
+            shade: () => Color.parse("#ffffff"),
+          }}
+        />
       </FakeSettingsContext>
     </FakeIntlProvider>,
   );
@@ -65,7 +78,13 @@ test("render", () => {
   const r = render(
     <FakeIntlProvider>
       <FakeSettingsContext>
-        <Calendar summary={summary} />
+        <Calendar
+          summary={summary}
+          effort={{
+            effort: () => 0.5,
+            shade: () => Color.parse("#ffffff"),
+          }}
+        />
       </FakeSettingsContext>
     </FakeIntlProvider>,
   );

packages/keybr-intl/lib/messages/cs.json

@@ -1,24 +1,27 @@
-import { Color } from "@keybr/color";
+import { useIntlNumbers } from "@keybr/intl";
 import {
   LocalDate,
   makeSummaryStats,
   type Result,
   type ResultSummary,
-  type SummaryStats,
 } from "@keybr/result";
-import { useComputedStyles } from "@keybr/themes";
 import { formatDuration } from "@keybr/widget";
-import { type CSSProperties, useMemo } from "react";
 import { useIntl } from "react-intl";
 import * as styles from "./Calendar.module.less";
+import { type Effort } from "./effort.ts";
 import { useFormatter } from "./format.ts";
 
-export function Calendar({ summary }: { readonly summary: ResultSummary }) {
-  const effortStyles = useEffortStyles();
+export function Calendar({
+  summary,
+  effort,
+}: {
+  readonly summary: ResultSummary;
+  readonly effort: Effort;
+}) {
   return (
     <div className={styles.root}>
       {blockList(summary).map((block, index) => (
-        <Block key={index} block={block} effortStyles={effortStyles} />
+        <Block key={index} block={block} effort={effort} />
       ))}
     </div>
   );
@@ -32,10 +35,10 @@ type BlockData = {
 
 function Block({
   block,
-  effortStyles,
+  effort,
 }: {
   readonly block: BlockData;
-  readonly effortStyles: EffortStyles;
+  readonly effort: Effort;
 }) {
   const { formatMessage } = useIntl();
 
@@ -65,7 +68,7 @@ function Block({
           {block.cells.map((row, m) => (
             <tr key={m}>
               {row.map((cell, n) => (
-                <Cell key={n} cell={cell} effortStyles={effortStyles} />
+                <Cell key={n} cell={cell} effort={effort} />
               ))}
             </tr>
           ))}
@@ -82,22 +85,35 @@ type CellData = {
 
 function Cell({
   cell,
-  effortStyles,
+  effort,
 }: {
   readonly cell: CellData | null;
-  readonly effortStyles: EffortStyles;
+  readonly effort: Effort;
 }) {
   const { formatMessage } = useIntl();
+  const { formatPercents } = useIntlNumbers();
   const { formatSpeed } = useFormatter();
   if (cell == null) {
     return <td />;
   }
   const { results } = cell;
   if (results.length === 0) {
-    return <td className={styles.cell}>{cell.date.dayOfMonth}</td>;
+    return (
+      <td className={styles.cell}>
+        <span className={styles.item}>{cell.date.dayOfMonth}</span>
+      </td>
+    );
   }
   const stats = makeSummaryStats(results);
+  const effortValue = effort.effort(stats.time);
   const title = [
+    formatMessage(
+      {
+        id: "profile.calendar.dailyGoal.description",
+        defaultMessage: "Daily goal: {value}",
+      },
+      { value: formatPercents(effortValue) },
+    ),
     formatMessage(
       {
         id: "profile.calendar.totalTime.description",
@@ -128,8 +144,16 @@ function Cell({
     ),
   ].join(",\n");
   return (
-    <td className={styles.cell} style={effortStyles(stats)} title={title}>
-      {cell.date.dayOfMonth}
+    <td className={styles.cell}>
+      <span
+        className={styles.item}
+        style={{
+          backgroundColor: String(effort.shade(effortValue)),
+        }}
+        title={title}
+      >
+        {cell.date.dayOfMonth}
+      </span>
     </td>
   );
 }
@@ -195,19 +219,3 @@ function blockList(summary: ResultSummary): BlockData[] {
     };
   }
 }
-
-type EffortStyles = (stats: SummaryStats) => CSSProperties;
-
-function useEffortStyles(range = 30 * 60 * 1000): EffortStyles {
-  const { getPropertyValue } = useComputedStyles();
-  const color = getPropertyValue("--effort-color") || "#000000";
-  return useMemo(() => {
-    return ({ time }: SummaryStats) => {
-      const style = {} as CSSProperties;
-      if (range > 0 && time > 0) {
-        style.backgroundColor = String(Color.parse(color).fade(time / range));
-      }
-      return style;
-    };
-  }, [range, color]);
-}

packages/keybr-intl/lib/messages/da.json

@@ -0,0 +1,26 @@
+import { useIntlNumbers } from "@keybr/intl";
+import { FormattedMessage } from "react-intl";
+import { type Effort } from "./effort.ts";
+import * as styles from "./EffortLegent.module.less";
+
+export function EffortLegend({ effort }: { readonly effort: Effort }) {
+  const { formatPercents } = useIntlNumbers();
+  return (
+    <>
+      <FormattedMessage
+        id="settings.dailyGoal.label"
+        defaultMessage="Daily goal:"
+      />{" "}
+      {[1.0, 0.75, 0.5, 0.25, 0.0].map((value) => (
+        <span key={value} className={styles.cell}>
+          <span
+            className={styles.item}
+            style={{ backgroundColor: String(effort.shade(value)) }}
+          >
+            {formatPercents(value)}
+          </span>
+        </span>
+      ))}
+    </>
+  );
+}

packages/keybr-intl/lib/messages/de.json

@@ -0,0 +1,12 @@
+.cell {
+  display: inline-block;
+  background-color: var(--Calendar-cell--background-color);
+  cursor: default;
+}
+
+.item {
+  display: inline-block;
+  inline-size: 4rem;
+  padding-block: 0.25rem;
+  text-align: center;
+}

packages/keybr-intl/lib/messages/el.json

@@ -0,0 +1,26 @@
+import { Color } from "@keybr/color";
+import { MutableDailyGoal } from "@keybr/lesson";
+import { useSettings } from "@keybr/settings";
+import { useComputedStyles } from "@keybr/themes";
+import { useMemo } from "react";
+
+export type Effort = {
+  readonly effort: (time: number) => number;
+  readonly shade: (effort: number) => Color;
+};
+
+export function useEffort(): Effort {
+  const { settings } = useSettings();
+  const { getPropertyValue } = useComputedStyles();
+  const color = getPropertyValue("--effort-color") || "#000000";
+  return useMemo(() => {
+    const dailyGoal = new MutableDailyGoal(settings);
+    const effort = (time: number) => {
+      return dailyGoal.goal > 0 ? dailyGoal.measure(time) : 1.0;
+    };
+    const shade = (effort: number) => {
+      return Color.parse(color).fade(effort);
+    };
+    return { effort, shade };
+  }, [settings, color]);
+}

packages/keybr-intl/lib/messages/en.json

@@ -1,6 +1,8 @@
 export * from "./Calendar.tsx";
 export * from "./CurrentKey.tsx";
 export * from "./DailyGoal.tsx";
+export * from "./effort.ts";
+export * from "./EffortLegend.tsx";
 export * from "./format.ts";
 export * from "./gauges.tsx";
 export * from "./indicators.tsx";

packages/keybr-intl/lib/messages/eo.json

@@ -1,4 +1,4 @@
-import { Calendar } from "@keybr/lesson-ui";
+import { Calendar, EffortLegend, useEffort } from "@keybr/lesson-ui";
 import { type ResultSummary } from "@keybr/result";
 import { Explainer, Figure } from "@keybr/widget";
 import { type ReactNode } from "react";
@@ -9,6 +9,8 @@ export function CalendarSection({
 }: {
   readonly summary: ResultSummary;
 }): ReactNode {
+  const effort = useEffort();
+
   return (
     <Figure>
       <Figure.Caption>
@@ -27,7 +29,11 @@ export function CalendarSection({
         </Figure.Description>
       </Explainer>
 
-      <Calendar summary={summary} />
+      <Calendar summary={summary} effort={effort} />
+
+      <Figure.Legend>
+        <EffortLegend effort={effort} />
+      </Figure.Legend>
     </Figure>
   );
 }