monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-08 05:03:39 +08:00
Code Issues Projects Releases Packages Wiki Activity

added mini result chart module. #495

Browse source
This commit is contained in:
Miodec 2021-03-28 02:45:26 +01:00
parent f9f4eb097c
commit 093d5bbafd
4 changed files with 64 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gulpfile.js
View file

@ -133,6 +133,7 @@ const refactoredSrc = [
"./src/js/custom-mode2-popup.js",
"./src/js/test/test-config.js",
"./src/js/loader.js",
"./src/js/mini-result-chart.js",
];
//legacy files

65
src/js/account.js
View file

@ -477,73 +477,18 @@ function getAccountDataAndInit() {
});
}
function updateMiniResultChart(filteredId) {
let data = filteredResults[filteredId].chartData;
let labels = [];
for (let i = 1; i <= data.wpm.length; i++) {
labels.push(i.toString());
}
ChartController.miniResult.data.labels = labels;
ChartController.miniResult.data.datasets[0].data = data.wpm;
ChartController.miniResult.data.datasets[1].data = data.raw;
ChartController.miniResult.data.datasets[2].data = data.err;
ChartController.miniResult.updateColors();
let maxChartVal = Math.max(...[Math.max(...data.wpm), Math.max(...data.raw)]);
let minChartVal = Math.min(...[Math.min(...data.wpm), Math.min(...data.raw)]);
ChartController.miniResult.options.scales.yAxes[0].ticks.max = Math.round(
maxChartVal
);
ChartController.miniResult.options.scales.yAxes[1].ticks.max = Math.round(
maxChartVal
);
if (!Config.startGraphsAtZero) {
ChartController.miniResult.options.scales.yAxes[0].ticks.min = Math.round(
minChartVal
);
ChartController.miniResult.options.scales.yAxes[1].ticks.min = Math.round(
minChartVal
);
} else {
ChartController.miniResult.options.scales.yAxes[0].ticks.min = 0;
ChartController.miniResult.options.scales.yAxes[1].ticks.min = 0;
}
ChartController.miniResult.update({ duration: 0 });
}
function showMiniResultChart() {
$(".pageAccount .miniResultChartWrapper").stop(true, true).fadeIn(125);
$(".pageAccount .miniResultChartBg").stop(true, true).fadeIn(125);
}
function hideMiniResultChart() {
$(".pageAccount .miniResultChartWrapper").stop(true, true).fadeOut(125);
$(".pageAccount .miniResultChartBg").stop(true, true).fadeOut(125);
}
function updateMiniResultChartPosition(x, y) {
$(".pageAccount .miniResultChartWrapper").css({ top: y, left: x });
}
$(document).on("click", ".pageAccount .miniResultChartButton", (event) => {
console.log("updating");
let filterid = $(event.currentTarget).attr("filteredResultsId");
if (filterid === undefined) return;
updateMiniResultChart(filterid);
showMiniResultChart();
updateMiniResultChartPosition(
let filteredId = $(event.currentTarget).attr("filteredResultsId");
if (filteredId === undefined) return;
MiniResultChart.updateData(filteredResults[filteredId].chartData);
MiniResultChart.show();
MiniResultChart.updatePosition(
event.pageX - $(".pageAccount .miniResultChartWrapper").outerWidth(),
event.pageY + 30
);
});
$(document).on("click", ".pageAccount .miniResultChartBg", (event) => {
hideMiniResultChart();
});
Misc.getLanguageList().then((languages) => {
languages.forEach((language) => {
$(

1
src/js/global-dependencies.js
View file

@ -51,3 +51,4 @@ import * as ChallengeController from "./challenge-controller";
import * as CustomMode2Popup from "./custom-mode2-popup";
import * as TestConfig from "./test-config";
import * as Loader from "./loader";
import * as MiniResultChart from "./mini-result-chart";

57
src/js/mini-result-chart.js Normal file
View file

@ -0,0 +1,57 @@
import * as ChartController from "./chart-controller";
import Config from "./config";
export function updatePosition(x, y) {
$(".pageAccount .miniResultChartWrapper").css({ top: y, left: x });
}
export function show() {
$(".pageAccount .miniResultChartWrapper").stop(true, true).fadeIn(125);
$(".pageAccount .miniResultChartBg").stop(true, true).fadeIn(125);
}
function hide() {
$(".pageAccount .miniResultChartWrapper").stop(true, true).fadeOut(125);
$(".pageAccount .miniResultChartBg").stop(true, true).fadeOut(125);
}
export function updateData(data) {
// let data = filteredResults[filteredId].chartData;
let labels = [];
for (let i = 1; i <= data.wpm.length; i++) {
labels.push(i.toString());
}
ChartController.miniResult.data.labels = labels;
ChartController.miniResult.data.datasets[0].data = data.wpm;
ChartController.miniResult.data.datasets[1].data = data.raw;
ChartController.miniResult.data.datasets[2].data = data.err;
ChartController.miniResult.updateColors();
let maxChartVal = Math.max(...[Math.max(...data.wpm), Math.max(...data.raw)]);
let minChartVal = Math.min(...[Math.min(...data.wpm), Math.min(...data.raw)]);
ChartController.miniResult.options.scales.yAxes[0].ticks.max = Math.round(
maxChartVal
);
ChartController.miniResult.options.scales.yAxes[1].ticks.max = Math.round(
maxChartVal
);
if (!Config.startGraphsAtZero) {
ChartController.miniResult.options.scales.yAxes[0].ticks.min = Math.round(
minChartVal
);
ChartController.miniResult.options.scales.yAxes[1].ticks.min = Math.round(
minChartVal
);
} else {
ChartController.miniResult.options.scales.yAxes[0].ticks.min = 0;
ChartController.miniResult.options.scales.yAxes[1].ticks.min = 0;
}
ChartController.miniResult.update({ duration: 0 });
}
$(document).on("click", ".pageAccount .miniResultChartBg", (event) => {
hide();
});