Oh-repeater for multiple oh-aggregate-series

Setup, Configuration and Use Widgets
1

OH 5.1.3

I would want to create a bar chart with 1,2,3 or 4 data series. I use 2 series for testing purposes - especially to test the oh-repeater logic.

Worth noting that empty oh-aggregate-series (no item configured for it) crashes the oh-chart → no chart visible → the number of oh-aggregate-series needs to match the number of charts to be shown.

That is exactly where I would want to make use of the oh-repeater in order to generate the exact number of oh-aggregate-series blocks in the widget.

I’ve got a working array for testing the oh-repeater:

in: [ {"item":"SmartmeterMQTT_180", "label":"Label 1", "color":"blue", "service":"rrd4j"}, {"item":"SmartmeterMQTT_280", "label":"Label 2", "color":"green", "service":"rrd4j"} ]

… however, with the following code the 2 data series are not shown on the chart:

    - component: oh-chart
      config:
        chartType: year
        height: calc(100vh - var(--f7-navbar-height) - 48px - env(safe-area-inset-top) -
          env(safe-area-inset-bottom))
      slots:
        grid:
          - component: oh-chart-grid
            config:
              right: 15%
        legend:
          - component: oh-chart-legend
            config:
              bottom: 15
              orient: horizontal
              show: true
        series:

          - component: oh-repeater
            config:
              for: series
              in: [ {"item":"SmartmeterMQTT_180", "label":"Label 1", "color":"blue", "service":"rrd4j"}, {"item":"SmartmeterMQTT_280", "label":"Label 2", "color":"green", "service":"rrd4j"} ]
              fragment: true
            slots:
              default:
    
                - component: oh-aggregate-series
                  config:
                    aggregationFunction: diff_last
                    color: =loop.series.color
                    dimension1: month
                    item: =loop.series.item
                    label:
                      formatter: =v => Number.parseFloat(v.data[1]).toFixed(0).toLocaleString('de-DE')
                      position: top
                      show: true
                    markLine:
                      animation: false
                      data:
                        - type: average
                      label:
                        formatter: =v => Number.parseFloat(v.value).toFixed(0) + ' ' +
                          items[loop.series.item].unit
                        show: true
                      symbol: none
                    name: =loop.series.label
                    service: =loop.series.service
                    type: bar
        xAxis:
          - component: oh-category-axis
            config:
              categoryType: year
              monthFormat: short
              weekdayFormat: default
              name: " "
        yAxis:
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: =v => Number(v).toLocaleString('de-DE')
              name: =items[props.itemSeries1].unit

Hope that oh-repeater can be used within oh-chart to setup the desired number of oh-aggregate-series.

Ist there anything wrong with the oh-repeater?

2

There is nothing wrong with it, it just can’t be used for this scenario. oh-repeater is an oh-list and the loop will create an oh-listitem for each time through the loop.

It can’t be used in a chart as far as I know.

3

The oh-chart actually leads to a fundamentally different system (vue-chart for apache echarts) than the rest of the widget components (f7 library). Unfortunately, this means that even though the yaml looks similar, it is processed in a different way and as a result you just don’t have the general flexibility that exists in the other components. So, you can really only use the chart specific components inside a chart. You’ll never be able to use a repeater, or an oh-context etc.

You’re not the first to run up against this problem, but unfortunately I don’t believe anyone has really posed an effective solution.

4

@maxmaximax I have been able to create a bar for oh-data-series using the oh-repeater but not yet tried with oh-aggregate - As @JustinG mentioned there are pitfalls Custom Widget for Bar Chart using oh-repeater - cannot display legend it works but as you can see the legend does not display - because of how the chart module needs to get the data

The yaml there works but also its dynamic (which is wanted but the order changes as well which makes it difficult to be useful.

I am interested oh aggregate charts as well but not had the time to pursue , may try to look again soon

5

@rlkoshak @JustinG @BrettLHolmes

Thanks a lot for your replies. I was suspecting something like that. No way to create the structure of a chart in a simple manner - at least not for oh-aggregate-series.

What you made up is way beyond my yaml skills… nothing that would be mainainable by me…

6

@JustinG
One more obeservation that might be connected to limitations with echarts…

While expressions in:

              dimension1: =( {
                day:'hour',
                week:'isoWeekday',
                month:'date',
                year:'month'
                }[vars.chartoptions] ) || 'month'

… seem to work, I didn’t manage in:

              categoryType: =( {
                day:'day',
                week:'week',
                month:'month',
                year:'year'
                }[vars.chartoptions] ) || 'year'


              chartType: =vars.chartoptions || 'year'

Am I right, that expressions don’t work for these 2?

7

It possible. Originally, expressions were only parsed in a very small number of chart properties. When that was changed, I thought expressions had been enabled for all chart properties, but It’s very possible there were technical reasons to leave some properties as entirely static.