add PiHole widget

src/components/services/widget.jsx

@@ -5,6 +5,7 @@ import Portainer from "./widgets/service/portainer";
 import Emby from "./widgets/service/emby";
 import Nzbget from "./widgets/service/nzbget";
 import Docker from "./widgets/service/docker";
+import Pihole from "./widgets/service/pihole";
 
 const widgetMappings = {
   docker: Docker,
@@ -14,6 +15,7 @@ const widgetMappings = {
   portainer: Portainer,
   emby: Emby,
   nzbget: Nzbget,
+  pihole: Pihole,
 };
 
 export default function Widget({ service }) {

src/components/services/widgets/service/pihole.jsx

@@ -0,0 +1,37 @@
+import useSWR from "swr";
+
+import Widget from "../widget";
+import Block from "../block";
+
+export default function Pihole({ service }) {
+  const config = service.widget;
+
+  function buildApiUrl(endpoint) {
+    const { url } = config;
+    return `${url}/admin/${endpoint}`;
+  }
+
+  const { data: piholeData, error: piholeError } = useSWR(buildApiUrl("api.php"));
+
+  if (piholeError) {
+    return <Widget error="PiHole API Error" />;
+  }
+
+  if (!piholeData) {
+    return (
+      <Widget>
+        <Block label="Queries" />
+        <Block label="Blocked" />
+        <Block label="Gravity" />
+      </Widget>
+    );
+  }
+
+  return (
+    <Widget>
+      <Block label="Queries" value={piholeData.dns_queries_today.toLocaleString()} />
+      <Block label="Blocked" value={piholeData.ads_blocked_today.toLocaleString()} />
+      <Block label="Gravity" value={piholeData.domains_being_blocked.toLocaleString()} />
+    </Widget>
+  );
+}