DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add theme styling to charts

Browse Source
This commit is contained in:
Jože Fortun
2024-01-30 17:46:05 +03:00
committed by Mumbi Francis
parent 7bedc78e44
commit a1665e6a80
8 changed files with 81 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/js/src/compose/types/chart/chart.ts
+8 -4
View File
@@ -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,
}
lib/js/src/compose/types/chart/funnel.ts
+8 -3
View File
@@ -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 {
lib/js/src/compose/types/chart/gauge.ts
+6 -4
View File
@@ -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: {
lib/js/src/compose/types/chart/radar.ts
+8 -3
View File
@@ -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,
lib/js/src/reporter/types/display-elements/chart/basic.ts
+12 -4
View File
@@ -19,7 +19,8 @@ export class BasicChartOptions extends ChartOptions {
}
}
getChartConfiguration (dataframes: Array<FrameDefinition>) {
getChartConfiguration (dataframes: Array<FrameDefinition>, 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,
}
lib/js/src/reporter/types/display-elements/chart/funnel.ts
+9 -3
View File
@@ -19,7 +19,8 @@ export class FunnelChartOptions extends ChartOptions {
}
}
getChartConfiguration (dataframes: Array<FrameDefinition>) {
getChartConfiguration (dataframes: Array<FrameDefinition>, 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: [
{
lib/vue/src/components/reporter/Viewers/CReportChart.vue
+17 -1
View File
@@ -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
}, {})
},
},
}