Configurable chart widget with problems

Setup, Configuration and Use Beginners
, ,
1

Hello, everyone,

I’m in the process of writing an editable chart widget for the UI.
But I have the problem that certain data from the props are not taken over.
On the one screenshot you can see that instead of the value of the props.period, the code itself is displayed in the chart.

Does anyone know the problem and maybe already has a solution for it?


uid: Chart-Card
tags: []
props:
  parameters:
    - description: Chart heading
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Unit for the X axis.
      label: Unit
      name: unit
      required: true
      type: TEXT
    - default: D
      description: Period for Y axis. See openHAB doc oh-chart for options.
      label: Period
      name: period
      required: false
      type: TEXT
    - description: A name which will appear on tooltips and labels for item 1.
      label: Item name 1
      name: name1
      required: false
      type: TEXT
    - context: item
      description: The item 1 whose persisted data to display.
      label: Item 1
      name: item1
      required: true
      type: TEXT
    - default: "1"
      description: The type (Line, Bar, Heatmap, Scatter) of the series.
      label: Type item 1
      name: type1
      required: false
      type: INTEGER
      min: 1
      max: 4
    - description: A name which will appear on tooltips and labels for item 2.
      label: Item name 2
      name: name2
      required: false
      type: TEXT
    - context: item
      description: The item 2 whose persisted data to display.
      label: Item 2
      name: item2
      required: false
      type: TEXT
    - default: "1"
      description: The type (Line, Bar, Heatmap, Scatter) of the series.
      label: Type item 2
      name: type2
      required: false
      type: INTEGER
      min: 1
      max: 4
    - description: A name which will appear on tooltips and labels for item 3.
      label: Item name 3
      name: name3
      required: false
      type: TEXT
    - context: item
      description: The item 3 whose persisted data to display.
      label: Item 3
      name: item3
      required: false
      type: TEXT
    - default: "1"
      description: The type (Line, Bar, Heatmap, Scatter) of the series.
      label: Type item 3
      name: type3
      required: false
      type: INTEGER
      min: 1
      max: 4
    - description: A name which will appear on tooltips and labels for item 4.
      label: Item name 4
      name: name4
      required: false
      type: TEXT
    - context: item
      description: The item 4 whose persisted data to display.
      label: Item 4
      name: item4
      required: false
      type: TEXT
    - default: "1"
      description: The type (Line, Bar, Heatmap, Scatter) of the series.
      label: Type item 4
      name: type4
      required: false
      type: INTEGER
      min: 1
      max: 4
    - description: A name which will appear on tooltips and labels for item 5.
      label: Item name 5
      name: name5
      required: false
      type: TEXT
    - context: item
      description: The item 5 whose persisted data to display.
      label: Item 5
      name: item5
      required: false
      type: TEXT
    - default: "1"
      description: The type (Line, Bar, Heatmap, Scatter) of the series.
      label: Type item 5
      name: type5
      required: false
      type: INTEGER
      min: 1
      max: 4
  parameterGroups: []
timestamp: Aug 2, 2022, 7:42:18 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: oh-chart
      config:
        chartType: ""
        period: =props.period
      slots:
        grid:
          - component: oh-chart-grid
            config:
              includeLabels: true
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
              name: =props.unit
          - component: oh-value-axis
            config:
              gridIndex: 0
        series:
          - component: oh-time-series
            config:
              name: =props.name1
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: =props.type1
              item: =props.item1
          - component: oh-time-series
            config:
              name: =props.name2
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: =props.type2
              item: =props.item2
          - component: oh-time-series
            config:
              name: =props.name3
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: =props.type3
              item: =props.item3
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              smartFormatter: true
        legend:
          - component: oh-chart-legend
            config:
              bottom: 3
              type: scroll
        dataZoom:
          - component: oh-chart-datazoom
            config:
              type: inside

I have one additional question. Is it now possible to expand the props dynamically (repeat/loop)?

Best regards,
Björn

  • Platform information:
    • Hardware: Raspberry Pi 4
    • OS: Raspbian GNU/Linux 11 (bullseye)
    • Java Runtime Environment: openjdk version 1.8.0_312
    • openHAB version: openHAB 3.3.0 - Release Build
2

Have you tried putting it in quotes? I’ve needed to do that on occasion when creating custom widgets like this. If that doesn’t work I’ve no ideas.

3

The chart components are slightly different than the other components since they are wrappers for eCharts and not f7 components. As I understand it, in the chart widgets, not all of the property values are passed through the expression parser. So there are some places, apparently period is one of them, where you cannot yet use expressions. You will likely have to submit a feature request on the webUI github page to get that resolved.

I’m not sure I fully understand what you’re asking here. There are oh-repeater components which give you limited ability to define and work with arrays with a loop-like architecture.

If you mean to expand an array within a single property expression, then the options are very limited. The expression parser is not a full javascript interpreter so only some common operations and methods are available. With arrays you have access to all the basic js array methods but there is one big caveat: most of those methods (e.g., map) require a function as a parameter and there is no way to define function with the current expression parser setup (there is a function add-on that could be installed. I’ve never asked, but I suspect that the devs are leaving this function add-on out intentionally for both performance and security reasons). That said, any array method that doesn’t require a function (e.g., join) will work in the expressions.

1 Like
4

Hi Rich and Justin,
thanks for your help. That the parser doesn’t work at the points seems logical to me (@Rich I had already thought about and tried the quotation marks etc.).
Then I have to take a look at it with the feature request on Github.
Thank you both.

I know oh-repeater but I don’t think it can be used for props: parameters:.?.
My idea or wish was to dynamically change the number of siries (items) under “set props” of the widget, i.e. to expand the input fields (item selection) accordingly.
As you can see from my code, I added a fixed maximum number…dynamic would be nicer.

5

I don’t think there’s currently a way to do that. Because they are different systems, you can’t put an oh-repeater as a child of the oh-chart components (so you can’t have a repeater produce an array of time-series for you), and the time series item property can only be a single item, not an array.

With a lot of trial and error (and patience) you might be able to to get approximately the effect you want by using an oh-repeater to simply create a dynamic number of charts and overlay them on top of each other. Your tooltip and datazoom probably won’t work in that case as they’ll only apply to one of the charts, but you could achieve something that at least looks the way you want it to.

6

Is there a trick to overrun this? Passing items to charts do work in some cases, like:

                    series:
                      - component: oh-time-series
                        config:
                          gridIndex: 0
                          item: =props.temp_item
                          name: Temperature
                          type: line
                          visible: "=props.temp_item ? true : false"
                          xAxisIndex: 0
                          yAxisIndex: 0

But it doesn’t work in a very similar case:

                - component: oh-time-series
                  config:
                    
                    gridIndex: 0
                    item: =props.person
                    name: =props.title
                    type: bar
                    xAxisIndex: 0
                    yAxisIndex: 0
                  slots:
                      markArea:
                        - component: oh-mark-area
                          config:
                            name: =props.person
                            item: =props.person

To markArea name: and item: fields are passed literally as a string “=props.person”.

7

Nope, alas. There are just still places in the chart components that don’t use the expression parser so you can only use static property values. I guess that mark areas are still one of those places.

8

Is there any possibility to do this on ones own? I have the same issues, that a lot of chart-elements do not understand expressions.

Would be very helpful if this get solved, because otherwise I would have to make a lot of widgets of the exact same type with only one item in difference.

Where can I find these feature requests or code on Github?

Thanks.

9

You might want to search around the open issues first. It’s quite possible there’s already an open feature request about this.

10

Thank you.