Fix: Add alternative 'offline' status to EspHome widget (#3107)

docs/widgets/services/esphome.md

@@ -7,7 +7,10 @@ Learn more about [ESPHome](https://esphome.io/).
 
 Show the number of ESPHome devices based on their state.
 
-Allowed fields: `["total", "online", "offline", "unknown"]`.
+Allowed fields: `["total", "online", "offline", "offline_alt", "unknown"]` (maximum of 4).
+
+By default ESPHome will only mark devices as `offline` if their address cannot be pinged. If it has an invalid config or its name cannot be resolved (by DNS) its status will be marked as `unknown`.
+To group both `offline` and `unknown` devices together, users should use the `offline_alt` field instead. This sums all devices that are _not_ online together.
 
 ```yaml
 widget:

public/locales/en/common.json

@@ -109,6 +109,7 @@
     },
     "esphome": {
         "offline": "Offline",
+        "offline_alt": "Offline",
         "online": "Online",
         "total": "Total",
         "unknown": "Unknown"

src/widgets/esphome/component.jsx

@@ -19,6 +19,7 @@ export default function Component({ service }) {
       <Container service={service}>
         <Block label="esphome.online" />
         <Block label="esphome.offline" />
+        <Block label="esphome.offline_alt" />
         <Block label="esphome.unknown" />
         <Block label="esphome.total" />
       </Container>
@@ -27,6 +28,7 @@ export default function Component({ service }) {
 
   const total = Object.keys(resultData).length;
   const online = Object.entries(resultData).filter(([, v]) => v === true).length;
+  const notOnline = Object.entries(resultData).filter(([, v]) => v !== true).length;
   const offline = Object.entries(resultData).filter(([, v]) => v === false).length;
   const unknown = Object.entries(resultData).filter(([, v]) => v === null).length;
 
@@ -34,6 +36,7 @@ export default function Component({ service }) {
     <Container service={service}>
       <Block label="esphome.online" value={t("common.number", { value: online })} />
       <Block label="esphome.offline" value={t("common.number", { value: offline })} />
+      <Block label="esphome.offline_alt" value={t("common.number", { value: notOnline })} />
       <Block label="esphome.unknown" value={t("common.number", { value: unknown })} />
       <Block label="esphome.total" value={t("common.number", { value: total })} />
     </Container>