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.

My solution isn’t ideal…

uid: pm_graph_widget
tags: []
props:
  parameters:
    - description: Header of the cell
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Units in graph
      label: Units
      name: graphunit
      required: false
      type: TEXT
    - description: Icon on top of the card
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      label: Graph Item1
      name: graphItem1
      required: true
      type: TEXT
    - context: item
      label: Graph Item2
      name: graphItem2
      required: false
      type: TEXT
    - context: item
      label: Graph Item3
      name: graphItem3
      required: false
      type: TEXT
    - context: item
      label: Graph Item4
      name: graphItem4
      required: false
      type: TEXT
    - context: item
      label: Graph Item5
      name: graphItem5
      required: false
      type: TEXT
    - context: item
      label: Graph Item6
      name: graphItem6
      required: false
      type: TEXT
    - context: item
      label: Graph Item7
      name: graphItem7
      required: false
      type: TEXT
    - context: item
      label: Graph Item8
      name: graphItem8
      required: false
      type: TEXT
    - context: item
      label: Graph Item9
      name: graphItem9
      required: false
      type: TEXT
    - context: item
      label: Graph Item10
      name: graphItem10
      required: false
      type: TEXT
timestamp: Mar 8, 2023, 11:06:49 AM
component: f7-card
config: {}
slots:
  default:
    - component: f7-card-header
      config: {}
      slots:
        default:
          - component: oh-icon
            config:
              icon: =props.icon
          - component: f7-block
            slots:
              default:
                - component: Label
                  config:
                    text: =props.header
    - component: f7-card-content
      config:
        style:
          height: auto
      slots:
        default:
          - component: oh-chart
            config:
              chartType: ""
              label: =props.header
              period: W
            slots:
              dataZoom:
                - component: oh-chart-datazoom
                  config:
                    type: inside
              grid:
                - component: oh-chart-grid
                  config:
                    includeLabels: true
              legend:
                - component: oh-chart-legend
                  config:
                    bottom: 3
                    type: scroll
              series:
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem1
                    name: =props.graphItem1
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem2
                    name: =props.graphItem2
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem3
                    name: =props.graphItem3
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem4
                    name: =props.graphItem4
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem5
                    name: =props.graphItem5
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem6
                    name: =props.graphItem6
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem7
                    name: =props.graphItem7
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem8
                    name: =props.graphItem8
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem9
                    name: =props.graphItem9
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
                - component: oh-time-series
                  config:
                    gridIndex: 0
                    item: =props.graphItem10
                    name: =props.graphItem10
                    type: line
                    xAxisIndex: 0
                    yAxisIndex: 0
              toolbox:
                - component: oh-chart-toolbox
                  config:
                    show: true
              tooltip:
                - component: oh-chart-tooltip
                  config:
                    confine: true
                    smartFormatter: true
              xAxis:
                - component: oh-time-axis
                  config:
                    gridIndex: 0
              yAxis:
                - component: oh-value-axis
                  config:
                    gridIndex: 0
                    name: =props.graphunit

I tried find solution like group.members[index], but it seems to don’t provide data.
Isn’t possible to create rule, who push data etc. after click on button?