uid: frs_Air_Quality_list_item
tags:
  - air Quality
  - list
  - weather
props:
  parameters:
    - default: Air Quality
      description: Air Quality Title
      label: Title
      name: AirQualityTitle
      required: false
      type: TEXT
      groupName: header
    - default: f7:wind
      description: AQI Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconIndiceAqi
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Indice AQI Item
      label: Item
      name: IndiceAQIItem
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Poluant dominent Item
      label: Item
      name: PoluantdominentItem
      required: false
      type: TEXT
      groupName: header
    - description: Hide Gauges
      label: hide
      name: HideGauges
      required: false
      type: BOOLEAN
      groupName: gauge
    - default: AQI
      description: Gauge Title
      label: Item
      name: GaugeTitleItem
      required: false
      type: TEXT
      groupName: gauge
    - default: Poluant dominent
      description: Poluant dominent Title
      label: Item
      name: PoluantdominentTitleItem
      required: false
      type: TEXT
      groupName: gauge
    - description: Hide label-item No2
      label: Hide
      name: HideNo2
      required: false
      type: BOOLEAN
      groupName: no2
    - default: NO2
      description: No2 Title
      label: Title
      name: No2Title
      required: false
      type: TEXT
      groupName: no2
    - default: f7:circle_fill
      description: No2 Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconNo2
      required: false
      type: TEXT
      groupName: no2
    - context: item
      description: No2 Value item
      label: Item
      name: No2MeasureItem
      required: false
      type: TEXT
      groupName: no2
    - context: item
      description: No2 Alert Level item
      label: Item
      name: No2IndexItem
      required: false
      type: TEXT
      groupName: no2
    - description: Hide label-item O3
      label: Hide
      name: HideO3
      required: false
      type: BOOLEAN
      groupName: O3
    - default: O3
      description: O3 Title
      label: Title
      name: O3Title
      required: false
      type: TEXT
      groupName: O3
    - default: f7:circle_fill
      description: O3 Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconO3
      required: false
      type: TEXT
      groupName: O3
    - context: item
      description: O3 Value item
      label: item
      name: O3MeasureItem
      required: false
      type: TEXT
      groupName: O3
    - context: item
      description: O3 Alert Level item
      label: item
      name: O3IndexItem
      required: false
      type: TEXT
      groupName: O3
    - description: Hide label-item PM10
      label: Hide
      name: HidePm10
      required: false
      type: BOOLEAN
      groupName: pm10
    - default: PM10
      description: PM10 Title
      label: Title
      name: PM10Title
      required: false
      type: TEXT
      groupName: pm10
    - default: f7:circle_fill
      description: PM10 Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconPM10
      required: false
      type: TEXT
      groupName: pm10
    - context: item
      description: PM10 Value item
      label: item
      name: PM10MeasureItem
      required: false
      type: TEXT
      groupName: pm10
    - context: item
      description: PM10 Alert Level item
      label: item
      name: PM10IndexItem
      required: false
      type: TEXT
      groupName: pm10
    - description: Hide label-item PM2.5
      label: Hide
      name: HidePm25
      required: false
      type: BOOLEAN
      groupName: pm25
    - default: PM2.5
      description: PM2.5 Title
      label: Title
      name: PM25Title
      required: false
      type: TEXT
      groupName: pm25
    - default: f7:circle_fill
      description: PM2.5 Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconPM25
      required: false
      type: TEXT
      groupName: pm25
    - context: item
      description: PM2.5 Value item
      label: item
      name: PM25MeasureItem
      required: false
      type: TEXT
      groupName: pm25
    - context: item
      description: PM2.5 Alert Level item
      label: item
      name: PM25IndexItem
      required: false
      type: TEXT
      groupName: pm25
  parameterGroups:
    - name: header
      label: Header
    - name: gauge
      label: Gauge
    - name: no2
      label: No2
    - name: O3
      label: O3
    - name: pm10
      label: PM10
    - name: pm25
      label: PM2.5
