ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue

@@ -7,24 +7,59 @@
     v-bind="$attrs"
   >
     <template slot="main">
-      <div class="ml-4 mt-1 d-flex align-center">
-        <div>
-          <span class="purple--text">
-            BAR CHART Widget count by UserType CONTENT HERE</span
-          >
-        </div>
+      <div class="ml-4 mt-1">
+        <gz-chart-bar-horizontal
+          :chartData="obj"
+          :options="{
+            responsive: true,
+            legend: { display: false },
+            scales: {
+              xAxes: [{ gridLines: { display: true } }],
+              yAxes: [{ gridLines: { display: true } }]
+            }
+          }"
+        ></gz-chart-bar-horizontal>
       </div>
     </template>
   </gz-dash>
 </template>
 <script>
+/*
+TODO: Move palette color stuff to it's own file that can be imported in here and in ops-metrics
+todo: change palette colors to very muted choices as per guide book
+
+*/
 import GzDash from "../components/dash-base.vue";
 export default {
   components: {
     GzDash
   },
   data() {
-    return {};
+    return {
+      obj: {
+        //  These labels appear in the legend and in the tooltips when hovering different arcs
+        //_.map(users, 'user');
+        //de-lodash
+        // labels: window.$gz. _.map(this.db.topTables, "name"),
+        labels: [
+          "Customer",
+          "Head office",
+          "Service",
+          "Non Service",
+          "Subcontractor"
+        ],
+        datasets: [
+          {
+            label: "",
+            data: [2, 4, 6, 8, 10],
+            backgroundColor: getPalette(5),
+            minBarLength: 5,
+            barThickness: 6,
+            categoryPercentage: 0.2
+          }
+        ]
+      }
+    };
   },
   props: {},
   created() {},
@@ -35,4 +70,39 @@ export default {
     }
   }
 };
+
+const CHART_PALETTE = {
+  blue: "#1f77b4",
+  red: "#d62728",
+  orange: "#fe7f0e",
+  green: "#2ca02c",
+  purple: "#9c27b0",
+  black: "#000000",
+  cyan: "#00BCD4",
+  teal: "#009688",
+  primary: "#00205B", //APP Canucks dark blue
+  secondary: "#00843D", //APP canucks green
+  accent: "#db7022" //APP lighter orangey red, more friendly looking though not as much clarity it seems
+};
+
+///////////////////////
+//
+function getPalette(size) {
+  let palette = [
+    CHART_PALETTE.blue,
+    CHART_PALETTE.red,
+    CHART_PALETTE.green,
+    CHART_PALETTE.orange,
+    CHART_PALETTE.purple,
+    CHART_PALETTE.cyan,
+    CHART_PALETTE.teal,
+    CHART_PALETTE.black
+  ];
+  let paletteLength = palette.length;
+  let ret = [];
+  for (let i = 0; i < size; i++) {
+    ret.push(palette[i % paletteLength]);
+  }
+  return ret;
+}
 </script>

ayanova/src/components/dash-test-day-calendar-widget.vue

@@ -7,10 +7,8 @@
     v-bind="$attrs"
   >
     <template slot="main">
-      <div class="ml-4 mt-1 d-flex align-center">
-        <div>
-          <span class="orange--text"> DAY CALENDAR WIDGET CONTENT HERE</span>
-        </div>
+      <div class="ml-4 mt-1">
+        <v-calendar color="primary" type="day"></v-calendar>
       </div>
     </template>
   </gz-dash>

ayanova/src/components/dash-test-line-widget-monthly-total-price.vue

@@ -7,12 +7,8 @@
     v-bind="$attrs"
   >
     <template slot="main">
-      <div class="ml-4 mt-1 d-flex align-center">
-        <div>
-          <span class="indigo--text">
-            LINE CHART Widget total monthly price CONTENT HERE</span
-          >
-        </div>
+      <div class="ml-4 mt-1">
+        <gz-chart-line></gz-chart-line>
       </div>
     </template>
   </gz-dash>