Getting the data in items is not a problem but I would like to show the results in a widget.
Since I am totally incompetent in YAML (or whatever the name of language for the widgets is called) I ask for help.
My first idea was to create a list with 12 rows, one for each month and then use labels with width that is proportional to the energy produced. However I do not get how to make the width of an object flexible. I tried searching in the forum, but all of the examples I found were with fixed width.
Basically I would want to have something like this:
One of the fundamental concepts of the custom widget system (and one of the least intuitive, unfortunately), is the difference between a value and an expression. The way the custom widget yaml system is built, any of the values in the yaml are treated simply as string or number types. The style property of a component is (for nearly all the components) just passed along to the final element as the css properties for that element. So, in this case when you use:
You are sending the whole calc(100% -items[props.item].state/100/props.range) string as the css propety. Css, of course, has no idea what the OH specific pieces items[props.item].state and props.range mean and just considers your value gibberish.
If your goal is to build a bar graph of these values, there are also several other options:
The chart system in oh uses allows you to incorporate apache e-charts into widgets so you could build a bar graph in that with your data and have that as a widget. The method for creating charts isn’t fully documented yet, so you’ll have to use the e-charts docs and find examples on the forum to work from.
Many users who want advanced charting capabilities use an external service such as Grafana and then import that graphs into OH.