Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-24 14:08:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

💄 Allows user to customize chart colors

Browse Source
This commit is contained in:
Alicia Sykes 2021-12-16 00:35:58 +00:00
parent f1bc2a2888
commit c5f9f5e216
5 changed files with 65 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Widgets/CryptoPriceChart.vue
View File

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

26
src/components/Widgets/NdCpuHistory.vue
View File

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

26
src/components/Widgets/NdLoadHistory.vue
View File

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

11
src/components/Widgets/StockPriceChart.vue
View File

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

49
src/mixins/ChartingMixin.js Normal file
View File

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