diff --git a/public/css/style.scss b/public/css/style.scss index bbc7594ed..7c97b9aec 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -2260,7 +2260,7 @@ key { .below { text-align: center; color: var(--sub-color); - margin-top: 1rem; + margin-top: 0.5rem; } .chartPreloader { diff --git a/public/index.html b/public/index.html index 0af5db722..42a52bc01 100644 --- a/public/index.html +++ b/public/index.html @@ -2522,7 +2522,7 @@ -->
-
+
diff --git a/public/js/account.js b/public/js/account.js index 934a42dc1..4173c766f 100644 --- a/public/js/account.js +++ b/public/js/account.js @@ -381,13 +381,19 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), { return; }, beforeLabel: function (tooltipItem, data) { + let resultData = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; + if (tooltipItem.datasetIndex !== 0) { + return `acc: ${resultData.y}%`; + } let label = `${data.datasets[tooltipItem.datasetIndex].label}: ${ tooltipItem.yLabel }` + "\n" + + `raw: ${resultData.raw}` + + "\n" + `acc: ${resultData.acc}` + "\n\n" + `mode: ${resultData.mode} `; @@ -433,14 +439,14 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), { }, }, responsive: true, - // maintainAspectRatio: false, + maintainAspectRatio: false, // tooltips: { // mode: 'index', // intersect: false, // }, hover: { mode: "nearest", - intersect: true, + intersect: false, }, scales: { xAxes: [ @@ -465,7 +471,8 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), { ticks: { fontFamily: "Roboto Mono", beginAtZero: true, - min: 0 + min: 0, + stepSize: 10 }, display: true, scaleLabel: { @@ -479,12 +486,12 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), { ticks: { fontFamily: "Roboto Mono", beginAtZero: true, - max: 100 + max: 110 }, - display: false, + display: true, position: "right", scaleLabel: { - display: false, + display: true, labelString: "Accuracy", fontFamily: "Roboto Mono", }, @@ -539,7 +546,7 @@ let activityChart = new Chart($(".pageAccount #activityChart"), { maintainAspectRatio: false, hover: { mode: "nearest", - intersect: true, + intersect: false, }, scales: { xAxes: [ @@ -1456,7 +1463,7 @@ function loadMoreLines() { } } - let consistency = result.consistency; + let consistency = result.consistency.toFixed(2); if (consistency === undefined) { consistency = "-"; @@ -1466,9 +1473,9 @@ function loadMoreLines() { $(".pageAccount .history table tbody").append(` - ${result.wpm} - ${raw} - ${result.acc}% + ${result.wpm.toFixed(2)} + ${raw.toFixed(2)} + ${result.acc.toFixed(2)}% ${result.correctChars} ${result.incorrectChars} ${consistency} @@ -1521,6 +1528,7 @@ function refreshAccountPage() { let chartData = []; let wpmChartData = []; + let rawChartData = []; let accChartData = []; visibleTableLines = 0; @@ -1768,14 +1776,15 @@ function refreshAccountPage() { language: result.language, timestamp: result.timestamp, difficulty: result.difficulty, + raw: result.rawWpm }); wpmChartData.push(result.wpm); - // accChartData.push({ - // x: result.timestamp, - // y: result.acc, - // }) + accChartData.push({ + x: result.timestamp, + y: result.acc, + }) if (result.wpm > topWpm) { let puncsctring = result.punctuation ? ",
with punctuation" : ""; @@ -1850,7 +1859,6 @@ function refreshAccountPage() { activityChart.data.datasets[0].borderColor = themeColors.main; activityChart.data.datasets[0].backgroundColor = themeColors.main; - activityChart.options.legend.labels.fontColor = themeColors.sub; activityChart.data.datasets[0].trendlineLinear.style = themeColors.sub; @@ -1877,9 +1885,15 @@ function refreshAccountPage() { let minChartVal = Math.min(...wpmChartData); + let wpms = chartData.map((r) => r.y); + let maxChartVal = Math.max(...wpms); + + resultHistoryChart.options.scales.yAxes[0].ticks.max = Math.floor(maxChartVal) + (10 - Math.floor(maxChartVal) % 10); + // resultHistoryChart.options.scales.yAxes[1].ticks.max = Math.floor(maxChartVal) + 10; + if (!config.startGraphsAtZero) { - resultHistoryChart.options.scales.yAxes[0].ticks.min = Math.round(minChartVal); - resultHistoryChart.options.scales.yAxes[1].ticks.min = Math.round(minChartVal); + resultHistoryChart.options.scales.yAxes[0].ticks.min = Math.floor(minChartVal); + resultHistoryChart.options.scales.yAxes[1].ticks.min = Math.floor(minChartVal); } @@ -2028,7 +2042,6 @@ function refreshAccountPage() { resultHistoryChart.update({ duration: 0 }); activityChart.update({ duration: 0 }); - swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250); }