[Main UI] echarts gauge and pie POC

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.

BobMiles · January 31, 2021, 4:47pm

Hi,

I have tried this, and at least on my Android 9 Tablet in Chrome it did not work. I cleared the browser cache and went to About->Reload on openhab (not sure if that’s exactly how it’s called in english).

Anotther question:

Could it be that the period expression is not yet evaluated? It will only take hardcoded values for now - at least for me:

slots:
  content:
    - component: oh-chart
      config:
        period: =props.period

crnjan · January 31, 2021, 7:38pm

For me clearing browser cache and invoking “purge caches and refresh” did the trick (not sure if both are actually needed).

In my PR above only properties under oh-time-series were added, period expression is still not evaluated …

BobMiles · January 31, 2021, 8:16pm

Interesting, I don’t have that button…
Is it only there using myopenhab.org?

ysc · February 1, 2021, 8:33am

Only if you’re using HTTPS and the service worker (that’s in charge of caching) was registered. It cannot register if you’re not on a so-called “secure origin”. On myopenhab.org these conditions are satisfied so you get the caching and other features (like the ability to install as a PWA from Chrome or Firefox, and use speech recognition in the HABot chat box).

BobMiles · February 1, 2021, 12:02pm

So do I understand right, that in any other case there is nothing cached except for what is in my browser cache?

RGroll · February 1, 2021, 12:16pm

Oh, sry - forgot to mention that. Tried it with chrome.
It’s working flawlessly with firefox and the OH beta app.

Accessing the item property with an expression is working without problems now - on desktop as well as on mobile. I’m on snapshot build #2172.

ysc · February 1, 2021, 2:51pm

Yes, the caching when in PWA mode (with the service worker) is much more aggressive and will basically cache the entire application (JS, CSS, fonts) so the network will only be used for the API calls and eventual images.

Sebastian_Neu · February 10, 2021, 10:49am

Hi, is it possible to disable the mouse over effect in a graph? I don’t want to get always the dashed line with values displayed when scrolling with my hand. See screenshot: