From cdc19e4be8990f3bc893187b34fc1afd8d40ce30 Mon Sep 17 00:00:00 2001 From: Florian Hotze Date: Fri, 29 Mar 2024 17:13:30 +0100 Subject: [PATCH] Code improvements Signed-off-by: Florian Hotze --- .../components/widgets/chart/chart-mixin.js | 2 +- .../web/src/pages/analyzer/analyzer.vue | 144 +++++++++--------- 2 files changed, 74 insertions(+), 72 deletions(-) diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js index 590c92abda..ba5f8c9547 100644 --- a/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js +++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js @@ -106,7 +106,7 @@ export default { if (!this.context.component.slots) return undefined if (this.context.component.slots.visualMap) { return this.context.component.slots.visualMap.map((c) => OhChartVisualMap.get(c, this.startTime, this.endTime, this, this.$device)) - } else if (JSON.stringify(this.context.component.slots.series).includes('heatmap')) { // heatmap needs a visualMap, therefore fall back to a default + } else if (JSON.stringify(this.context.component.slots.series)?.includes('heatmap')) { // heatmap needs a visualMap, therefore fall back to a default const config = { calculable: true, presetPalette: 'bluered', diff --git a/bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue b/bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue index 340dd2553b..e320b465cf 100644 --- a/bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue +++ b/bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue @@ -7,6 +7,7 @@ + @@ -15,7 +16,10 @@ + + + @@ -28,6 +32,8 @@ + + @@ -98,6 +104,7 @@ + @@ -133,6 +140,7 @@ + @@ -267,34 +275,53 @@ export default { controlsOpened: false, controlsTab: 'series', - itemsPickerKey: null, - chartKey: this.$f7.utils.id(), - - aggregations: [ - { value: 'average', label: this.$t('analyzer.aggregations.average') }, - { value: 'sum', label: this.$t('analyzer.aggregations.sum') }, - { value: 'min', label: this.$t('analyzer.aggregations.min') }, - { value: 'max', label: this.$t('analyzer.aggregations.max') }, - { value: 'first', label: this.$t('analyzer.aggregations.first') }, - { value: 'last', label: this.$t('analyzer.aggregations.last') }, - { value: 'diff_first', label: this.$t('analyzer.aggregations.diffFirst') }, - { value: 'diff_last', label: this.$t('analyzer.aggregations.diffLast') } - ] + itemsPickerKey: this.$f7.utils.id(), + chartKey: this.$f7.utils.id() } }, i18n: { messages: loadLocaleMessages(require.context('@/assets/i18n/analyzer')) }, - mounted () { - this.initChart() + + computed: { + titleDisplayText () { + if (!this.items || !this.items.length) return 'Analyze' + if (this.items.length === 1) return (this.items[0].label) ? this.items[0].label : this.items[0].name + return ((this.items[0].label) ? this.items[0].label : this.items[0].name) + ' + ' + (this.items.length - 1) + }, + context () { + return { + component: this.page, + analyzer: true + } + }, + page () { + switch (this.coordSystem) { + case 'time': + return ChartTime.getChartPage(this) + case 'aggregate': + return ChartAggregate.getChartPage(this) + case 'calendar': + return ChartCalendar.getChartPage(this) + default: + return { + component: 'oh-chart-page', + config: { + chartType: this.chartType, + period: this.period + }, + slots: { + title: [ + { component: 'oh-chart-title', config: { subtext: `Invalid coordinate system: ${this.coordSystem}`, top: 'center', left: 'center' } } + ] + } + } + } + } }, methods: { - onOpen () { - // this.$store.dispatch('startTrackingStates') - }, onClose () { this.controlsOpened = false - // this.$store.dispatch('stopTrackingStates') }, initChart () { if (this.$f7route.query.period) this.period = this.$f7route.query.period @@ -302,7 +329,6 @@ export default { if (this.$f7route.query.chartType) this.changeChartType(this.$f7route.query.chartType) if (this.$f7route.query.coordSystem) this.changeCoordSystem(this.$f7route.query.coordSystem) }) - this.itemsPickerKey = this.$f7.utils.id() }, updateItems (itemNames) { this.itemNames = itemNames @@ -343,14 +369,21 @@ export default { this.$delete(this.seriesOptions, item) } } - this.showChart = true + + this.$nextTick(() => { + this.showChart = true + }) + + return Promise.resolve() }) }, initializeSeriesOptions (item) { - let seriesOptions = {} - seriesOptions.name = item.label || item.name - seriesOptions.type = 'line' - seriesOptions.discrete = true + const seriesOptions = { + name: item.label || item.name, + type: 'line', + discrete: true + } + if (item.type.indexOf('Number') === 0 || item.type === 'Dimmer') seriesOptions.discrete = false if (item.groupType && (item.groupType.indexOf('Number') === 0 || item.groupType === 'Dimmer')) seriesOptions.discrete = false if (!seriesOptions.discrete && this.coordSystem === 'aggregate' && this.aggregateDimensions === 1) seriesOptions.type = 'bar' @@ -443,7 +476,7 @@ export default { }).open() }, chooseAggregation (opt) { - const actions = this.aggregations.map((a) => { + const actions = this.Aggregations.map((a) => { return { text: a.label, color: 'blue', @@ -482,15 +515,9 @@ export default { ] }).open() }, - updateChart () { - this.chartKey = this.$f7.utils.id() - }, openControls () { this.controlsOpened = true }, - closeControls () { - this.controlsOpened = false - }, savePage () { if (!this.$store.getters.isAdmin) return // shouldn't get here if not an admin @@ -541,45 +568,20 @@ export default { }) } }, - computed: { - titleDisplayText () { - if (!this.items || !this.items.length) return 'Analyze' - if (this.items.length === 1) return (this.items[0].label) ? this.items[0].label : this.items[0].name - return ((this.items[0].label) ? this.items[0].label : this.items[0].name) + ' + ' + (this.items.length - 1) - }, - context () { - return { - component: this.page, - analyzer: true - } - }, - page () { - try { - switch (this.coordSystem) { - case 'time': - return ChartTime.getChartPage(this) - case 'aggregate': - return ChartAggregate.getChartPage(this) - case 'calendar': - return ChartCalendar.getChartPage(this) - default: - throw new Error('Invalid coordinate system') - } - } catch (e) { - return { - component: 'oh-chart-page', - config: { - chartType: this.chartType, - period: this.period - }, - slots: { - title: [ - { component: 'oh-chart-title', config: { subtext: e, top: 'center', left: 'center' } } - ] - } - } - } - } + created () { + this.Aggregations = [ + { value: 'average', label: this.$t('analyzer.aggregations.average') }, + { value: 'sum', label: this.$t('analyzer.aggregations.sum') }, + { value: 'min', label: this.$t('analyzer.aggregations.min') }, + { value: 'max', label: this.$t('analyzer.aggregations.max') }, + { value: 'first', label: this.$t('analyzer.aggregations.first') }, + { value: 'last', label: this.$t('analyzer.aggregations.last') }, + { value: 'diff_first', label: this.$t('analyzer.aggregations.diffFirst') }, + { value: 'diff_last', label: this.$t('analyzer.aggregations.diffLast') } + ] + }, + mounted () { + this.initChart() } }