[Main UI] echarts gauge and pie POC

crnjan · January 27, 2021, 12:26pm

Hey! Glad you like it! Pie support was not added since, as also @ysc mentioned, I did not see a direct need for it so I did not include it. But in order to add support, just a single import needs to be added …

I tried adding it and it adds ~5000 bytes to resulting jar

3.998.791 bytes vs. 4.003.852 bytes

With pie included and a bit modified yaml

- component: oh-chart
  config:
    height: 450px
  slots:
    series:
      - component: oh-data-series
        config:
          type: pie
          radius:
            - 0
            - 30%
          selectedMode: single
          label:
            position: inner
            fontSize: 14
          data:
            - value: =Number.parseInt(items.gBasement_BoilerRoom_HP_DHW_InOperation_HP.state)
                +
                Number.parseInt(items.gBasement_BoilerRoom_HP_DHW_InOperation_AddHeat.state)
              selected: true
              name: DHW
            - value: =Number.parseInt(items.gBasement_BoilerRoom_HP_RAD_InOperation_HP.state)
                +
                Number.parseInt(items.gBasement_BoilerRoom_HP_RAD_InOperation_AddHeat.state)
              name: HEATING
      - component: oh-data-series
        config:
          type: pie
          radius:
            - 45%
            - 60%
          data:
            - value: =Number.parseInt(items.gBasement_BoilerRoom_HP_DHW_InOperation_HP.state)
              name: DHW HP
            - value: =Number.parseInt(items.gBasement_BoilerRoom_HP_DHW_InOperation_AddHeat.state)
              name: DHW ADD
            - value: =Number.parseInt(items.gBasement_BoilerRoom_HP_RAD_InOperation_HP.state)
              name: HEATING HP
            - value: =Number.parseInt(items.gBasement_BoilerRoom_HP_RAD_InOperation_AddHeat.state)
              name: HEATING ADD
          label:
            formatter: "  {b|{b}: }{c}h  {per|{d}%}  "
            backgroundColor: "#eee"
            borderColor: "#aaa"
            borderWidth: 1
            borderRadius: 4
            rich:
              b:
                fontSize: 16
                lineHeight: 33
              per:
                color: "#eee"
                backgroundColor: "#334455"
                padding:
                  - 3
                  - 4
                borderRadius: 4

we get

Please let me know what you think …

ysc · January 27, 2021, 12:37pm

No problem to add it as well, I checked the gauge before merging, it was also a ~10kB overhead. We don’t want to add everything but pies make sense now that we have a 1-dimensional series component.

crnjan · January 27, 2021, 12:50pm

Added PR - support for pie.

BobMiles · January 27, 2021, 1:08pm

Wow! I think pies make sense for sure!
Of course I am a data lover and can’t get enough, but I can see pie charts have a real application for their broad user community.
I’m thinking of:

Home vs. Away
Heating vs. None vs. Cooling
Energy statistics for PV
… And so on.

Thank you so much for adding it!

RGroll · January 28, 2021, 2:31am

Hey @crnjan

thanks for your work and the possibility using some powerful charting features inside of widgets.

I tried to dive into the documentation today and slowly getting a felling of the very extensive customization options. But one thing I couldn’t find a hint for in the docs is, how to get rid of the floating menu popup for the date selection in the top-right?

Is it possible to disable this element?

Thanks!

crnjan · January 28, 2021, 5:56am

Totally forgot to mention this, thank you for the reminder. There is a periodVisible parameter you can use:

- component: oh-chart
  config:
    periodVisible: false

should do the trick. If not specified, it will default to false if you use oh-data-series and true for others.

It’s a custom property, not related to ECharts so sorry for not mentioning it before.

Vradatta · January 28, 2021, 7:32am

Hi,

Is it already possible to add a “oh-chart” (line chart) component to a widget in OH 3.0.1 ?
If yes, can someone tell me how? Cause it’s not working with my thermostat widget

crnjan · January 28, 2021, 8:01am

This will be part of 3.1 release - you can use 3.1 snapshot version if you want to try it out (@BobMiles latest snapshot 2169 also includes pie support).

