Skip to content

Commit

Permalink
Code improvements
Browse files Browse the repository at this point in the history 
Signed-off-by: Florian Hotze <[email protected]>
  • Loading branch information
@florian-h05
florian-h05 committed Mar 29, 2024
1 parent b887627 commit cdc19e4
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 72 deletions.
2 changes: 1 addition & 1 deletion bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
144 changes: 73 additions & 71 deletions bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
</f7-link>
</f7-nav-right>
</f7-navbar>

<f7-toolbar bottom>
<span />
<f7-link class="right controls-link padding-right" ref="detailsLink" @click="openControls">
Expand All @@ -15,7 +16,10 @@
<f7-link v-if="coordSystem !== 'time'" color="blue" icon-f7="crop_rotate" @click="orientation = (orientation === 'horizontal') ? 'vertical' : 'horizontal'" />
<span v-else />
</f7-toolbar>

<oh-chart-page v-if="showChart" class="analyzer-chart" :class="{ 'sheet-opened': controlsOpened }" :key="chartKey" :context="context" />

<!-- analyzer controls -->
<f7-sheet class="analyzer-controls" :backdrop="false" :close-on-escape="true" :opened="controlsOpened" @sheet:closed="controlsOpened = false">
<f7-page>
<f7-toolbar tabbar :bottom="true">
Expand All @@ -28,6 +32,8 @@
</f7-link>
</div>
</f7-toolbar>

<!-- series controls tab -->
<f7-block class="no-margin no-padding" v-show="controlsTab === 'series'">
<f7-row>
<f7-col :width="100" />
Expand Down Expand Up @@ -98,6 +104,7 @@
</f7-row>
</f7-block>

<!-- coordinates control tab -->
<f7-block class="no-margin" v-show="controlsTab === 'coords'">
<f7-row>
<f7-col :width="100" :medium="50" class="margin-bottom">
Expand Down Expand Up @@ -133,6 +140,7 @@
</f7-row>
</f7-block>

<!-- ranges control tab -->
<f7-block class="no-margin no-padding" v-show="controlsTab === 'ranges'">
<f7-row v-if="(coordSystem === 'aggregate' && aggregateDimensions === 2) || coordSystem === 'calendar'">
<f7-col :width="100" :medium="50">
Expand Down Expand Up @@ -267,42 +275,60 @@ 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
this.updateItems(this.$f7route.query.items.split(',')).then(() => {
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
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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()
}
}
</script>

0 comments on commit cdc19e4

Please sign in to comment.