show tooltip on large numbers (#74)

aptabase · Feb 13, 2024 · 0c8108d · 0c8108d
1 parent 6ca99f7
commit 0c8108d
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/webapp/features/analytics/dashboard/TopNChart.tsx b/src/webapp/features/analytics/dashboard/TopNChart.tsx
@@ -6,6 +6,7 @@ import { ErrorState } from "@components/ErrorState";
 import { formatNumber } from "@fns/format-number";
 import { useLocalStorage } from "@hooks/use-localstorage";
 import { twMerge } from "tailwind-merge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@components/Tooltip";
 
 type Item = {
   name: string;
@@ -107,7 +108,18 @@ function TopNRow(props: TopNRowProps) {
         <div className="flex z-10">{props.children}</div>
       </div>
       <p className="text-sm pr-2 z-10 tabular-nums">
-        {props.format === "percentage" ? `${Math.round(props.percentage * 100)}%` : formatNumber(props.item.value)}
+        {props.format === "percentage" ? (
+          `${Math.round(props.percentage * 100)}%`
+        ) : props.item.value >= 1e3 ? (
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipContent>{props.item.value}</TooltipContent>
+              <TooltipTrigger>{formatNumber(props.item.value)}</TooltipTrigger>
+            </Tooltip>
+          </TooltipProvider>
+        ) : (
+          props.item.value
+        )}
       </p>
     </div>
   );