uid: open_weather_api_air_quality
tags: []
props:
  parameters:
    - description: Label for widget
      name: label
      required: false
      type: TEXT
    - context: item
      description: OpenWeather API Air Quality root item
      label: Item
      name: api
      required: true
      type: TEXT
    - description: Icon order reverse. Good = 0 bars vs Good = 4 bars (colors unaffected)
      label: Reverse
      name: reverse
      required: false
      type: BOOLEAN
    - description: Background color
      name: bg
      default: "#efe5fa"
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 25, 2022, 8:43:39 AM
component: f7-card
config:
  expandable: false
  style:
    background-color: '= props.bg'
    border-radius: 15px
    box-shadow: '= themeOptions.dark === "light" ? "5px 5px 10px #dcdcdb" : "0"'
    margin: 6px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.3rem
                      font-weight: 700
                      padding-top: .1rem
                      width: 100%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: '= (props.label != undefined) ? props.label : "Air Quality Report"'
                      - component: f7-list-item
                        config:
                          divider: true
                          style:
                            background-color: black
                            color: black
                            height: 1px
                            margin-top: .5rem
                            width: calc(100% - 2rem)
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: Air Quality
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_AirQualityIndex"].displayState
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (items[props.api + "_AirQualityIndex"].state == 1) ? "green" 

                            : (items[props.api + "_AirQualityIndex"].state == 2) ? "gold"

                            : (items[props.api + "_AirQualityIndex"].state == 3) ? "orange" 

                            : (items[props.api + "_AirQualityIndex"].state == 4) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((items[props.api + "_AirQualityIndex"].state == 1) ? "iconify:tabler:antenna-bars-5" 

                            : (items[props.api + "_AirQualityIndex"].state == 2) ? "iconify:tabler:antenna-bars-4"

                            : (items[props.api + "_AirQualityIndex"].state == 3) ? "iconify:tabler:antenna-bars-3" 

                            : (items[props.api + "_AirQualityIndex"].state == 4) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((items[props.api + "_AirQualityIndex"].state == 1) ? "iconify:tabler:antenna-bars-1" 

                            : (items[props.api + "_AirQualityIndex"].state == 2) ? "iconify:tabler:antenna-bars-2"

                            : (items[props.api + "_AirQualityIndex"].state == 3) ? "iconify:tabler:antenna-bars-3" 

                            : (items[props.api + "_AirQualityIndex"].state == 4) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: PM2.5
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_ParticulateMatterPM25"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 12.0) ? "green" 

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 35.0) ? "gold"

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 42.0) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 50.0) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 12.0) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 35.0) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 42.0) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 50.0) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 12.0) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 35.0) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 42.0) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_ParticulateMatterPM25"].state) <= 50.0) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: PM10
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_ForecastedParticulateMatterPM10"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 54) ? "green" 

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 154) ? "gold"

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 254) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 354) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 54) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 154) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 254) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 354) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 54) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 154) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 254) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_ForecastedParticulateMatterPM10"].state) <= 354) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: CO
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_CarbonMonoxide"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 500) ? "green" 

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 900) ? "gold"

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 2500) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 3500) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 500) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 900) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 2500) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 3500) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 500) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 900) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 2500) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_CarbonMonoxide"].state) <= 3500) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: NOx
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_NitrogenMonoxide"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .01) ? "green" 

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .03) ? "gold"

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .06) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .09) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .01) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .03) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .06) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .09) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .01) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .03) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .06) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_NitrogenMonoxide"].state) <= .09) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: NO2
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_NitrogenDioxide"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 40.0) ? "green" 

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 80.0) ? "gold"

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 120.0) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 188.0) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 40.0) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 80.0) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 120.0) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 188.0) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 40.0) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 80.0) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 120.0) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_NitrogenDioxide"].state) <= 188.0) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: Ozone
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_Ozone"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_Ozone"].state) <= 46) ? "green" 

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 96) ? "gold"

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 146) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 196) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_Ozone"].state) <= 46) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 96) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 146) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 196) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_Ozone"].state) <= 46) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 96) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 146) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_Ozone"].state) <= 196) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: SO2
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_SulphurDioxide"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= .8) ? "green" 

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 1.2) ? "gold"

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 1.8) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 2.3) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= .8) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 1.2) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 1.8) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 2.3) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= .8) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 1.2) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 1.8) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_SulphurDioxide"].state) <= 2.3) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0
          - component: f7-row
            config:
              style:
                margin-top: .3rem
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      padding-top: .1rem
                      width: 30%
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: Ammonia
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      padding-top: .1rem
                      width: calc(70% - 65px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: = items[props.api + "_Ammonia"].state
                - component: f7-col
                  config:
                    style:
                      width: 60px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: >
                            = (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 500.0) ? "green" 

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 2000.0) ? "gold"

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 5000.0) ? "orange" 

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 10000.0) ? "darkorange" 

                            : "red"
                          height: 30px
                          icon: >
                            = props.reverse == false ? ((Number.parseFloat(items[props.api + "_Ammonia"].state) <= 500.0) ? "iconify:tabler:antenna-bars-5" 

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 2000.0) ? "iconify:tabler:antenna-bars-4"

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 5000.0) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 10000.0) ? "iconify:tabler:antenna-bars-2" 

                            : "iconify:tabler:antenna-bars-1")

                            : ((Number.parseFloat(items[props.api + "_Ammonia"].state) <= 500.0) ? "iconify:tabler:antenna-bars-1" 

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 2000.0) ? "iconify:tabler:antenna-bars-2"

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 5000.0) ? "iconify:tabler:antenna-bars-3" 

                            : (Number.parseFloat(items[props.api + "_Ammonia"].state) <= 10000.0) ? "iconify:tabler:antenna-bars-4" 

                            : "iconify:tabler:antenna-bars-5")
                          inline: true
                          style:
                            margin: 0
                            padding: 0