mirror/myspeed
1
0
Fork 0
mirror of https://github.com/gnmyt/myspeed.git synced 2026-02-10 23:58:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

Show single day flag on charts if data is for a single day

Browse Source
This commit is contained in:
Mathias Wagner
2026-01-22 18:15:29 +01:00
parent da57dca349
commit e5c89399ee
2 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/pages/Statistics/charts/PingChart.jsx
View File

@@ -8,7 +8,7 @@ const PingChart = ({ compact = false, ...props }) => {
const [isDarkMode] = useContext(ThemeContext);
const filteredData = useMemo(() => {
if (!props.data?.ping || !props.labels) return { labels: [], data: [], jitter: [], average: 0, jitterAverage: 0, failed: [], errors: [] };
if (!props.data?.ping || !props.labels) return { labels: [], data: [], jitter: [], average: 0, jitterAverage: 0, failed: [], errors: [], isSingleDay: false };
const filtered = props.labels.map((label, index) => ({
label,
@@ -29,6 +29,10 @@ const PingChart = ({ compact = false, ...props }) => {
? Math.round((validJitter.reduce((a, b) => a + b, 0) / validJitter.length) * 100) / 100
: null;
const dates = filtered.map(item => new Date(item.label).toDateString());
const uniqueDates = [...new Set(dates)];
const isSingleDay = uniqueDates.length === 1;
return {
labels: filtered.map(item => item.label),
data: filtered.map(item => item.value),
@@ -36,7 +40,8 @@ const PingChart = ({ compact = false, ...props }) => {
failed: filtered.map(item => item.isFailed),
errors: filtered.map(item => item.error),
average,
jitterAverage
jitterAverage,
isSingleDay
};
}, [props.labels, props.data, props.failed, props.errors]);
@@ -127,9 +132,12 @@ const PingChart = ({ compact = false, ...props }) => {
},
ticks: {
color: tickColor,
maxTicksLimit: 5,
maxTicksLimit: filteredData.isSingleDay ? 12 : 5,
callback: function(value, index) {
const date = new Date(filteredData.labels[index]);
if (filteredData.isSingleDay) {
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}
return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' +
date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

14
client/src/pages/Statistics/charts/SpeedChart/SpeedChart.jsx
View File

@@ -8,7 +8,7 @@ export const SpeedChart = ({ labels, data, dataKey, titleKey, color, onClick, fa
const [isDarkMode] = useContext(ThemeContext);
const filteredData = useMemo(() => {
if (!data?.[dataKey] || !labels) return { labels: [], data: [], average: 0, failed: [], errors: [] };
if (!data?.[dataKey] || !labels) return { labels: [], data: [], average: 0, failed: [], errors: [], isSingleDay: false };
const filtered = labels.map((label, index) => ({
label,
@@ -23,12 +23,17 @@ export const SpeedChart = ({ labels, data, dataKey, titleKey, color, onClick, fa
? Math.round((validValues.reduce((a, b) => a + b, 0) / validValues.length) * 100) / 100
: 0;
const dates = filtered.map(item => new Date(item.label).toDateString());
const uniqueDates = [...new Set(dates)];
const isSingleDay = uniqueDates.length === 1;
return {
labels: filtered.map(item => item.label),
data: filtered.map(item => item.value),
failed: filtered.map(item => item.isFailed),
errors: filtered.map(item => item.error),
average
average,
isSingleDay
};
}, [labels, data, dataKey, failed, errors]);
@@ -115,9 +120,12 @@ export const SpeedChart = ({ labels, data, dataKey, titleKey, color, onClick, fa
},
ticks: {
color: tickColor,
maxTicksLimit: 5,
maxTicksLimit: filteredData.isSingleDay ? 12 : 5,
callback: function(value, index) {
const date = new Date(filteredData.labels[index]);
if (filteredData.isSingleDay) {
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}
return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' +
date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}