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

@@ -41,6 +41,7 @@
 </template>
 <script>
 import GzDash from "../components/dash-base.vue";
+import Palette from "../api/palette";
 export default {
   components: {
     GzDash
@@ -67,7 +68,7 @@ export default {
           {
             label: "",
             data: [2, 4, 6, 8, 10],
-            backgroundColor: getPalette(5)
+            backgroundColor: Palette.getSoftPaletteArray(5)
           }
         ],
         //this is added for my use, not part of chart js, used to get special id value of bar since labels are localized and data is not unique
@@ -101,39 +102,4 @@ 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-line-widget-monthly-total-price.vue

@@ -24,6 +24,7 @@
   </gz-dash>
 </template>
 <script>
+import Palette from "../api/palette";
 import GzDash from "../components/dash-base.vue";
 export default {
   components: {
@@ -51,8 +52,8 @@ export default {
         ],
         datasets: [
           {
-            borderColor: CHART_PALETTE.teal,
-            backgroundColor: CHART_PALETTE.teal,
+            borderColor: Palette.color.soft_deep_blue,
+            backgroundColor: Palette.color.soft_deep_blue,
             fill: false,
             radius: 5,
             hoverRadius: 10,
@@ -64,39 +65,4 @@ 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>