From 1e062a0d2caaaf440ed603104adce2d2c8b36d87 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Mon, 18 Sep 2023 16:48:17 -0300
Subject: [PATCH] Charts&Stats: add tooltips to number charts

Fixes #1151
---
 stubs/stats.ts                 |  1 +
 types/api/stats.ts             |  1 +
 ui/stats/NumberWidget.tsx      | 54 ++++++++++++++++++++++------------
 ui/stats/NumberWidgetsList.tsx |  3 +-
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/stubs/stats.ts b/stubs/stats.ts
index c437e4bc45..7bc61314ff 100644
--- a/stubs/stats.ts
+++ b/stubs/stats.ts
@@ -58,5 +58,6 @@ export const STATS_COUNTER: Counter = {
   id: 'stub',
   value: '9074405',
   title: 'Placeholder Counter',
+  description: 'Placeholder description',
   units: '',
 };
diff --git a/types/api/stats.ts b/types/api/stats.ts
index 2a542e0034..967e8b2eea 100644
--- a/types/api/stats.ts
+++ b/types/api/stats.ts
@@ -27,6 +27,7 @@ export type Counter = {
   id: string;
   value: string;
   title: string;
+  description?: string;
   units: string;
 }
 
diff --git a/ui/stats/NumberWidget.tsx b/ui/stats/NumberWidget.tsx
index 05eaf90497..c64745e636 100644
--- a/ui/stats/NumberWidget.tsx
+++ b/ui/stats/NumberWidget.tsx
@@ -1,41 +1,59 @@
-import { Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import Hint from 'ui/shared/Hint';
+
 type Props = {
   label: string;
+  description?: string;
   value: string;
   isLoading?: boolean;
 }
 
-const NumberWidget = ({ label, value, isLoading }: Props) => {
+const NumberWidget = ({ label, value, isLoading, description }: Props) => {
   const bgColor = useColorModeValue('blue.50', 'blue.800');
   const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const hintColor = useColorModeValue('gray.600', 'gray.400');
 
   return (
-    <Box
+    <Flex
+      alignItems="flex-start"
       bg={ isLoading ? skeletonBgColor : bgColor }
       px={ 3 }
       py={{ base: 2, lg: 3 }}
       borderRadius={ 12 }
+      justifyContent="space-between"
+      columnGap={ 3 }
     >
-      <Skeleton
-        isLoaded={ !isLoading }
-        color="text_secondary"
-        fontSize="xs"
-        w="fit-content"
+      <Box
       >
-        <span>{ label }</span>
-      </Skeleton>
+        <Skeleton
+          isLoaded={ !isLoading }
+          color="text_secondary"
+          fontSize="xs"
+          w="fit-content"
+        >
+          <span>{ label }</span>
+        </Skeleton>
 
-      <Skeleton
-        isLoaded={ !isLoading }
-        fontWeight={ 500 }
-        fontSize="lg"
-        w="fit-content"
-      >
-        { value }
+        <Skeleton
+          isLoaded={ !isLoading }
+          fontWeight={ 500 }
+          fontSize="lg"
+          w="fit-content"
+        >
+          { value }
+        </Skeleton>
+
+      </Box>
+      <Skeleton isLoaded={ !isLoading } alignSelf="center" borderRadius="base">
+        <Hint
+          label={ description }
+          boxSize={ 6 }
+          color={ hintColor }
+        />
       </Skeleton>
-    </Box>
+    </Flex>
   );
 };
 
diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx
index f567058430..53a8b212b7 100644
--- a/ui/stats/NumberWidgetsList.tsx
+++ b/ui/stats/NumberWidgetsList.tsx
@@ -24,7 +24,7 @@ const NumberWidgetsList = () => {
       gridGap={ 4 }
     >
       {
-        data?.counters?.map(({ id, title, value, units }, index) => {
+        data?.counters?.map(({ id, title, value, units, description }, index) => {
 
           return (
             <NumberWidget
@@ -32,6 +32,7 @@ const NumberWidgetsList = () => {
               label={ title }
               value={ `${ Number(value).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
               isLoading={ isPlaceholderData }
+              description={ description }
             />
           );
         })