Leverage semantic tags to create a pie chart widget

Pie Chart using the Semantic Model

To avoid that I have to update my widgets, or the parameters they use, I started a small experiment to leverage information from the semantic model (tags), to dynamically adjust the widgets if the model is updated.

As a playground I’ve created a pie chart to display energy information:

image

The semantic model is not fully up-to-date - so that’s not how we use our energy :wink:. The nice part is that you can use additional tags (e.g. a custom hide tag, etc …) to filter, or group data. This is a simple example that by far does not show the full potential.

The widget .yaml is relatively compact:

uid: chart_pie_energy
tags:
  - chart
  - energy
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 21, 2025, 8:10:40 PM
component: f7-card
config: {}
slots:
  content:
    - component: oh-repeater
      config:
        itemTags: Energy
        sourceType: itemsWithTags
        for: energyData
        map: |
          loop.energyData_source.map( item => {
            value: items[item.name].numericState,
            name: item.label,
            tooltip: items[item.name].displayState
          })
        fragment: true
      slots:
        default:
          - component: oh-chart
            config:
              visible: =loop.energyData_idx == 0
            slots:
              series:
                - component: oh-data-series
                  config:
                    type: pie
                    roseType: radius
                    radius:
                      - 0%
                      - 80%
                    data: =loop.energyData
              tooltip:
                - component: oh-chart-tooltip
                  config:
                    show: true

As it is sometimes difficult to know the json format of the objects I use the following, additional repeater for development:

#....
slots:
  content:
    - component: oh-repeater
      config:
        visible: true
        itemTags: Energy
        sourceType: itemsWithTags
        for: energyData
        map: |
          loop.energyData_source.map( item => {
            loopItem: JSON.stringify(item),
            item: JSON.stringify(items[item.name])
          })
        fragment: true
      slots:
        default:
          - component: f7-list-item
            config:
              title: =JSON.stringify(loop.energyData)
    - component: oh-repeater
#...

After all the time I am still learning and discovering new ways to leverage the power and flexibility of this system. Kudos to the architect(s)!

As usual - that’s nothing new; just leveraging the amazing work of others; but as it combines the techniques and might give you a head start I decided to share.

with kind regards,
Patrik

I do not remember all the sources I’ve used; but added some links.


References: