Charts&Stats: add tooltips to number charts

Fixes #1151
blockscout · Sep 18, 2023 · 1e062a0 · 1e062a0
1 parent 7b8bcdf
commit 1e062a0
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -24,14 +24,15 @@ const NumberWidgetsList = () => {
       gridGap={ 4 }
     >
       {
-        data?.counters?.map(({ id, title, value, units }, index) => {
+        data?.counters?.map(({ id, title, value, units, description }, index) => {
 
           return (
             <NumberWidget
               key={ id + (isPlaceholderData ? index : '') }
               label={ title }
               value={ `${ Number(value).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
               isLoading={ isPlaceholderData }
+              description={ description }
             />
           );
         })