-
{t("dropdown.settings")}
-
- {options.map(entry => {
- if (!config.viewMode || (config.viewMode && entry.allowView)) {
- if (!entry.hr) {
- return (
-
- setShowViewDialog(false)}/>}
+
- )
+
+ );
}
export default DropdownComponent;
\ No newline at end of file
diff --git a/client/src/common/components/Header/HeaderComponent.jsx b/client/src/common/components/Header/HeaderComponent.jsx
index f21835fe..f80ab56f 100644
--- a/client/src/common/components/Header/HeaderComponent.jsx
+++ b/client/src/common/components/Header/HeaderComponent.jsx
@@ -11,6 +11,9 @@ import {updateInfo} from "@/common/components/Header/utils/infos";
import {t} from "i18next";
import {ConfigContext} from "@/common/contexts/Config";
import {SpeedtestDialog} from "@/common/components/SpeedtestDialog";
+import {ViewContext} from "@/common/contexts/View";
+import {Trans} from "react-i18next";
+import {PROJECT_URL} from "@/index";
function HeaderComponent() {
const [setDialog] = useContext(InputDialogContext);
@@ -20,6 +23,7 @@ function HeaderComponent() {
const updateTests = useContext(SpeedtestContext)[1];
const [config, reloadConfig, checkConfig] = useContext(ConfigContext);
const [updateAvailable, setUpdateAvailable] = useState("");
+ const [view] = useContext(ViewContext);
function switchDropdown() {
toggleDropdown(setIcon);
@@ -76,7 +80,11 @@ function HeaderComponent() {
{entry.text}
+ <> + {showViewDialog &&
+
-
+
{t("dropdown.settings")}
+
+ {options.map(entry => {
+ if (!config.viewMode || (config.viewMode && entry.allowView)) {
+ if (!entry.hr) {
+ return (
);
- }
- })}
+ }
+ })}
+
+
+
);
+ } else return ({entry.text}
+
+
);
- } else return (
- {t("header.title")} {view === 1 && setDialog({
+ title: t("header.beta.title"),
+ description:
{t("header.title")}
+{t("header.title")} {view === 1 && setDialog({
+ title: t("header.beta.title"),
+ description:
{updateAvailable ?
{
+ const close = useContext(DialogContext);
+ const [setDialog] = useContext(InputDialogContext);
+ const [view, setView] = useContext(ViewContext);
+ const [selected, setSelected] = useState(view);
+
+ const submitForm = () => {
+ close();
+ setView(selected);
+ setDialog({title: "MySpeed", description: t('dropdown.changes_applied'), buttonText: t('dialog.okay')});
+ }
+
+ return (
+ <>
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/common/components/ViewDialog/images/list.png b/client/src/common/components/ViewDialog/images/list.png
new file mode 100644
index 00000000..109a4e43
Binary files /dev/null and b/client/src/common/components/ViewDialog/images/list.png differ
diff --git a/client/src/common/components/ViewDialog/images/statistic.png b/client/src/common/components/ViewDialog/images/statistic.png
new file mode 100644
index 00000000..042e2f5a
Binary files /dev/null and b/client/src/common/components/ViewDialog/images/statistic.png differ
diff --git a/client/src/common/components/ViewDialog/index.js b/client/src/common/components/ViewDialog/index.js
new file mode 100644
index 00000000..478b3776
--- /dev/null
+++ b/client/src/common/components/ViewDialog/index.js
@@ -0,0 +1 @@
+export {ViewDialog as default} from "./ViewDialog";
\ No newline at end of file
diff --git a/client/src/common/components/ViewDialog/styles.sass b/client/src/common/components/ViewDialog/styles.sass
new file mode 100644
index 00000000..5bf55062
--- /dev/null
+++ b/client/src/common/components/ViewDialog/styles.sass
@@ -0,0 +1,45 @@
+@import "@/common/styles/colors"
+
+.chooser-dialog
+ display: flex
+ justify-content: center
+ align-items: center
+ padding: 2rem 3.5rem
+ gap: 1rem
+
+.chooser-item
+ display: flex
+ flex-direction: column
+ align-items: center
+
+.dialog-thumbnail
+ width: 192px
+ height: 108px
+ border-radius: 0.75rem
+ border: 0.2rem solid $darker-gray
+
+.thumbnail-selected
+ border: 0.2rem solid $green
+
+.chooser-item:hover
+ cursor: pointer
+
+ & .dialog-thumbnail
+ border: 0.2rem solid $green-hover
+
+ & p
+ color: $green-hover
+
+.chooser-item p
+ margin-top: 0.3rem
+ margin-bottom: 0
+ font-size: 14pt
+ color: $darker-white
+
+.chooser-item .text-selected
+ color: $green
+
+@media screen and (max-width: 30rem)
+ .chooser-dialog
+ flex-direction: column
+ padding: 2rem 5rem
\ No newline at end of file
diff --git a/client/src/common/contexts/View/ViewContext.jsx b/client/src/common/contexts/View/ViewContext.jsx
new file mode 100644
index 00000000..a5a7f5a6
--- /dev/null
+++ b/client/src/common/contexts/View/ViewContext.jsx
@@ -0,0 +1,18 @@
+import React, {useState, createContext} from "react";
+
+export const ViewContext = createContext({});
+
+export const ViewProvider = (props) => {
+ const [view, setView] = useState(parseInt(localStorage.getItem("view")) || 0);
+
+ const updateView = (newView) => {
+ setView(newView);
+ localStorage.setItem("view", newView);
+ }
+
+ return (
+
+ {props.children}
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/common/contexts/View/index.js b/client/src/common/contexts/View/index.js
new file mode 100644
index 00000000..84fbd787
--- /dev/null
+++ b/client/src/common/contexts/View/index.js
@@ -0,0 +1 @@
+export * from './ViewContext';
\ No newline at end of file
diff --git a/client/src/common/styles/_colors.sass b/client/src/common/styles/_colors.sass
index 6733beb5..2397c0f9 100644
--- a/client/src/common/styles/_colors.sass
+++ b/client/src/common/styles/_colors.sass
@@ -1,6 +1,6 @@
$background: #232835
-$gray: #727676
+$gray: #687071
$dark-gray: #1d2128
$darker-gray: #20252F
diff --git a/client/src/pages/Error/Error.jsx b/client/src/pages/Error/Error.jsx
index 7a273ee9..7b84ee50 100644
--- a/client/src/pages/Error/Error.jsx
+++ b/client/src/pages/Error/Error.jsx
@@ -7,6 +7,7 @@ export const Error = (props) => {
const [reloadTimer, setReloadTimer] = useState(5);
useEffect(() => {
+ if (props.disableReload) return;
const interval = setInterval(() => {
if (reloadTimer > 0) {
setReloadTimer(reloadTimer - 1)
@@ -19,10 +20,11 @@ export const Error = (props) => {
}, [reloadTimer]);
return (
-
+ close()}/>
+
+ {t("update.view_title")}
+
+
+ setSelected(0)}>
+ 
+
+ {t("test.views.list")}
+ setSelected(1)}>
+ 
+
+ {t("test.views.statistic")}
+
+
+
+
+ );
+
+}
+
+export const ViewDialog = (props) => {
+ return (
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/AverageChart/index.js b/client/src/pages/Statistics/charts/AverageChart/index.js
new file mode 100644
index 00000000..85e4c421
--- /dev/null
+++ b/client/src/pages/Statistics/charts/AverageChart/index.js
@@ -0,0 +1 @@
+export {AverageChart as default} from './AverageChart';
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/AverageChart/styles.sass b/client/src/pages/Statistics/charts/AverageChart/styles.sass
new file mode 100644
index 00000000..b6e2bf98
--- /dev/null
+++ b/client/src/pages/Statistics/charts/AverageChart/styles.sass
@@ -0,0 +1,26 @@
+@import "@/common/styles/colors"
+
+.value-container
+ display: flex
+ flex-direction: column
+ gap: 2rem
+ justify-content: center
+ width: 100%
+
+.value-item
+ display: flex
+ justify-content: space-between
+
+.value-item svg
+ width: 2.5rem
+ height: 2.5rem
+ color: $green
+
+.value-item .value-info h2
+ font-size: 16pt
+ color: $white
+ margin: 0
+
+.value-item .value-info p
+ color: $green
+ margin: 0
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/DurationChart.jsx b/client/src/pages/Statistics/charts/DurationChart.jsx
new file mode 100644
index 00000000..ea27f29f
--- /dev/null
+++ b/client/src/pages/Statistics/charts/DurationChart.jsx
@@ -0,0 +1,63 @@
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {PolarArea} from "react-chartjs-2";
+import {useEffect, useState} from "react";
+import {t} from "i18next";
+
+const chartOptions = {
+ plugins: {
+ legend: {
+ display: false
+ }
+ },
+ scales: {
+ r: {
+ ticks: {
+ color: "#B0B0B0",
+ backdropColor: "transparent",
+ }
+ }
+ }
+}
+
+const DurationChart = (props) => {
+
+ const chartData = {
+ labels: [],
+ datasets: [{
+ label: t("statistics.duration.label"),
+ data: [],
+ backgroundColor: ['#45C65A', '#456AC6', '#C64545', '#C6C645', '#C645C6'],
+ borderWidth: 0,
+ }],
+ };
+
+ const [data, setData] = useState({});
+
+ useEffect(() => {
+ if (!props.time) return;
+
+ const frequencies = {};
+ const tempData = {...chartData};
+ props.time.forEach(second => {
+ frequencies[second] ? frequencies[second]++ : frequencies[second] = 1;
+ });
+
+ for (let second in frequencies) {
+ tempData.labels.push(t("time.seconds", {replace: {seconds: second.toString()}}));
+ tempData.datasets[0].data.push(frequencies[second]);
+ }
+
+ setData(tempData);
+ }, [props.time]);
+
+ if (Object.keys(data).length === 0) return <>;
+
+ return (
+
+
+
+ );
+
+}
+
+export default DurationChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/FailedChart.jsx b/client/src/pages/Statistics/charts/FailedChart.jsx
new file mode 100644
index 00000000..93d815bd
--- /dev/null
+++ b/client/src/pages/Statistics/charts/FailedChart.jsx
@@ -0,0 +1,35 @@
+import {Doughnut} from "react-chartjs-2";
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {t} from "i18next";
+
+const chartOptions = {
+ plugins: {
+ legend: {
+ display: false
+ }
+ },
+ responsive: true,
+ cutout: 80
+};
+
+const FailedChart = (props) => {
+
+ const chartData = {
+ labels: [t("statistics.failed.success"), t("statistics.failed.failed")],
+ datasets: [{
+ label: t("statistics.failed.label"),
+ data: [props.tests.total - props.tests.failed, props.tests.failed],
+ backgroundColor: ['#456AC6', '#C64545'],
+ borderWidth: 0
+ }]
+ };
+
+ return (
+
+
+
+ );
+}
+
+
+export default FailedChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx b/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
new file mode 100644
index 00000000..8b7c481b
--- /dev/null
+++ b/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
@@ -0,0 +1,51 @@
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faArrowDown, faArrowUp, faPingPongPaddleBall} from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+import {getIconBySpeed} from "@/common/utils/TestUtil";
+import {useContext} from "react";
+import {ConfigContext} from "@/common/contexts/Config";
+import {t} from "i18next";
+
+export const LatestTestChart = (props) => {
+
+ const [config] = useContext(ConfigContext);
+
+ if (!props.test) return <>;
+ if (config === null) return <>;
+
+ return (
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/index.js b/client/src/pages/Statistics/charts/LatestTestChart/index.js
new file mode 100644
index 00000000..f2fe152c
--- /dev/null
+++ b/client/src/pages/Statistics/charts/LatestTestChart/index.js
@@ -0,0 +1 @@
+export {LatestTestChart as default} from "./LatestTestChart";
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/styles.sass b/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
new file mode 100644
index 00000000..41cf1b3c
--- /dev/null
+++ b/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
@@ -0,0 +1,23 @@
+@import "@/common/styles/colors"
+
+.info-container
+ display: flex
+ flex-direction: column
+ gap: 2rem
+ justify-content: center
+ width: 100%
+
+.test-container
+ display: flex
+ justify-content: space-between
+
+.test-container svg
+ width: 3rem
+ height: 3rem
+
+.test-container .test-info h2
+ color: $white
+ margin: 0
+
+.test-container .test-info p
+ margin: 0
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/ManualChart.jsx b/client/src/pages/Statistics/charts/ManualChart.jsx
new file mode 100644
index 00000000..5f001fea
--- /dev/null
+++ b/client/src/pages/Statistics/charts/ManualChart.jsx
@@ -0,0 +1,34 @@
+import {Doughnut} from "react-chartjs-2";
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {t} from "i18next";
+
+const chartOptions = {
+ plugins: {
+ legend: {
+ display: false
+ }
+ },
+ cutout: 80
+};
+
+const ManuelChart = (props) => {
+
+ const chartData = {
+ labels: [t("statistics.manual.yes"), t("statistics.manual.no")],
+ datasets: [{
+ label: t("statistics.failed.label"),
+ data: [props.tests.custom, props.tests.total - props.tests.custom],
+ backgroundColor: ['#456AC6', '#45C65A'],
+ borderWidth: 0
+ }]
+ };
+
+ return (
+
+
+
+ );
+}
+
+
+export default ManuelChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx b/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx
new file mode 100644
index 00000000..80e115a7
--- /dev/null
+++ b/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx
@@ -0,0 +1,51 @@
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {t} from "i18next";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCircleExclamation, faGaugeHigh, faStopwatch} from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+
+export const OverviewChart = (props) => {
+
+ const title = t("test.overview.title", {replace: {amount: t("test.overview." + (localStorage.getItem("testTime") || 1))}});
+
+ const items = [
+ {
+ icon: faGaugeHigh,
+ title: "statistics.overview.total_title",
+ description: "statistics.overview.total_description",
+ value: props.tests.total
+ },
+ {
+ icon: faCircleExclamation,
+ title: "statistics.overview.failed_title",
+ description: "statistics.overview.failed_description",
+ value: props.tests.failed
+ },
+ {
+ icon: faStopwatch,
+ title: "statistics.overview.average_title",
+ description: "statistics.overview.average_description",
+ value: props.time.avg + "s"
+ }
+ ];
+
+ return (
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/OverviewChart/index.js b/client/src/pages/Statistics/charts/OverviewChart/index.js
new file mode 100644
index 00000000..562b8ee6
--- /dev/null
+++ b/client/src/pages/Statistics/charts/OverviewChart/index.js
@@ -0,0 +1 @@
+export {OverviewChart as default} from "./OverviewChart";
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/OverviewChart/styles.sass b/client/src/pages/Statistics/charts/OverviewChart/styles.sass
new file mode 100644
index 00000000..489a83b3
--- /dev/null
+++ b/client/src/pages/Statistics/charts/OverviewChart/styles.sass
@@ -0,0 +1,56 @@
+@import "@/common/styles/colors"
+
+.overview-items
+ display: flex
+ justify-content: center
+ flex-direction: column
+ width: 100%
+ overflow-y: clip
+
+.overview-item
+ display: flex
+ justify-content: space-between
+
+.overview-item .info-area
+ display: flex
+ justify-content: center
+ align-content: center
+ align-items: center
+ gap: 1rem
+
+ & svg
+ width: 2.5rem
+ height: 2.5rem
+ color: $white
+
+.overview-item .info-area .text-area
+ & h2
+ margin: 0
+ color: $white
+ & p
+ margin: 0
+ color: $darker-white
+
+.overview-item h2
+ color: $green
+
+@media screen and (max-width: 1500px)
+ .overview-item
+ flex-wrap: wrap
+ flex-direction: row
+
+@media screen and (max-width: 1400px)
+ .info-area svg
+ display: none
+ .overview-item .info-area h2
+ display: inline-block
+ width: 15rem
+ white-space: nowrap
+ overflow: hidden !important
+ text-overflow: ellipsis
+ .overview-item .info-area .text-area p
+ display: none
+
+@media screen and (max-width: 1000px)
+ .overview-item .info-area h2
+ width: 10rem
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/PingChart.jsx b/client/src/pages/Statistics/charts/PingChart.jsx
new file mode 100644
index 00000000..cd5ee80f
--- /dev/null
+++ b/client/src/pages/Statistics/charts/PingChart.jsx
@@ -0,0 +1,39 @@
+import {Line} from "react-chartjs-2";
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {t} from "i18next";
+
+const chartOptions = {
+ plugins: {
+ tooltip: {
+ callbacks: {
+ label: (item) => item.dataset.label + ": " + item.formattedValue + " " + t("latest.ping_unit")
+ }
+ },
+ legend: {
+ display: false
+ }
+ },
+ scales: {x: {reverse: true}},
+ responsive: true
+};
+
+const SpeedChart = (props) => {
+ const chartData = {
+ labels: props.labels,
+ datasets: [
+ {
+ label: t("latest.ping"),
+ data: props.data.ping,
+ borderColor: '#45C65A',
+ },
+ ],
+ };
+
+ return (
+
+
+
+ )
+
+}
+export default SpeedChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/SpeedChart.jsx b/client/src/pages/Statistics/charts/SpeedChart.jsx
new file mode 100644
index 00000000..4ac13a13
--- /dev/null
+++ b/client/src/pages/Statistics/charts/SpeedChart.jsx
@@ -0,0 +1,35 @@
+import {Line} from "react-chartjs-2";
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {t} from "i18next";
+
+const chartOptions = {
+ plugins: {
+ tooltip: {
+ callbacks: {
+ label: (item) => item.dataset.label + ": " + item.formattedValue + " " + t("latest.speed_unit")
+ }
+ },
+ legend: {
+ position: "bottom"
+ }
+ },
+ scales: {x: {reverse: true}}
+};
+
+const SpeedChart = (props) => {
+ const chartData = {
+ labels: props.labels,
+ datasets: [
+ {label: t("latest.down"), data: props.data.download, borderColor: '#45C65A'},
+ {label: t("latest.up"), data: props.data.upload, borderColor: '#456AC6'},
+ ],
+ };
+
+ return (
+
+
+
+ )
+
+}
+export default SpeedChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx b/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx
new file mode 100644
index 00000000..5c42f1be
--- /dev/null
+++ b/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx
@@ -0,0 +1,15 @@
+import "./styles.sass";
+
+export const StatisticContainer = (props) => {
+
+ return (
+
{props.text}
-Reloading {reloadTimer !== 0 ? <>in {reloadTimer} seconds : now}...
+ {!props.disableReload &&Reloading {reloadTimer !== 0 ? <>in {reloadTimer} seconds : + now}...
}{t("test.not_available")}
; + + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx b/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx
new file mode 100644
index 00000000..4a4a29b3
--- /dev/null
+++ b/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx
@@ -0,0 +1,37 @@
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faGauge, faMinusCircle, faPlusCircle} from "@fortawesome/free-solid-svg-icons";
+import {t} from "i18next";
+import "./styles.sass";
+
+export const AverageChart = (props) => {
+
+ return (
+
+
+
+
+
+
+
+ {t("statistics.values.min")}
+{props.data.min} {t("latest.speed_unit")}
+
+
+
+
+
+ {t("statistics.values.max")}
+{props.data.max} {t("latest.speed_unit")}
+
+
+
+
+
+ {t("statistics.values.avg")}
+{props.data.avg} {t("latest.speed_unit")}
+
+
+
+
+
+
+ {t("latest.ping")}
++ {(props.test.ping === -1 ? "N/A" : props.test.ping) + " " + t("latest.ping_unit")}
+
+
+
+
+ {t("latest.up")}
++ {(props.test.upload === -1 ? "N/A" : props.test.upload) + " " + t("latest.speed_unit")}
+
+
+
+
+ {t("latest.down")}
++ {(props.test.download === -1 ? "N/A" : props.test.download) + " " + t("latest.speed_unit")}
+
+ {items.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
+ {t(item.title)}
+{t(item.description)}
+{item.value}
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/Statistics/components/StatisticContainer/index.js b/client/src/pages/Statistics/components/StatisticContainer/index.js
new file mode 100644
index 00000000..74385f51
--- /dev/null
+++ b/client/src/pages/Statistics/components/StatisticContainer/index.js
@@ -0,0 +1 @@
+export {StatisticContainer as default} from './StatisticContainer';
\ No newline at end of file
diff --git a/client/src/pages/Statistics/components/StatisticContainer/styles.sass b/client/src/pages/Statistics/components/StatisticContainer/styles.sass
new file mode 100644
index 00000000..210d5a08
--- /dev/null
+++ b/client/src/pages/Statistics/components/StatisticContainer/styles.sass
@@ -0,0 +1,43 @@
+@import "@/common/styles/colors"
+
+.stats-container
+ display: flex
+ flex-direction: column
+ min-width: 16rem
+ border: 1px solid $gray
+ border-radius: 1rem
+ cursor: crosshair
+ transition: all 0.2s ease-in-out
+ animation: 0.3s fadeIn
+ flex: 1 0 15%
+
+.stats-container:hover
+ background-color: $darker-gray
+ border: 1px solid $white
+ transform: scale(1.05)
+
+.stats-header
+ color: $white
+ font-size: 16pt
+ border-radius: 1rem 1rem 0 0
+ padding: 0.75rem 0.5rem 0.5rem 1rem
+
+.stats-content
+ display: flex
+ padding-bottom: 1rem
+ padding-left: 1.5rem
+ height: 14rem
+ padding-right: 1.5rem
+
+.container-center
+ justify-content: center
+ align-items: center
+
+.container-small
+ flex: 1 0 5%
+
+.container-normal
+ flex: 1 0 30%
+
+.container-large
+ flex: 1 0 35%
\ No newline at end of file
diff --git a/client/src/pages/Statistics/index.js b/client/src/pages/Statistics/index.js
new file mode 100644
index 00000000..33d668d3
--- /dev/null
+++ b/client/src/pages/Statistics/index.js
@@ -0,0 +1 @@
+export {Statistics as default} from "./Statistics";
\ No newline at end of file
diff --git a/client/src/pages/Statistics/styles.sass b/client/src/pages/Statistics/styles.sass
new file mode 100644
index 00000000..ab5f452b
--- /dev/null
+++ b/client/src/pages/Statistics/styles.sass
@@ -0,0 +1,26 @@
+@import "@/common/styles/colors"
+
+.statistic-area
+ margin-left: 20rem
+ margin-right: 20rem
+ padding-top: 1.5rem
+ display: flex
+ gap: 2rem
+ justify-content: space-between
+ flex-wrap: wrap
+ transition: 1s all ease-in-out
+
+@media screen and (max-width: 1472px)
+ .statistic-area
+ margin-left: 10rem
+ margin-right: 10rem
+
+@media screen and (max-width: 425px)
+ .statistic-area
+ margin-left: 3rem
+ margin-right: 3rem
+
+@media screen and (max-width: 375px)
+ .statistic-area
+ margin-left: 1rem
+ margin-right: 1rem
\ No newline at end of file
diff --git a/server/controller/speedtests.js b/server/controller/speedtests.js
index 1c54c173..cf93cbb4 100644
--- a/server/controller/speedtests.js
+++ b/server/controller/speedtests.js
@@ -74,6 +74,48 @@ module.exports.listAverage = async (days) => {
return result;
}
+const mapFixed = (entries, type) => ({
+ min: Math.min(...entries.map((entry) => entry[type])),
+ max: Math.max(...entries.map((entry) => entry[type])),
+ avg: parseFloat((entries.reduce((a, b) => a + b[type], 0) / entries.length).toFixed(2))
+});
+
+const mapRounded = (entries, type) => ({
+ min: Math.min(...entries.map((entry) => entry[type])),
+ max: Math.max(...entries.map((entry) => entry[type])),
+ avg: Math.round(entries.reduce((a, b) => a + b[type], 0) / entries.length)
+});
+
+module.exports.listStatistics = async (days) => {
+ let dbEntries = (await tests.findAll({order: [["created", "DESC"]]}))
+ .filter((entry) => new Date(entry.created) > new Date().getTime() - (days <= 30 ? days : 30 ) * 24 * 3600000);
+
+ let avgEntries = [];
+ if (days >= 3) avgEntries = await this.listAverage(days);
+
+ let notFailed = dbEntries.filter((entry) => entry.error === null);
+
+ return {
+ tests: {
+ total: dbEntries.length,
+ failed: dbEntries.length - notFailed.length,
+ custom: dbEntries.filter((entry) => entry.type === "custom").length
+ },
+ ping: mapRounded(notFailed, "ping"),
+ download: mapFixed(notFailed, "download"),
+ upload: mapFixed(notFailed, "upload"),
+ time: mapRounded(notFailed, "time"),
+ data: {
+ ping: days >= 3 ? avgEntries.map((entry) => entry.ping) : notFailed.map((entry) => entry.ping),
+ download: days >= 3 ? avgEntries.map((entry) => entry.download) : notFailed.map((entry) => entry.download),
+ upload: days >= 3 ? avgEntries.map((entry) => entry.upload) : notFailed.map((entry) => entry.upload),
+ time: days >= 3 ? avgEntries.map((entry) => entry.time) : notFailed.map((entry) => entry.time)
+ },
+ labels: days >= 3 ? avgEntries.map((entry) => new Date(entry.created).toLocaleDateString())
+ : notFailed.map((entry) => new Date(entry.created).toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"}))
+ };
+}
+
// Gets the latest speedtest from the database
module.exports.latest = async () => {
let speedtest = await tests.findOne({order: [["created", "DESC"]]});
diff --git a/server/routes/speedtests.js b/server/routes/speedtests.js
index dd3c497c..e81f8347 100644
--- a/server/routes/speedtests.js
+++ b/server/routes/speedtests.js
@@ -15,6 +15,10 @@ app.get("/averages", password(true), async (req, res) => {
res.json(await tests.listAverage(req.query.days || 7));
});
+app.get("/statistics", password(true), async (req, res) => {
+ res.json(await tests.listStatistics(req.query.days || 1));
+});
+
// Runs a speedtest
app.post("/run", password(false), async (req, res) => {
if (pauseController.currentState) return res.status(410).json({message: "The speedtests are currently paused"});
+ {props.title}
+
+
+ {props.children}
+
+