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

@@ -0,0 +1,43 @@
+<script>
+import { Pie } 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: Pie,
+  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

@@ -48,6 +48,7 @@ import reportViewerControl from "./components/report-viewer-control.vue";
 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";
 
 //**************************************************************
 //**************************************************************
@@ -180,6 +181,7 @@ Vue.component("gz-report-viewer", reportViewerControl);
 Vue.component("gz-wiki", wikiControl);
 Vue.component("gz-attachments", attachmentControl);
 Vue.component("gz-chart-line", chartLineControl);
+Vue.component("gz-chart-pie", chartPieControl);
 
 //3rd party components
 Vue.use(VueCurrencyInput);

ayanova/src/views/ops-metrics.vue

@@ -55,6 +55,11 @@
               />
             </v-sheet>
           </v-col>
+          <v-col cols="12" class="my-1">
+            <v-sheet elevation="4">
+              <gz-chart-pie :chartData="dbTopTenChartData" />
+            </v-sheet>
+          </v-col>
         </v-tab-item>
         <v-tab-item>
           <v-col cols="12" class="my-1">
@@ -311,6 +316,29 @@ export default {
         ]
       };
     },
+    dbTopTenChartData() {
+      return {
+        datasets: [
+          {
+            data: [10, 20, 30]
+          }
+        ],
+
+        // These labels appear in the legend and in the tooltips when hovering different arcs
+        labels: ["Red", "Yellow", "Blue"]
+        // datasets: [
+        //   {
+        //     label: "Table size (MB)",
+        //     borderColor: CHART_COLOR.blue,
+        //     fill: false,
+        //     radius: 0,
+        //     hoverRadius: 10,
+        //     hitRadius: 4,
+        //     data: this.db.topTen
+        //   }
+        // ]
+      };
+    },
     gcAllChartData() {
       return {
         datasets: [