Change: default merge pihole blocked fields (#3065)

docs/widgets/services/pihole.md

@@ -9,6 +9,8 @@ As of v2022.12 [PiHole requires the use of an API key](https://pi-hole.net/blog/
 
 Allowed fields: `["queries", "blocked", "blocked_percent", "gravity"]`.
 
+Note: by default the "blocked" and "blocked_percent" fields are merged e.g. "1,234 (15%)" but explicitly including the "blocked_percent" field will change them to display separately.
+
 ```yaml
 widget:
   type: pihole
@@ -16,4 +18,4 @@ widget:
   key: yourpiholeapikey # optional
 ```
 
-_Added in v0.1.0, updated in v0.6.18_
+_Added in v0.1.0, updated in v0.8.9_

src/widgets/pihole/component.jsx

@@ -15,6 +15,10 @@ export default function Component({ service }) {
     return <Container service={service} error={piholeError} />;
   }
 
+  if (!widget.fields) {
+    widget.fields = ["queries", "blocked", "gravity"];
+  }
+
   if (!piholeData) {
     return (
       <Container service={service}>
@@ -26,10 +30,15 @@ export default function Component({ service }) {
     );
   }
 
+  let blockedValue = `${t("common.number", { value: parseInt(piholeData.ads_blocked_today, 10) })}`;
+  if (!widget.fields.includes("blocked_percent")) {
+    blockedValue += ` (${t("common.percent", { value: parseFloat(piholeData.ads_percentage_today.toPrecision(3)) })})`;
+  }
+
   return (
     <Container service={service}>
       <Block label="pihole.queries" value={t("common.number", { value: parseInt(piholeData.dns_queries_today, 10) })} />
-      <Block label="pihole.blocked" value={t("common.number", { value: parseInt(piholeData.ads_blocked_today, 10) })} />
+      <Block label="pihole.blocked" value={blockedValue} />
       <Block
         label="pihole.blocked_percent"
         value={t("common.percent", { value: parseFloat(piholeData.ads_percentage_today.toPrecision(3)) })}