Last signed out result
diff --git a/frontend/src/styles/account.scss b/frontend/src/styles/account.scss
index a1626502c728..370bf222b30a 100644
--- a/frontend/src/styles/account.scss
+++ b/frontend/src/styles/account.scss
@@ -60,28 +60,6 @@
margin-top: 1rem;
}
- .miniResultChartWrapper {
- z-index: 999;
- display: none;
- height: 15rem;
- background: var(--bg-color);
- width: 45rem;
- position: absolute;
- border-radius: var(--roundness);
- padding: 1rem;
- }
-
- .miniResultChartBg {
- display: none;
- z-index: 998;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.75);
- position: fixed;
- left: 0;
- top: 0;
- }
-
.doublegroup {
display: grid;
grid-auto-flow: column;
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 1c9d4848f807..f97c7b8cd748 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -81,6 +81,16 @@ body.darkMode {
}
}
+#miniResultChartModal {
+ .modal {
+ overflow: hidden;
+ max-width: 70rem;
+ canvas {
+ height: 200px;
+ }
+ }
+}
+
#customTextModal {
.modal {
max-width: 1200px;
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 208e284a876b..d2eb9ca7d43a 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -879,135 +879,132 @@ export const miniResult = new ChartWithUpdateColors<
number[],
string,
"wpm" | "raw" | "error"
->(
- document.querySelector(".pageAccount #miniResultChart") as HTMLCanvasElement,
- {
- type: "line",
- data: {
- labels: [],
- datasets: [
- {
- label: "wpm",
- data: [],
- borderColor: "rgba(125, 125, 125, 1)",
- borderWidth: 2,
- yAxisID: "wpm",
- order: 2,
- pointRadius: 2,
+>(document.querySelector("#miniResultChartModal canvas") as HTMLCanvasElement, {
+ type: "line",
+ data: {
+ labels: [],
+ datasets: [
+ {
+ label: "wpm",
+ data: [],
+ borderColor: "rgba(125, 125, 125, 1)",
+ borderWidth: 2,
+ yAxisID: "wpm",
+ order: 2,
+ pointRadius: 2,
+ },
+ {
+ label: "raw",
+ data: [],
+ borderColor: "rgba(125, 125, 125, 1)",
+ borderWidth: 2,
+ yAxisID: "raw",
+ order: 3,
+ pointRadius: 2,
+ },
+ {
+ label: "errors",
+ data: [],
+ borderColor: "rgba(255, 125, 125, 1)",
+ pointBackgroundColor: "rgba(255, 125, 125, 1)",
+ borderWidth: 2,
+ order: 1,
+ yAxisID: "error",
+ type: "scatter",
+ pointStyle: "crossRot",
+ pointRadius: function (context): number {
+ const index = context.dataIndex;
+ const value = context.dataset.data[index] as number;
+ return (value ?? 0) <= 0 ? 0 : 3;
},
- {
- label: "raw",
- data: [],
- borderColor: "rgba(125, 125, 125, 1)",
- borderWidth: 2,
- yAxisID: "raw",
- order: 3,
- pointRadius: 2,
+ pointHoverRadius: function (context): number {
+ const index = context.dataIndex;
+ const value = context.dataset.data[index] as number;
+ return (value ?? 0) <= 0 ? 0 : 5;
},
- {
- label: "errors",
- data: [],
- borderColor: "rgba(255, 125, 125, 1)",
- pointBackgroundColor: "rgba(255, 125, 125, 1)",
- borderWidth: 2,
- order: 1,
- yAxisID: "error",
- type: "scatter",
- pointStyle: "crossRot",
- pointRadius: function (context): number {
- const index = context.dataIndex;
- const value = context.dataset.data[index] as number;
- return (value ?? 0) <= 0 ? 0 : 3;
- },
- pointHoverRadius: function (context): number {
- const index = context.dataIndex;
- const value = context.dataset.data[index] as number;
- return (value ?? 0) <= 0 ? 0 : 5;
- },
+ },
+ ],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ axis: "x",
+ ticks: {
+ autoSkip: true,
+ autoSkipPadding: 20,
},
- ],
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- x: {
- axis: "x",
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
+ display: true,
+ title: {
+ display: false,
+ text: "Seconds",
+ },
+ },
+ wpm: {
+ axis: "y",
+ display: true,
+ title: {
display: true,
- title: {
- display: false,
- text: "Seconds",
- },
+ text: "Words per Minute",
},
- wpm: {
- axis: "y",
+ beginAtZero: true,
+ min: 0,
+ ticks: {
+ autoSkip: true,
+ autoSkipPadding: 20,
+ },
+ grid: {
display: true,
- title: {
- display: true,
- text: "Words per Minute",
- },
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
- grid: {
- display: true,
- },
},
- raw: {
- axis: "y",
+ },
+ raw: {
+ axis: "y",
+ display: false,
+ title: {
+ display: true,
+ text: "Raw Words per Minute",
+ },
+ beginAtZero: true,
+ min: 0,
+ ticks: {
+ autoSkip: true,
+ autoSkipPadding: 20,
+ },
+ grid: {
display: false,
- title: {
- display: true,
- text: "Raw Words per Minute",
- },
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
- grid: {
- display: false,
- },
},
- error: {
+ },
+ error: {
+ display: true,
+ position: "right",
+ title: {
display: true,
- position: "right",
- title: {
- display: true,
- text: "Errors",
- },
- beginAtZero: true,
- ticks: {
- precision: 0,
- autoSkip: true,
- autoSkipPadding: 20,
- },
- grid: {
- display: false,
- },
+ text: "Errors",
},
- },
- plugins: {
- annotation: {
- annotations: [],
+ beginAtZero: true,
+ ticks: {
+ precision: 0,
+ autoSkip: true,
+ autoSkipPadding: 20,
},
- tooltip: {
- animation: { duration: 250 },
- mode: "index",
- intersect: false,
+ grid: {
+ display: false,
},
},
},
- }
-);
+ plugins: {
+ annotation: {
+ annotations: [],
+ },
+ tooltip: {
+ animation: { duration: 250 },
+ mode: "index",
+ intersect: false,
+ },
+ },
+ },
+});
type ButtonBelowChart =
| ".toggleResultsOnChart"
diff --git a/frontend/src/ts/event-handlers/global.ts b/frontend/src/ts/event-handlers/global.ts
index 89fa885168ed..2494b7d80025 100644
--- a/frontend/src/ts/event-handlers/global.ts
+++ b/frontend/src/ts/event-handlers/global.ts
@@ -24,10 +24,7 @@ document.addEventListener("keydown", async (e) => {
) {
e.preventDefault();
const popupVisible = Misc.isAnyPopupVisible();
- const miniResultPopupVisible = Misc.isElementVisible(
- ".pageAccount .miniResultChartWrapper"
- );
- if (!popupVisible && !miniResultPopupVisible) {
+ if (!popupVisible) {
(await getCommandline()).show();
}
}
diff --git a/frontend/src/ts/elements/account/mini-result-chart.ts b/frontend/src/ts/modals/mini-result-chart.ts
similarity index 59%
rename from frontend/src/ts/elements/account/mini-result-chart.ts
rename to frontend/src/ts/modals/mini-result-chart.ts
index 4c694c034253..0983e70cad61 100644
--- a/frontend/src/ts/elements/account/mini-result-chart.ts
+++ b/frontend/src/ts/modals/mini-result-chart.ts
@@ -1,24 +1,10 @@
-import * as ChartController from "../../controllers/chart-controller";
-import Config from "../../config";
-import * as Misc from "../../utils/misc";
-import * as Arrays from "../../utils/arrays";
import { ChartData } from "@monkeytype/shared-types";
+import AnimatedModal from "../utils/animated-modal";
+import * as ChartController from "../controllers/chart-controller";
+import Config from "../config";
+import * as Arrays from "../utils/arrays";
-export function updatePosition(x: number, y: number): void {
- $(".pageAccount .miniResultChartWrapper").css({ top: y, left: x });
-}
-
-export function show(): void {
- $(".pageAccount .miniResultChartWrapper").stop(true, true).fadeIn(125);
- $(".pageAccount .miniResultChartBg").stop(true, true).fadeIn(125);
-}
-
-function hide(): void {
- $(".pageAccount .miniResultChartWrapper").stop(true, true).fadeOut(125);
- $(".pageAccount .miniResultChartBg").stop(true, true).fadeOut(125);
-}
-
-export function updateData(data: ChartData): void {
+function updateData(data: ChartData): void {
// let data = filteredResults[filteredId].chartData;
let labels = [];
for (let i = 1; i <= data.wpm.length; i++) {
@@ -59,16 +45,11 @@ export function updateData(data: ChartData): void {
void ChartController.miniResult.updateColors();
}
-$(document).on("keydown", (event) => {
- if (
- event.key === "Escape" &&
- Misc.isElementVisible(".pageAccount .miniResultChartWrapper")
- ) {
- hide();
- event.preventDefault();
- }
-});
+export function show(data: ChartData): void {
+ updateData(data);
+ void modal.show();
+}
-$(".pageAccount").on("click", ".miniResultChartBg", () => {
- hide();
+const modal = new AnimatedModal({
+ dialogId: "miniResultChartModal",
});
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 68376e386266..915b7dbe9592 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -3,7 +3,7 @@ import * as ResultFilters from "../elements/account/result-filters";
import * as ThemeColors from "../elements/theme-colors";
import * as ChartController from "../controllers/chart-controller";
import Config, * as UpdateConfig from "../config";
-import * as MiniResultChart from "../elements/account/mini-result-chart";
+import * as MiniResultChartModal from "../modals/mini-result-chart";
import * as PbTables from "../elements/account/pb-tables";
import * as LoadingPage from "./loading";
import * as Focus from "../test/focus";
@@ -1152,14 +1152,9 @@ $(".pageAccount").on("click", ".miniResultChartButton", (event) => {
console.log("updating");
const filteredId = $(event.currentTarget).attr("filteredResultsId");
if (filteredId === undefined) return;
- MiniResultChart.updateData(
+ MiniResultChartModal.show(
filteredResults[parseInt(filteredId)]?.chartData as ChartData
);
- MiniResultChart.show();
- MiniResultChart.updatePosition(
- event.pageX - ($(".pageAccount .miniResultChartWrapper").outerWidth() ?? 0),
- event.pageY + 30
- );
});
$(".pageAccount .group.history").on("click", ".history-wpm-header", () => {