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

@@ -39,6 +39,7 @@
 /*
 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
+todo: clickable bars to link to source
 
 */
 import GzDash from "../components/dash-base.vue";
@@ -58,22 +59,13 @@ export default {
           "Head office",
           "Service",
           "Non Service",
-          "Subcontractor",
+          "Subcontractor"
-          "Six",
-          "Seven",
-          "eight",
-          "nine",
-          "ten"
         ],
         datasets: [
           {
             label: "",
-            data: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
+            data: [2, 4, 6, 8, 10],
-            backgroundColor: getPalette(10)
+            backgroundColor: getPalette(5)
-            // ,
-            // minBarLength: 5,
-            // barThickness: 6,
-            // categoryPercentage: 0.2
           }
         ]
       }

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

@@ -8,7 +8,16 @@
   >
     <template slot="main">
       <div class="ml-4 mt-1">
-        <gz-chart-line></gz-chart-line>
+        <gz-chart-line
+          :width="400"
+          :height="240"
+          :chartData="obj"
+          :options="{
+            responsive: true,
+            maintainAspectRatio: false,
+            legend: { display: false }
+          }"
+        ></gz-chart-line>
       </div>
     </template>
   </gz-dash>
@@ -20,7 +29,30 @@ export default {
     GzDash
   },
   data() {
-    return {};
+    return {
+      obj: {
+        labels: [
+          "January",
+          "February",
+          "March",
+          "April",
+          "May",
+          "June",
+          "July"
+        ],
+        datasets: [
+          {
+            borderColor: CHART_PALETTE.teal,
+            backgroundColor: CHART_PALETTE.teal,
+            fill: false,
+            radius: 5,
+            hoverRadius: 10,
+            hitRadius: 5,
+            data: [0, 10, 5, 2, 20, 30, 45]
+          }
+        ]
+      }
+    };
   },
   props: {},
   created() {},
@@ -31,4 +63,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>