component: oh-cell
config:
  title: Power Usage
  trendItem: ShellyEM_MAINS_Watt
slots:
  default:
    - component: f7-page
      config:
        style:
          z-index: 0
          --f7-navbar-height: 0px
          --f7-navbar-font-size: 0px
          --f7-navbar-bg-color: white
          --f7-navbar-border-color: white
          --f7-navbar-link-color: black
          --f7-navbar-text-color: black
      slots:
        default:
          - component: f7-row
            config:
              class:
                - margin-top
              style:
                top: 0px
                width: 100%
                height: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    width: 20
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-content-space-around
                  slots:
                    default:
                      - component: oh-gauge
                        config:
                          type: semicircle
                          item: ShellyEM_MAINS_Watt
                          borderColor: green
                          min: 0
                          max: 8000
                          valueTextColor: green
                          valueFontSize: 25
                          borderBgColor: gray
                          labelText: Mains
                          borderWidth: 20
                          class:
                            - margin-top
                            - margin-bottom
                      - component: oh-gauge
                        config:
                          type: semicircle
                          item: ShellyEM_UPS_Watt
                          borderColor: blue
                          min: 0
                          max: 2500
                          valueTextColor: blue
                          valueFontSize: 25
                          borderBgColor: gray
                          labelText: UPS
                          borderWidth: 25
                          class:
                            - margin-top
                            - margin-bottom
                      - component: f7-col
                        config:
                          width: 20
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: '=(items.ShellyUNI_VoltageADC_Battery_Level.state === "Charging") ? "charge_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Idle") ? "full_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Running") ? "middle_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Critical") ? "empty_battery" : "error"'
                                width: 40
                                style:
                                  position: absolute
                            - component: Label
                              config:
                                text: =(items.ShellyUNI_VoltageADC_Battery_Level.state)
                                style:
                                  font-size: 20px
                                  font-weight: 500
                                  line-height: 35px
                                  text-align: right
                                  white-space: nowrap
                - component: f7-col
                  config:
                    width: 80
                  slots:
                    default:
                      - component: oh-chart
                        config:
                          chartType: ""
                          period: 12h
                          label: Power
                        slots:
                          grid:
                            - component: oh-chart-grid
                              config:
                                containLabel: false
                          xAxis:
                            - component: oh-time-axis
                              config:
                                gridIndex: 0
                          yAxis:
                            - component: oh-value-axis
                              config:
                                gridIndex: 0
                                name: W
                                min: 0
                          series:
                            - component: oh-time-series
                              config:
                                name: Mains
                                gridIndex: 0
                                xAxisIndex: 0
                                yAxisIndex: 0
                                type: line
                                color: green
                                item: ShellyEM_MAINS_Watt
                            - component: oh-time-series
                              config:
                                name: UPS
                                gridIndex: 0
                                xAxisIndex: 0
                                yAxisIndex: 0
                                type: line
                                color: blue
                                item: ShellyEM_UPS_Watt
                          tooltip:
                            - component: oh-chart-tooltip
                              config:
                                confine: true
                                smartFormatter: true
                          legend:
                            - component: oh-chart-legend
                              config:
                                bottom: 3
                                type: scroll
                          dataZoom:
                            - component: oh-chart-datazoom
                              config:
                                type: inside