Skip to content

Commit 8627235

Browse files
MiodecMiodec
authored
feat(result): rename raw to burst, add raw line to result graph, add ability to hide chart data (@Miodec) (monkeytypegame#6907)
1 parent 7487e53 commit 8627235

File tree

19 files changed

+676
-120
lines changed

19 files changed

+676
-120
lines changed

‎backend/__tests__/api/controllers/result.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -622,7 +622,7 @@ describe("result controller test", () => {
622622
bailedOut: false,
623623
blindMode: false,
624624
charStats: [100, 2, 3, 5],
625-
chartData: { wpm: [1, 2, 3], raw: [50, 55, 56], err: [0, 2, 0] },
625+
chartData: { wpm: [1, 2, 3], burst: [50, 55, 56], err: [0, 2, 0] },
626626
consistency: 23.5,
627627
difficulty: "normal",
628628
funbox: [],
@@ -675,7 +675,7 @@ describe("result controller test", () => {
675675
charStats: [100, 2, 3, 5],
676676
chartData: {
677677
err: [0, 2, 0],
678-
raw: [50, 55, 56],
678+
burst: [50, 55, 56],
679679
wpm: [1, 2, 3],
680680
},
681681
consistency: 23.5,
@@ -757,7 +757,7 @@ describe("result controller test", () => {
757757
bailedOut: false,
758758
blindMode: false,
759759
charStats: [100, 2, 3, 5],
760-
chartData: { wpm: [1, 2, 3], raw: [50, 55, 56], err: [0, 2, 0] },
760+
chartData: { wpm: [1, 2, 3], burst: [50, 55, 56], err: [0, 2, 0] },
761761
consistency: 23.5,
762762
difficulty: "normal",
763763
funbox: [],

‎backend/__tests__/utils/result.spec.ts‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,19 +123,85 @@ describe("Result Utils", () => {
123123
});
124124
});
125125

126+
describe("legacy chartData conversion", () => {
127+
it("should convert chartData with 'raw' property to 'burst'", () => {
128+
const resultWithLegacyChartData: DBResult = {
129+
chartData: {
130+
wpm: [50, 55, 60],
131+
raw: [52, 57, 62],
132+
err: [1, 0, 2],
133+
} as any,
134+
} as any;
135+
136+
const result = replaceLegacyValues(resultWithLegacyChartData);
137+
138+
expect(result.chartData).toEqual({
139+
wpm: [50, 55, 60],
140+
burst: [52, 57, 62],
141+
err: [1, 0, 2],
142+
});
143+
});
144+
145+
it("should not convert chartData when it's 'toolong'", () => {
146+
const resultWithToolongChartData: DBResult = {
147+
chartData: "toolong",
148+
} as any;
149+
150+
const result = replaceLegacyValues(resultWithToolongChartData);
151+
152+
expect(result.chartData).toBe("toolong");
153+
});
154+
155+
it("should not convert chartData when it doesn't have 'raw' property", () => {
156+
const resultWithModernChartData: DBResult = {
157+
chartData: {
158+
wpm: [50, 55, 60],
159+
burst: [52, 57, 62],
160+
err: [1, 0, 2],
161+
},
162+
} as any;
163+
164+
const result = replaceLegacyValues(resultWithModernChartData);
165+
166+
expect(result.chartData).toEqual({
167+
wpm: [50, 55, 60],
168+
burst: [52, 57, 62],
169+
err: [1, 0, 2],
170+
});
171+
});
172+
173+
it("should not convert chartData when it's undefined", () => {
174+
const resultWithoutChartData: DBResult = {} as any;
175+
176+
const result = replaceLegacyValues(resultWithoutChartData);
177+
178+
expect(result.chartData).toBeUndefined();
179+
});
180+
});
181+
126182
it("should convert all legacy data at once", () => {
127-
const resultWithBothLegacy: DBResult = {
183+
const resultWithAllLegacy: DBResult = {
128184
correctChars: 100,
129185
incorrectChars: 8,
130186
funbox: "memory#mirror" as any,
187+
chartData: {
188+
wpm: [50, 55, 60],
189+
raw: [52, 57, 62],
190+
err: [1, 0, 2],
191+
} as any,
131192
} as any;
132193

133-
const result = replaceLegacyValues(resultWithBothLegacy);
194+
const result = replaceLegacyValues(resultWithAllLegacy);
134195

135196
expect(result.charStats).toEqual([100, 8, 0, 0]);
136197
expect(result.correctChars).toBeUndefined();
137198
expect(result.incorrectChars).toBeUndefined();
138199
expect(result.funbox).toEqual(["memory", "mirror"]);
200+
expect(result.chartData).toEqual({
201+
wpm: [50, 55, 60],
202+
burst: [52, 57, 62],
203+
err: [1, 0, 2],
204+
});
139205
});
140206

141207
describe("no legacy values", () => {

‎backend/src/api/controllers/dev.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function createResult(
137137
keyConsistency: 33.18,
138138
chartData: {
139139
wpm: createArray(testDuration, () => random(80, 120)),
140-
raw: createArray(testDuration, () => random(80, 120)),
140+
burst: createArray(testDuration, () => random(80, 120)),
141141
err: createArray(testDuration, () => (Math.random() < 0.1 ? 1 : 0)),
142142
},
143143
keySpacingStats: {

‎backend/src/dal/result.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export async function getResult(uid: string, id: string): Promise<DBResult> {
6363
_id: new ObjectId(id),
6464
uid,
6565
});
66+
6667
if (!result) throw new MonkeyError(404, "Result not found");
6768
return replaceLegacyValues(result);
6869
}

‎backend/src/utils/result.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { CompletedEvent, Result } from "@monkeytype/schemas/results";
1+
import {
2+
ChartData,
3+
CompletedEvent,
4+
OldChartData,
5+
Result,
6+
} from "@monkeytype/schemas/results";
27
import { Mode } from "@monkeytype/schemas/shared";
38
import { ObjectId } from "mongodb";
49
import { WithObjectId } from "./misc";
@@ -8,6 +13,7 @@ export type DBResult = WithObjectId<Result<Mode>> & {
813
//legacy values
914
correctChars?: number;
1015
incorrectChars?: number;
16+
chartData: ChartData | OldChartData | "toolong";
1117
};
1218

1319
export function buildDbResult(
@@ -103,5 +109,18 @@ export function replaceLegacyValues(result: DBResult): DBResult {
103109
}
104110
}
105111

112+
if (
113+
result.chartData !== undefined &&
114+
result.chartData !== "toolong" &&
115+
"raw" in result.chartData
116+
) {
117+
const temp = result.chartData;
118+
result.chartData = {
119+
wpm: temp.wpm,
120+
burst: temp.raw,
121+
err: temp.err,
122+
};
123+
}
124+
106125
return result;
107126
}

‎frontend/src/html/pages/test.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,25 @@
331331
</div>
332332
</div>
333333
<div class="chart">
334+
<div class="chartLegend">
335+
<button class="text" tabindex="-1" data-id="pbLine">
336+
<i class="fas fa-crown"></i>
337+
<div class="text">pb</div>
338+
</button>
339+
<button class="text" tabindex="-1" data-id="raw">
340+
<div class="line dashed"></div>
341+
<div class="text">raw</div>
342+
</button>
343+
<button class="text" tabindex="-1" data-id="burst">
344+
<div class="line"></div>
345+
<div class="text">burst</div>
346+
</button>
347+
<button class="text" tabindex="-1" data-id="errors">
348+
<!-- <div class="line"></div> -->
349+
<i class="fas fa-times"></i>
350+
<div class="text">errors</div>
351+
</button>
352+
</div>
334353
<!-- <div class="title">wpm over time</div> -->
335354
<canvas id="wpmChart"></canvas>
336355
</div>

‎frontend/src/html/popups.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
<button class="showTestNotifications">show test notifications</button>
6767
<button class="showRealWordsInput">show real words input</button>
6868
<button class="xpBarTest">xp bar test</button>
69+
<button class="toggleFakeChartData">toggle fake chart data</button>
6970
</div>
7071
</dialog>
7172

‎frontend/src/styles/test.scss‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -779,6 +779,109 @@
779779
.chart {
780780
grid-area: chart;
781781
width: 100%;
782+
position: relative;
783+
784+
&:hover {
785+
.chartLegend {
786+
opacity: 1;
787+
pointer-events: auto;
788+
}
789+
}
790+
791+
.chartLegend {
792+
opacity: 0;
793+
pointer-events: none;
794+
position: absolute;
795+
background: var(--bg-color);
796+
border-radius: var(--roundness);
797+
// top: -2.25em;
798+
bottom: -0.75em;
799+
padding: 0.25em;
800+
right: 0;
801+
font-size: 0.75em;
802+
transition: opacity 0.125s;
803+
cursor: pointer;
804+
display: flex;
805+
806+
// button {
807+
// border-radius: 0;
808+
// background: var(--sub-alt-color);
809+
// }
810+
811+
// button:first-child {
812+
// border-top-left-radius: var(--roundness);
813+
// border-bottom-left-radius: var(--roundness);
814+
// }
815+
816+
// button:last-child {
817+
// border-top-right-radius: var(--roundness);
818+
// border-bottom-right-radius: var(--roundness);
819+
// }
820+
821+
button {
822+
padding: 0.5em 1em;
823+
display: inline-grid;
824+
grid-template-columns: auto 1fr;
825+
align-items: center;
826+
--color: var(--sub-color);
827+
828+
text-decoration: line-through;
829+
.text {
830+
pointer-events: none;
831+
}
832+
833+
.line {
834+
height: 0.25em;
835+
width: 1.5em;
836+
border-radius: calc(var(--roundness) / 2);
837+
transition: background 0.125s;
838+
background: var(--color);
839+
pointer-events: none;
840+
841+
&.dashed {
842+
background: linear-gradient(
843+
90deg,
844+
var(--color) 0%,
845+
var(--color) 40%,
846+
transparent 40%,
847+
transparent 60%,
848+
var(--color) 60%,
849+
var(--color) 100%
850+
);
851+
}
852+
}
853+
854+
.fas {
855+
color: var(--color);
856+
line-height: 0;
857+
}
858+
859+
&.active {
860+
text-decoration: none;
861+
// .text {
862+
// }
863+
color: var(--sub-color);
864+
&[data-id="raw"] {
865+
--color: var(--main-color);
866+
}
867+
&[data-id="burst"] {
868+
--color: var(--sub-color);
869+
}
870+
&[data-id="errors"] {
871+
--color: var(--error-color);
872+
}
873+
}
874+
875+
&:hover {
876+
color: var(--text-color);
877+
background: var(--sub-alt-color);
878+
}
879+
880+
&:active {
881+
color: var(--sub-color);
882+
}
883+
}
884+
}
782885

783886
canvas {
784887
width: 100% !important;

‎frontend/src/ts/commandline/lists/min-burst.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { get as getTypingSpeedUnit } from "../../utils/typing-speed-units";
33
import { Command, CommandsSubgroup } from "../types";
44

55
const subgroup: CommandsSubgroup = {
6-
title: "Minimum burst...",
6+
title: "Minimum word burst...",
77
configKey: "minBurst",
88
list: [
99
{
@@ -48,7 +48,7 @@ const subgroup: CommandsSubgroup = {
4848
const commands: Command[] = [
4949
{
5050
id: "changeMinBurst",
51-
display: "Minimum burst...",
51+
display: "Minimum word burst...",
5252
alias: "minimum",
5353
icon: "fa-bomb",
5454
subgroup,

‎frontend/src/ts/config-metadata.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export const configMetadata: ConfigMetadataObject = {
174174
},
175175
burstHeatmap: {
176176
icon: "fa-fire",
177-
displayString: "burst heatmap",
177+
displayString: "word burst heatmap",
178178
changeRequiresRestart: false,
179179
},
180180

@@ -246,12 +246,12 @@ export const configMetadata: ConfigMetadataObject = {
246246
},
247247
minBurst: {
248248
icon: "fa-bomb",
249-
displayString: "min burst",
249+
displayString: "min word burst",
250250
changeRequiresRestart: true,
251251
},
252252
minBurstCustomSpeed: {
253253
icon: "fa-bomb",
254-
displayString: "min burst custom speed",
254+
displayString: "min word burst custom speed",
255255
changeRequiresRestart: true,
256256
},
257257
britishEnglish: {
@@ -477,7 +477,7 @@ export const configMetadata: ConfigMetadataObject = {
477477
},
478478
liveBurstStyle: {
479479
icon: "fa-tachometer-alt",
480-
displayString: "live burst style",
480+
displayString: "live word burst style",
481481
changeRequiresRestart: false,
482482
},
483483
timerColor: {

0 commit comments

Comments
 (0)