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

Code before:
        // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
        const actualWidth = this.beatWidth * window.devicePixelRatio;
        const actualMargin = this.beatMargin * window.devicePixelRatio;

        if (! Number.isInteger(actualWidth)) {
            this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
        }

        if (! Number.isInteger(actualMargin)) {
            this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
        }

        window.addEventListener("resize", this.resize);
        this.resize();
    },
    methods: {
        resize() {
            if (this.$refs.wrap) {
                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
            }
        },

        getBeatTitle(beat) {
            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : ``);
        },
        // Toggling the activeSibling class on hover over the current hover item
        toggleActivateSibling(e) {
            // Variable definition
            const element = e.target;
            const previous = element.previousSibling;
            const next = element.nextSibling;

            // Return if the hovered element has empty class
            if (element.classList.contains("empty")) {
                return;
            }

            // Check if Previous Sibling is heartbar element and doesn't have the empty class
            if (previous.children && !previous.classList.contains("empty")) {
                previous.classList.toggle("active-sibling");
            }
            // Check if Next Sibling is heartbar element and doesn't have the empty class
            if (next.children && !next.classList.contains("empty")) {
                next.classList.toggle("active-sibling");
            }
        }
    },
};
</script>

<style lang="scss" scoped>

Review comment (suggestion):
```suggestion
        },

        // Toggling the activeSibling class on hover over the current hover item
```

Code after:
        // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
        const actualWidth = this.beatWidth * window.devicePixelRatio;
        const actualMargin = this.beatMargin * window.devicePixelRatio;

        if (! Number.isInteger(actualWidth)) {
            this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
        }

        if (! Number.isInteger(actualMargin)) {
            this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
        }

        window.addEventListener("resize", this.resize);
        this.resize();
    },
    methods: {
        resize() {
            if (this.$refs.wrap) {
                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
            }
        },

        getBeatTitle(beat) {
            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
        },

        // Toggling the activeSibling class on hover over the current hover item
        toggleActivateSibling(e) {
            // Variable definition
            const element = e.target;
            const previous = element.previousSibling;
            const next = element.nextSibling;

            // Return if the hovered element has empty class
            if (element.classList.contains("empty")) {
                return;
            }

            // Check if Previous Sibling is heartbar element and doesn't have the empty class
            if (previous.children && !previous.classList.contains("empty")) {
                previous.classList.toggle("active-sibling");
            }

            // Check if Next Sibling is heartbar element and doesn't have the empty class
            if (next.children && !next.classList.contains("empty")) {
                next.classList.toggle("active-sibling");
            }
        }
    },
};
</script>