Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

impr: floor accuracy intead of rounding when not showing decimal places (fehmer) #5120

Merged
merged 3 commits into from
Feb 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions frontend/__tests__/utils/format.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,15 @@ describe("format.ts", () => {
expect(format.typingSpeed(null, { suffix: " raw" })).toEqual("-");
expect(format.typingSpeed(undefined, { suffix: " raw" })).toEqual("-");
});

it("should format with rounding", () => {
const format = getInstance({ alwaysShowDecimalPlaces: false });
expect(format.typingSpeed(80.25)).toEqual("80");
expect(format.typingSpeed(80.25, { rounding: Math.ceil })).toEqual("81");
expect(format.typingSpeed(80.75, { rounding: Math.floor })).toEqual("80");
});
});

describe("percentage", () => {
it("should format with decimalPlaces from configuration", () => {
//no decimals
Expand Down Expand Up @@ -138,7 +146,33 @@ describe("format.ts", () => {
expect(format.percentage(null, { suffix: " raw" })).toEqual("-");
expect(format.percentage(undefined, { suffix: " raw" })).toEqual("-");
});

it("should format with rounding", () => {
const format = getInstance({ alwaysShowDecimalPlaces: false });
expect(format.percentage(80.25)).toEqual("80%");
expect(format.percentage(80.25, { rounding: Math.ceil })).toEqual("81%");
expect(format.percentage(80.75, { rounding: Math.floor })).toEqual("80%");
});
});

describe("accuracy", () => {
it("should floor decimals by default", () => {
//no decimals
const noDecimals = getInstance({ alwaysShowDecimalPlaces: false });
expect(noDecimals.accuracy(12.75)).toEqual("12%");
//with decimals
const withDecimals = getInstance({ alwaysShowDecimalPlaces: true });
expect(withDecimals.accuracy(12.75)).toEqual("12.75%");
});

it("should format with rounding", () => {
const format = getInstance({ alwaysShowDecimalPlaces: false });
expect(format.accuracy(80.5)).toEqual("80%");
expect(format.accuracy(80.25, { rounding: Math.ceil })).toEqual("81%");
expect(format.accuracy(80.75, { rounding: Math.floor })).toEqual("80%");
});
});

describe("decimals", () => {
it("should format with decimalPlaces from configuration", () => {
//no decimals
Expand Down Expand Up @@ -188,6 +222,13 @@ describe("format.ts", () => {
expect(format.decimals(null, { suffix: " raw" })).toEqual("-");
expect(format.decimals(undefined, { suffix: " raw" })).toEqual("-");
});

it("should format with rounding", () => {
const format = getInstance({ alwaysShowDecimalPlaces: false });
expect(format.decimals(80.25)).toEqual("80");
expect(format.decimals(80.25, { rounding: Math.ceil })).toEqual("81");
expect(format.decimals(80.75, { rounding: Math.floor })).toEqual("80");
});
});
});

Expand Down
8 changes: 3 additions & 5 deletions frontend/src/ts/account/pb-tables.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ function buildPbHtml(
<div class="wpm">${Format.typingSpeed(pbData.wpm, {
showDecimalPlaces: false,
})}</div>
<div class="acc">${Format.percentage(pbData.acc, {
<div class="acc">${Format.accuracy(pbData.acc, {
showDecimalPlaces: false,
})}</div>
</div>
Expand All @@ -164,10 +164,8 @@ function buildPbHtml(
suffix: ` ${speedUnit}`,
})}</div>
<div>${Format.typingSpeed(pbData.raw, { suffix: " raw" })}</div>
<div>${Format.percentage(pbData.acc, { suffix: " acc" })}</div>
<div>${Format.percentage(pbData.consistency, {
suffix: " con",
})}</div>
<div>${Format.accuracy(pbData.acc, { suffix: " acc" })}</div>
<div>${Format.percentage(pbData.consistency, { suffix: " con" })}</div>
<div>${dateText}</div>
</div>`;
} catch (e) {
Expand Down
11 changes: 3 additions & 8 deletions frontend/src/ts/elements/modes-notice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,21 +144,16 @@ export async function update(): Promise<void> {
}

if (Config.showAverage !== "off") {
let avgWPM = Last10Average.getWPM();
let avgAcc = Last10Average.getAcc();

if (!Config.alwaysShowDecimalPlaces) {
avgWPM = Math.round(avgWPM);
avgAcc = Math.round(avgAcc);
}
const avgWPM = Last10Average.getWPM();
const avgAcc = Last10Average.getAcc();

if (isAuthenticated() && avgWPM > 0) {
const avgWPMText = ["speed", "both"].includes(Config.showAverage)
? Format.typingSpeed(avgWPM, { suffix: ` ${Config.typingSpeedUnit}` })
: "";

const avgAccText = ["acc", "both"].includes(Config.showAverage)
? Format.percentage(avgAcc, { suffix: " acc" })
? Format.accuracy(avgAcc, { suffix: " acc" })
: "";

const text = `${avgWPMText} ${avgAccText}`.trim();
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/ts/pages/account.ts
Original file line number Diff line number Diff line change
Expand Up @@ -881,9 +881,9 @@ async function fillContent(): Promise<void> {
$(".pageAccount .highestWpm .mode").html(topMode);
$(".pageAccount .testsTaken .val").text(testCount);

$(".pageAccount .highestAcc .val").text(Format.percentage(topAcc));
$(".pageAccount .avgAcc .val").text(Format.percentage(totalAcc / testCount));
$(".pageAccount .avgAcc10 .val").text(Format.percentage(totalAcc10 / last10));
$(".pageAccount .highestAcc .val").text(Format.accuracy(topAcc));
$(".pageAccount .avgAcc .val").text(Format.accuracy(totalAcc / testCount));
$(".pageAccount .avgAcc10 .val").text(Format.accuracy(totalAcc10 / last10));

if (totalCons === 0 || totalCons === undefined) {
$(".pageAccount .avgCons .val").text("-");
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ts/popups/pb-tables-popup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function update(mode: SharedTypes.Config.Mode): void {
<td>
${Format.typingSpeed(pb.wpm)}
<br />
<span class="sub">${Format.percentage(pb.acc)}</span>
<span class="sub">${Format.accuracy(pb.acc)}</span>
</td>
<td>
${Format.typingSpeed(pb.raw)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ts/test/result.ts
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ function updateWpmAndAcc(): void {
}
$("#result .stats .raw .bottom").text(Format.typingSpeed(result.rawWpm));
$("#result .stats .acc .bottom").text(
result.acc === 100 ? "100%" : Format.percentage(result.acc)
result.acc === 100 ? "100%" : Format.accuracy(result.acc)
);

if (Config.alwaysShowDecimalPlaces) {
Expand Down
18 changes: 16 additions & 2 deletions frontend/src/ts/utils/format.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,22 @@ export type FormatOptions = {
showDecimalPlaces?: boolean;
suffix?: string;
fallback?: string;
rounding?: (val: number) => number;
};

const FORMAT_DEFAULT_OPTIONS: FormatOptions = {
suffix: "",
fallback: "-",
showDecimalPlaces: undefined,
rounding: Math.round,
};

export class Formatting {
constructor(private config: SharedTypes.Config) {}

typingSpeed(
wpm: number | null | undefined,
formatOptions: FormatOptions = FORMAT_DEFAULT_OPTIONS
formatOptions: FormatOptions = {}
): string {
const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions };
if (wpm === undefined || wpm === null) return options.fallback ?? "";
Expand All @@ -28,6 +30,7 @@ export class Formatting {

return this.number(result, options);
}

percentage(
percentage: number | null | undefined,
formatOptions: FormatOptions = {}
Expand All @@ -38,13 +41,24 @@ export class Formatting {
return this.number(percentage, options);
}

accuracy(
accuracy: number | null | undefined,
formatOptions: FormatOptions = {}
): string {
return this.percentage(accuracy, {
rounding: Math.floor,
...formatOptions,
});
}

decimals(
value: number | null | undefined,
formatOptions: FormatOptions = {}
): string {
const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions };
return this.number(value, options);
}

private number(
value: number | null | undefined,
formatOptions: FormatOptions
Expand All @@ -60,7 +74,7 @@ export class Formatting {
) {
return Misc.roundTo2(value).toFixed(2) + suffix;
}
return Math.round(value).toString() + suffix;
return (formatOptions.rounding ?? Math.round)(value).toString() + suffix;
}
}

Expand Down
Loading