mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 15:26:15 +08:00
impr(account page): add button which hides results on the account graph
when results are hidden, accuracy scale will be maximised to fit the graph height
This commit is contained in:
parent
04077fac61
commit
daaab016e2
|
@ -102,7 +102,12 @@ const CONFIG_SCHEMA = joi.object({
|
|||
paceCaretCustomSpeed: joi.number().min(0),
|
||||
repeatedPace: joi.boolean(),
|
||||
pageWidth: joi.string().valid("100", "125", "150", "200", "max"),
|
||||
accountChart: joi.array().items(joi.string().valid("on", "off")).optional(),
|
||||
accountChart: joi
|
||||
.array()
|
||||
.items(joi.string().valid("on", "off"))
|
||||
.min(3)
|
||||
.max(4)
|
||||
.optional(), //replace min max with length 4 after a while
|
||||
minWpm: joi.string().valid("off", "custom"),
|
||||
minWpmCustomSpeed: joi.number().min(0),
|
||||
highlightMode: joi
|
||||
|
|
|
@ -233,7 +233,8 @@
|
|||
color: var(--sub-color);
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 400px;
|
||||
grid-template-columns: auto 500px;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
.text {
|
||||
height: min-content;
|
||||
|
@ -242,7 +243,7 @@
|
|||
font-size: 0.75rem;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.chart {
|
||||
|
|
|
@ -164,6 +164,11 @@
|
|||
grid-auto-flow: unset;
|
||||
justify-items: center;
|
||||
}
|
||||
.pageAccount {
|
||||
.group.chart .below {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//900px
|
||||
|
@ -410,13 +415,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.pageAccount {
|
||||
.group.chart .below {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#customTextPopupWrapper #customTextPopup {
|
||||
.buttonsTop {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
@ -303,6 +303,10 @@ function setAccountChart(
|
|||
return false;
|
||||
}
|
||||
|
||||
if (array.length !== 4) {
|
||||
array = ["on", "on", "on", "on"];
|
||||
}
|
||||
|
||||
config.accountChart = array;
|
||||
saveToLocalStorage("accountChart", nosave);
|
||||
ConfigEvent.dispatch("accountChart", config.accountChart);
|
||||
|
@ -310,6 +314,21 @@ function setAccountChart(
|
|||
return true;
|
||||
}
|
||||
|
||||
export function setAccountChartResults(
|
||||
value: boolean,
|
||||
nosave?: boolean
|
||||
): boolean {
|
||||
if (!isConfigValueValid("account chart results", value, ["boolean"])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
config.accountChart[0] = value ? "on" : "off";
|
||||
saveToLocalStorage("accountChart", nosave);
|
||||
ConfigEvent.dispatch("accountChart", config.accountChart);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setAccountChartAccuracy(
|
||||
value: boolean,
|
||||
nosave?: boolean
|
||||
|
@ -318,7 +337,7 @@ export function setAccountChartAccuracy(
|
|||
return false;
|
||||
}
|
||||
|
||||
config.accountChart[0] = value ? "on" : "off";
|
||||
config.accountChart[1] = value ? "on" : "off";
|
||||
saveToLocalStorage("accountChart", nosave);
|
||||
ConfigEvent.dispatch("accountChart", config.accountChart);
|
||||
|
||||
|
@ -333,7 +352,7 @@ export function setAccountChartAvg10(
|
|||
return false;
|
||||
}
|
||||
|
||||
config.accountChart[1] = value ? "on" : "off";
|
||||
config.accountChart[2] = value ? "on" : "off";
|
||||
saveToLocalStorage("accountChart", nosave);
|
||||
ConfigEvent.dispatch("accountChart", config.accountChart);
|
||||
|
||||
|
@ -348,7 +367,7 @@ export function setAccountChartAvg100(
|
|||
return false;
|
||||
}
|
||||
|
||||
config.accountChart[2] = value ? "on" : "off";
|
||||
config.accountChart[3] = value ? "on" : "off";
|
||||
saveToLocalStorage("accountChart", nosave);
|
||||
ConfigEvent.dispatch("accountChart", config.accountChart);
|
||||
|
||||
|
|
|
@ -68,7 +68,7 @@ export default <MonkeyTypes.Config>{
|
|||
paceCaretCustomSpeed: 100,
|
||||
repeatedPace: true,
|
||||
pageWidth: "125",
|
||||
accountChart: ["on", "on", "on"],
|
||||
accountChart: ["on", "on", "on", "on"],
|
||||
minWpm: "off",
|
||||
minWpmCustomSpeed: 100,
|
||||
highlightMode: "letter",
|
||||
|
|
|
@ -975,11 +975,13 @@ export const miniResult: ChartWithUpdateColors<
|
|||
);
|
||||
|
||||
type ButtonBelowChart =
|
||||
| ".toggleResultsOnChart"
|
||||
| ".toggleAccuracyOnChart"
|
||||
| ".toggleAverage10OnChart"
|
||||
| ".toggleAverage100OnChart";
|
||||
|
||||
export function updateAccountChartButtons(): void {
|
||||
updateResults(false);
|
||||
updateAccuracy(false);
|
||||
updateAverage10(false);
|
||||
updateAverage100(false);
|
||||
|
@ -994,42 +996,78 @@ function updateAccountChartButton(
|
|||
: $(`.pageAccount ${className}`).removeClass("active");
|
||||
}
|
||||
|
||||
function updateResults(updateChart = true): void {
|
||||
const resultsOn = Config.accountChart[0] === "on";
|
||||
updateAccountChartButton(resultsOn, ".toggleResultsOnChart");
|
||||
|
||||
accountHistory.data.datasets[0].hidden = !resultsOn;
|
||||
accountHistory.data.datasets[3].hidden = !resultsOn;
|
||||
accountHistory.data.datasets[5].hidden = !resultsOn;
|
||||
accountHistory.data.datasets[1].hidden = !resultsOn;
|
||||
|
||||
(accountHistory.options as ScaleChartOptions<"line">).scales["wpm"].display =
|
||||
resultsOn;
|
||||
if (updateChart) accountHistory.updateColors();
|
||||
}
|
||||
|
||||
function updateAccuracy(updateChart = true): void {
|
||||
const accOn = Config.accountChart[0] === "on";
|
||||
const accountHistoryOptions =
|
||||
accountHistory.options as ScaleChartOptions<"line">;
|
||||
const resultsOn = Config.accountChart[0] === "on";
|
||||
const accOn = Config.accountChart[1] === "on";
|
||||
updateAccountChartButton(accOn, ".toggleAccuracyOnChart");
|
||||
|
||||
accountHistory.data.datasets[2].hidden = !accOn;
|
||||
accountHistory.data.datasets[4].hidden = !accOn;
|
||||
accountHistory.data.datasets[6].hidden = !accOn;
|
||||
|
||||
(accountHistory.options as ScaleChartOptions<"line">).scales["acc"].display =
|
||||
accOn;
|
||||
accountHistoryOptions.scales["acc"].display = accOn;
|
||||
|
||||
if (resultsOn) {
|
||||
accountHistoryOptions.scales["acc"].min = 0;
|
||||
accountHistoryOptions.scales["accAvgTen"].min = 0;
|
||||
accountHistoryOptions.scales["accAvgHundred"].min = 0;
|
||||
} else {
|
||||
const minAccRoundedTo10 =
|
||||
Math.floor(
|
||||
Math.min(...accountHistory.data.datasets[2].data.map((x) => x.y)) / 10
|
||||
) * 10;
|
||||
|
||||
console.log(accountHistory.data.datasets);
|
||||
|
||||
accountHistoryOptions.scales["acc"].min = minAccRoundedTo10;
|
||||
accountHistoryOptions.scales["accAvgTen"].min = minAccRoundedTo10;
|
||||
accountHistoryOptions.scales["accAvgHundred"].min = minAccRoundedTo10;
|
||||
}
|
||||
|
||||
if (updateChart) accountHistory.updateColors();
|
||||
}
|
||||
|
||||
function updateAverage10(updateChart = true): void {
|
||||
const accOn = Config.accountChart[0] === "on";
|
||||
const avg10On = Config.accountChart[1] === "on";
|
||||
const resultsOn = Config.accountChart[0] === "on";
|
||||
const accOn = Config.accountChart[1] === "on";
|
||||
const avg10On = Config.accountChart[2] === "on";
|
||||
updateAccountChartButton(avg10On, ".toggleAverage10OnChart");
|
||||
|
||||
if (accOn) {
|
||||
accountHistory.data.datasets[3].hidden = !avg10On;
|
||||
accountHistory.data.datasets[4].hidden = !avg10On;
|
||||
} else {
|
||||
}
|
||||
if (resultsOn) {
|
||||
accountHistory.data.datasets[3].hidden = !avg10On;
|
||||
}
|
||||
if (updateChart) accountHistory.updateColors();
|
||||
}
|
||||
|
||||
function updateAverage100(updateChart = true): void {
|
||||
const accOn = Config.accountChart[0] === "on";
|
||||
const avg100On = Config.accountChart[2] === "on";
|
||||
const resultsOn = Config.accountChart[0] === "on";
|
||||
const accOn = Config.accountChart[1] === "on";
|
||||
const avg100On = Config.accountChart[3] === "on";
|
||||
updateAccountChartButton(avg100On, ".toggleAverage100OnChart");
|
||||
|
||||
if (accOn) {
|
||||
accountHistory.data.datasets[5].hidden = !avg100On;
|
||||
accountHistory.data.datasets[6].hidden = !avg100On;
|
||||
} else {
|
||||
}
|
||||
if (resultsOn) {
|
||||
accountHistory.data.datasets[5].hidden = !avg100On;
|
||||
}
|
||||
if (updateChart) accountHistory.updateColors();
|
||||
|
@ -1113,8 +1151,8 @@ async function updateColors<
|
|||
const color = subcolor;
|
||||
return color;
|
||||
};
|
||||
const avg10On = Config.accountChart[1] === "on";
|
||||
const avg100On = Config.accountChart[2] === "on";
|
||||
const avg10On = Config.accountChart[2] === "on";
|
||||
const avg100On = Config.accountChart[3] === "on";
|
||||
|
||||
const text02 = Misc.blendTwoHexColors(bgcolor, textcolor, 0.2);
|
||||
const main02 = Misc.blendTwoHexColors(bgcolor, maincolor, 0.2);
|
||||
|
@ -1200,6 +1238,7 @@ export function updateAllChartColors(): void {
|
|||
|
||||
ConfigEvent.subscribe((eventKey, eventValue) => {
|
||||
if (eventKey === "accountChart" && ActivePage.get() === "account") {
|
||||
updateResults();
|
||||
updateAccuracy();
|
||||
updateAverage10();
|
||||
updateAverage100();
|
||||
|
|
|
@ -1159,16 +1159,20 @@ function sortAndRefreshHistory(
|
|||
loadMoreLines();
|
||||
}
|
||||
|
||||
$(".pageAccount .toggleResultsOnChart").on("click", () => {
|
||||
UpdateConfig.setAccountChartResults(!(Config.accountChart[0] === "on"));
|
||||
});
|
||||
|
||||
$(".pageAccount .toggleAccuracyOnChart").on("click", () => {
|
||||
UpdateConfig.setAccountChartAccuracy(!(Config.accountChart[0] === "on"));
|
||||
UpdateConfig.setAccountChartAccuracy(!(Config.accountChart[1] === "on"));
|
||||
});
|
||||
|
||||
$(".pageAccount .toggleAverage10OnChart").on("click", () => {
|
||||
UpdateConfig.setAccountChartAvg10(!(Config.accountChart[1] === "on"));
|
||||
UpdateConfig.setAccountChartAvg10(!(Config.accountChart[2] === "on"));
|
||||
});
|
||||
|
||||
$(".pageAccount .toggleAverage100OnChart").on("click", () => {
|
||||
UpdateConfig.setAccountChartAvg100(!(Config.accountChart[2] === "on"));
|
||||
UpdateConfig.setAccountChartAvg100(!(Config.accountChart[3] === "on"));
|
||||
});
|
||||
|
||||
$(".pageAccount .loadMoreButton").on("click", () => {
|
||||
|
|
2
frontend/src/ts/types/types.d.ts
vendored
2
frontend/src/ts/types/types.d.ts
vendored
|
@ -146,7 +146,7 @@ declare namespace MonkeyTypes {
|
|||
|
||||
type PageWidth = "100" | "125" | "150" | "200" | "max";
|
||||
|
||||
type AccountChart = ("off" | "on")[];
|
||||
type AccountChart = ["off" | "on", "off" | "on", "off" | "on", "off" | "on"];
|
||||
|
||||
type MinimumWordsPerMinute = "off" | "custom";
|
||||
|
||||
|
|
|
@ -444,6 +444,10 @@
|
|||
<div class="below">
|
||||
<div class="text"></div>
|
||||
<div class="buttons">
|
||||
<div class="toggleResultsOnChart button">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
Results
|
||||
</div>
|
||||
<div class="toggleAccuracyOnChart button">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
Accuracy
|
||||
|
|
Loading…
Reference in a new issue