Repository: louislam/uptime-kuma
File: src/components/PingChart.vue (Vue)

Code before:
                });
                switch (beat.status) {
                    case MAINTENANCE:
                        colorData.push("rgba(23 ,71, 245, 0.41)");
                        break;
                    case PENDING:
                        colorData.push("rgba(245, 182, 23, 0.41)");
                        break;
                    default:
                        colorData.push("rgba(220, 53, 69, 0.41)");
                }

                lastHeartbeatTime = beatTime;
            }

            return {
                datasets: [
                    {
                        // Line Chart
                        data: pingData,
                        fill: "origin",
                        tension: 0.2,
                        borderColor: "#4ABF74",
                        backgroundColor: "#4ABF7438",
                        yAxisID: "y",
                        label: this.$t("avgPing") || "Avg Ping",
                    },
                    {
                        // Bar Chart
                        type: "bar",
                        data: downData,
                        borderColor: "#00000000",
                        backgroundColor: colorData,
                        yAxisID: "y1",
                        barThickness: "flex",
                        barPercentage: 1,
                        categoryPercentage: 1,
                        inflateAmount: 0.05,
                        label: "status",
                    },
                ],
            };
        },
        getChartDatapointsFromStats() {
            // Render chart using UptimeCalculator data
            let lastHeartbeatTime;
            const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;

            let avgPingData = [];  // Ping Data for Line Chart, y-axis contains ping time
            let minPingData = [];  // Ping Data for Line Chart, y-axis contains ping time
            let maxPingData = [];  // Ping Data for Line Chart, y-axis contains ping time

Review comment (suggestion):
```suggestion
                        label: this.$t("avgPing"),
```

Code after:
                    y: (beat.status === DOWN || beat.status === MAINTENANCE || beat.status === PENDING) ? 1 : 0,
                });
                switch (beat.status) {
                    case MAINTENANCE:
                        colorData.push("rgba(23 ,71, 245, 0.41)");
                        break;
                    case PENDING:
                        colorData.push("rgba(245, 182, 23, 0.41)");
                        break;
                    default:
                        colorData.push("rgba(220, 53, 69, 0.41)");
                }

                lastHeartbeatTime = beatTime;
            }

            return {
                datasets: [
                    {
                        // Line Chart
                        data: pingData,
                        fill: "origin",
                        tension: 0.2,
                        borderColor: "#4ABF74",
                        backgroundColor: "#4ABF7438",
                        yAxisID: "y",
                        label: this.$t("avgPing"),
                    },
                    {
                        // Bar Chart
                        type: "bar",
                        data: downData,
                        borderColor: "#00000000",
                        backgroundColor: colorData,
                        yAxisID: "y1",
                        barThickness: "flex",
                        barPercentage: 1,
                        categoryPercentage: 1,
                        inflateAmount: 0.05,
                        label: "status",
                    },
                ],
            };
        },
        getChartDatapointsFromStats() {
            // Render chart using UptimeCalculator data
            let lastHeartbeatTime;
            const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;

            let avgPingData = [];  // Ping Data for Line Chart, y-axis contains ping time
            let minPingData = [];  // Ping Data for Line Chart, y-axis contains ping time