diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index bd1082f8..9cd09d39 100644
--- a/ayanova/devdocs/todo.txt
+++ b/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
diff --git a/ayanova/src/api/palette.js b/ayanova/src/api/palette.js
new file mode 100644
index 00000000..ea8fe17e
--- /dev/null
+++ b/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;
+ }
+};
diff --git a/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue b/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
index ffbff77a..cf53840f 100644
--- a/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
+++ b/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
@@ -41,6 +41,7 @@
diff --git a/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue b/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
index 663f62da..65198703 100644
--- a/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
+++ b/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
@@ -24,6 +24,7 @@
diff --git a/ayanova/src/views/ops-metrics.vue b/ayanova/src/views/ops-metrics.vue
index 59b4e159..58cd4a45 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/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;
-}
-
//////////////////////
//
//