From c32cb44b5071f8ce62cb8b7e6b00a9ef1e913e4e Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 3 Nov 2020 01:29:36 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                      | 19 ++---
 ...dash-test-bar-widget-count-by-usertype.vue | 84 +++++++++++++++++--
 .../dash-test-day-calendar-widget.vue         |  6 +-
 ...h-test-line-widget-monthly-total-price.vue |  8 +-
 4 files changed, 88 insertions(+), 29 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 50f6e3c7..e2255947 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -3,6 +3,11 @@
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
 
+TODO NEXT DASHBOARD:
+	Before making any routes at server, make static data to display in graphs and day calendar so can then play with sizing and see what's realistic to deal with
+	once sizing is in order then can look at specialty routes for serving dash items, maybe combine all dashitems into same route with it's own queries?
+		it just has to return raw data, nothing fancy, check roles etc and then do some nice summarization queries
+
 
 DASHBOARD / KPI / BIZ METRICS
 
@@ -41,18 +46,8 @@ todo: DASHBOARD
 				Settings - popup settings menu for that control
 					common settings built in, slot for special ones?
 		Mockup example of more than one kind of widget with roles, doesn't have to do anything in it's UI, just be present for testing
-			
-	todo: decompose mockup into base component for re-use
-	todo: after base component, make mockups by type
-		e.g. a graph, a list, a schedule etc
-	todo: decompose type components however necessary into base type components
-	todo: real components based on needs
-		re-iterate the above as necessary
-	todo: dashboard menu option choose dash items 
-		shows available unused dash items for that combination of roles
-	todo: need static universal registry of dash components with roles available to and unique ID
-		feeds user registry, selection process etc
-	todo: need user dashboard setup registry and route
+
+
 
 todo: MORE link button click
 	Should take to a data-list view preselected with the criteria that show the complete list of what is in the dash-item wherever possible
diff --git a/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue b/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
index 968d5180..869a51c5 100644
--- a/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
+++ b/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>
diff --git a/ayanova/src/components/dash-test-day-calendar-widget.vue b/ayanova/src/components/dash-test-day-calendar-widget.vue
index fc56745d..1f4eddda 100644
--- a/ayanova/src/components/dash-test-day-calendar-widget.vue
+++ b/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>
diff --git a/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue b/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
index 87fda0be..98be5ebb 100644
--- a/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
+++ b/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>