admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2020-11-04 00:08:19 +00:00
parent 3e4af8bb18
commit 7f982fc4b8
5 changed files with 81 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ayanova/devdocs/todo.txt
View File

@@ -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

60
ayanova/src/api/palette.js Normal file
View File

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

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

@@ -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>

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

@@ -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>

60
ayanova/src/views/ops-metrics.vue
View File

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