Upgrade ECharts to v5, add support for ECharts gauge & chart widget (#…

…814)

Add a oh-chart widget to add charts to layout pages; change oh-chart-page to use it.
Add a oh-data-series component with the ability to add gauges representing a single value.
Upgrade ECharts to v5.0.1.

Also-by: Yannick Schaus <[email protected]>
Signed-off-by: Boris Krivonog <[email protected]>

bundles/org.openhab.ui/web/package.json

@@ -60,7 +60,7 @@
     "cronstrue": "^1.100.0",
     "dayjs": "^1.9.6",
     "dom7": "^2.1.5",
-    "echarts": "^4.9.0",
+    "echarts": "^5.0.1",
     "event-source-polyfill": "^1.0.22",
     "expression-eval": "^2.1.0",
     "framework7": "^5.7.12",

bundles/org.openhab.ui/web/src/assets/definitions/widgets/chart/index.js

@@ -375,6 +375,17 @@ export default {
     }
   },
 
+  'oh-data-series': {
+    label: 'Data Series',
+    docLink: 'https://echarts.apache.org/en/option.html#series',
+    props: {
+      parameterGroups: [],
+      parameters: [
+        seriesTypeParameter('gauge')
+      ]
+    }
+  },
+
   'oh-time-series': {
     label: 'Time Series',
     docLink: 'https://echarts.apache.org/en/option.html#series',

bundles/org.openhab.ui/web/src/assets/definitions/widgets/chart/page.js

@@ -1,33 +1,7 @@
 // definitions for the chart page & widgets
 
-import { WidgetDefinition, po } from '../helpers'
+import { WidgetDefinition } from '../helpers'
 
+import ChartParameters from '../system/chart'
 export const OhChartPageDefinition = () => new WidgetDefinition('oh-chart-page', 'Chart Page', 'Visualize historical series')
-  .params([
-    po('chartType', 'Chart Type', 'Define a fixed period for the chart, aligned at the beginning of the period, e.g. January 1st at midnight for a year chart. If not set (or set to dynamic), the length of the period will be configurable but certain combinations like aggregated series might not work', [
-      { value: '', label: 'Dynamic period' },
-      { value: 'day', label: 'Day' },
-      { value: 'isoWeek', label: 'Week (starting on Monday)' },
-      { value: 'week', label: 'Week (starting on Sunday)' },
-      { value: 'month', label: 'Month' },
-      { value: 'year', label: 'Year' }
-    ]).r(),
-    po('period', 'Initial Period', 'The initial period for the chart', [
-      { value: 'h', label: 'h' },
-      { value: '2h', label: '2h' },
-      { value: '4h', label: '4h' },
-      { value: '12h', label: '12h' },
-      { value: 'D', label: 'D' },
-      { value: '2D', label: '2D' },
-      { value: '3D', label: '3D' },
-      { value: 'W', label: 'W' },
-      { value: '2W', label: '2W' },
-      { value: 'M', label: 'M' },
-      { value: '2M', label: '2M' },
-      { value: '4M', label: '4M' },
-      { value: '6M', label: '6M' },
-      { value: 'Y', label: 'Y' }
-    ]).v((value, configuration, configDescription, parameters) => {
-      return !configuration.chartType
-    })
-  ])
+  .params(ChartParameters())