WIP

Added support for discrete items to use oh-state-series on a separate grid
BUG: Had to add this.showChart = false in updateItems in order for echarts to update the options w/o error when there are multiple unit y-axis value-series. However, with that change, when selecting additional items from the item list - it now generates a Vue rendterItem error.

Signed-off-by: Jeff James <[email protected]>

Author: jsjames

bundles/org.openhab.ui/web/src/assets/i18n/analyzer/en.json

@@ -13,6 +13,7 @@
   "analyzer.series.table.type.bar": "Bar",
   "analyzer.series.table.type.line": "Line",
   "analyzer.series.table.type.area": "Area",
+  "analyzer.series.table.type.state": "State",
   "analyzer.series.table.type.heatmap": "Heatmap",
   "analyzer.series.table.na": "N/A",
   "analyzer.coords": "Coords",

bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue

@@ -69,7 +69,8 @@
                           <f7-segmented round>
                             <f7-button v-if="!options.discrete && coordSystem === 'aggregate' && aggregateDimensions === 1" small outline style="width: 60px" :fill="options.type === 'bar'" @click="options.type = 'bar'" v-t="'analyzer.series.table.type.bar'" />
                             <f7-button v-if="!options.discrete && coordSystem !== 'calendar' && aggregateDimensions === 1" small outline style="width: 60px" :fill="options.type === 'line'" @click="options.type = 'line'" v-t="'analyzer.series.table.type.line'" />
-                            <f7-button v-if="coordSystem === 'time' || (coordSystem === 'aggregate' && aggregateDimensions === 1)" small outline style="width: 60px" :fill="options.type === 'area'" @click="options.type = 'area'" v-t="'analyzer.series.table.type.area'" />
+                            <f7-button v-if="!options.discrete && coordSystem === 'time' || (coordSystem === 'aggregate' && aggregateDimensions === 1)" small outline style="width: 60px" :fill="options.type === 'area'" @click="options.type = 'area'" v-t="'analyzer.series.table.type.area'" />
+                            <f7-button v-if="options.discrete && coordSystem === 'time' || (coordSystem === 'aggregate' && aggregateDimensions === 1)" small outline style="width: 60px" :fill="options.type === 'state'" @click="options.type = 'state'" v-t="'analyzer.series.table.type.state'" />
                             <f7-button v-if="coordSystem === 'calendar' || (coordSystem === 'aggregate' && aggregateDimensions === 2)" small fill outline style="width: 90px" v-t="'analyzer.series.table.type.heatmap'" />
                           </f7-segmented>
                         </td>