Vradatta · January 28, 2021, 9:41am

Thx, the Gauge are now working with the examples above.
But i don’t get the line charts working in a widget…

widget code

uid: ChartTestWidget
props:
  parameters:
    - context: item
      description: Set an item which you want to control
      label: Item
      name: item
      required: true
      type: TEXT
  parameterGroups: []
tags: []
component: f7-card
config:
  title: Test Chart
slots:
  default:
    - component: oh-chart
      slots:
        series:
          - component: oh-serie
            config:
                type: line
                areaStyle: {}
            slots:
              grid:
                - component: oh-chart-grid
                  config: {}
              xAxis:
                - component: oh-time-axis
                  config:
                    gridIndex: 0
              yAxis:
                - component: oh-value-axis
                  config:
                    gridIndex: 0
              series:
                - component: oh-time-series
                  config:
                    name: Test
                    gridIndex: 0
                    xAxisIndex: 0
                    yAxisIndex: 0
                    type: line
                    item: props.item
              legend:
                - component: oh-chart-legend
                  config:
                    show: true
                    orient: horizontal
                    bottom: "8"

widget pic

RGroll · January 28, 2021, 9:51am

Vradatta:

               - component: oh-time-series
                  config:
                    name: Test
                    gridIndex: 0
                    xAxisIndex: 0
                    yAxisIndex: 0
                    type: line
                    item: props.item

Theres the = missing at the item prop inside the ‘oh-time-series’, so no item gets selected.

crnjan · January 28, 2021, 10:07am

There are a couple of issues with your yaml (i.e. there is no oh-serie), something like below should give you a line chart:

uid: ChartTestWidget
props:
  parameters:
    - context: item
      description: Set an item which you want to control
      label: Item
      name: item
      required: true
      type: TEXT
  parameterGroups: []
tags: []
component: f7-card
config:
  title: Test Chart
slots:
  default:
    - component: oh-chart
      config:
        periodVisible: false
        height: 300px
      slots:
        grid:
          - component: oh-chart-grid
            config: {}
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
        series:
          - component: oh-time-series
            config:
              name: Outdoor
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              item: gBasement_BoilerRoom_HP_Outdoor
        legend:
          - component: oh-chart-legend
            config:
              show: true
              orient: horizontal
              bottom: "8"

There is currently one limitation - oh-time-series properties are not evaluated, meaning you cannot do

 item: =props.item

but only specifying explicit item will work. I guess it makes sense to support this use case too, specially in the context of custom widgets …

Vradatta · January 28, 2021, 10:15am

Awesome, now it’s working
Thank you very much

crnjan:

There is currently one limitation - oh-time-series properties are not evaluated, meaning you cannot do
 item: =props.item
but only specifying explicit item will work. I guess it makes sense to support this use case too, specially in the context of custom widgets …

Is there already Git issue for this? Or should i create one?

RGroll · January 28, 2021, 1:56pm

Hey again @crnjan

Thanks for your quick answer and the easy trick.

crnjan:

There is currently one limitation - oh-time-series properties are not evaluated, meaning you cannot do
 item: =props.item
but only specifying explicit item will work. I guess it makes sense to support this use case too, specially in the context of custom widgets …

This would be very helpful to have, yes!

Some things I recognized while fiddling around with the ECharts:

Line charts (and maybe other chart types) will set its own background in dark mode, instead of being transparent as in light mode - so that custom styling on the enclosing component gets hidden behind.

image808×298 21 KB

image813×302 20.7 KB
You mentioned it already, but there are some missing components & props within the inline help (like oh-chart-title, oh-chart-toolbox, oh-chart-tooltip and maybe more…)
Somehow connected to the above point - it’s hard to abstract the configuration of the charts from the ECharts example page to the YAML configuration in OH.

Understanding what is a component and what is a setting took me some time and I’m still struggling on some of them…

Example #1: Assigning a background gradient to a line-chart.
- How would I translate this part
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  to usable YAML?
  See full ECharts example (linear gradient)
