Group chart widget with oh-repeater

I’m trying to create a widget which shows a chart with a line for each item in a group. Unfortunately the chart is always empty. This is the code:

uid: widget_groupchart
tags: []
props:
  parameters:
    - description: Widget titel
      label: title
      name: title
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 1, 2022, 9:51:05 PM
component: oh-chart
config:
  label: =props.title
  period: D
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        scale: true
  series:
    - component: oh-repeater
      config:
        for: item
        sourceType: itemsInGroup
        groupItem: =props.item
      slots:
        default:
          - component: oh-time-series
            config:
              name: =loop.item.label
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              service: jdbc
              item: =loop.item.name

The chart is working with one item (without oh-repeater) and the oh-repeater is working with oh-list-card but combining oh-repeater with oh-chart does not work.

Have you tried

item: =[loop.item.name]

Same result :frowning:
When should I use []? I’ve seen this: items[loop.item.name] but not without the “items” in front.

Worth a try - it works on my repeater, hence my suggestion :wink:

I’m far from an expert but I don’t think this will work. The oh-repeater inserts widgets into the default slot but you need to work with the series slot of the chart widget based on what I see when I generate a chart and look at the YAML.

Interesting, I don’t think I’ve seen anyone attempt this yet. I am also skeptical that it will work, the chart family of components are just defined so differently from the others. I can’t test at the moment, but the one thing I would try first would be to add

fragment: true

to the repeater’s config. This will strip away an intervening tag that the repeater wraps around its children by default and may allow the replicated series component to be property visible to the axis component (low odds).

The fragment: true did not help.
I don’t understand the comment about the default slot. If I put the oh-repeater in the series slot, why should the oh-repeater put something in the default slot? But then I haven’t really understood how the oh-repeater really works. Is there a in depth documentation somewhere?

Because that’s what the docs for oh_repeater says is what it does.

Iterate over an array and repeat the children components in the default slot

I think that’s just ambiguous language. I think that’s supposed to be: “repeat the children components in the oh-repeaters default slot, placing those components in the slot the oh-repeater is in.”

Is there any way to debug widget? Somehow see what is made out of the YAML to check what the oh-repeater does? Or do we need a developer to answer that question?

You can always see the resultant widget construction by using the ‘inspect’ feature of your web browser.

What’s at issue here, though is that the chart is not like the other standard widgets. The apache echarts library doesn’t build the entire chart out of standard elements, it creates a single canvas element and then draws the entire chart using the canvas. So, the chart components in OH are not processed the way the standard components are; the chart properties are all passed directly to echart library. Some conversion could almost certainly be done (I have no idea whether this is simple or extremely difficult) so that something like an oh-repeater could also be parsed into the echarts input, but it just hasn’t been done yet it seems.

So no easy solution here :frowning: I had hoped to find a way to make a chart with all members of a group but there seems to be no way.