monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-22 16:26:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

added wpm ranges to burst heatmap legend

Browse source 
closes #3338
This commit is contained in:
Miodec 2022-07-15 14:27:12 +02:00
parent 7ea18a2dbc
commit e2c8733ed3
3 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/styles/test.scss
View file

@ -544,6 +544,7 @@
margin-left: 0.5rem;
}
.heatmapLegend {
margin-left: 0.5rem;
display: inline-grid;
grid-template-columns: auto auto auto;
gap: 1rem;
@ -551,10 +552,15 @@
color: var(--sub-color);
width: min-content;
.boxes {
display: flex;
// display: flex;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
.box {
width: 1rem;
// width: 1rem;
height: 1rem;
color: var(--bg-color);
padding: 0 0.5rem;
white-space: nowrap;
}
.box:nth-child(1) {
background: var(--colorful-error-color);

16
frontend/src/ts/test/test-ui.ts
View file

@ -874,6 +874,22 @@ export function applyBurstHeatmap(): void {
class: "heatmap4",
},
];
steps.forEach((step, index) => {
let string = "";
if (index === 0) {
string = `<${Math.round(steps[index + 1].val)}`;
} else if (index === 4) {
string = `${Math.round(step.val - 1)}+`;
} else {
string = `${Math.round(step.val)}-${
Math.round(steps[index + 1].val) - 1
}`;
}
$("#resultWordsHistory .heatmapLegend .box" + index).text(string);
});
$("#resultWordsHistory .words .word").each((_, word) => {
const wordBurstVal = parseInt(<string>$(word).attr("burst"));
let cls = "";

14
frontend/static/html/pages/test.html
View file

@ -180,7 +180,7 @@
<div class="bottom" style="grid-column: 1/3">
<div id="resultWordsHistory" class="hidden">
<div class="title">
input history
<span>input history</span>
<span
id="copyWordsListButton"
class="textButton"
@ -200,15 +200,13 @@
<i class="fas fa-fw fa-fire-alt"></i>
</span>
<div class="heatmapLegend hidden">
<div>slow</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box box0"></div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
<div>fast</div>
</div>
</div>
<div class="words"></div>