timestamp: Dec 17, 2023, 11:02:14 PM
component: oh-list-item
config:
  accordionList: true
  after: =@props.IndiceAQIItem
  icon: =props.IconIndiceAqi
  iconColor: '=(Number.parseFloat(@@props.IndiceAQIItem) == "0") ? "green" : (Number.parseFloat(@@props.IndiceAQIItem) == "1") ? "yellow" : (Number.parseFloat(@@props.IndiceAQIItem) == "2") ? "orange" : (Number.parseFloat(@@props.IndiceAQIItem) == "3") ? "red" : (Number.parseFloat(@@props.IndiceAQIItem) == "4") ? "purple" : (Number.parseFloat(@@props.IndiceAQIItem) == "5") ? "maroon" : "gray"'
  mediaList: true
  style:
    --f7-list-item-after-font-size: 16px
    --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
  subtitle: '=props.PoluantdominentItem ? @props.PoluantdominentItem : ""'
  title: =props.AirQualityTitle
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
        style:
          background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247, 247, 247)'"
      slots:
        default:
          - component: f7-block
            config:
              visible: =!props.HideGauges
              style:
                margin: 0px
                padding: 10px
            slots:
              default:
                - component: oh-chart
                  config:
                    options:
                      backgroundColor: transparent
                  slots:
                    series:
                      - component: oh-data-series
                        config:
                          axisLabel:
                            show: false
                          axisLine:
                            lineStyle:
                              color:
                                - - 0.17
                                  - "#4cd964"
                                - - 0.33
                                  - "#ffcc00"
                                - - 0.5
                                  - "#ff9500"
                                - - 0.67
                                  - "#ff3b30"
                                - - 0.84
                                  - "#9c27b0"
                                - - 1
                                  - maroon
                              width: 20
                          axisTick:
                            show: false
                          data:
                            - name: =props.GaugeTitleItem
                              value: =0.5 + Number.parseFloat(@@props.IndiceAQIItem)
                          detail:
                            fontSize: 20
                            formatter: =@props.IndiceAQIItem
                            offsetCenter:
                              - 0
                              - 30%
                            valueAnimation: true
                          itemStyle:
                            borderCap: round
                            borderJoin: miter
                          max: 6
                          min: 0
                          pointer:
                            icon: path://M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2
                            itemStyle:
                              color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
                              shadowBlur: 6
                              shadowColor: "=themeOptions.dark === 'dark' ? 'black' : 'white'"
                            length: 18%
                            offsetCenter:
                              - 0
                              - -83%
                            width: 22px
                          radius: 82%
                          splitLine:
                            distance: 0
                            length: 0
                            show: false
                          splitNumber: 6
                          title:
                            fontSize: 26
                            offsetCenter:
                              - 0
                              - -35%
                          type: gauge
                          startAngle: 180
                          endAngle: 0
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                    style:
                      margin-top: -100px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            background: rgba(233, 196, 106, 0)
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  font-size: 16px
                                  font-weight: 500
                                  padding-bottom: 0px
                                text: =props.PoluantdominentTitleItem
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            background: rgba(233, 196, 106, 0)
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  font-size: 16px
                                  font-weight: 400
                                  padding-bottom: 0px
                                text: '=props.PoluantdominentItem ? @props.PoluantdominentItem : ""'
          - component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerChartType: month
              actionAnalyzerCoordSystem: aggregate
              actionAnalyzerItems: =[props.No2MeasureItem]
              icon: =props.IconNo2
              iconColor: '=(Number.parseFloat(@@props.No2IndexItem) == "0") ? "green" : (Number.parseFloat(@@props.No2IndexItem) == "1") ? "yellow" : (Number.parseFloat(@@props.No2IndexItem) == "2") ? "orange" : (Number.parseFloat(@@props.No2IndexItem) == "3") ? "red" : (Number.parseFloat(@@props.No2IndexItem) == "4") ? "purple" : (Number.parseFloat(@@props.No2IndexItem) == "5") ? "maroon" : "gray"'
              item: =props.No2IndexItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: =@props.No2MeasureItem
              title: =props.No2Title
              visible: =!props.HideNo2
          - component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerChartType: month
              actionAnalyzerCoordSystem: aggregate
              actionAnalyzerItems: =[props.O3MeasureItem]
              icon: =props.IconO3
              iconColor: '=(Number.parseFloat(@@props.O3IndexItem) == "0") ? "green" : (Number.parseFloat(@@props.O3IndexItem) == "1") ? "yellow" : (Number.parseFloat(@@props.O3IndexItem) == "2") ? "orange" : (Number.parseFloat(@@props.O3IndexItem) == "3") ? "red" : (Number.parseFloat(@@props.O3IndexItem) == "4") ? "purple" : (Number.parseFloat(@@props.O3IndexItem) == "5") ? "maroon" : "gray"'
              item: =props.O3IndexItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: =@props.O3MeasureItem
              title: =props.O3Title
              visible: =!props.HideO3
          - component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerChartType: month
              actionAnalyzerCoordSystem: aggregate
              actionAnalyzerItems: =[props.PM10MeasureItem]
              icon: =props.IconPM10
              iconColor: '=(Number.parseFloat(@@props.PM10IndexItem) == "0") ? "green" : (Number.parseFloat(@@props.PM10IndexItem) == "1") ? "yellow" : (Number.parseFloat(@@props.PM10IndexItem) == "2") ? "orange" : (Number.parseFloat(@@props.PM10IndexItem) == "3") ? "red" : (Number.parseFloat(@@props.PM10IndexItem) == "4") ? "purple" : (Number.parseFloat(@@props.PM10IndexItem) == "5") ? "maroon" : "gray"'
              item: =props.PM10IndexItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: =@props.PM10MeasureItem
              title: =props.PM10Title
              visible: =!props.HidePm10
          - component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerChartType: month
              actionAnalyzerCoordSystem: aggregate
              actionAnalyzerItems: =[props.PM25MeasureItem]
              icon: =props.IconPM25
              iconColor: '=(Number.parseFloat(@@props.PM25IndexItem) == "0") ? "green" : (Number.parseFloat(@@props.PM25IndexItem) == "1") ? "yellow" : (Number.parseFloat(@@props.PM25IndexItem) == "2") ? "orange" : (Number.parseFloat(@@props.PM25IndexItem) == "3") ? "red" : (Number.parseFloat(@@props.PM25IndexItem) == "4") ? "purple" : (Number.parseFloat(@@props.PM25IndexItem) == "5") ? "maroon" : "gray"'
              item: =props.PM25IndexItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: =@props.PM25MeasureItem
              title: =props.PM25Title
              visible: =!props.HidePm25