PiHole widget: added new Percentage block (#1471)

* PiHole widget: added new Percentage block

* update pi-hole percentage

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

public/locales/en/common.json

@@ -214,6 +214,7 @@
     "pihole": {
         "queries": "Queries",
         "blocked": "Blocked",
+        "blocked_percent": "Blocked %",
         "gravity": "Gravity"
     },
     "adguard": {

src/widgets/pihole/component.jsx

@@ -20,6 +20,7 @@ export default function Component({ service }) {
       <Container service={service}>
         <Block label="pihole.queries" />
         <Block label="pihole.blocked" />
+        <Block label="pihole.blocked_percent" />
         <Block label="pihole.gravity" />
       </Container>
     );
@@ -29,6 +30,7 @@ export default function Component({ service }) {
     <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_percent" value={t("common.percent", { value: parseFloat(piholeData.ads_percentage_today.toPrecision(3)) })} />
       <Block label="pihole.gravity" value={t("common.number", { value: parseInt(piholeData.domains_being_blocked, 10) })} />
     </Container>
   );

src/widgets/pihole/widget.js

@@ -10,6 +10,7 @@ const widget = {
       validate: [
         "dns_queries_today",
         "ads_blocked_today",
+        "ads_percentage_today",
         "domains_being_blocked"
       ]
     },