What started as a search for a way to display some sort of gauge in order to model my heat pump, ended as a journey into main ui guts 
Long story short, after some digging it turned out echarts already include gauge - it took a while to get my head around the codebase, but finally was able to add support for a gauge:
uid: widget_18509ca60f
props:
parameterGroups: []
tags: []
component: f7-card
config:
title: Test Gauge
slots:
default:
- component: oh-chart
slots:
series:
- component: oh-serie
config:
type: gauge
data:
- value: 55
and result
Based on given echarts docs and examples ended with creating a custom gauge widget
id: widget_24dc21e636
tags: []
props:
parameters:
- context: item
description: The value to show
label: Item
name: item
required: true
type: TEXT
- context: item
description: The min value in range
label: MinItem
name: minItem
required: true
type: TEXT
- context: item
description: The max value in range
label: MaxItem
name: maxItem
required: true
type: TEXT
- context: number
description: Min value
label: Min
name: min
required: false
type: TEXT
- context: number
description: Max value
label: Max
name: max
required: false
type: TEXT
- context: string
description: The name to display
label: Name
name: name
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 12, 2021, 7:34:45 PM
component: f7-block
config:
class:
- no-padding
slots:
default:
- component: oh-chart
slots:
series:
- component: oh-serie
config:
type: gauge
radius: 95x%
axisLine:
lineStyle:
color:
- - 1
- "#fefefe"
width: 12
shadowBlur: 5
startAngle: -90
endAngle: -89.9999
axisLabel:
formatter: " "
splitNumber: -1
detail:
formatter: " "
- component: oh-serie
config:
type: gauge
min: =props.min || 0
max: =props.max || 100
data:
- value: =items[props.item].state.split(" ")[0]
name: =props.name
splitNumber: 6
radius: 85%
pointer:
length: 84%
title:
color: "#000"
fontSize: 16
axisLine:
lineStyle:
color:
- - =(items[props.minItem].state.split(" ")[0] - props.min - 0.01)/(props.max - props.min)
- "#1e90ff"
- - =(items[props.maxItem].state.split(" ")[0] - props.min - 0.01)/(props.max - props.min)
- lime
- - 1
- "#ff4500"
width: 18
splitLine:
length: 18
lineStyle:
color: "#000"
axisTick:
length: 10
lineStyle:
color: "#000"
axisLabel:
distance: 8
fontSize: 18
color: "#000"
detail:
backgroundColor: rgb(137,150,96)
borderWidth: 1
borderColor: "#000"
fontSize: 18
fontFace: Bold
color: "#000"
fontFamily: Courier New
and using widget to display DHW status
- component: widget:widget_24dc21e636
config:
item: gBasement_BoilerRoom_HP_DHW_Current
minItem: gBasement_BoilerRoom_HP_DHW_TargetOn
maxItem: gBasement_BoilerRoom_HP_DHW_TargetOff
min: 30
max: 60
name: DHW
renders as
Beside DHW, floor heating return and forward channels are also visible. Green color indicated (dynamic!) expected temperature range, as reported by the HP (based on outside temperature and other conditions).
After gauge was working, decided to try out pie as well - using example as a base, I was able to add a nice looking overview of how much time HP spends producing heat for DHW and how much for floor heating - and what percentage only compressor is producing heat and how much additional heat (electrical heater) is needed. Pie chart yaml as seen on above screenshot:
- component: oh-chart
slots:
series:
- component: oh-serie
config:
type: pie
radius:
- 0
- 45%
data:
- value: =(items.gBasement_BoilerRoom_HP_DHW_InOperation_HP.state.split(" ")[0] - 0) + (items.gBasement_BoilerRoom_HP_DHW_InOperation_AddHeat.state.split(" ")[0] - 0)
name: DHW
selected: true
- value: =(items.gBasement_BoilerRoom_HP_RAD_InOperation_HP.state.split(" ")[0] - 0) + (items.gBasement_BoilerRoom_HP_RAD_InOperation_AddHeat.state.split(" ")[0] - 0)
name: HEATING
label:
position: inner
- component: oh-serie
config:
type: pie
radius:
- 52%
- 70%
data:
- value: =items.gBasement_BoilerRoom_HP_DHW_InOperation_HP.state.split(" ")[0]
name: DHW HP
- value: =items.gBasement_BoilerRoom_HP_DHW_InOperation_AddHeat.state.split(" ")[0]
name: DHW ADD
- value: =items.gBasement_BoilerRoom_HP_RAD_InOperation_HP.state.split(" ")[0]
name: HEATING HP
- value: =items.gBasement_BoilerRoom_HP_RAD_InOperation_AddHeat.state.split(" ")[0]
name: HEATING ADD
label:
formatter: " {b|{b}: }{c}h {per|{d}%} "
backgroundColor: "#eee"
borderColor: "#aaa"
borderWidth: 1
borderRadius: 4
rich:
b:
fontSize: 16
lineHeight: 33
per:
color: "#eee"
backgroundColor: "#334455"
padding:
- 2
- 4
borderRadius: 2
For the curious ones, code can be found here. Would need to think about how this POC can make its way to a real PR, if it make sense to others as well ofc.
Feedback welcome!
