koichixD/uptime-kuma
1
0
Fork 0
mirror of https://github.com/koichixD/uptime-kuma.git synced 2026-09-04 09:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: label the min, avg, max on the dashboad ping chart and make them selectable (#6573)

Browse Source
This commit is contained in:
Frank Elsinga
2026-01-03 00:55:04 +01:00
committed by GitHub
parent 6a700cb71b 664314797c
commit 9a5bcf10bf
2 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PingChart.vue
+47 -22
View File
@@ -25,12 +25,12 @@
</template>
<script lang="js">
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip, Legend } from "chart.js";
import "chartjs-adapter-dayjs-4";
import { Line } from "vue-chartjs";
import { UP, DOWN, PENDING, MAINTENANCE } from "../util.ts";
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler, Legend);
export default {
components: { Line },
@@ -148,17 +148,42 @@ export default {
backgroundColor: this.$root.theme === "light" ? "rgba(212,232,222,1.0)" : "rgba(32,42,38,1.0)",
bodyColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
titleColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
// No longer rely solely on datasetIndex === 0; we want to hide tooltips only for the bars
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0; // Hide tooltip on Bar Chart
const ds = tooltipItem?.chart?.data?.datasets?.[tooltipItem.datasetIndex];
return ds && ds.type !== "bar";
},
callbacks: {
label: (context) => {
return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
const label = context.dataset.label;
return `${label} ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
},
}
},
legend: {
display: false,
// Enable the legend and display only the non-bar datasets (the lines)
display: true,
position: "top",
align: "start",
// Indicates that the legend is clickable (cursor pointer)
onHover: function (event, legendItem, legend) {
if (legend && legend.chart && legend.chart.canvas) {
legend.chart.canvas.style.cursor = "pointer";
}
},
onLeave: function (event, legendItem, legend) {
if (legend && legend.chart && legend.chart.canvas) {
legend.chart.canvas.style.cursor = "";
}
},
labels: {
color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
// Filter to display only the lines in the legend
filter: function (legendItem, data) {
const ds = data.datasets[legendItem.datasetIndex];
return ds && ds.type !== "bar";
},
},
},
},
};
@@ -363,10 +388,10 @@ export default {
data: pingData,
fill: "origin",
tension: 0.2,
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B38",
borderColor: "#4ABF74",
backgroundColor: "#4ABF7438",
yAxisID: "y",
label: "ping",
label: this.$t("avgPing"),
},
{
// Bar Chart
@@ -487,6 +512,16 @@ export default {
return {
datasets: [
{
// minimum ping chart
data: minPingData,
fill: "origin",
tension: 0.2,
borderColor: "#126331",
backgroundColor: "#2F9C5914",
yAxisID: "y",
label: this.$t("minPing"),
},
{
// average ping chart
data: avgPingData,
@@ -495,27 +530,17 @@ export default {
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B06",
yAxisID: "y",
label: "avg-ping",
},
{
// minimum ping chart
data: minPingData,
fill: "origin",
tension: 0.2,
borderColor: "#3CBD6B38",
backgroundColor: "#5CDD8B06",
yAxisID: "y",
label: "min-ping",
label: this.$t("avgPing"),
},
{
// maximum ping chart
data: maxPingData,
fill: "origin",
tension: 0.2,
borderColor: "#7CBD6B38",
backgroundColor: "#5CDD8B06",
borderColor: "#21b55a",
backgroundColor: "#1E7A4214",
yAxisID: "y",
label: "max-ping",
label: this.$t("maxPing"),
},
{
// Bar Chart
src/lang/en.json
+4 -1
View File
@@ -1231,5 +1231,8 @@
"domainExpiryDescription": "Trigger notification when domain names expires in:",
"minimumIntervalWarning": "Intervals below 20 seconds may result in poor performance.",
"lowIntervalWarning": "Are you sure want to set the interval value below 20 seconds? Performance may be degraded, particularly if there are a large number of monitors.",
"imageResetConfirmation": "Image reset to default"
"imageResetConfirmation": "Image reset to default",
"avgPing": "Avg Ping",
"maxPing": "Max Ping",
"minPing": "Min Ping"
}