[pull] master from monkeytypegame:master

backend/__tests__/api/controllers/result.spec.ts

@@ -622,7 +622,7 @@ describe("result controller test", () => {
             bailedOut: false,
             blindMode: false,
             charStats: [100, 2, 3, 5],
-            chartData: { wpm: [1, 2, 3], raw: [50, 55, 56], err: [0, 2, 0] },
+            chartData: { wpm: [1, 2, 3], burst: [50, 55, 56], err: [0, 2, 0] },
             consistency: 23.5,
             difficulty: "normal",
             funbox: [],
@@ -675,7 +675,7 @@ describe("result controller test", () => {
           charStats: [100, 2, 3, 5],
           chartData: {
             err: [0, 2, 0],
-            raw: [50, 55, 56],
+            burst: [50, 55, 56],
             wpm: [1, 2, 3],
           },
           consistency: 23.5,
@@ -757,7 +757,7 @@ describe("result controller test", () => {
             bailedOut: false,
             blindMode: false,
             charStats: [100, 2, 3, 5],
-            chartData: { wpm: [1, 2, 3], raw: [50, 55, 56], err: [0, 2, 0] },
+            chartData: { wpm: [1, 2, 3], burst: [50, 55, 56], err: [0, 2, 0] },
             consistency: 23.5,
             difficulty: "normal",
             funbox: [],

backend/__tests__/utils/result.spec.ts

@@ -123,19 +123,85 @@ describe("Result Utils", () => {
       });
     });
 
+    describe("legacy chartData conversion", () => {
+      it("should convert chartData with 'raw' property to 'burst'", () => {
+        const resultWithLegacyChartData: DBResult = {
+          chartData: {
+            wpm: [50, 55, 60],
+            raw: [52, 57, 62],
+            err: [1, 0, 2],
+          } as any,
+        } as any;
+
+        const result = replaceLegacyValues(resultWithLegacyChartData);
+
+        expect(result.chartData).toEqual({
+          wpm: [50, 55, 60],
+          burst: [52, 57, 62],
+          err: [1, 0, 2],
+        });
+      });
+
+      it("should not convert chartData when it's 'toolong'", () => {
+        const resultWithToolongChartData: DBResult = {
+          chartData: "toolong",
+        } as any;
+
+        const result = replaceLegacyValues(resultWithToolongChartData);
+
+        expect(result.chartData).toBe("toolong");
+      });
+
+      it("should not convert chartData when it doesn't have 'raw' property", () => {
+        const resultWithModernChartData: DBResult = {
+          chartData: {
+            wpm: [50, 55, 60],
+            burst: [52, 57, 62],
+            err: [1, 0, 2],
+          },
+        } as any;
+
+        const result = replaceLegacyValues(resultWithModernChartData);
+
+        expect(result.chartData).toEqual({
+          wpm: [50, 55, 60],
+          burst: [52, 57, 62],
+          err: [1, 0, 2],
+        });
+      });
+
+      it("should not convert chartData when it's undefined", () => {
+        const resultWithoutChartData: DBResult = {} as any;
+
+        const result = replaceLegacyValues(resultWithoutChartData);
+
+        expect(result.chartData).toBeUndefined();
+      });
+    });
+
     it("should convert all legacy data at once", () => {
-      const resultWithBothLegacy: DBResult = {
+      const resultWithAllLegacy: DBResult = {
         correctChars: 100,
         incorrectChars: 8,
         funbox: "memory#mirror" as any,
+        chartData: {
+          wpm: [50, 55, 60],
+          raw: [52, 57, 62],
+          err: [1, 0, 2],
+        } as any,
       } as any;
 
-      const result = replaceLegacyValues(resultWithBothLegacy);
+      const result = replaceLegacyValues(resultWithAllLegacy);
 
       expect(result.charStats).toEqual([100, 8, 0, 0]);
       expect(result.correctChars).toBeUndefined();
       expect(result.incorrectChars).toBeUndefined();
       expect(result.funbox).toEqual(["memory", "mirror"]);
+      expect(result.chartData).toEqual({
+        wpm: [50, 55, 60],
+        burst: [52, 57, 62],
+        err: [1, 0, 2],
+      });
     });
 
     describe("no legacy values", () => {

backend/src/api/controllers/dev.ts

@@ -137,7 +137,7 @@ function createResult(
     keyConsistency: 33.18,
     chartData: {
       wpm: createArray(testDuration, () => random(80, 120)),
-      raw: createArray(testDuration, () => random(80, 120)),
+      burst: createArray(testDuration, () => random(80, 120)),
       err: createArray(testDuration, () => (Math.random() < 0.1 ? 1 : 0)),
     },
     keySpacingStats: {

backend/src/dal/result.ts

@@ -63,6 +63,7 @@ export async function getResult(uid: string, id: string): Promise<DBResult> {
     _id: new ObjectId(id),
     uid,
   });
+
   if (!result) throw new MonkeyError(404, "Result not found");
   return replaceLegacyValues(result);
 }

backend/src/utils/result.ts

@@ -1,4 +1,9 @@
-import { CompletedEvent, Result } from "@monkeytype/schemas/results";
+import {
+  ChartData,
+  CompletedEvent,
+  OldChartData,
+  Result,
+} from "@monkeytype/schemas/results";
 import { Mode } from "@monkeytype/schemas/shared";
 import { ObjectId } from "mongodb";
 import { WithObjectId } from "./misc";
@@ -8,6 +13,7 @@ export type DBResult = WithObjectId<Result<Mode>> & {
   //legacy values
   correctChars?: number;
   incorrectChars?: number;
+  chartData: ChartData | OldChartData | "toolong";
 };
 
 export function buildDbResult(
@@ -103,5 +109,18 @@ export function replaceLegacyValues(result: DBResult): DBResult {
     }
   }
 
+  if (
+    result.chartData !== undefined &&
+    result.chartData !== "toolong" &&
+    "raw" in result.chartData
+  ) {
+    const temp = result.chartData;
+    result.chartData = {
+      wpm: temp.wpm,
+      burst: temp.raw,
+      err: temp.err,
+    };
+  }
+
   return result;
 }

frontend/src/html/pages/test.html

@@ -331,6 +331,25 @@
         </div>
       </div>
       <div class="chart">
+        <div class="chartLegend">
+          <button class="text" tabindex="-1" data-id="pbLine">
+            <i class="fas fa-crown"></i>
+            <div class="text">pb</div>
+          </button>
+          <button class="text" tabindex="-1" data-id="raw">
+            <div class="line dashed"></div>
+            <div class="text">raw</div>
+          </button>
+          <button class="text" tabindex="-1" data-id="burst">
+            <div class="line"></div>
+            <div class="text">burst</div>
+          </button>
+          <button class="text" tabindex="-1" data-id="errors">
+            <!-- <div class="line"></div> -->
+            <i class="fas fa-times"></i>
+            <div class="text">errors</div>
+          </button>
+        </div>
         <!-- <div class="title">wpm over time</div> -->
         <canvas id="wpmChart"></canvas>
       </div>

frontend/src/html/popups.html

@@ -66,6 +66,7 @@
     <button class="showTestNotifications">show test notifications</button>
     <button class="showRealWordsInput">show real words input</button>
     <button class="xpBarTest">xp bar test</button>
+    <button class="toggleFakeChartData">toggle fake chart data</button>
   </div>
 </dialog>
 

frontend/src/styles/test.scss

@@ -779,6 +779,109 @@
     .chart {
       grid-area: chart;
       width: 100%;
+      position: relative;
+
+      &:hover {
+        .chartLegend {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
+      .chartLegend {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        background: var(--bg-color);
+        border-radius: var(--roundness);
+        // top: -2.25em;
+        bottom: -0.75em;
+        padding: 0.25em;
+        right: 0;
+        font-size: 0.75em;
+        transition: opacity 0.125s;
+        cursor: pointer;
+        display: flex;
+
+        // button {
+        //   border-radius: 0;
+        //   background: var(--sub-alt-color);
+        // }
+
+        // button:first-child {
+        //   border-top-left-radius: var(--roundness);
+        //   border-bottom-left-radius: var(--roundness);
+        // }
+
+        // button:last-child {
+        //   border-top-right-radius: var(--roundness);
+        //   border-bottom-right-radius: var(--roundness);
+        // }
+
+        button {
+          padding: 0.5em 1em;
+          display: inline-grid;
+          grid-template-columns: auto 1fr;
+          align-items: center;
+          --color: var(--sub-color);
+
+          text-decoration: line-through;
+          .text {
+            pointer-events: none;
+          }
+
+          .line {
+            height: 0.25em;
+            width: 1.5em;
+            border-radius: calc(var(--roundness) / 2);
+            transition: background 0.125s;
+            background: var(--color);
+            pointer-events: none;
+
+            &.dashed {
+              background: linear-gradient(
+                90deg,
+                var(--color) 0%,
+                var(--color) 40%,
+                transparent 40%,
+                transparent 60%,
+                var(--color) 60%,
+                var(--color) 100%
+              );
+            }
+          }
+
+          .fas {
+            color: var(--color);
+            line-height: 0;
+          }
+
+          &.active {
+            text-decoration: none;
+            // .text {
+            // }
+            color: var(--sub-color);
+            &[data-id="raw"] {
+              --color: var(--main-color);
+            }
+            &[data-id="burst"] {
+              --color: var(--sub-color);
+            }
+            &[data-id="errors"] {
+              --color: var(--error-color);
+            }
+          }
+
+          &:hover {
+            color: var(--text-color);
+            background: var(--sub-alt-color);
+          }
+
+          &:active {
+            color: var(--sub-color);
+          }
+        }
+      }
 
       canvas {
         width: 100% !important;

frontend/src/ts/commandline/lists/min-burst.ts

@@ -3,7 +3,7 @@ import { get as getTypingSpeedUnit } from "../../utils/typing-speed-units";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Minimum burst...",
+  title: "Minimum word burst...",
   configKey: "minBurst",
   list: [
     {
@@ -48,7 +48,7 @@ const subgroup: CommandsSubgroup = {
 const commands: Command[] = [
   {
     id: "changeMinBurst",
-    display: "Minimum burst...",
+    display: "Minimum word burst...",
     alias: "minimum",
     icon: "fa-bomb",
     subgroup,

frontend/src/ts/config-metadata.ts

@@ -174,7 +174,7 @@ export const configMetadata: ConfigMetadataObject = {
   },
   burstHeatmap: {
     icon: "fa-fire",
-    displayString: "burst heatmap",
+    displayString: "word burst heatmap",
     changeRequiresRestart: false,
   },
 
@@ -246,12 +246,12 @@ export const configMetadata: ConfigMetadataObject = {
   },
   minBurst: {
     icon: "fa-bomb",
-    displayString: "min burst",
+    displayString: "min word burst",
     changeRequiresRestart: true,
   },
   minBurstCustomSpeed: {
     icon: "fa-bomb",
-    displayString: "min burst custom speed",
+    displayString: "min word burst custom speed",
     changeRequiresRestart: true,
   },
   britishEnglish: {
@@ -477,7 +477,7 @@ export const configMetadata: ConfigMetadataObject = {
   },
   liveBurstStyle: {
     icon: "fa-tachometer-alt",
-    displayString: "live burst style",
+    displayString: "live word burst style",
     changeRequiresRestart: false,
   },
   timerColor: {