[OH4] oh-time-series with eCharts and props

Setup, Configuration and Use Widgets
, ,
1

Hi,

I’m trying to accomplish a widget which will show a couple of time series in a chart, basically temperatures.

What I’m failing to get is the usage of props in the charts definitions. Anyone any idea?

The props are never being picked up and the chart is left empty.

        series:
          - component: oh-time-series
            config:
              gridIndex: 0
              item: =props.Item_1
              name: =props.name_1
              type: line
              xAxisIndex: 0
              yAxisIndex: 0

grafik
grafik1898×736 34.3 KB

If I pick the item directly, all works ok.

        series:
          - component: oh-time-series
            config:
              gridIndex: 0
              item: Thermo_Schlafzimmer_Temperatur
              name: Schlafzimmer
              type: line
              xAxisIndex: 0
              yAxisIndex: 0

grafik
grafik1876×726 77.6 KB

Complete code:

uid: Test_Widget
tags: []
props:
  parameters:
    - context: item
      description: Temperatur 1
      label: Item_1
      name: Temperatur 1
      required: true
      type: TEXT
    - label: name_1
      name: Bezeichnung Temperatur 1
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Nov 25, 2023, 12:01:53 PM
component: f7-card
config:
  style:
    --font-size: 16px
    --line-height: 20px
    --text-color: rgba(255,255,255,1)
    background-color: rgba(6,25,36)
    border-radius: 20px
    color: var(--text-color)
    height: 360px
  title: Temperaturen
slots:
  default:
    - component: oh-chart
      config:
        options:
          backgroundColor: rgb(6,25,36)
          color:
            - "#56a54b"
            - "#e02f43"
            - "#fcba03"
            - "#1e5ec0"
        period: M
        periodVisible: false
      slots:
        grid:
          - component: oh-chart-grid
            config: {}
        legend:
          - component: oh-chart-legend
            config:
              bottom: "8"
              icon: circle
              orient: horizontal
              show: true
              textStyle:
                color: "#FFFFFF"
        series:
          - component: oh-time-series
            config:
              gridIndex: 0
              item: =props.Item_1
              name: =props.name_1
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
        tooltip:
          - component: oh-chart-tooltip
            config:
              orient: vertical
              show: true
              trigger: axis
              type: cross
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} °C"
              gridIndex: 0
              splitLine:
                lineStyle:
                  color: "#6E7079"
2

Hi,

you mixed label and name in your props parameters definition.

name: Item_1

item: =props.Item_1

Replace your props parameters with the following, this will work.

props:
  parameters:
    - context: item
      description: Temperatur 1
      label: item
      name: Item_1
      required: true
      type: TEXT
    - label: Bezeichnung
      description: Bezeichnung Temperatur 1
      name: name_1
      required: true
      type: TEXT
3

Thank you!
I did not catch that one… :man_facepalming:t2: