💄 Allows user to customize chart colors

src/components/Widgets/CryptoPriceChart.vue

@@ -6,10 +6,11 @@
 import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm';
 import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, ChartingMixin],
   components: {},
   data() {
     return {
@@ -58,10 +59,6 @@ export default {
     chartId() {
       return `crypto-price-chart-${Math.round(Math.random() * 10000)}`;
     },
-    getChartColor() {
-      const cssVars = getComputedStyle(document.documentElement);
-      return cssVars.getPropertyValue('--widget-text-color').trim() || '#7cd6fd';
-    },
   },
   methods: {
     /* Extends mixin, and updates data. Called by parent component */
@@ -76,7 +73,7 @@ export default {
         data: this.chartData,
         type: 'axis-mixed',
         height: 200,
-        colors: [this.getChartColor, '#743ee2'],
+        colors: this.chartColors,
         truncateLegends: true,
         lineOptions: {
           regionFill: 1,

src/components/Widgets/NdCpuHistory.vue

@@ -4,11 +4,11 @@
 
 <script>
 import axios from 'axios';
-import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm';
 import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, ChartingMixin],
   components: {},
   data() {
     return {
@@ -40,13 +40,6 @@ export default {
     chartId() {
       return `cpu-history-chart-${Math.round(Math.random() * 10000)}`;
     },
-    chartHeight() {
-      return this.options.chartHeight || 300;
-    },
-    getChartColor() {
-      const cssVars = getComputedStyle(document.documentElement);
-      return cssVars.getPropertyValue('--widget-text-color').trim() || '#7cd6fd';
-    },
   },
   methods: {
     /* Make GET request to NetData */
@@ -68,7 +61,7 @@ export default {
       const systemCpu = [];
       const userCpu = [];
       data.data.reverse().forEach((reading) => {
-        timeData.push(this.formatDate(reading[0]));
+        timeData.push(this.formatDate(reading[0] * 1000));
         systemCpu.push(reading[2]);
         userCpu.push(reading[3]);
       });
@@ -92,12 +85,12 @@ export default {
     },
     /* Create new chart, using the crypto data */
     generateChart() {
-      return new Chart(`#${this.chartId}`, {
+      return new this.Chart(`#${this.chartId}`, {
         title: this.chartTitle,
         data: this.chartData,
         type: 'axis-mixed',
         height: this.chartHeight,
-        colors: [this.getChartColor, '#743ee2'],
+        colors: this.chartColors,
         truncateLegends: true,
         lineOptions: {
           regionFill: 1,
@@ -112,15 +105,6 @@ export default {
         },
       });
     },
-    /* Format the date for a given time stamp, also include time if required */
-    formatDate(timestamp) {
-      const localFormat = navigator.language;
-      const dateFormat = { weekday: 'short', day: 'numeric', month: 'short' };
-      const timeFormat = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
-      const date = new Date(timestamp * 1000).toLocaleDateString(localFormat, dateFormat);
-      const time = Intl.DateTimeFormat(localFormat, timeFormat).format(timestamp);
-      return `${date} ${time}`;
-    },
   },
 };
 </script>

src/components/Widgets/NdLoadHistory.vue

@@ -4,11 +4,11 @@
 
 <script>
 import axios from 'axios';
-import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm';
 import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, ChartingMixin],
   components: {},
   data() {
     return {
@@ -40,13 +40,6 @@ export default {
     chartId() {
       return `cpu-history-chart-${Math.round(Math.random() * 10000)}`;
     },
-    chartHeight() {
-      return this.options.chartHeight || 300;
-    },
-    getChartColor() {
-      const cssVars = getComputedStyle(document.documentElement);
-      return cssVars.getPropertyValue('--widget-text-color').trim() || '#7cd6fd';
-    },
   },
   methods: {
     /* Make GET request to NetData */
@@ -69,7 +62,7 @@ export default {
       const load5mins = [];
       const load15mins = [];
       data.data.reverse().forEach((reading) => {
-        timeData.push(this.formatDate(reading[0]));
+        timeData.push(this.formatDate(reading[0] * 1000));
         load1min.push(reading[1]);
         load5mins.push(reading[2]);
         load15mins.push(reading[3]);
@@ -95,12 +88,12 @@ export default {
     },
     /* Create new chart, using the crypto data */
     generateChart() {
-      return new Chart(`#${this.chartId}`, {
+      return new this.Chart(`#${this.chartId}`, {
         title: this.chartTitle,
         data: this.chartData,
         type: 'axis-mixed',
         height: this.chartHeight,
-        colors: [this.getChartColor, '#743ee2'],
+        colors: this.chartColors,
         truncateLegends: true,
         lineOptions: {
           regionFill: 1,
@@ -115,15 +108,6 @@ export default {
         },
       });
     },
-    /* Format the date for a given time stamp, also include time if required */
-    formatDate(timestamp) {
-      const localFormat = navigator.language;
-      const dateFormat = { weekday: 'short', day: 'numeric', month: 'short' };
-      const timeFormat = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
-      const date = new Date(timestamp * 1000).toLocaleDateString(localFormat, dateFormat);
-      const time = Intl.DateTimeFormat(localFormat, timeFormat).format(timestamp);
-      return `${date} ${time}`;
-    },
   },
 };
 </script>

src/components/Widgets/StockPriceChart.vue

@@ -6,10 +6,11 @@
 import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm';
 import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, ChartingMixin],
   components: {},
   data() {
     return {
@@ -51,12 +52,6 @@ export default {
     chartId() {
       return `stock-price-chart-${Math.round(Math.random() * 10000)}`;
     },
-    /* Get color hex code for chart, from CSS variable, or user choice */
-    getChartColor() {
-      if (this.options.chartColor) return this.options.chartColor;
-      const cssVars = getComputedStyle(document.documentElement);
-      return cssVars.getPropertyValue('--widget-text-color').trim() || '#7cd6fd';
-    },
     /* Which price for each interval should be used (API requires in stupid format) */
     priceTime() {
       const usersChoice = this.options.priceTime || 'high';
@@ -83,7 +78,7 @@ export default {
         data: this.chartData,
         type: 'axis-mixed',
         height: 200,
-        colors: [this.getChartColor, '#743ee2'],
+        colors: this.chartColors,
         truncateLegends: true,
         lineOptions: {
           regionFill: 1,

src/mixins/ChartingMixin.js

@@ -0,0 +1,49 @@
+/**
+ * Mixin for helper functions, used for making chart widgets
+ */
+// import ErrorHandler from '@/utils/ErrorHandler';
+import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm';
+
+const WidgetMixin = {
+  props: {},
+  computed: {
+    chartHeight() {
+      return this.options.chartHeight || 300;
+    },
+    chartColors() {
+      const ops = this.options;
+      if (ops.chartColor && typeof ops.chartColor === 'string') return [ops.chartColor];
+      if (ops.chartColors && Array.isArray(ops.chartColors)) return ops.chartColors;
+      const cssVars = getComputedStyle(document.documentElement);
+      return [cssVars.getPropertyValue('--widget-text-color').trim() || '#7cd6fd'];
+    },
+    chartId() {
+      return `widget-chart-${Math.round(Math.random() * 10000)}`;
+    },
+  },
+  data: () => ({
+    Chart,
+  }),
+  methods: {
+    /* Format the date for a given time stamp */
+    formatDate(timestamp) {
+      const localFormat = navigator.language;
+      const dateFormat = { weekday: 'short', day: 'numeric', month: 'short' };
+      const date = new Date(timestamp).toLocaleDateString(localFormat, dateFormat);
+      return date;
+    },
+    /* Format the time for a given time stamp */
+    formatTime(timestamp) {
+      const localFormat = navigator.language;
+      const timeFormat = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
+      const time = Intl.DateTimeFormat(localFormat, timeFormat).format(timestamp);
+      return time;
+    },
+    /* Given an array of numbers, returns the average of all */
+    average(array) {
+      return array.reduce((a, b) => a + b) / array.length;
+    },
+  },
+};
+
+export default WidgetMixin;