Calendar Graph - final

src/components/HeartbeatBar.vue

@@ -1,30 +1,33 @@
 <template>
     <div ref="wrap" class="wrap" :style="wrapStyle">
         <div class="hp-bar-big" :style="barStyle">
-            <div
+            <!-- <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)"
-            />
+            /> -->
+            <CalendarHeatmap :style="{ fill: '#fff' }" class="heatmap" :values="values" :end-date="endDate" no-data-text="Down" tooltip-unit="counts" />
         </div>
-        <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> -->
     </div>
 </template>
 
 <script>
 import dayjs from "dayjs";
+import { CalendarHeatmap } from "vue3-calendar-heatmap";
 
 export default {
+    components: { CalendarHeatmap },
     props: {
         /** Size of the heartbeat bar */
         size: {
@@ -111,6 +114,47 @@ 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);
@@ -263,13 +307,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "../assets/vars.scss";
 
-.wrap {
-    overflow: hidden;
-    width: 100%;
-    white-space: nowrap;
+.heatmap {
+    font-size: x-small;
 }
 
 .hp-bar-big {

src/components/PublicGroupList.vue

@@ -33,7 +33,7 @@
                         <template #item="monitor">
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-9 col-md-8 small-padding">
+                                    <div class="col-3 col-md-4 small-padding">
                                         <div class="info">
                                             <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)" />
@@ -70,7 +70,8 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                    <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" />
                                     </div>
                                 </div>