ayanova/src/views/ops-metrics.vue

@@ -13,6 +13,10 @@
       ></v-select>
     </v-col>
 
+    <v-col cols="12">
+      {{ $vuetify.breakpoint.name }}
+    </v-col>
+
     <v-tabs v-model="tab" color="primary" grow @change="tabChanged">
       <v-tabs-slider></v-tabs-slider>
       <v-tab>cpu & memory</v-tab>
@@ -51,12 +55,13 @@
             <gz-chart-line
               :chartData="dbChartData"
               :options="timeLineChartOptions"
-              class="my-12 mr-12"
+              class="my-12"
             />
           </v-col>
-          <v-col cols="12" sm="6" lg="4">
+          <v-col cols="12" lg="10" xl="8">
             <gz-chart-bar-horizontal
               :chartData="dbTopTablesChartData"
+              :options="{ responsive: true }"
               class="my-12"
             />
           </v-col>
@@ -328,7 +333,8 @@ export default {
             data: window.$gz._.map(this.db.topTables, "value"),
             backgroundColor: getPalette(
               this.db.topTables ? this.db.topTables.length : 3
-            )
+            ),
+            minBarLength: 5
           }
         ]
       };