From 7dff50dc3032cd0c7a897da70825892745878a5b Mon Sep 17 00:00:00 2001 From: Miodec Date: Mon, 12 Sep 2022 14:24:56 +0200 Subject: [PATCH] added histogram to the account page --- .../src/ts/controllers/chart-controller.ts | 124 ++++++++++++++++-- frontend/src/ts/pages/account.ts | 40 ++++++ frontend/static/html/pages/account.html | 5 + 3 files changed, 157 insertions(+), 12 deletions(-) diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts index 16de4a236..363831955 100644 --- a/frontend/src/ts/controllers/chart-controller.ts +++ b/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; diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index 9832fd878..3af36fa73 100644 --- a/frontend/src/ts/pages/account.ts +++ b/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; diff --git a/frontend/static/html/pages/account.html b/frontend/static/html/pages/account.html index ab5b86906..11fd678f0 100644 --- a/frontend/static/html/pages/account.html +++ b/frontend/static/html/pages/account.html @@ -445,6 +445,11 @@ +
+
+ +
+