added percentage marking heatmap

server/routers/status-page-router.js

@@ -76,20 +76,32 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
         ]);
 
         for (let monitorID of monitorIDList) {
+            // Calculating the percentage of uptime per day with the status count to show full year data
             let list = await R.getAll(`
-                    SELECT * FROM heartbeat
+                    SELECT 
+                        strftime('%Y-%m-%d', time) AS day,
+                        (COUNT(CASE WHEN status = 1 THEN 1 END) * 100.0) / COUNT(status) AS percentage,
+                        (
+                            SELECT status
+                            FROM heartbeat AS sub
+                            WHERE strftime('%Y-%m-%d', sub.time) = strftime('%Y-%m-%d', main.time)
+                            GROUP BY status
+                            ORDER BY COUNT(*) DESC
+                            LIMIT 1
+                        ) as status
+                    FROM heartbeat as main
                     WHERE monitor_id = ?
-                    ORDER BY time DESC
-                    LIMIT 50
+                    GROUP BY day
+                    ORDER BY day DESC
+                    LIMIT 365
             `, [
                 monitorID,
             ]);
 
-            list = R.convertToBeans("heartbeat", list);
-            heartbeatList[monitorID] = list.reverse().map(row => row.toPublicJSON());
+            heartbeatList[monitorID] = list;
 
             const uptimeCalculator = await UptimeCalculator.getUptimeCalculator(monitorID);
-            uptimeList[`${monitorID}_24`] = uptimeCalculator.get24Hour().uptime;
+            uptimeList[`${monitorID}_1y`] = uptimeCalculator.get1Year().uptime;
         }
 
         response.json({

src/components/HeartbeatBar.vue

@@ -1,17 +1,30 @@
 <template>
     <div ref="wrap" class="wrap" :style="wrapStyle">
         <div class="hp-bar-big" :style="barStyle">
-            <CalendarHeatmap :style="{ fill: '#fff' }" class="heat-map" :values="values" :end-date="endDate" no-data-text="Down" tooltip-unit="counts" />
+            <div
+                v-for="(beat, index) in shortBeatList"
+                :key="index"
+                class="beat"
+                :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
+                :style="beatStyle"
+                :title="getBeatTitle(beat)"
+            />
+        </div>
+        <div
+            v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
+            class="d-flex justify-content-between align-items-center word" :style="timeStyle"
+        >
+            <div>{{ timeSinceFirstBeat }} ago</div>
+            <div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
+            <div>{{ timeSinceLastBeat }}</div>
         </div>
     </div>
 </template>
 
 <script>
 import dayjs from "dayjs";
-import { CalendarHeatmap } from "vue3-calendar-heatmap";
 
 export default {
-    components: { CalendarHeatmap },
     props: {
         /** Size of the heartbeat bar */
         size: {
@@ -98,47 +111,6 @@ export default {
             return placeholders.concat(this.beatList.slice(start));
         },
 
-        values() {
-            if (!this.shortBeatList || !this.shortBeatList.length) {
-                return [];
-            }
-
-            const valueObj = {};
-
-            this.shortBeatList.forEach(({ status, time }) => {
-                const date = dayjs(time).format("YYYY-MM-DD");
-
-                if (valueObj[date] === undefined) {
-                    valueObj[date] = 0;
-                }
-
-                let count = 0;
-
-                switch (status) {
-                    case 0:
-                        break;
-                    case 1:
-                        count = 10;
-                        break;
-                    case 2:
-                        count = 2;
-                        break;
-                    case 3:
-                        count = 5;
-                }
-
-                valueObj[date] += count;
-            });
-
-            return Object.keys(valueObj).map(date => ({ date,
-                count: valueObj[date] }));
-        },
-
-        endDate() {
-            const date = dayjs().format("YYYY-MM-DD");
-            return date;
-        },
-
         wrapStyle() {
             let topBottom = (((this.beatHeight * this.hoverScale) - this.beatHeight) / 2);
             let leftRight = (((this.beatWidth * this.hoverScale) - this.beatWidth) / 2);
@@ -291,7 +263,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .heat-map {
@@ -382,4 +354,27 @@ export default {
     }
 }
 
+.dark {
+    .hp-bar-big .beat.empty {
+        background-color: #848484;
+    }
+}
+
+.word {
+    color: #aaa;
+    font-size: 12px;
+}
+
+.connecting-line {
+    flex-grow: 1;
+    height: 1px;
+    background-color: #ededed;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-top: 2px;
+
+    .dark & {
+        background-color: #333;
+    }
+}
 </style>

src/components/HeartbeatBarStatus.vue

@@ -0,0 +1,81 @@
+<template>
+    <div ref="wrap">
+        <div class="hp-bar-big">
+            <CalendarHeatmap
+                :style="{ fill: '#fff', fontSize: 'x-small' }"
+                class="heatmap" :values="values" :end-date="endDate" no-data-text="Unknown" tooltip-unit="%"
+                :range-color="['#ebedf0', '#C3D4CB', '#9ABAA7', '#72A182', '#49875E', '#216E39']" :max="100"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import { CalendarHeatmap } from "vue3-calendar-heatmap";
+
+export default {
+    components: { CalendarHeatmap },
+    props: {
+        /** ID of the monitor */
+        monitorId: {
+            type: Number,
+            required: true,
+        },
+    },
+    computed: {
+        // Getting the values in form of percentage
+        values() {
+            const data = this.$root.heartbeatList[this.monitorId]?.map(({ day, percentage }) => ({ date: day,
+                count: percentage.toFixed(1) }));
+            return data || [];
+        },
+
+        endDate() {
+            const date = dayjs().format("YYYY-MM-DD");
+            return date;
+        },
+    },
+    unmounted() {
+        window.removeEventListener("resize", this.resize);
+    },
+    beforeMount() {
+        if (this.heartbeatList === null) {
+            if (!(this.monitorId in this.$root.heartbeatList)) {
+                this.$root.heartbeatList[this.monitorId] = [];
+            }
+        }
+    },
+
+    mounted() {
+        window.addEventListener("resize", this.resize);
+        this.resize();
+    },
+    methods: {
+        /**
+         * Resize the heartbeat bar
+         * @returns {void}
+         */
+        resize() {
+            if (this.$refs.wrap) {
+                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
+            }
+        },
+
+    },
+};
+</script>
+
+<style lang="scss">
+@import "../assets/vars.scss";
+
+// This naming is an internal name for the package vue3-calendar-heatmap and it cannot be modified to kebab-case
+/* stylelint-disable */
+.vch__legend {
+    display: inline-flex;
+    padding: 0.25rem 0.5rem;
+    gap: 1ch;
+    align-items: center;
+}
+/* stylelint-enable */
+</style>

src/components/PublicGroupList.vue

@@ -38,7 +38,7 @@
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
-                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            <Uptime style="vertical-align: top;" :monitor="monitor.element" type="1y" :pill="true" />
                                             <a
                                                 v-if="showLink(monitor)"
                                                 :href="monitor.element.url"
@@ -48,7 +48,7 @@
                                             >
                                                 {{ monitor.element.name }}
                                             </a>
-                                            <p v-else class="item-name"> {{ monitor.element.name }} </p>
+                                            <p v-else class="item-name" style="white-space: initial;"> {{ monitor.element.name }} </p>
 
                                             <span
                                                 title="Setting"
@@ -71,8 +71,7 @@
                                         </div>
                                     </div>
                                     <div :key="$root.userHeartbeatBar" class="col-9 col-md-8">
-                                        <!-- <HeartbeatBar size="mid" :monitor-id="monitor.element.id" /> -->
-                                        <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
+                                        <HeartbeatBarStatus :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
                             </div>
@@ -88,7 +87,7 @@
 <script>
 import MonitorSettingDialog from "./MonitorSettingDialog.vue";
 import Draggable from "vuedraggable";
-import HeartbeatBar from "./HeartbeatBar.vue";
+import HeartbeatBarStatus from "./HeartbeatBarStatus.vue";
 import Uptime from "./Uptime.vue";
 import Tag from "./Tag.vue";
 
@@ -96,7 +95,7 @@ export default {
     components: {
         MonitorSettingDialog,
         Draggable,
-        HeartbeatBar,
+        HeartbeatBarStatus,
         Uptime,
         Tag,
     },