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

Chart improvement

Browse Source
This commit is contained in:
cyril59310
2026-01-02 20:38:17 +01:00
parent 71a17c9329
commit 4ba03a86c6
2 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PingChart.vue
+28 -14
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,8 +148,10 @@ 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) => {
@@ -158,7 +160,19 @@ export default {
}
},
legend: {
display: false,
// Enable the legend and display only the non-bar datasets (the lines)
display: true,
position: "top",
align: "end",
labels: {
color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
usePointStyle: true,
// 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 +377,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") || "Avg Ping",
},
{
// Bar Chart
@@ -495,27 +509,27 @@ export default {
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B06",
yAxisID: "y",
label: "avg-ping",
label: this.$t("avgPing") || "Avg Ping",
},
{
// minimum ping chart
data: minPingData,
fill: "origin",
tension: 0.2,
borderColor: "#3CBD6B38",
backgroundColor: "#5CDD8B06",
borderColor: "#2F9C59",
backgroundColor: "#2F9C5914",
yAxisID: "y",
label: "min-ping",
label: this.$t("minPing") || "Min Ping",
},
{
// maximum ping chart
data: maxPingData,
fill: "origin",
tension: 0.2,
borderColor: "#7CBD6B38",
backgroundColor: "#5CDD8B06",
borderColor: "#175c32",
backgroundColor: "#1E7A4214",
yAxisID: "y",
label: "max-ping",
label: this.$t("maxPing") || "Max Ping",
},
{
// Bar Chart
src/lang/en.json
+4 -1
View File
@@ -1224,5 +1224,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"
}