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

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>