monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-21 07:46:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #444 from corey-b/master

Browse source 
Added toggle account chart lines
This commit is contained in:
Jack 2020-10-20 16:45:14 +01:00 committed by GitHub
parent 52e96989f7 63f943e33b
commit 689fb8e27c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/css/style.scss
View file

@ -2444,15 +2444,18 @@ key {
.below {
text-align: center;
color: var(--sub-color);
margin-top: 0.5rem;
margin-top: 1rem;
display: grid;
grid-template-columns: auto 300px;
align-items: center;
.text{
height: min-content;
}
.buttons{
display: grid;
gap: .5rem;
}
}
.toggleAccuracyOnChart {
position: absolute;
right: 0;
margin-top: -1.5rem;
}
.chartPreloader {
position: absolute;
width: 100%;

18
public/index.html
View file

@ -2910,10 +2910,20 @@
<div class="chart" style="height: 400px;">
<canvas id="resultHistoryChart"></canvas>
</div>
<div class="below"></div>
<div class="toggleAccuracyOnChart button">
<i class="fas fa-bullseye"></i>
Toggle Accuracy
<div class="below">
<div class="text">
</div>
<div class="buttons">
<div class="toggleAccuracyOnChart button">
<i class="fas fa-bullseye"></i>
Toggle Accuracy
</div>
<div class="toggleChartStyle button">
<i class="fas fa-chart-line"></i>
Toggle Chart Style
</div>
</div>
</div>
</div>
<div class="group dailyActivityChart">

6
public/js/account.js
View file

@ -2439,7 +2439,7 @@ function refreshAccountPage() {
// let slope = calculateSlope(trend);
let plus = wpmChangePerHour > 0 ? "+" : "";
$(".pageAccount .group.chart .below").text(
$(".pageAccount .group.chart .below .text").text(
`Speed change per hour spent typing: ${
plus + roundTo2(wpmChangePerHour)
} wpm.`
@ -2507,6 +2507,10 @@ $(".pageAccount .toggleAccuracyOnChart").click((params) => {
toggleChartAccuracy();
});
$(".pageAccount .toggleChartStyle").click((params) => {
toggleChartStyle();
});
$(document).on("click", ".pageAccount .group.history #resultEditTags", (f) => {
if (dbSnapshot.tags.length > 0) {
let resultid = $(f.target).parents("span").attr("resultid");

36
public/js/userconfig.js
View file

@ -62,7 +62,8 @@ let defaultConfig = {
paceCaret: "off",
paceCaretCustomSpeed: 100,
pageWidth: "100",
chartAccuracy: true
chartAccuracy: true,
chartStyle: "line"
};
let cookieConfig = null;
@ -205,6 +206,7 @@ function applyConfig(configObj) {
setPaceCaretCustomSpeed(configObj.paceCaretCustomSpeed, true);
setPageWidth(configObj.pageWidth, true);
setChartAccuracy(configObj.chartAccuracy, true);
setChartStyle(configObj.chartStyle, true);
config.startGraphsAtZero = configObj.startGraphsAtZero;
// if (
@ -316,6 +318,19 @@ function updateChartAccuracy() {
resultHistoryChart.update();
}
function updateChartStyle() {
if (config.chartStyle == "scatter") {
resultHistoryChart.data.datasets[0].showLine = false;
resultHistoryChart.data.datasets[1].showLine = false;
} else {
resultHistoryChart.data.datasets[0].showLine = true;
resultHistoryChart.data.datasets[1].showLine = true;
}
resultHistoryChart.update();
}
function toggleChartAccuracy() {
if (config.chartAccuracy) {
config.chartAccuracy = false;
@ -335,6 +350,25 @@ function setChartAccuracy(chartAccuracy, nosave) {
if (!nosave) saveConfigToCookie();
}
function toggleChartStyle() {
if (config.chartStyle == "scatter") {
config.chartStyle = "line";
} else {
config.chartStyle = "scatter";
}
updateChartStyle();
saveConfigToCookie();
}
function setChartStyle(chartStyle, nosave) {
if (chartStyle == undefined) {
chartStyle = "line";
}
config.chartStyle = chartStyle;
updateChartStyle();
if (!nosave) saveConfigToCookie();
}
//read ahead mode
// function toggleReadAheadMode() {
// config.readAheadMode = !config.readAheadMode;