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

Code before:
            if (beat === 0 || !beat) {
                return "";
            }

            // Show timestamp for all beats (both individual and aggregated)
            return `${this.$root.datetime(beat.time)}${beat.msg ? ` - ${beat.msg}` : ""}`;
        },

        /**
         * Get the aria-label for accessibility
         * @param {object} beat Beat to get aria-label from
         * @returns {string} Aria label
         */
        getBeatAriaLabel(beat) {
            if (beat === 0 || !beat) {
                return "No data";
            }

            const statusText = {
                0: "Down",
                1: "Up",
                2: "Pending",
                3: "Maintenance"
            }[beat.status] || "Unknown";

            return `${statusText} at ${this.$root.datetime(beat.time)}`;
        },

        /**
         * Show custom tooltip
         * @param {object} beat Beat data
         * @param {Event} event Mouse event
         * @returns {void}
         */
        showTooltip(beat, event) {
            if (beat === 0 || !beat) {
                this.hideTooltip();
                return;
            }

            // Clear any existing timeout
            if (this.tooltipTimeoutId) {
                clearTimeout(this.tooltipTimeoutId);
            }

            // Small delay for better UX
            this.tooltipTimeoutId = setTimeout(() => {
                this.tooltipContent = beat;

                // Calculate position relative to viewport
                const rect = event.target.getBoundingClientRect();

Review comment (suggestion):
I think this might be more readable.
What do you think?

This also applies to the other places.

```suggestion
            switch (beat?.status) {
                case DOWN:
                    return `Down at ${this.$root.datetime(beat.time)}`;
                case UP:
                    return `Up at ${this.$root.datetime(beat.time)}`;
                case PENDING:
                    return `Pending at ${this.$root.datetime(beat.time)}`;
                case MAINTENANCE:
                    return `Maintenance at ${this.$root.datetime(beat.time)}`;
                default:
                    return "No data";
            }
```

Code after:
        getBeatTitle(beat) {
            if (!beat) {
                return "";
            }

            // Show timestamp for all beats (both individual and aggregated)
            return `${this.$root.datetime(beat.time)}${beat.msg ? ` - ${beat.msg}` : ""}`;
        },

        /**
         * Get the aria-label for accessibility
         * @param {object} beat Beat to get aria-label from
         * @returns {string} Aria label
         */
        getBeatAriaLabel(beat) {
            switch (beat?.status) {
                case DOWN:
                    return `Down at ${this.$root.datetime(beat.time)}`;
                case UP:
                    return `Up at ${this.$root.datetime(beat.time)}`;
                case PENDING:
                    return `Pending at ${this.$root.datetime(beat.time)}`;
                case MAINTENANCE:
                    return `Maintenance at ${this.$root.datetime(beat.time)}`;
                default:
                    return "No data";
            }
        },

        /**
         * Show custom tooltip
         * @param {object} beat Beat data
         * @param {Event} event Mouse event
         * @returns {void}
         */
        showTooltip(beat, event) {
            if (beat === 0 || !beat) {
                this.hideTooltip();
                return;
            }

            // Clear any existing timeout
            if (this.tooltipTimeoutId) {
                clearTimeout(this.tooltipTimeoutId);
            }

            // Small delay for better UX
            this.tooltipTimeoutId = setTimeout(() => {
                this.tooltipContent = beat;

                // Calculate position relative to viewport