added histogram to the account page

frontend/src/ts/controllers/chart-controller.ts

@@ -540,6 +540,103 @@ export const accountActivity: ChartWithUpdateColors<
   },
 });
 
+export const accountHistogram: ChartWithUpdateColors<
+  "bar",
+  MonkeyTypes.ActivityChartDataPoint[],
+  string
+> = new ChartWithUpdateColors($(".pageAccount #accountHistogramChart"), {
+  type: "bar",
+  data: {
+    labels: [],
+    datasets: [
+      {
+        yAxisID: "count",
+        label: "Tests",
+        data: [],
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    hover: {
+      mode: "nearest",
+      intersect: false,
+    },
+    scales: {
+      x: {
+        axis: "x",
+        // ticks: {
+        //   autoSkip: true,
+        //   autoSkipPadding: 20,
+        // },
+        bounds: "ticks",
+        display: true,
+        title: {
+          display: false,
+          text: "Bucket",
+        },
+        offset: true,
+      },
+      count: {
+        axis: "y",
+        beginAtZero: true,
+        min: 0,
+        ticks: {
+          autoSkip: true,
+          autoSkipPadding: 20,
+          stepSize: 10,
+        },
+        display: true,
+        title: {
+          display: true,
+          text: "Tests",
+        },
+      },
+    },
+    plugins: {
+      annotation: {
+        annotations: [],
+      },
+      tooltip: {
+        animation: { duration: 250 },
+        intersect: false,
+        mode: "index",
+        // callbacks: {
+        //   title: function (tooltipItem): string {
+        //     const resultData = tooltipItem[0].dataset.data[
+        //       tooltipItem[0].dataIndex
+        //     ] as MonkeyTypes.ActivityChartDataPoint;
+        //     return format(new Date(resultData.x), "dd MMM yyyy");
+        //   },
+        //   beforeLabel: function (tooltipItem): string {
+        //     const resultData = tooltipItem.dataset.data[
+        //       tooltipItem.dataIndex
+        //     ] as MonkeyTypes.ActivityChartDataPoint;
+        //     switch (tooltipItem.datasetIndex) {
+        //       case 0:
+        //         return `Time Typing: ${Misc.secondsToString(
+        //           Math.round(resultData.y),
+        //           true,
+        //           true
+        //         )}\nTests Completed: ${resultData.amount}`;
+        //       case 1:
+        //         return `Average ${
+        //           Config.alwaysShowCPM ? "Cpm" : "Wpm"
+        //         }: ${Misc.roundTo2(resultData.y)}`;
+        //       default:
+        //         return "";
+        //     }
+        //   },
+        //   label: function (): string {
+        //     return "";
+        //   },
+        // },
+      },
+    },
+  },
+});
+
 export const miniResult: ChartWithUpdateColors<
   "line" | "scatter",
   number[],
@@ -726,7 +823,9 @@ export async function updateColors<
     const color = isPb ? textcolor : maincolor;
     return color;
   };
-  chart.data.datasets[1].borderColor = subcolor;
+  if (chart.data.datasets[1]) {
+    chart.data.datasets[1].borderColor = subcolor;
+  }
   if (chart.data.datasets[2]) {
     chart.data.datasets[2].borderColor = errorcolor;
   }
@@ -751,21 +850,22 @@ export async function updateColors<
       chart.data.datasets as ChartDataset<"line", TData>[]
     )[0].pointBackgroundColor = maincolor;
   }
