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:
The semantic model is not fully up-to-date - so that’s not how we use our energy . 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: