Add ability to show a badge with the air quality index (#396)

README.md

@@ -117,6 +117,7 @@ use_browser_time: false
 time_zone: null
 show_decimal: false
 apparent_sensor: sensor.real_feel_temperature
+aqi_sensor: sensor.air_quality_index
 ```
 
 ### Options
@@ -146,6 +147,7 @@ apparent_sensor: sensor.real_feel_temperature
 | time_zone             | string           | **Optional** | Uses the given [time zone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) to indicate the current date and time. If not provided, uses the time zone configured in HA                                              | `null`    |
 | show_decimal          | boolean          | **Optional** | Displays main temperature without rounding                                                                                                                                                                                        | `false`   |
 | apparent_sensor       | string           | **Optional** | ID of the apparent temperature sensor entity. It is used to show the apparent temperature based on a sensor and will only show it if value is provided.                                                                           | `''`      |
+| aqi_sensor       | string           | **Optional** | ID of the Air Quality Index sensor entity. It is used to show the AQI based on a sensor and will only show it if value is provided.                                                                           | `''`      |
 
 ## Footnotes
 

src/clock-weather-card.ts

@@ -27,7 +27,7 @@ import {
 import styles from './styles'
 import { actionHandler } from './action-handler-directive'
 import { localize } from './localize/localize'
-import { type HassEntityBase } from 'home-assistant-js-websocket'
+import { type HassEntity, type HassEntityBase } from 'home-assistant-js-websocket'
 import { extractMostOccuring, max, min, round, roundDown, roundIfNotNull, roundUp } from './utils'
 import { animatedIcons, staticIcons } from './images'
 import { version } from '../package.json'
@@ -212,6 +212,8 @@ export class ClockWeatherCard extends LitElement {
     const temp = this.config.show_decimal ? this.getCurrentTemperature() : roundIfNotNull(this.getCurrentTemperature())
     const tempUnit = weather.attributes.temperature_unit
     const apparentTemp = this.config.show_decimal ? this.getApparentTemperature() : roundIfNotNull(this.getApparentTemperature())
+    const aqi = this.getAqi()
+    const aqiColor = this.getAqiColor(aqi)
     const humidity = roundIfNotNull(this.getCurrentHumidity())
     const iconType = this.config.weather_icon_type
     const icon = this.toIcon(state, iconType, false, this.getIconAnimationKind())
@@ -220,6 +222,7 @@ export class ClockWeatherCard extends LitElement {
     const localizedHumidity = humidity !== null ? `${humidity}% ${this.localize('misc.humidity')}` : null
     const localizedApparent = apparentTemp !== null ? this.toConfiguredTempWithUnit(tempUnit, apparentTemp) : null
     const apparentString = this.localize('misc.feels-like')
+    const aqiString = this.localize('misc.aqi')
 
     return html`
       <clock-weather-card-today-left>
@@ -231,6 +234,7 @@ export class ClockWeatherCard extends LitElement {
             ${this.config.hide_clock ? weatherString : localizedTemp ? `${weatherString}, ${localizedTemp}` : weatherString}
             ${this.config.show_humidity && localizedHumidity ? html`<br>${localizedHumidity}` : ''}
             ${this.config.apparent_sensor && apparentTemp ? html`<br>${apparentString}: ${localizedApparent}` : ''}
+            ${this.config.aqi_sensor && aqi !== null ? html`<br><aqi style="background-color: ${aqiColor}">${aqi} ${aqiString}</aqi>` : ''}
           </clock-weather-card-today-right-wrap-top>
           <clock-weather-card-today-right-wrap-center>
             ${this.config.hide_clock ? localizedTemp ?? 'n/a' : this.time()}
@@ -431,7 +435,8 @@ export class ClockWeatherCard extends LitElement {
       use_browser_time: config.use_browser_time ?? false,
       time_zone: config.time_zone ?? undefined,
       show_decimal: config.show_decimal ?? false,
-      apparent_sensor: config.apparent_sensor ?? undefined
+      apparent_sensor: config.apparent_sensor ?? undefined,
+      aqi_sensor: config.aqi_sensor ?? undefined
     }
   }
 
@@ -489,6 +494,29 @@ export class ClockWeatherCard extends LitElement {
     return null
   }
 
+  private getAqi (): number | null {
+    if (this.config.aqi_sensor) {
+      const aqiSensor = this.hass.states[this.config.aqi_sensor] as HassEntity | undefined
+      const aqi = aqiSensor?.state ? parseInt(aqiSensor.state) : undefined
+      if (aqi !== undefined && !isNaN(aqi)) {
+        return aqi
+      }
+    }
+    return null
+  }
+
+  private getAqiColor (aqi: number | null): string | null {
+    if (aqi == null) {
+      return null
+    }
+    if (aqi <= 50) return 'green'
+    if (aqi <= 100) return 'yellowgreen'
+    if (aqi <= 150) return 'orange'
+    if (aqi <= 200) return 'red'
+    if (aqi <= 300) return 'purple'
+    return 'maroon'
+  }
+
   private getSun (): HassEntityBase | undefined {
     return this.hass.states[this.config.sun_entity]
   }

src/localize/languages/bg.json

@@ -26,6 +26,7 @@
     "7": "Нд"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Влажност",
     "feels-like": "Усеща се като"
   }

src/localize/languages/ca.json

@@ -26,6 +26,7 @@
     "7": "Dg."
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "humitat",
     "feels-like": "Feels like"
   }

src/localize/languages/cs.json

@@ -26,6 +26,7 @@
     "7": "Ne"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "vlhkost",
     "feels-like": "pocitová teplota"
   }

src/localize/languages/da.json

@@ -26,6 +26,7 @@
     "7": "Søn"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "fugtighed",
     "feels-like": "Feels like"
   }

src/localize/languages/de.json

@@ -26,6 +26,7 @@
     "7": "So"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Luftfeuchtigkeit",
     "feels-like": "Gefühlt"
   }

src/localize/languages/el.json

@@ -26,6 +26,7 @@
     "7": "Κυρ"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "υγρασία",
     "feels-like": "Feels like"
   }

src/localize/languages/en.json

@@ -26,6 +26,7 @@
     "7": "Sun"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Humidity",
     "feels-like": "Feels like"
   }

src/localize/languages/es.json

@@ -26,6 +26,7 @@
     "7": "Dom"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "humedad",
     "feels-like": "Feels like"
   }

src/localize/languages/et.json

@@ -26,6 +26,7 @@
     "7": "P"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "niiskus",
     "feels-like": "Feels like"
   }

src/localize/languages/fi.json

@@ -26,6 +26,7 @@
     "7": "Su"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "kosteus",
     "feels-like": "Feels like"
   }

src/localize/languages/fr.json

@@ -26,6 +26,7 @@
     "7": "Dim"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "humidité",
     "feels-like": "Feels like"
   }

src/localize/languages/he.json

@@ -26,6 +26,7 @@
     "7": "ראשון"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "לחות",
     "feels-like": "Feels like"
   }

src/localize/languages/hu.json

@@ -26,6 +26,7 @@
     "7": "V"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "páratartalom",
     "feels-like": "Feels like"
   }

src/localize/languages/id.json

@@ -26,6 +26,7 @@
     "7": "Min"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Kelembapan",
     "feels-like": "Terasa seperti"
   }

src/localize/languages/is.json

@@ -26,6 +26,7 @@
     "7": "Sun"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "raki",
     "feels-like": "Feels like"
   }

src/localize/languages/it.json

@@ -26,6 +26,7 @@
     "7": "Dom"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "umidità",
     "feels-like": "Feels like"
   }

src/localize/languages/ko.json

@@ -26,6 +26,7 @@
     "7": "일"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "습도",
     "feels-like": "Feels like"
   }

src/localize/languages/lt.json

@@ -26,6 +26,7 @@
     "7": "Sk"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "drėgmė",
     "feels-like": "Feels like"
   }

src/localize/languages/nb.json

@@ -26,6 +26,7 @@
     "7": "Søn"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "fuktighet",
     "feels-like": "Feels like"
   }

src/localize/languages/nl.json

@@ -26,6 +26,7 @@
     "7": "Zo"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Vochtigheid",
     "feels-like": "Gevoelstemperatuur"
   }

src/localize/languages/pl.json

@@ -26,6 +26,7 @@
     "7": "niedz."
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "wilgotność",
     "feels-like": "Odczuwalne"
   }

src/localize/languages/pt-br.json

@@ -26,6 +26,7 @@
     "7": "Dom"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "umidade",
     "feels-like": "Feels like"
   }

src/localize/languages/pt.json

@@ -26,6 +26,7 @@
     "7": "Dom"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "humidade",
     "feels-like": "Feels like"
   }

src/localize/languages/ro.json

@@ -26,6 +26,7 @@
     "7": "Dum"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "umiditate",
     "feels-like": "Feels like"
   }

src/localize/languages/ru.json

@@ -26,6 +26,7 @@
     "7": "Вс"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "влажность",
     "feels-like": "Feels like"
   }

src/localize/languages/sk.json

@@ -26,6 +26,7 @@
     "7": "Ned"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "vlhkosť",
     "feels-like": "pocitová teplota"
   }

src/localize/languages/sl.json

@@ -26,6 +26,7 @@
     "7": "Ned"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "vlažnost",
     "feels-like": "Feels like"
   }

src/localize/languages/sr.json

@@ -26,6 +26,7 @@
     "7": "Нед"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Влажност",
     "feels-like": "Feels like"
   }

src/localize/languages/srlatn.json

@@ -26,6 +26,7 @@
     "7": "Ned"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "Vlažnost",
     "feels-like": "Feels like"
   }

src/localize/languages/sv.json

@@ -26,6 +26,7 @@
     "7": "Sön"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "fuktighet",
     "feels-like": "Känns som"
   }

src/localize/languages/th.json

@@ -26,6 +26,7 @@
     "7": "อา."
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "ความชื้น",
     "feels-like": "Feels like"
   }

src/localize/languages/tr.json

@@ -26,6 +26,7 @@
     "7": "Pzr"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "nem",
     "feels-like": "Feels like"
   }

src/localize/languages/uk.json

@@ -26,6 +26,7 @@
     "7": "Нд"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "вологість",
     "feels-like": "Feels like"
   }

src/localize/languages/ur.json

@@ -26,6 +26,7 @@
     "7": "اتوار"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "نمی",
     "feels-like": "Feels like"
   }

src/localize/languages/vi.json

@@ -26,6 +26,7 @@
     "7": "CN"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "độ ẩm",
     "feels-like": "Feels like"
   }

src/localize/languages/zh-cn.json

@@ -26,6 +26,7 @@
     "7": "周日"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "湿度",
     "feels-like": "Feels like"
   }

src/localize/languages/zh-tw.json

@@ -26,6 +26,7 @@
     "7": "週日"
   },
   "misc": {
+    "aqi": "AQI",
     "humidity": "濕度",
     "feels-like": "Feels like"
   }

src/styles.ts

@@ -125,4 +125,9 @@ export default css`
     height: 100%;
     position: absolute;
   }
+
+  aqi {
+    padding: 2px;
+    border-radius: 5px;
+  }
 `