ayanova/devdocs/todo.txt

@@ -6,9 +6,7 @@ DASHBOARD / KPI / BIZ METRICS
 
 todo:
 
-	palette colors centralized
+	
-		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
 	lt titles of dash items properly
 	List one goes to a list filter and sorted appropriately
 		todo: MORE link button click
@@ -37,7 +35,7 @@ todo: when showing a popup warning box error: Could not find one or more icon(s)
 	Need to show a warning box to see it in action, maybe delete something and get the are you sure? or maybe it's only the warning type?
 TODO: shorten word "control" in my custom controls to ctl, why waste bytes?
 TODO: gzErrorBox in widget form will not display if form is not ready and form may not be ready if there is an error? (or is that correct?)
-
+todo: ops metrics not showing dates on charts that span more than one day (timeline)
 
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 @@@@@@@@@@@@@ ROADMAP STAGE 5 - FINALIZE ALL NON BIZ OBJECT SPECIFIC FUNCTIONALITY

ayanova/src/api/palette.js

@@ -0,0 +1,60 @@
+//https://colorpalettes.net
+export default {
+  color: {
+    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
+    soft_sand: "#f1d3a1",
+    soft_sand_taupe: "#e3dbd9",
+    soft_pale_blue: "#e6eff6",
+    soft_deep_blue: "#89b4c4",
+    soft_green: "#ccdb86",
+    soft_brown: "#c8bcb1",
+    soft_brown_darker: "#8d7053",
+    soft_gray: "#d2d7db"
+  },
+  getBoldPaletteArray(size) {
+    let palette = [
+      this.color.blue,
+      this.color.red,
+      this.color.green,
+      this.color.orange,
+      this.color.purple,
+      this.color.cyan,
+      this.color.teal,
+      this.color.black
+    ];
+    let paletteLength = palette.length;
+    let ret = [];
+    for (let i = 0; i < size; i++) {
+      ret.push(palette[i % paletteLength]);
+    }
+    return ret;
+  },
+  getSoftPaletteArray(size) {
+    let palette = [
+      this.color.soft_sand,
+      this.color.soft_pale_blue,
+      this.color.soft_gray,
+      this.color.soft_green,
+      this.color.soft_brown,
+      this.color.soft_deep_blue,
+      this.color.soft_sand_taupe,
+      this.color.soft_brown_darker
+    ];
+    let paletteLength = palette.length;
+    let ret = [];
+    for (let i = 0; i < size; i++) {
+      ret.push(palette[i % paletteLength]);
+    }
+    return ret;
+  }
+};

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,
+            borderColor: Palette.color.soft_deep_blue,
-            backgroundColor: CHART_PALETTE.teal,
+            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>

ayanova/src/views/ops-metrics.vue

@@ -87,22 +87,8 @@
 //https://blog.hubspot.com/marketing/types-of-graphs-for-data-visualization
 //https://medium.com/javascript-in-plain-english/exploring-chart-js-e3ba70b07aa4
 import relativeDatefilterCalculator from "../api/relative-date-filter-calculator.js";
+import Palette from "../api/palette";
 const FORM_KEY = "ops-metrics";
-//Pleasing combo of contrasting colors for lines
-//from http://perceptualedge.com/articles/b-eye/choosing_colors.pdf
-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
-};
 
 export default {
   async created() {
@@ -142,6 +128,9 @@ export default {
             {
               gridLines: {
                 drawOnChartArea: false
+              },
+              ticks: {
+                beginAtZero: true
               }
             }
           ]
@@ -281,7 +270,7 @@ export default {
         datasets: [
           {
             label: "CPU %",
-            borderColor: CHART_PALETTE.teal,
+            borderColor: Palette.color.soft_sand,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -296,7 +285,7 @@ export default {
         datasets: [
           {
             label: this.$ay.t("MetricDBSize"),
-            borderColor: CHART_PALETTE.blue,
+            borderColor: Palette.color.blue,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -323,7 +312,7 @@ export default {
             //de-lodash
             // data: window.$gz. _.map(this.db.topTables, "value"),
             data: this.db.topTables.map(z => z.value),
-            backgroundColor: getPalette(
+            backgroundColor: Palette.getSoftPaletteArray(
               this.db.topTables ? this.db.topTables.length : 3
             ),
             minBarLength: 5
@@ -336,7 +325,7 @@ export default {
         datasets: [
           {
             label: this.$ay.t("MetricAllocatedMemory"),
-            borderColor: CHART_PALETTE.purple,
+            borderColor: Palette.color.soft_brown_darker,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -345,7 +334,7 @@ export default {
           },
           {
             label: this.$ay.t("MetricWorkingSet"),
-            borderColor: CHART_PALETTE.green,
+            borderColor: Palette.color.soft_green,
             //borderWidth:4,
             // pointStyle: "rectRot",
             radius: 0,
@@ -357,7 +346,7 @@ export default {
           },
           {
             label: this.$ay.t("MetricPrivateBytes"),
-            borderColor: CHART_PALETTE.orange,
+            borderColor: Palette.color.soft_deep_blue,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -372,7 +361,7 @@ export default {
         datasets: [
           {
             label: this.$ay.t("MetricAttachmentsMB"),
-            borderColor: CHART_PALETTE.purple,
+            borderColor: Palette.color.purple,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -381,7 +370,7 @@ export default {
           },
           {
             label: this.$ay.t("MetricBackupMB"),
-            borderColor: CHART_PALETTE.orange,
+            borderColor: Palette.color.orange,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -390,7 +379,7 @@ export default {
           },
           {
             label: this.$ay.t("MetricAvailableDiskSpace"),
-            borderColor: CHART_PALETTE.green,
+            borderColor: Palette.color.green,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -405,7 +394,7 @@ export default {
         datasets: [
           {
             label: this.$ay.t("MetricAttachmentsCount"),
-            borderColor: CHART_PALETTE.blue,
+            borderColor: Palette.color.blue,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -418,27 +407,6 @@ export default {
   }
 };
 
-///////////////////////
-//
-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;
-}
-
 //////////////////////
 //
 //