ayanova/src/components/chart-bar-control.vue

@@ -0,0 +1,43 @@
+<script>
+import { Bar } from "vue-chartjs";
+/*
+ Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+*/
+//https://vue-chartjs.org/guide/
+//https://www.chartjs.org/docs/latest/
+//https://dyclassroom.com/chartjs/how-to-create-a-pie-chart-using-chartjs
+export default {
+  extends: Bar,
+  props: {
+    chartData: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  watch: {
+    chartData() {
+      //these do nothing
+      //this.$data._chart.update();
+      //this.$data._chart.renderChart();
+
+      //this redraws the chart
+      this.renderChart(this.chartData, this.options);
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartData, this.options);
+  }
+};
+</script>

ayanova/src/components/chart-bar-horizontal-control.vue

@@ -0,0 +1,43 @@
+<script>
+import { HorizontalBar } from "vue-chartjs";
+/*
+ Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+*/
+//https://vue-chartjs.org/guide/
+//https://www.chartjs.org/docs/latest/
+//https://dyclassroom.com/chartjs/how-to-create-a-pie-chart-using-chartjs
+export default {
+  extends: HorizontalBar,
+  props: {
+    chartData: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  watch: {
+    chartData() {
+      //these do nothing
+      //this.$data._chart.update();
+      //this.$data._chart.renderChart();
+
+      //this redraws the chart
+      this.renderChart(this.chartData, this.options);
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartData, this.options);
+  }
+};
+</script>

ayanova/src/main.js

@@ -49,6 +49,8 @@ import wikiControl from "./components/wiki-control.vue";
 import attachmentControl from "./components/attachment-control.vue";
 import chartLineControl from "./components/chart-line-control.vue";
 import chartPieControl from "./components/chart-pie-control.vue";
+import chartBarControl from "./components/chart-bar-control.vue";
+import chartBarHorizontalControl from "./components/chart-bar-horizontal-control.vue";
 
 //**************************************************************
 //**************************************************************
@@ -182,6 +184,8 @@ Vue.component("gz-wiki", wikiControl);
 Vue.component("gz-attachments", attachmentControl);
 Vue.component("gz-chart-line", chartLineControl);
 Vue.component("gz-chart-pie", chartPieControl);
+Vue.component("gz-chart-bar", chartBarControl);
+Vue.component("gz-chart-bar-horizontal", chartBarHorizontalControl);
 
 //3rd party components
 Vue.use(VueCurrencyInput);

ayanova/src/views/ops-metrics.vue

@@ -47,18 +47,18 @@
           </v-col>
         </v-tab-item>
         <v-tab-item>
-          <v-col cols="12" class="my-1">
-            <v-sheet elevation="4">
-              <gz-chart-line
-                :chartData="dbChartData"
-                :options="timeLineChartOptions"
-              />
-            </v-sheet>
+          <v-col cols="12">
+            <gz-chart-line
+              :chartData="dbChartData"
+              :options="timeLineChartOptions"
+              class="my-12 mr-12"
+            />
           </v-col>
-          <v-col cols="12" sm="6" lg="4" xl="3" class="my-1">
-            <v-sheet elevation="4">
-              <gz-chart-pie :chartData="dbTopTablesChartData" />
-            </v-sheet>
+          <v-col cols="12" sm="6" lg="4">
+            <gz-chart-bar-horizontal
+              :chartData="dbTopTablesChartData"
+              class="my-12"
+            />
           </v-col>
         </v-tab-item>
         <v-tab-item>
@@ -324,7 +324,7 @@ export default {
         labels: window.$gz._.map(this.db.topTables, "name"),
         datasets: [
           {
-            label: "Top tables (MB)",
+            label: "Top tables (KB)",
             data: window.$gz._.map(this.db.topTables, "value"),
             backgroundColor: getPalette(
               this.db.topTables ? this.db.topTables.length : 3