fix: auto resize when toggling follow

Author: wintbiit

package-lock.json

@@ -6,15 +6,16 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "format": "prettier --write src/**/*.{js,vue}"
+    "format": "prettier --write src/**/*.{js,vue}",
+    "lint:fix": "eslint --fix src/**/*.{js,vue}"
   },
   "dependencies": {
     "@fontsource/roboto": "^4.5.5",
     "@mdi/font": "^6.6.96",
     "core-js": "^3.22.2",
-    "timechart": "^1.0.0-beta.7",
+    "timechart": "^1.0.0-beta.10",
     "vue": "^2.6.11",
-    "vuetify": "^2.6.4",
+    "vuetify": "2.7.1",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

package.json

@@ -147,6 +147,7 @@ export default {
     toggleFollow() {
       this.follow = !this.follow;
       this.chart.options.realTime = this.follow;
+      this.chart.onResize();
     },
     exportData() {
       console.log(this.chart.options.series);

src/components/ChartCard.vue

@@ -75,7 +75,12 @@
         </v-row>
 
         <ErrorAlert v-model="error" />
-        <v-data-table :headers="headers" :items="proj_vars" :search="keyword">
+        <v-data-table
+          :headers="headers"
+          :items="proj_vars"
+          :search="keyword"
+          group-by="group"
+        >
           <template #[`item.isRead`]="{ item }">
             <v-btn
               icon :color="item.isRead?'green':'grey'"
@@ -148,6 +153,7 @@ export default {
         let addr = parseInt(p.Addr, 16)
         p.isRead = (this.$store.state.variables.read[addr] != null);
         p.isWrite = (this.$store.state.variables.write[addr] != null);
+        p.group = p.Name.split(".")[0];
         return p;
       })
     },