@@ -261,6 +262,7 @@ export default {
       items: null,
       seriesOptions: {},
       valueAxesOptions: {},
+      categoryAxisValues: [],
       orientation: (this.$device.desktop || this.$device.ipad) ? 'horizontal' : 'vertical',
       period: 'D',
       chartType: '',
@@ -335,9 +337,11 @@ export default {
     updateItems (itemNames) {
       this.itemNames = itemNames
       const promises = itemNames.map((n) => this.$oh.api.get('/rest/items/' + n))
+      this.showChart = false
       return Promise.all(promises).then((resp) => {
         this.$set(this, 'items', [])
         this.$set(this, 'valueAxesOptions', [])
+        this.$set(this, 'categoryAxisValues', [])
         resp.forEach((item) => {
           this.items.push(item)
 
@@ -363,6 +367,9 @@ export default {
               this.valueAxesOptions.push({ name: unit, unit, split: 'line' })
               this.$set(seriesOptions, 'valueAxisIndex', this.valueAxesOptions.length - 1)
             }
+          } else if (seriesOptions.type === 'state') {
+            this.categoryAxisValues.unshift(item.name)
+            this.$set(seriesOptions, 'yValue', this.categoryAxisValues.length - 1)
           }
         })
         this.$set(this, 'items', resp)
@@ -383,11 +390,11 @@ export default {
         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 (item.type.indexOf('Number') === 0) seriesOptions.discrete = false
+      if (item.groupType && (item.groupType.indexOf('Number') === 0)) seriesOptions.discrete = false
       if (!seriesOptions.discrete && this.coordSystem === 'aggregate' && this.aggregateDimensions === 1) seriesOptions.type = 'bar'
       if (!seriesOptions.discrete && (this.coordSystem === 'calendar' || (this.coordSystem === 'aggregate' && this.aggregateDimensions === 2))) seriesOptions.type = 'heatmap'
-      if (seriesOptions.discrete) seriesOptions.type = 'area'
+      if (seriesOptions.discrete) seriesOptions.type = 'state'
 
       this.$set(this.seriesOptions, item.name, seriesOptions)
     },

bundles/org.openhab.ui/web/src/pages/analyzer/chart-time.js

@@ -9,32 +9,47 @@ export default {
       slots: {}
     }
 
-    page.slots.grid = [{ component: 'oh-chart-grid', config: { includeLabels: true } }]
+    let valueGrid = (analyzer.valueAxesOptions.length > 0)
+    let categoryGrid = (analyzer.categoryAxisValues.length > 0)
 
-    page.slots.xAxis = [
-      {
-        component: 'oh-time-axis',
-        config: {
-          gridIndex: 0
-        }
-      }
-    ]
+    page.slots.grid = []
+    page.slots.xAxis = []
+    page.slots.yAxis = []
+    page.slots.series = []
 
-    page.slots.yAxis = analyzer.valueAxesOptions.map((a) => {
-      return {
-        component: 'oh-value-axis',
+    if (valueGrid) {
+      page.slots.grid.push({ component: 'oh-chart-grid', config: { includeLabels: true, bottom: (categoryGrid) ? '55%' : 60 } })
+      page.slots.xAxis.push({ component: 'oh-time-axis', config: { gridIndex: 0 } })
+      analyzer.valueAxesOptions.forEach((a) => {
+        page.slots.yAxis.push({
+          component: 'oh-value-axis',
+          config: {
+            gridIndex: 0,
+            name: a.name || a.unit,
+            ...(a.min && a.min !== '') && { min: parseFloat(a.min) },
+            ...(a.max && a.max !== '') && { max: parseFloat(a.max) },
+            scale: a.scale,
+            ...(a.split === 'none' || a.split === 'area' || a.split === 'area+minor') && { splitLine: { show: false } },
+            ...(a.split === 'line+minor' || a.split === 'area+minor' || a.split === 'all') && { minorTick: { show: true }, minorSplitLine: { show: true } },
+            ...(a.split === 'area' || a.split === 'line+area' || a.split === 'area+minor' || a.split === 'all') && { splitArea: { show: true } }
+          }
+        })
+      })
+    }
+
+    let categoryGridIndex = (valueGrid) ? 1 : 0
+    if (categoryGrid) {
+      page.slots.grid.push({ component: 'oh-chart-grid', config: { includeLabels: true, top: (valueGrid) ? '55%' : 60 } })
+      page.slots.xAxis.push({ component: 'oh-time-axis', config: { gridIndex: categoryGridIndex } })
+      page.slots.yAxis.push({
+        component: 'oh-category-axis',
         config: {
-          gridIndex: 0,
-          name: a.name || a.unit,
-          ...(a.min && a.min !== '') && { min: parseFloat(a.min) },
-          ...(a.max && a.max !== '') && { max: parseFloat(a.max) },
-          scale: a.scale,
-          ...(a.split === 'none' || a.split === 'area' || a.split === 'area+minor') && { splitLine: { show: false } },
-          ...(a.split === 'line+minor' || a.split === 'area+minor' || a.split === 'all') && { minorTick: { show: true }, minorSplitLine: { show: true } },
-          ...(a.split === 'area' || a.split === 'line+area' || a.split === 'area+minor' || a.split === 'all') && { splitArea: { show: true } }
+          data: analyzer.categoryAxisValues.map((itemName) => analyzer.items.find((item) => item.name === itemName).label),
+          gridIndex: categoryGridIndex
         }
-      }
-    })
+      })
+    }
+
     if (page.slots.yAxis.length === 0) {
       // add a default axis if none was found (for instance, only discrete values)
       page.slots.yAxis.push({
@@ -49,29 +64,18 @@ export default {
       const seriesOptions = analyzer.seriesOptions[item.name]
 
       if (seriesOptions.discrete) {
-        return {
-          component: 'oh-time-series',
+        let series = {
+          component: 'oh-state-series',
           config: {
-            name: seriesOptions.name,
-            gridIndex: 0,
-            xAxisIndex: 0,
-            yAxisIndex: 0,
-            type: 'line',
-            areaStyle: seriesOptions.type === 'area' ? {} : undefined
-          },
-          slots: {
-            markArea: [
-              {
-                component: 'oh-mark-area',
-                config: {
-                  name: item.name,
-                  item: item.name,
-                  silent: seriesOptions.silent
-                }
-              }
-            ]
+            item: item.name,
+            name: item.label,
+            xAxisIndex: categoryGridIndex,
+            yAxisIndex: page.slots.yAxis.length - 1,
+            yValue: seriesOptions.yValue
           }
         }
+
+        return series
       }
 
       const markLine = (seriesOptions.markers === 'avg' || seriesOptions.markers === 'all') ? {
@@ -93,7 +97,6 @@ export default {
         component: 'oh-time-series',
         config: {
           name: seriesOptions.name,
-          gridIndex: 0,
           xAxisIndex: 0,
           yAxisIndex: seriesOptions.valueAxisIndex,
           type: 'line',
@@ -129,7 +132,8 @@ export default {
       {
         component: 'oh-chart-datazoom',
         config: {
-          type: 'inside'
+          type: 'inside',
+          xAxisIndex: (categoryGrid) ? [0, 1] : 0
         }
       }
     ]