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;
-}
-
 //////////////////////
 //
 //