-
-  if (chart.data.datasets[1].type === undefined) {
-    if (chart.config.type === "line") {
+  if (chart.data.datasets[1]) {
+    if (chart.data.datasets[1].type === undefined) {
+      if (chart.config.type === "line") {
+        (
+          chart.data.datasets as ChartDataset<"line", TData>[]
+        )[1].pointBackgroundColor = subcolor;
+      } else if (chart.config.type === "bar") {
+        chart.data.datasets[1].backgroundColor = subcolor;
+      }
+    } else if (chart.data.datasets[1].type === "bar") {
+      chart.data.datasets[1].backgroundColor = subcolor;
+    } else if (chart.data.datasets[1].type === "line") {
       (
         chart.data.datasets as ChartDataset<"line", TData>[]
       )[1].pointBackgroundColor = subcolor;
-    } else if (chart.config.type === "bar") {
-      chart.data.datasets[1].backgroundColor = subcolor;
     }
-  } else if (chart.data.datasets[1].type === "bar") {
-    chart.data.datasets[1].backgroundColor = subcolor;
-  } else if (chart.data.datasets[1].type === "line") {
-    (
-      chart.data.datasets as ChartDataset<"line", TData>[]
-    )[1].pointBackgroundColor = subcolor;
   }
 
   const chartScaleOptions = chart.options as ScaleChartOptions<TType>;

frontend/src/ts/pages/account.ts

@@ -179,10 +179,12 @@ function loadMoreLines(lineIndex?: number): void {
 
 export function reset(): void {
   $(".pageAccount .history table tbody").empty();
+  ChartController.accountHistogram.data.datasets[0].data = [];
   ChartController.accountActivity.data.datasets[0].data = [];
   ChartController.accountActivity.data.datasets[1].data = [];
   ChartController.accountHistory.data.datasets[0].data = [];
   ChartController.accountHistory.data.datasets[1].data = [];
+  ChartController.accountHistogram.updateColors();
   ChartController.accountActivity.updateColors();
   ChartController.accountHistory.updateColors();
 }
@@ -236,6 +238,7 @@ function fillContent(): void {
   ThemeColors.update();
   ChartController.accountHistory.updateColors();
   ChartController.accountActivity.updateColors();
+  ChartController.accountHistogram.updateColors();
   AllTimeStats.update();
 
   const snapshot = DB.getSnapshot();
@@ -285,8 +288,14 @@ function fillContent(): void {
     };
   }
 
+  interface HistogramChartData {
+    [key: string]: number;
+  }
+
   const activityChartData: ActivityChartData = {};
 
+  const histogramChartData: HistogramChartData = {};
+
   filteredResults = [];
   $(".pageAccount .history table tbody").empty();
   DB.getSnapshot().results?.forEach(
@@ -516,6 +525,14 @@ function fillContent(): void {
         };
       }
 
+      const bucket = Math.floor(result.wpm / 10) * 10;
+
+      if (Object.keys(histogramChartData).includes(String(bucket))) {
+        histogramChartData[bucket]++;
+      } else {
+        histogramChartData[bucket] = 1;
+      }
+
       let tt = 0;
       if (
         result.testDuration == undefined &&
@@ -677,6 +694,29 @@ function fillContent(): void {
   ChartController.accountActivity.data.datasets[1].data =
     activityChartData_avgWpm;
 
+  const histogramChartDataBucketed: { x: number; y: number }[] = [];
+  const labels: string[] = [];
+
+  const keys = Object.keys(histogramChartData);
+  for (let i = 0; i < keys.length; i++) {
+    const bucket = parseInt(keys[i]);
+    labels.push(`${bucket} - ${bucket + 9}`);
+    if (bucket + 10 != parseInt(keys[i + 1])) {
+      for (let j = bucket + 10; j < parseInt(keys[i + 1]); j += 10) {
+        histogramChartDataBucketed.push({ x: i, y: 0 });
+        labels.push(`${j} - ${j + 9}`);
+      }
+    }
+    histogramChartDataBucketed.push({
+      x: bucket,
+      y: histogramChartData[bucket],
+    });
+  }
+
+  ChartController.accountHistogram.data.labels = labels;
+  ChartController.accountHistogram.data.datasets[0].data =
+    histogramChartDataBucketed;
+
   const accountHistoryScaleOptions = (
     ChartController.accountHistory.options as ScaleChartOptions<"line">
   ).scales;

frontend/static/html/pages/account.html

@@ -445,6 +445,11 @@
         </div>
       </div>
     </div>
+    <div class="group histogramChart">
+      <div class="chart" style="height: 200px">
+        <canvas id="accountHistogramChart"></canvas>
+      </div>
+    </div>
     <div class="group dailyActivityChart">
       <div class="chart" style="height: 200px">
         <canvas id="accountActivityChart"></canvas>