[Main UI] echarts gauge and pie POC

Tags: #<Tag:0x00007efecf5ea630>

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 :slight_smile:

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

:partying_face:

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!

5 Likes

Really appreciate to see a PR for this great poc. :+1:

Really cool @crnjan!
I didn’t want to add all ECharts modules at first because they’re quite heavy, but at least I was on the fence on the gauge, pies I saw less use of them at first.
But the charts code is not loaded until you have to display a chart page, so if there’s some demand for them and you submit a PR it’ll be accepted for sure.

1 Like

Also note that ECharts 5.0 was released last month, it has a dedicated page for examples (there are more examples of gauges notably) and configuration.

openHAB includes version 4.9 so I think an upgrade down the line should be made. We’ll have to see about braking changes.

Yes, ECharts 5.0 brings quite some improvements, specially for gauges - I actually used 5.0 examples to model my (ofc with limitations since we don’t yet have 5.0).

I will try to create a PR ASAP, but since I’m new to web dev + need to find the best way to conceptually fit those pie/gauge elements in (elements that don’t need time range) - so there most certainly will be some back and forth - but lets discuss this than within PR on github.