fix(dns-hole-summary): calculation for domains and percentage for multiple integrations (#1894)

packages/translation/src/lang/en.json

@@ -1091,7 +1091,8 @@
         "adsBlockedTodayPercentage": "Blocked today",
         "dnsQueriesToday": "Queries today",
         "domainsBeingBlocked": "Domains on blocklist"
-      }
+      },
+      "domainsTooltip": "Due to multiple integrations Homarr can't calculate the exact number of domains being blocked"
     },
     "dnsHoleControls": {
       "name": "DNS Hole Controls",

packages/widgets/src/dns-hole/summary/component.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
-import { Avatar, AvatarGroup, Box, Card, Flex, Stack, Text, Tooltip } from "@mantine/core";
+import { Avatar, AvatarGroup, Box, Card, Flex, Stack, Text, Tooltip, TooltipFloating } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
@@ -98,11 +98,11 @@ const stats = [
   },
   {
     icon: IconPercentage,
-    value: (data) =>
+    value: (data) => {
-      `${formatNumber(
+      const totalCount = data.reduce((count, { dnsQueriesToday }) => count + dnsQueriesToday, 0);
-        data.reduce((count, { adsBlockedTodayPercentage }) => count + adsBlockedTodayPercentage, 0),
+      const blocked = data.reduce((count, { adsBlockedToday }) => count + adsBlockedToday, 0);
-        2,
+      return `${formatNumber(totalCount === 0 ? 0 : (blocked / totalCount) * 100, 2)}%`;
-      )}%`,
+    },
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedTodayPercentage"),
     color: "rgba(255, 165, 20, 0.4)", // YELLOW
   },
@@ -118,11 +118,17 @@ const stats = [
   },
   {
     icon: IconWorldWww,
-    value: (data) =>
+    value: (data) => {
+      // We use a suffix to indicate that there might be more domains in the at least two lists.
+      const suffix = data.length >= 2 ? "+" : "";
+      return (
         formatNumber(
           data.reduce((count, { domainsBeingBlocked }) => count + domainsBeingBlocked, 0),
           2,
-      ),
+        ) + suffix
+      );
+    },
+    tooltip: (data, t) => (data.length >= 2 ? t("widget.dnsHoleSummary.domainsTooltip") : undefined),
     label: (t) => t("widget.dnsHoleSummary.data.domainsBeingBlocked"),
     color: "rgba(0, 176, 96, 0.4)", // GREEN
   },
@@ -130,7 +136,8 @@ const stats = [
 
 interface StatItem {
   icon: TablerIcon;
-  value: (x: DnsHoleSummary[]) => string;
+  value: (summaries: DnsHoleSummary[]) => string;
+  tooltip?: (summaries: DnsHoleSummary[], t: TranslationFunction) => string | undefined;
   label: stringOrTranslation;
   color: string;
 }
@@ -144,8 +151,10 @@ interface StatCardProps {
 const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
   const { ref, height, width } = useElementSize();
   const isLong = width > height + 20;
+  const tooltip = item.tooltip?.(data, t);
 
   return (
+    <TooltipFloating label={tooltip} disabled={!tooltip} w={250} multiline>
       <Card
         ref={ref}
         className="summary-card"
@@ -196,6 +205,7 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
           </Flex>
         </Flex>
       </Card>
+    </TooltipFloating>
   );
 };