From ca1b233765209cc4ad6c5a3f2baf7e47d6a36458 Mon Sep 17 00:00:00 2001 From: Kelani Tolulope Date: Fri, 26 Apr 2024 10:47:45 +0100 Subject: [PATCH] Add stacking capability to reporter graph --- .../src/components/Common/ColumnPicker.vue | 9 +- .../DisplayElements/Configurators/Chart.vue | 211 ++++++++++++------ .../DisplayElements/Configurators/Table.vue | 11 +- .../types/display-elements/chart/basic.ts | 10 +- .../display-element.yaml | 8 + 5 files changed, 171 insertions(+), 78 deletions(-) diff --git a/client/web/reporter/src/components/Common/ColumnPicker.vue b/client/web/reporter/src/components/Common/ColumnPicker.vue index 3f2b085fa2..e0f357091c 100644 --- a/client/web/reporter/src/components/Common/ColumnPicker.vue +++ b/client/web/reporter/src/components/Common/ColumnPicker.vue @@ -83,14 +83,7 @@ export default { }, set (selected) { - // take list of field names passed to the setter - // and filter out the options to recreate the list - // module field objects - const fields = selected.map(s => { - return (this.options.find(({ value }) => value === s) || {}).field - }).filter(f => f) - - this.$emit('update:selected-items', fields) + this.$emit('update:selected-items', selected) }, }, diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue index 682716fad3..447b1e823d 100644 --- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue +++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue @@ -4,7 +4,7 @@ class="mb-3" >
- {{ $t('display-element:chart.configurator.general') }} + {{ $t('chart.configurator.general') }}
@@ -97,7 +97,7 @@ switch class="mt-3 pt-2" > - {{ $t('display-element:chart.configurator.animation.enabled') }} + {{ $t('chart.configurator.animation.enabled') }} @@ -109,12 +109,12 @@ class="mb-3" >
- {{ $t('display-element:chart.configurator.data') }} + {{ $t('chart.configurator.data') }}
+
+
+ +
+ {{ $t('chart.configurator.metrics.label') }} +
+ + + +
+ {{ column.label }} +
+ + + + + + + + + + + + + + + + +
+
@@ -145,12 +205,12 @@ class="mb-3" >
- {{ $t('display-element:chart.configurator.x-axis.name') }} + {{ $t('chart.configurator.x-axis.name') }}
- {{ $t('display-element:chart.configurator.default') }} + {{ $t('chart.configurator.default') }} @@ -182,7 +242,7 @@ @@ -197,12 +257,12 @@ v-model="options.xAxis.skipMissing" class="mb-3" > - {{ $t('display-element:chart.configurator.skip-missing-values') }} + {{ $t('chart.configurator.skip-missing-values') }} @@ -220,12 +280,12 @@
- {{ $t('display-element:chart.configurator.y-axis.name') }} + {{ $t('chart.configurator.y-axis.name') }}
@@ -262,7 +322,7 @@ - {{ $t('display-element:chart.configurator.logarithmic-scale') }} + {{ $t('chart.configurator.logarithmic-scale') }} - {{ $t('display-element:chart.configurator.begin-axis-at-zero') }} + {{ $t('chart.configurator.begin-axis-at-zero') }} - {{ $t('display-element:chart.configurator.place-axis-on-right-side') }} + {{ $t('chart.configurator.place-axis-on-right-side') }} @@ -329,14 +389,14 @@
- {{ $t('display-element:chart.configurator.legend.name') }} + {{ $t('chart.configurator.legend.name') }}
- {{ $t('display-element:chart.configurator.legend.hide') }} + {{ $t('chart.configurator.legend.hide') }} @@ -345,7 +405,7 @@ lg="6" > @@ -362,7 +422,7 @@ lg="6" > @@ -381,7 +441,7 @@ v-model="options.legend.position.default" :class="{ 'mb-3': !options.legend.position.default }" > - {{ $t('display-element:chart.configurator.legend.position.default') }} + {{ $t('chart.configurator.legend.position.default') }} @@ -393,7 +453,7 @@ v-model="options.legend.scrollable" :disabled="options.legend.orientation !== 'horizontal'" > - {{ $t('display-element:chart.configurator.legend.scrollable') }} + {{ $t('chart.configurator.legend.scrollable') }} @@ -406,7 +466,7 @@ xl="3" > - {{ $t('display-element:chart.configurator.position-description') }} + {{ $t('chart.configurator.position-description') }} @@ -471,7 +531,7 @@
- {{ $t('display-element:chart.configurator.tooltips.name') }} + {{ $t('chart.configurator.tooltips.name') }}
@@ -479,7 +539,7 @@ - {{ $t('display-element:chart.configurator.tooltips.show.always') }} + {{ $t('chart.configurator.tooltips.show.always') }} @@ -489,14 +549,14 @@
- {{ $t('display-element:chart.configurator.offset.name') }} + {{ $t('chart.configurator.offset.name') }}
- {{ $t('display-element:chart.configurator.offset.default') }} + {{ $t('chart.configurator.offset.default') }} @@ -506,7 +566,7 @@ xl="3" > - {{ $t('display-element:chart.configurator.position-description') }} + {{ $t('chart.configurator.position-description') }}
@@ -579,6 +639,12 @@ import { reporter, shared } from '@cortezaproject/corteza-js' const { colorschemes } = shared export default { + i18nOptions: { + namespaces: 'display-element', + }, + + name: 'ChartConfigurator', + components: { ColumnSelector, ColumnPicker, @@ -602,20 +668,20 @@ export default { ], axisLabelPositions: [ - { value: 'end', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.top') }, - { value: 'center', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.center') }, - { value: 'start', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.bottom') }, + { value: 'end', text: this.$t('chart.configurator.y-axis.labelPosition.top') }, + { value: 'center', text: this.$t('chart.configurator.y-axis.labelPosition.center') }, + { value: 'start', text: this.$t('chart.configurator.y-axis.labelPosition.bottom') }, ], orientations: [ - { value: 'horizontal', text: this.$t('display-element:chart.configurator.legend.orientation.horizontal') }, - { value: 'vertical', text: this.$t('display-element:chart.configurator.legend.orientation.vertical') }, + { value: 'horizontal', text: this.$t('chart.configurator.legend.orientation.horizontal') }, + { value: 'vertical', text: this.$t('chart.configurator.legend.orientation.vertical') }, ], alignments: [ - { value: 'left', text: this.$t('display-element:chart.configurator.legend.align.left') }, - { value: 'center', text: this.$t('display-element:chart.configurator.legend.align.center') }, - { value: 'right', text: this.$t('display-element:chart.configurator.legend.align.right') }, + { value: 'left', text: this.$t('chart.configurator.legend.align.left') }, + { value: 'center', text: this.$t('chart.configurator.legend.align.center') }, + { value: 'right', text: this.$t('chart.configurator.legend.align.right') }, ], } }, @@ -627,14 +693,14 @@ export default { chartTypes () { const types = [ - { value: 'bar', text: this.$t('display-element:chart.configurator.types.bar') }, - { value: 'line', text: this.$t('display-element:chart.configurator.types.line') }, - { value: 'pie', text: this.$t('display-element:chart.configurator.types.pie') }, - { value: 'doughnut', text: this.$t('display-element:chart.configurator.types.doughnut') }, + { value: 'bar', text: this.$t('chart.configurator.types.bar') }, + { value: 'line', text: this.$t('chart.configurator.types.line') }, + { value: 'pie', text: this.$t('chart.configurator.types.pie') }, + { value: 'doughnut', text: this.$t('chart.configurator.types.doughnut') }, ] if (this.datasource && this.datasource.step.aggregate) { - types.push({ value: 'funnel', text: this.$t('display-element:chart.configurator.types.funnel') }) + types.push({ value: 'funnel', text: this.$t('chart.configurator.types.funnel') }) } return types @@ -642,18 +708,18 @@ export default { AxisTypes () { return [ - { value: 'time', text: this.$t('display-element:chart.configurator.time.label') }, + { value: 'time', text: this.$t('chart.configurator.time.label') }, { value: 'category', text: 'Category' }, ] }, timeUnits () { return [ - { value: 'day', text: this.$t('display-element:chart.configurator.time.unit.types.date') }, - { value: 'week', text: this.$t('display-element:chart.configurator.time.unit.types.week') }, - { value: 'month', text: this.$t('display-element:chart.configurator.time.unit.types.month') }, - { value: 'quarter', text: this.$t('display-element:chart.configurator.time.unit.types.quarter') }, - { value: 'year', text: this.$t('display-element:chart.configurator.time.unit.types.year') }, + { value: 'day', text: this.$t('chart.configurator.time.unit.types.date') }, + { value: 'week', text: this.$t('chart.configurator.time.unit.types.week') }, + { value: 'month', text: this.$t('chart.configurator.time.unit.types.month') }, + { value: 'quarter', text: this.$t('chart.configurator.time.unit.types.quarter') }, + { value: 'year', text: this.$t('chart.configurator.time.unit.types.year') }, ] }, @@ -671,6 +737,10 @@ export default { currentColorScheme () { return this.colorSchemes.find(({ value }) => value === this.options.colorScheme) }, + + metricColumns () { + return this.options.dataColumns + }, }, created () { @@ -700,6 +770,17 @@ export default { }, methods: { + updateDataColumns (columns) { + let result = columns.map((c) => this.dataColumns.find(({ name }) => name === c)) + + result.forEach((c, idx) => { + const initialCol = this.options.dataColumns.find(({ name }) => name === c.name) + if (initialCol) result[idx] = initialCol + }) + + this.options.dataColumns = result + }, + setColorscheme (colorscheme) { this.options.colorScheme = (colorscheme || {}).value || '' }, diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Table.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Table.vue index a1d8b95197..cb83e99da3 100644 --- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Table.vue +++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Table.vue @@ -143,8 +143,9 @@ >
@@ -219,5 +220,13 @@ export default { }, }, }, + + methods: { + updateSelectedColumns (columns) { + this.currentSelectedColumns = columns.map((c) => { + return this.currentColumns.find(({ name }) => name === c) + }) + }, + }, } 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 e1cdaaf23d..977c28baac 100644 --- a/lib/js/src/reporter/types/display-elements/chart/basic.ts +++ b/lib/js/src/reporter/types/display-elements/chart/basic.ts @@ -5,7 +5,7 @@ import { getColorschemeColors } from '../../../../shared' import moment from 'moment' export class BasicChartOptions extends ChartOptions { public labelColumn = '' - public dataColumns: Array<{ name: string; label?: string }> = [] + public dataColumns: Array<{ name: string; label?: string; stack?: string }> = [] constructor (o?: BasicChartOptions | Partial) { super(o) @@ -170,13 +170,14 @@ export class BasicChartOptions extends ChartOptions { options.yAxis = [tempYAxis] - options.series = datasets.map(({ label, data }) => { + options.series = datasets.map(({ label, data, stack }) => { return { name: label, type: this.type, smooth: true, areaStyle: {}, left: 'left', + stack, label: { show: this.tooltips.showAlways, position: 'inside', @@ -241,7 +242,7 @@ export class BasicChartOptions extends ChartOptions { if (localDataframe && dataframes) { // Get datasets if (this.dataColumns.length && localDataframe.rows) { - for (const { name } of this.dataColumns) { + for (const { name, stack, label } of this.dataColumns) { // Assume localDataframe has the dataColumn let columnIndex = this.getColIndex(localDataframe, name) @@ -280,8 +281,9 @@ export class BasicChartOptions extends ChartOptions { } datasets.push({ - label: name, + label: label || name, data, + stack, }) } } diff --git a/locale/en/corteza-webapp-reporter/display-element.yaml b/locale/en/corteza-webapp-reporter/display-element.yaml index f144db288c..c69cf45284 100644 --- a/locale/en/corteza-webapp-reporter/display-element.yaml +++ b/locale/en/corteza-webapp-reporter/display-element.yaml @@ -17,6 +17,14 @@ chart: step-size: Step size animation: enabled: Animation enabled + metrics: + label: Metrics + field: Field + stack: + label: Stack + description: Metrics with same value will be stacked + label-field: + label: Label time: label: Time unit: