diff --git a/client/web/compose/src/components/Chart/index.vue b/client/web/compose/src/components/Chart/index.vue index 3b49cf08a..3731655aa 100644 --- a/client/web/compose/src/components/Chart/index.vue +++ b/client/web/compose/src/components/Chart/index.vue @@ -169,6 +169,7 @@ export default { data.labels = data.labels.map(l => l === 'undefined' ? this.$t('chart:undefined') : l) data.customColorSchemes = this.$Settings.get('ui.charts.colorSchemes', []) + data.themeVariables = this.getThemeVariables() this.renderer = chart.makeOptions(data) } else { @@ -182,6 +183,18 @@ export default { this.$emit('updated') }, + getThemeVariables () { + const getCssVariable = (variableName) => { + return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() + } + + // Turn below into an object with key value pairs + return ['white', 'black', 'primary', 'secondary', 'success', 'warning', 'danger', 'light', 'extra-light', 'dark', 'font-regular'].reduce((acc, variable) => { + acc[variable] = getCssVariable(`--${variable}`) + return acc + }, {}) + }, + requestChartUpdate ({ name, handle } = {}) { if (!name && !handle) { this.updateChart() diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts index b75536676..374590018 100644 --- a/lib/js/src/compose/types/chart/chart.ts +++ b/lib/js/src/compose/types/chart/chart.ts @@ -53,7 +53,7 @@ export default class Chart extends BaseChart { }, } - const { labels, datasets = [] } = data + const { labels, datasets = [], themeVariables = {} } = data const { dimensions: [dimension] = [], yAxis, metrics: [metric] = [], @@ -185,7 +185,7 @@ export default class Chart extends BaseChart { }, itemStyle: { borderRadius: 5, - borderColor: '#FFFFFF', + borderColor: themeVariables.white, borderWidth: 1, }, emphasis: { @@ -277,8 +277,9 @@ export default class Chart extends BaseChart { return { color: getColorschemeColors(colorScheme, data.customColorSchemes), textStyle: { - fontFamily: 'Poppins-Regular', + fontFamily: themeVariables['font-regular'], overflow: 'break', + color: themeVariables.black, }, toolbox: { feature: { @@ -297,7 +298,10 @@ export default class Chart extends BaseChart { right: (l?.position?.isDefault ? undefined : l?.position?.right) || undefined, bottom: (l?.position?.isDefault ? undefined : l?.position?.bottom) || undefined, left: (l?.position?.isDefault ? l?.align || 'center' : l?.position?.left) || 'auto', - orient: l?.orientation || 'horizontal' + orient: l?.orientation || 'horizontal', + textStyle: { + color: themeVariables.black, + }, }, ...options, } diff --git a/lib/js/src/compose/types/chart/funnel.ts b/lib/js/src/compose/types/chart/funnel.ts index 073b6e35d..d61b84f76 100644 --- a/lib/js/src/compose/types/chart/funnel.ts +++ b/lib/js/src/compose/types/chart/funnel.ts @@ -88,7 +88,7 @@ export default class FunnelChart extends BaseChart { const { reports = [], colorScheme, noAnimation = false, toolbox } = this.config const { saveAsImage } = toolbox || {} - const { labels, datasets = [], tooltip } = data + const { labels, datasets = [], tooltip, themeVariables = {} } = data const { legend: l } = reports[0] || {} const colors = getColorschemeColors(colorScheme, data.customColorSchemes) @@ -98,7 +98,9 @@ export default class FunnelChart extends BaseChart { return { animation: !noAnimation, textStyle: { - fontFamily: 'Poppins-Regular', + fontFamily: themeVariables['font-regular'], + overflow: 'break', + color: themeVariables.black, }, toolbox: { feature: { @@ -122,7 +124,10 @@ export default class FunnelChart extends BaseChart { right: (l?.position?.isDefault ? undefined : l?.position?.right) || undefined, bottom: (l?.position?.isDefault ? undefined : l?.position?.bottom) || undefined, left: (l?.position?.isDefault ? l?.align || 'center' : l?.position?.left) || 'auto', - orient: l?.orientation || 'horizontal' + orient: l?.orientation || 'horizontal', + textStyle: { + color: themeVariables.black, + }, }, series: datasets.map(({ data }: any) => { return { diff --git a/lib/js/src/compose/types/chart/gauge.ts b/lib/js/src/compose/types/chart/gauge.ts index 38065b229..806fa1539 100644 --- a/lib/js/src/compose/types/chart/gauge.ts +++ b/lib/js/src/compose/types/chart/gauge.ts @@ -77,7 +77,7 @@ export default class GaugeChart extends BaseChart { const { colorScheme, noAnimation = false, toolbox } = this.config const { saveAsImage } = toolbox || {} - const { datasets = [] } = data + const { datasets = [], themeVariables = {} } = data const { steps = [], name, value, max, tooltip, startAngle, endAngle } = datasets.find(({ value }: any) => value) || datasets[0] const colors = getColorschemeColors(colorScheme, data.customColorSchemes) @@ -88,7 +88,9 @@ export default class GaugeChart extends BaseChart { return { animation: !noAnimation, textStyle: { - fontFamily: 'Poppins-Regular', + fontFamily: themeVariables['font-regular'], + overflow: 'break', + color: themeVariables.black, }, toolbox: { feature: { @@ -116,14 +118,14 @@ export default class GaugeChart extends BaseChart { width: 5, length: '75%', itemStyle: { - color: '#464646', + color: themeVariables.black, }, }, splitLine: { distance: 0, length: 0, lineStyle: { - color: '#FFFFFF', + color: themeVariables.white, }, }, axisLine: { diff --git a/lib/js/src/compose/types/chart/radar.ts b/lib/js/src/compose/types/chart/radar.ts index b732f8a27..3022e2a86 100644 --- a/lib/js/src/compose/types/chart/radar.ts +++ b/lib/js/src/compose/types/chart/radar.ts @@ -27,7 +27,7 @@ export default class RadarChart extends BaseChart { makeOptions (data: any) { const { reports = [], colorScheme, noAnimation = false, toolbox } = this.config const { saveAsImage } = toolbox || {} - const { labels, datasets = [], dimension = {} } = data + const { labels, datasets = [], dimension = {}, themeVariables = {} } = data const { legend: l } = reports[0] || {} const labelFormatter = '{c}' @@ -49,7 +49,9 @@ export default class RadarChart extends BaseChart { color: getColorschemeColors(colorScheme, data.customColorSchemes), animation: !noAnimation, textStyle: { - fontFamily: 'Poppins-Regular', + fontFamily: themeVariables['font-regular'], + overflow: 'break', + color: themeVariables.black, }, toolbox: { feature: { @@ -65,7 +67,10 @@ export default class RadarChart extends BaseChart { right: (l?.position?.isDefault ? undefined : l?.position?.right) || undefined, bottom: (l?.position?.isDefault ? undefined : l?.position?.bottom) || undefined, left: (l?.position?.isDefault ? l?.align || 'center' : l?.position?.left) || 'auto', - orient: l?.orientation || 'horizontal' + orient: l?.orientation || 'horizontal', + textStyle: { + color: themeVariables.black, + }, }, tooltip: { show: true, diff --git a/lib/js/src/reporter/types/display-elements/chart/basic.ts b/lib/js/src/reporter/types/display-elements/chart/basic.ts index 234ebb4ba..9a0614622 100644 --- a/lib/js/src/reporter/types/display-elements/chart/basic.ts +++ b/lib/js/src/reporter/types/display-elements/chart/basic.ts @@ -19,7 +19,8 @@ export class BasicChartOptions extends ChartOptions { } } - getChartConfiguration (dataframes: Array) { + getChartConfiguration (dataframes: Array, meta: any) { + const { themeVariables = {} } = meta const { labels, datasets = [] } = this.getData(dataframes[0], dataframes) const options: any = { @@ -60,7 +61,7 @@ export class BasicChartOptions extends ChartOptions { }, itemStyle: { borderRadius: 5, - borderColor: '#FFFFFF', + borderColor: themeVariables.white, borderWidth: 1, }, emphasis: { @@ -181,12 +182,16 @@ export class BasicChartOptions extends ChartOptions { text: this.title, left: 'center', textStyle: { + fontFamily: themeVariables['font-regular'], + color: themeVariables.black, fontSize: 16, }, }, color: getColorschemeColors(this.colorScheme), textStyle: { - fontFamily: 'Poppins-Regular', + fontFamily: themeVariables['font-regular'], + overflow: 'break', + color: themeVariables.black, }, legend: { show: !this.legend.hide, @@ -195,7 +200,10 @@ export class BasicChartOptions extends ChartOptions { right: (this.legend.position.default ? undefined : this.legend.position.right) || undefined, bottom: (this.legend.position.default ? undefined : this.legend.position.bottom) || undefined, left: (this.legend.position.default ? this.legend.align || 'center' : this.legend.position.left) || 'auto', - orient: this.legend.orientation || 'horizontal' + orient: this.legend.orientation || 'horizontal', + textStyle: { + color: themeVariables.black, + }, }, ...options, } diff --git a/lib/js/src/reporter/types/display-elements/chart/funnel.ts b/lib/js/src/reporter/types/display-elements/chart/funnel.ts index 2930250d5..4841b70af 100644 --- a/lib/js/src/reporter/types/display-elements/chart/funnel.ts +++ b/lib/js/src/reporter/types/display-elements/chart/funnel.ts @@ -19,7 +19,8 @@ export class FunnelChartOptions extends ChartOptions { } } - getChartConfiguration (dataframes: Array) { + getChartConfiguration (dataframes: Array, meta: any) { + const { themeVariables = {} } = meta const labels = this.getLabels(dataframes[0]) const { data = [] } = this.getDatasets(dataframes[0], dataframes) || {} const colors = getColorschemeColors(this.colorScheme) @@ -30,11 +31,13 @@ export class FunnelChartOptions extends ChartOptions { text: this.title, left: 'center', textStyle: { + fontFamily: themeVariables['font-regular'], + color: themeVariables.black, fontSize: 16, }, }, textStyle: { - fontFamily: 'Poppins-Regular', + fontFamily: themeVariables['font-regular'], }, tooltip: { show: true, @@ -49,7 +52,10 @@ export class FunnelChartOptions extends ChartOptions { right: (this.legend.position.default ? undefined : this.legend.position.right) || undefined, bottom: (this.legend.position.default ? undefined : this.legend.position.bottom) || undefined, left: (this.legend.position.default ? this.legend.align || 'center' : this.legend.position.left) || 'auto', - orient: this.legend.orientation || 'horizontal' + orient: this.legend.orientation || 'horizontal', + textStyle: { + color: themeVariables.black, + }, }, series: [ { diff --git a/lib/vue/src/components/reporter/Viewers/CReportChart.vue b/lib/vue/src/components/reporter/Viewers/CReportChart.vue index 99309dafd..391f2de62 100644 --- a/lib/vue/src/components/reporter/Viewers/CReportChart.vue +++ b/lib/vue/src/components/reporter/Viewers/CReportChart.vue @@ -51,7 +51,23 @@ export default { methods: { renderChart () { - this.chart = this.options.getChartConfiguration(this.dataframes) + const meta = { + themeVariables: this.getThemeVariables(), + } + + this.chart = this.options.getChartConfiguration(this.dataframes, meta) + }, + + getThemeVariables () { + const getCssVariable = (variableName) => { + return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() + } + + // Turn below into an object with key value pairs + return ['white', 'black', 'primary', 'secondary', 'success', 'warning', 'danger', 'light', 'extra-light', 'dark', 'font-regular'].reduce((acc, variable) => { + acc[variable] = getCssVariable(`--${variable}`) + return acc + }, {}) }, }, }