diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 13916b53..608eb054 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -5,59 +5,6 @@ PRIORITY - ALWAYS Lowest level stuff first, i.e. TODO at server, api route chang
 WIFI change 5g channel to 52,56,60 and 2g channel to 8 
 	recheck before doing as it seems to vary, maybe someone else's is auto switching
 
-############################################################
-re-jigged indexes
-db size is now 600, will regen and see what happens
-this was the seeding before rejigging indexes on search and searchkey
-2020-06-01 15:56:54.5791|INFO|Seeder|Seeding data, level HugeForLoadTest, time zone offset -7
-2020-06-01 15:56:54.5791|INFO|Seeder|Erasing Database "AyaNova"
-2020-06-01 15:56:56.2640|INFO|Seeder|Seeding HUGE number of user(s)....
-2020-06-01 15:57:47.3760|INFO|Seeder|1463 Users seeded in 51102 ms
-2020-06-01 15:57:47.3760|INFO|Seeder|Seeding 20,000 Widgets....
-2020-06-01 16:07:14.5913|INFO|Seeder|20k Widgets seeded in 567211 ms
-2020-06-01 16:07:14.5913|INFO|Seeder|Seeding completed successfully
-2020-06-01 16:07:14.5913|INFO|Seeder|Seeder: setting server state back to Open
-2020-06-01 16:07:14.5913|INFO|SERVER|Active techs - 824
-=-=-=-
-db size is now 441
-2020-06-02 14:15:22.9036|INFO|Seeder|Seeding HUGE number of user(s)....
-2020-06-02 14:16:10.2083|INFO|Seeder|1463 Users seeded in 47301 ms
-2020-06-02 14:16:10.2083|INFO|Seeder|Seeding 20,000 Widgets....
-2020-06-02 14:25:14.0773|INFO|Seeder|20k Widgets seeded in 543860 ms
-2020-06-02 14:25:14.0773|INFO|Seeder|Seeding completed successfully
-2020-06-02 14:25:14.0773|INFO|Seeder|Seeder: setting server state back to Open
-2020-06-02 14:25:14.0947|INFO|SERVER|Active techs - 824
-2020-06-02 14:25:14.0947|INFO|SERVER|License - [TRIAL, regto: Test Testerson Inc., keyid: 00-1591132521, dbid: 99855e43-e332-46ab-8a2c-b1ce71489b3f, type: perpetual, exp: 2020-07-02 2:15 PM, maint. sub. exps: 2020-07-02 2:15 PM, feat:Accounting, ServiceTechs - 1000]
-2020-06-02 14:25:14.0947|INFO|SERVER|Boot complete - server open
-=-=-=-
-Moved sample wiki to users instead of widgets
-
-2020-06-02 14:47:12.2718|INFO|Seeder|Seeding data, level HugeForLoadTest, time zone offset -7
-2020-06-02 14:47:12.2890|INFO|Seeder|Erasing Database "AyaNova"
-2020-06-02 14:47:14.0622|INFO|Seeder|Seeding HUGE number of user(s)....
-2020-06-02 14:48:14.3216|INFO|Seeder|1463 Users seeded in 60255 ms
-2020-06-02 14:48:14.3216|INFO|Seeder|Seeding 20,000 Widgets....
-2020-06-02 14:54:56.9979|INFO|Seeder|20k Widgets seeded in 402678 ms
-2020-06-02 14:54:56.9979|INFO|Seeder|Seeding completed successfully
-2020-06-02 14:54:56.9979|INFO|Seeder|Seeder: setting server state back to Open
-
-=-=-=-=-=-
- remove sample wiki entirely
- Less words in notes, forced to be 0 to 5 was 0 to 10
-2020-06-02 15:20:02.7634|INFO|Seeder|Seeding HUGE number of user(s)....
-2020-06-02 15:20:49.4433|INFO|Seeder|1463 Users seeded in 46683 ms
-2020-06-02 15:20:49.4433|INFO|Seeder|Seeding 20,000 Widgets....
-2020-06-02 15:27:15.8894|INFO|Seeder|20k Widgets seeded in 386441 ms
-2020-06-02 15:27:15.8894|INFO|Seeder|Seeding completed successfully
-2020-06-02 15:27:15.8894|INFO|Seeder|Seeder: setting server state back to Open
-db now 90mb down from 600 originally!!
-
-##############################################################################
-
-
-
-
-todo: https://blog.hubspot.com/marketing/types-of-graphs-for-data-visualization
 
 todo: find correct chart type for db table sizes top ten and implement it
 todo: metrics page not localized "storage" etc
diff --git a/ayanova/src/components/chart-bar-control.vue b/ayanova/src/components/chart-bar-control.vue
new file mode 100644
index 00000000..268ff5e0
--- /dev/null
+++ b/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>
diff --git a/ayanova/src/components/chart-bar-horizontal-control.vue b/ayanova/src/components/chart-bar-horizontal-control.vue
new file mode 100644
index 00000000..715f8237
--- /dev/null
+++ b/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>
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index 605f0cb0..417a51ae 100644
--- a/ayanova/src/main.js
+++ b/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);
diff --git a/ayanova/src/views/ops-metrics.vue b/ayanova/src/views/ops-metrics.vue
index 779c309f..c792886c 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/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