finish heartbeat bar

src/components/HeartbeatBar.vue

@@ -1,7 +1,8 @@
 <template>
-    <div class="wrap" :style="wrapStyle">
+    <div class="wrap" :style="wrapStyle" ref="wrap">
         <div class="hp-bar-big" :style="barStyle">
-            <div class="beat" :style="beatStyle" v-for="beat in beatList"></div>
+            <div class="beat"  :style="beatStyle" v-for="(beat, index) in shortBeatList" :key="index">
+            </div>
         </div>
     </div>
 </template>
@@ -12,64 +13,84 @@
 export default {
     data() {
         return {
+            i: 1,
             beatList: [
-                1,2,3,4,5
+
             ],
             beatWidth: 10,
             beatHeight: 30,
             hoverScale: 1.5,
-            beatMargin: 4,
+            beatMargin: 3,      // Odd number only, even = blurry
             move: false,
-            maxBeat: 5,
+            maxBeat: -1,
         }
     },
+    destroyed() {
+        window.removeEventListener("resize", this.resize);
+    },
     mounted() {
-        setInterval(() => {
+        window.addEventListener("resize", this.resize);
+        this.resize();
 
-            this.addBeat()
+        setInterval(() => {
-            console.log("add beat")
+            this.beatList.push(this.i++)
         }, 3000)
 
     },
     methods: {
-        async addBeat() {
+        resize() {
-            this.move = true;
+            this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
-
-            setTimeout(() => {
-                this.beatList.push(6)
-
-                if (this.beatList.length > this.maxBeat) {
-                    this.beatList.shift();
-                    this.move = false;
-                }
-            }, 300)
-
         }
     },
     computed: {
+
+        shortBeatList() {
+            let start = this.beatList.length - this.maxBeat;
+
+            if (this.move) {
+                start = start - 1;
+            }
+
+            if (start < 0) {
+                start = 0;
+            }
+
+            return this.beatList.slice(start)
+        },
+
         wrapStyle() {
             let topBottom = (((this.beatHeight * this.hoverScale) - this.beatHeight) / 2);
             let leftRight = (((this.beatWidth * this.hoverScale) - this.beatWidth) / 2);
 
+            let width
+            if (this.maxBeat > 0) {
+                width = (this.beatWidth + this.beatMargin * 2) * this.maxBeat + (leftRight * 2) + "px"
+            } {
+                width = "100%"
+            }
+
             return {
                 padding: `${topBottom}px ${leftRight}px`,
-                width: (this.beatWidth + this.beatMargin * 2) * this.maxBeat + (leftRight * 2) + "px"
+                width: width
             }
         },
+
         barStyle() {
-            if (this.move) {
+            if (this.move && this.shortBeatList.length > this.maxBeat) {
                 let width = -(this.beatWidth + this.beatMargin * 2);
 
-                return  {
+                return {
                     transition: "all ease-in-out 0.25s",
                     transform: `translateX(${width}px)`,
                 }
+
             } else {
                 return {
-
+                    transform: `translateX(0)`,
                 }
             }
         },
+
         beatStyle() {
             return {
                 width: this.beatWidth + "px",
@@ -78,6 +99,20 @@ export default {
                 "--hover-scale": this.hoverScale,
             }
         }
+
+    },
+    watch: {
+        beatList: {
+            handler(val, oldVal) {
+                console.log("add beat2")
+                this.move = true;
+
+                setTimeout(() => {
+                    this.move = false;
+                }, 300)
+            },
+            deep: true,
+        }
     }
 }
 </script>
@@ -87,8 +122,7 @@ export default {
 
 .wrap {
     overflow: hidden;
-    width: 100px;
+    width: 100%;
-
     white-space: nowrap;
 }
 
@@ -99,6 +133,10 @@ export default {
         border-radius: 50rem;
         transition: all ease-in-out 0.15s;
 
+        &.new-beat {
+            background-color: aliceblue;
+        }
+
 
         &:hover {
             opacity: 0.8;

src/pages/Dashboard.vue

@@ -7,7 +7,7 @@
                     <router-link to="/add" class="btn btn-primary">Add New Monitor</router-link>
                 </div>
 
-                <div class="shadow-box list">
+                <div class="shadow-box list mb-4">
 
                     <span v-if="$root.monitorList.length === 0">No Monitors, please <router-link to="/add">add one</router-link>.</span>