uid: widget_with_chart
tags: []
props:
  parameters:
    - context: item
      description: MAINS Power Item
      label: MAINS Power Item
      name: mainsPower
      required: true
      type: TEXT
    - context: item
      description: UPS Power Item
      label: UPS Power Item
      name: upsPower
      required: true
      type: TEXT
    - context: item
      description: UPS Battery Item
      label: UPS Battery Item
      name: upsBatteryLevel
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jun 10, 2021, 2:26:23 PM
component: f7-card
config:
  class:
    - padding-bottom
  style:
    --f7-popover-width: 760px
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: =props.mainsPower
                    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: =props.upsPower
                    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[props.upsBatteryLevel].state === "Charging") ? "charge_battery" : (items[props.upsBatteryLevel].state === "Idle") ? "full_battery" : (items[props.upsBatteryLevel].state === "Running") ? "middle_battery" : (items[props.upsBatteryLevel].state === "Critical") ? "empty_battery" : "error"'
                          width: 40
                          class:
                            - margin-horizontal
                            - float-left
                      - component: Label
                        config:
                          text: =(items[props.upsBatteryLevel].state)
                          style:
                            font-size: 20px
                            font-weight: 500
                            line-height: 35px
                            text-align: left
                            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: =props.mainsPower
                      - component: oh-time-series
                        config:
                          name: UPS
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: blue
                          item: =props.upsPower
                    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