From 9caede1cc39e551c4897e759bedc1f7b9a8b4755 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 4 Mar 2024 11:09:36 -0800
Subject: [PATCH] Change: default merge pihole blocked fields (#3065)

---
 docs/widgets/services/pihole.md  |  4 +++-
 src/widgets/pihole/component.jsx | 11 ++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/widgets/services/pihole.md b/docs/widgets/services/pihole.md
index a12f57a86..8079d1b1f 100644
--- a/docs/widgets/services/pihole.md
+++ b/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_
diff --git a/src/widgets/pihole/component.jsx b/src/widgets/pihole/component.jsx
index c9b036107..a36071a1b 100644
--- a/src/widgets/pihole/component.jsx
+++ b/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)) })}