on a page

frontend/src/html/pages/account.html

@@ -80,6 +80,10 @@
           </button>
         </div>
       </div>
+      <div>
+        Your speed style is:
+        <div id="accountSpeedStyle"></div>
+      </div>
       <div class="leaderboardsPositions">
         <div class="title">All-Time English Leaderboards</div>
         <div class="group t15">

frontend/src/ts/pages/account.ts

@@ -36,7 +36,7 @@ import Ape from "../ape";
 import { AccountChart } from "@monkeytype/schemas/configs";
 import { SortedTableWithLimit } from "../utils/sorted-table";
 import { qs, qsa, qsr, onWindowLoad, ElementWithUtils } from "../utils/dom";
-
+import { mountAccountPage } from "../test/live-states";
 let filterDebug = false;
 //toggle filterdebug
 export function toggleFilterDebug(): void {
@@ -51,6 +51,8 @@ let visibleTableLines = 0;
 let testActivityEl: HTMLElement | null;
 let historyTable: SortedTableWithLimit<SnapshotResult<Mode>>;
 
+let accountDispose: () => void;
+
 function loadMoreLines(lineIndex?: number): void {
   if (filteredResults === undefined || filteredResults.length === 0) return;
   let newVisibleLines;
@@ -564,7 +566,7 @@ async function fillContent(): Promise<void> {
         histogramChartData.push(0);
       }
     }
-    (histogramChartData[bucket] as number)++;
+    (histogramChartData[bucket] as number) += 1;
 
     let tt = 0;
     if (
@@ -1243,10 +1245,12 @@ export const page = new Page<undefined>({
   afterHide: async (): Promise<void> => {
     reset();
     Skeleton.remove("pageAccount");
+    accountDispose?.();
   },
   beforeShow: async (): Promise<void> => {
     Skeleton.append("pageAccount", "main");
     const snapshot = DB.getSnapshot();
+    accountDispose = mountAccountPage();
     await ResultFilters.appendDropdowns(update);
     ResultFilters.updateActive();
     await Misc.sleep(0);

frontend/src/ts/test/live-states.tsx

@@ -15,3 +15,13 @@ export function mountLiveCounters(): void {
     qsr("#liveSpeedCounter").native,
   );
 }
+
+export function mountAccountPage(): () => void {
+  const speedStyleDispose = render(
+    () => <LiveCounter value={getLiveSpeedStyle} />,
+    qsr("#accountSpeedStyle").native,
+  );
+  return () => {
+    speedStyleDispose();
+  };
+}