Charts&Stats: add tooltips to number charts (#1192)

Fixes #1151

stubs/stats.ts

@@ -58,5 +58,6 @@ export const STATS_COUNTER: Counter = {
   id: 'stub',
   value: '9074405',
   title: 'Placeholder Counter',
+  description: 'Placeholder description',
   units: '',
 };

types/api/stats.ts

@@ -27,6 +27,7 @@ export type Counter = {
   id: string;
   value: string;
   title: string;
+  description?: string;
   units: string;
 }
 

ui/stats/NumberWidget.tsx

-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>
   );
 };
 

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 }
             />
           );
         })