```
   areaStyle: {
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
           offset: 0,
           color: 'rgb(255, 158, 68)'
       }, {
           offset: 1,
           color: 'rgb(255, 70, 131)'
       }])
   },
```
- Or is it even necessary to work with these custom echart graphic classes (if this is the right term here…)?
Example #2: Changing the timestamp-format in the tooltip.
- I couldn’t find anything obvious about changing the tooltip-timestamp to a local format (like dd. MM yyyy) in the docs - a google search brought me to this function (which don’t work):
  Example changing timestamp in a tootltip (via google search)
```
  tooltip: {
   trigger: 'axis',
   formatter: function(params) {
       params = params[0];
       var chartdate = echarts.format.formatTime('dd-MM-yyyy', params.value[0]);
       var val = '<li style="list-style:none">' + params.marker +
           params.seriesName + '&nbsp;&nbsp;' + params.value[1] + '</li>';
       return chartdate + val;
  }
},
```
- I could imagine that executing js functions isn’t allowed for security reasons?! Or did I miss anything here?
I think adding the single axis (timeline)-chart could also be helpful in the future, to achieve something like the BasicUI timeline inside the MainUI without have to fiddle something similar with f7-components:
See → Timeline for Basic UI - #15 by Mihai_Badea

The single axis type, looks like it would fit that use-case?!

Maybe you’ll find time give me some advice here or at least use this for future development of the implementation.

Thank you!

crnjan · January 28, 2021, 2:34pm

Quick feedback - ECharts set some blueish background when in dark mode and we override it with

chartConfig.backgroundColor = '#121212'

so following same paradigm … That said, you can always override it

- component: oh-chart
  config:
    options:
      backgroundColor: transparent

not sure if it would make sense to set it to transparent by default …

I also prepared a PR that should enable binding like

 item: =props.item

Will try to add feedback for other questions too …

crnjan · January 28, 2021, 4:03pm

Gradient:

        areaStyle:
          color:
            type: linear
            x: 0
            y: 0
            x2: 0
            y2: 1
            colorStops:
              - offset: 0
                color: red
              - offset: 1
                color: blue
            global: false

BobMiles · January 29, 2021, 1:14pm

Hi,
I’m on 3.1 snapshot now, too, and testing around.

One big issue for me: On my android devices the charts are not displayed, neither the chart pages nor the chart widgets.
It will show the legend, the min/max balloons, the points, but not the bars or the lines of the series.

On my PC it works just fine. Any ideas?

Thank you so much!

RGroll · January 29, 2021, 3:01pm

Similar behaviour here.

The chart isn’t displayed correctly on my Andorid device (Android 8.0.0 on Samsung Galaxy S8)

I tried to look at the used datapoints and it seems, that somehow not all of the available datapoints can be accessed on mobile (and returns null) - on Desktop all of these datapoints are available.

Mobile:

Desktop:

BobMiles · January 30, 2021, 7:53am

Hi Rainer,

can I ask you which browser you tried with? I’m on chrome, if you’re using chrome too i’ll try out some other browsers!

Edit: It is working in the Android openhab beta app…

crnjan · January 31, 2021, 12:39pm

Hey! I have been using/testing with Safari and Chrome from both laptop and iPhone and did not notice any problems - however, based on your feedback did try to access OH through https://home.myopenhab.org/... and while it renders perfectly fine on my laptop (both Safari and Chrome), it does not seem to render i.e. gauge on my iPhone (again, in both Safari and Chrome) - will check what is going on, but first will upgrade to a more recent snapshot since I’m still on #2155 … but don’t think this will change anything. Small hint, you can always upgrade MainUI using

bundle:update org.openhab.ui https://ci.openhab.org/job/openHAB-WebUI/lastSuccessfulBuild/artifact/bundles/org.openhab.ui/target/org.openhab.ui-3.1.0-SNAPSHOT.jar

Executing above command (if running OH 3.1) or upgrading to the latest snapshot should give the ability to bind oh-time-series:

item: =props.item

crnjan · January 31, 2021, 4:34pm

Just checked why gauge would not work on my iPhone - and seen that js files did not yet contain the new additions - so cleared browser cache + did a purge cache in the about section - now everything loads in both Safari and Chrome on my iPhone too.