Generalize evaluating expressions for charts & fix diff_last aggregates

bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-calendar-axis.js

@@ -1,6 +1,8 @@
+import ComponentId from '../../component-id'
+
 export default {
-  get (component, startTime, endTime, chart, orient) {
-    let calendar = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, chartWidget, orient) {
+    let calendar = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     calendar.range = [startTime.toDate(), endTime.subtract(1, 'day').toDate()]
     if (orient) calendar.orient = orient
     calendar.dayLabel = {

bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-category-axis.js

@@ -1,6 +1,7 @@
 import * as dayjs from 'dayjs'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
 import LocaleData from 'dayjs/plugin/localeData'
+import ComponentId from '../../component-id'
 dayjs.extend(LocalizedFormat)
 dayjs.extend(LocaleData)
 
@@ -16,9 +17,9 @@ const weekdays = {
 }
 
 export default {
-  get (component, startTime, endTime, chart, inverse) {
+  get (component, startTime, endTime, chart, chartWidget, inverse) {
     const config = component.config || {}
-    let axis = Object.assign({}, config)
+    let axis = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     axis.type = 'category'
 
     axis.data = []

bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-time-axis.js

@@ -1,10 +1,11 @@
 import * as dayjs from 'dayjs'
 import IsoWeek from 'dayjs/plugin/isoWeek'
+import ComponentId from '../../component-id'
 dayjs.extend(IsoWeek)
 
 export default {
-  get (component, startTime, endTime, chart) {
-    let axis = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, chartWidget) {
+    let axis = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     axis.type = 'time'
     if (chart.config.chartType) {
       axis.min = (v) => {
@@ -18,7 +19,7 @@ export default {
       axis.max = endTime.toDate().getTime()
     }
 
-    if (!component.config.axisPointer) {
+    if (!axis.axisPointer) {
       axis.axisPointer = { show: true, label: { backgroundColor: '#2196f3' } }
     }
 

bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-value-axis.js

@@ -1,6 +1,8 @@
+import ComponentId from '../../component-id'
+
 export default {
-  get (component, startTime, endTime, chart) {
-    let axis = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, chartWidget) {
+    let axis = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     axis.type = 'value'
     return axis
   }

bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js

@@ -44,7 +44,7 @@ export default {
     let endTime = (chartType) ? this.addOrSubtractPeriod(dayjs().startOf(chartType), 1) : dayjs()
     return {
       items: {},
-      period,
+      speriod: period,
       endTime,
       orient: null
     }
@@ -53,6 +53,9 @@ export default {
     startTime () {
       return this.addOrSubtractPeriod(this.endTime, -1)
     },
+    period () {
+      return this.evaluateExpression('.period', this.speriod)
+    },
     options () {
       if (!this.config) return {}
       const chartConfig = this.config.options || {}
@@ -81,19 +84,19 @@ export default {
     },
     xAxis () {
       if (!this.context.component.slots || !this.context.component.slots.xAxis) return undefined
-      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component))
+      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this))
     },
     yAxis () {
       if (!this.context.component.slots || !this.context.component.slots.yAxis) return undefined
-      return this.context.component.slots.yAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, true)) // invert Y axis by default
+      return this.context.component.slots.yAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this, true)) // invert Y axis by default
     },
     calendar () {
       if (!this.context.component.slots || !this.context.component.slots.calendar) return undefined
-      return this.context.component.slots.calendar.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this.orient))
+      return this.context.component.slots.calendar.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this, this.orient))
     },
     singleAxis () {
       if (!this.context.component.slots || !this.context.component.slots.singleAxis) return undefined
-      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component))
+      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this))
     },
     tooltip () {
       if (!this.context.component.slots || !this.context.component.slots.tooltip) return undefined
@@ -135,6 +138,7 @@ export default {
         return Promise.resolve(getter([]))
       }
 
+      let boundary = seriesComponents[component.component].includeBoundary?.(component)
       const itemPromises = neededItems.map((neededItem) => {
         if (this.items[neededItem]) return Promise.resolve(this.items[neededItem])
         return this.$oh.api.get(`/rest/items/${neededItem}`).then((item) => {
@@ -154,7 +158,8 @@ export default {
         let query = {
           serviceId: component.config.service || undefined,
           starttime: seriesStartTime.toISOString(),
-          endtime: seriesEndTime.subtract(1, 'millisecond').toISOString()
+          endtime: seriesEndTime.subtract(1, 'millisecond').toISOString(),
+          boundary: boundary
         }
 
         return Promise.all([itemPromises[neededItem], this.$oh.api.get(url, query)])
@@ -163,7 +168,7 @@ export default {
       return Promise.all(combinedPromises).then(getter)
     },
     setPeriod (period) {
-      this.period = period
+      this.speriod = period
       this.endTime = dayjs()
     },
     setDate (date) {

bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-datazoom.js

@@ -1,5 +1,7 @@
+import ComponentId from '../../component-id'
+
 export default {
   get (component, startTime, endTime, chart, device) {
-    return component.config
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }

bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-legend.js

@@ -1,5 +1,7 @@
+import ComponentId from '../../component-id'
+
 export default {
   get (component, startTime, endTime, chart, device) {
-    return component.config
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }

bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-title.js

@@ -1,5 +1,7 @@
+import ComponentId from '../../component-id'
+
 export default {
   get (component, startTime, endTime, chart, device) {
-    return component.config
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }

bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-toolbox.js

@@ -1,3 +1,5 @@
+import ComponentId from '../../component-id'
+
 const presetFeatures = {
   saveAsImage: { title: 'Save as Image' },
   restore: { title: 'Restore' },
@@ -8,7 +10,7 @@ const presetFeatures = {
 
 export default {
   get (component, startTime, endTime, chart, device) {
-    const options = Object.assign({}, component.config)
+    const options = chart.evaluateExpression(ComponentId.get(component), component.config)
 
     if (options.presetFeatures && !options.feature) {
       options.feature = Object.assign({}, presetFeatures)

bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-tooltip.js

@@ -1,14 +1,15 @@
 import dayjs from 'dayjs'
 import 'dayjs/locale/de'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
+import ComponentId from '../../component-id'
 dayjs.extend(LocalizedFormat)
 
 export default {
-  get (component, startTime, endTime, chart, device, items) {
-    let options = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, device) {
+    let options = chart.evaluateExpression(ComponentId.get(component), component.config)
     if (options.confine === undefined) options.confine = true
 
-    if (component.config.smartFormatter) {
+    if (options.smartFormatter) {
       options.formatter = (params, ticket, callback) => {
         let tooltip = ''
         if (params.componentType === 'markArea') {

bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-visualmap.js

@@ -1,3 +1,5 @@
+import ComponentId from '../../component-id'
+
 const presetPalettes = {
   'greenred': ['#50a3ba', '#eac736', '#d94e5d'],
   'whiteblue': ['#ffffff', '#4c9ffb'],
@@ -6,11 +8,11 @@ const presetPalettes = {
 
 export default {
   get (component, startTime, endTime, chart, device) {
-    let options = Object.assign({}, component.config)
-    if (component.config.presetPalette && (!component.config.inRange || !component.config.inRange.color)) {
-      if (presetPalettes[component.config.presetPalette]) {
+    let options = chart.evaluateExpression(ComponentId.get(component), component.config)
+    if (options.presetPalette && (!options.inRange || !options.inRange.color)) {
+      if (presetPalettes[options.presetPalette]) {
         if (!options.inRange) options.inRange = {}
-        options.inRange.color = presetPalettes[component.config.presetPalette]
+        options.inRange.color = presetPalettes[options.presetPalette]
       }
     }
     if (options.min !== undefined) {

bundles/org.openhab.ui/web/src/components/widgets/chart/series/aggregators.js

@@ -20,7 +20,11 @@ export default (aggregationFunction, arr, idx, values) => {
       aggregate = idx < 1 ? NaN : arr[1][0] - values[idx - 1][1][0]
       break
     case 'diff_last':
-      aggregate = idx < 1 ? NaN : arr[1][arr[1].length - 1] - values[idx - 1][1][values[idx - 1][1].length - 1]
+      if (idx < 1) {
+        aggregate = arr[1][arr[1].length - 1] - arr[1][0]
+      } else {
+        aggregate = arr[1][arr[1].length - 1] - values[idx - 1][1][values[idx - 1][1].length - 1]
+      }
       break
     case 'average':
       aggregate = arr[1].reduce((sum, state) => sum + parseFloat(state), 0) / arr[1].length

bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-aggregate-series.js

@@ -2,6 +2,7 @@ import * as dayjs from 'dayjs'
 import IsoWeek from 'dayjs/plugin/isoWeek'
 dayjs.extend(IsoWeek)
 import aggregate from './aggregators'
+import ComponentId from '../../component-id'
 
 function dimensionFromDate (d, dimension, invert) {
   switch (dimension) {
@@ -15,21 +16,45 @@ function dimensionFromDate (d, dimension, invert) {
   }
 }
 
+function includeBoundaryFor (component) {
+  return (!component || !component.config || component.config.aggregationFunction !== 'diff_last') ? undefined : true
+}
+
 export default {
-  neededItems (component) {
+  neededItems (component, chart) {
     if (!component || !component.config || !component.config.item) return []
-    return [component.config.item]
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
+    return [series.item]
+  },
+  includeBoundary (component) {
+    return includeBoundaryFor(component)
   },
   get (component, points, startTime, endTime, chart) {
-    let dimension1 = component.config.dimension1
-    let dimension2 = component.config.dimension2
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
+    let dimension1 = series.dimension1
+    let dimension2 = series.dimension2
+    let boundary = includeBoundaryFor(component)
+
+    const itemPoints = points.find(p => p.name === series.item).data
+
+    // we'll suppose dimension2 always more granular than dimension1
+    // e.g. if dimension1=day, dimension2 can be hour but not month
+    let groupStart = dimension2 || dimension1
+    if (groupStart === 'weekday' || groupStart === 'isoWeekday') groupStart = 'day'
+
+    if (boundary && itemPoints.length) {
+      let stime = dayjs(itemPoints[0].time)
+      let start = stime.startOf(groupStart)
+      if (!stime.isSame(start)) {
+        itemPoints.unshift({ time: start.valueOf(), state: NaN })
+      }
+      let etime = dayjs(itemPoints[itemPoints.length - 1].time)
+      if (etime.isSame(etime.endOf(groupStart))) {
+        itemPoints.splice(-1, 1)
+      }
+    }
 
-    const itemPoints = points.find(p => p.name === component.config.item).data
     const groups = itemPoints.reduce((acc, p) => {
-      // we'll suppose dimension2 always more granular than dimension1
-      // e.g. if dimension1=day, dimension2 can be hour but not month
-      let groupStart = dimension2 || dimension1
-      if (groupStart === 'weekday' || groupStart === 'isoWeekday') groupStart = 'day'
       let start = dayjs(p.time).startOf(groupStart)
       if (acc.length && acc[acc.length - 1][0].isSame(start)) {
         acc[acc.length - 1][1].push(p.state)
@@ -43,27 +68,26 @@ export default {
 
     const formatter = new Intl.NumberFormat('en', { useGrouping: false, maximumFractionDigits: 3 })
     const data = groups.map((arr, idx, groups) => {
-      const aggregationFunction = component.config.aggregationFunction || 'average'
+      const aggregationFunction = series.aggregationFunction || 'average'
       let value = aggregate(aggregationFunction, arr, idx, groups)
       if (value.toFixed) value = value.toFixed(3)
       if (dimension2) {
-        const axisX = (component.config.transpose) ? dimension2 : dimension1
-        const axisY = (component.config.transpose) ? dimension1 : dimension2
+        const axisX = (series.transpose) ? dimension2 : dimension1
+        const axisY = (series.transpose) ? dimension1 : dimension2
         return [dimensionFromDate(arr[0], axisX), dimensionFromDate(arr[0], axisY, true), formatter.format(value)]
       } else {
-        if (component.config.transpose) {
+        if (series.transpose) {
           return [formatter.format(value), dimensionFromDate(arr[0], dimension1, true)]
         } else {
           return [dimensionFromDate(arr[0], dimension1), formatter.format(value)]
         }
       }
     })
 
-    let series = Object.assign({}, component.config)
     if (!series.type) series.type = 'heatmap'
 
     if (series.type === 'scatter') {
-      const symbolSizeFactor = component.config.scatterSymbolSizeFactor || 1
+      const symbolSizeFactor = series.scatterSymbolSizeFactor || 1
       series.symbolSize = (v) => {
         return v.pop() * symbolSizeFactor
       }

bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-calendar-series.js

@@ -1,13 +1,15 @@
 import * as dayjs from 'dayjs'
 import aggregate from './aggregators'
+import ComponentId from '../../component-id'
 
 export default {
   neededItems (component) {
     if (!component || !component.config || !component.config.item) return []
     return [component.config.item]
   },
   get (component, points, startTime, endTime, chart) {
-    const itemPoints = points.find(p => p.name === component.config.item).data
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
+    const itemPoints = points.find(p => p.name === series.item).data
     const groups = itemPoints.reduce((acc, p) => {
       let day = dayjs(p.time).startOf('day')
       if (acc.length && acc[acc.length - 1][0].isSame(day)) {
@@ -22,17 +24,16 @@ export default {
 
     const formatter = new Intl.NumberFormat('en', { useGrouping: false, maximumFractionDigits: 3 })
     const data = groups.map((arr, idx, days) => {
-      const aggregationFunction = component.config.aggregationFunction || 'average'
+      const aggregationFunction = series.aggregationFunction || 'average'
       let value = aggregate(aggregationFunction, arr, idx, days)
       return [arr[0].toDate(), parseFloat(formatter.format(value))]
     })
 
-    let series = Object.assign({}, component.config)
     if (!series.type) series.type = 'heatmap'
     series.coordinateSystem = 'calendar'
 
     if (series.type === 'scatter') {
-      const symbolSizeFactor = component.config.scatterSymbolSizeFactor || 1
+      const symbolSizeFactor = series.scatterSymbolSizeFactor || 1
       series.symbolSize = (v) => {
         return v.pop() * symbolSizeFactor
       }

bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-data-series.js

@@ -6,8 +6,6 @@ export default {
   },
   get (component, points, startTime, endTime, chart) {
     if (!component.config || typeof component.config !== 'object') return {}
-
-    const dataSeriesId = ComponentId.get(component)
-    return chart.evaluateExpression(dataSeriesId, component.config)
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }