[Main UI] echarts gauge and pie POC

20

Hey again @crnjan

Thanks for your quick answer and the easy trick. :wink:

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.

    image
    image808×298 21 KB

    image
    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. :slight_smile:

Thank you!