Merge pull request #551 from blockscout/more-stats-fixes

more stats fixes

lib/hooks/useClientRect.tsx

@@ -2,8 +2,6 @@ import _debounce from 'lodash/debounce';
 import type { LegacyRef } from 'react';
 import React from 'react';
 
-import useUpdateEffect from 'lib/hooks/useUpdateEffect';
-
 export default function useClientRect<E extends Element>(): [ DOMRect | null, LegacyRef<E> | undefined ] {
   const [ rect, setRect ] = React.useState<DOMRect | null>(null);
   const nodeRef = React.useRef<E>();
@@ -15,7 +13,7 @@ export default function useClientRect<E extends Element>(): [ DOMRect | null, Le
     nodeRef.current = node;
   }, []);
 
-  useUpdateEffect(() => {
+  React.useEffect(() => {
     const content = window.document.querySelector('main');
     if (!content) {
       return;

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -25,6 +25,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       title="Balances"
       items={ items }
       isLoading={ isLoading }
+      h="250px"
     />
   );
 };

ui/shared/chart/ChartWidget.tsx

 import {
   Box,
+  Center,
+  chakra,
   Flex,
   Grid,
   Icon,
@@ -36,13 +38,13 @@ type Props = {
   title: string;
   description?: string;
   isLoading: boolean;
-  chartHeight?: string;
+  className?: string;
   isError: boolean;
 }
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading, chartHeight, isError }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, className, isError }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
@@ -111,10 +113,53 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
     return <ChartWidgetSkeleton hasDescription={ Boolean(description) }/>;
   }
 
+  const hasItems = items && items.length > 2;
+
+  const content = (() => {
+    if (isError) {
+      return (
+        <Flex
+          alignItems="center"
+          justifyContent="center"
+          flexGrow={ 1 }
+          py={ 4 }
+        >
+          <Text
+            variant="secondary"
+            fontSize="sm"
+            textAlign="center"
+          >
+            { `The data didn${ apos }t load. Please, ` }
+            <Link href={ window.document.location.href }>try to reload the page.</Link>
+          </Text>
+        </Flex>
+      );
+    }
+
+    if (!hasItems) {
+      return (
+        <Center flexGrow={ 1 }>
+          <Text variant="secondary" fontSize="sm">No data</Text>
+        </Center>
+      );
+    }
+
+    return (
+      <Box h="100%" maxW="100%">
+        <ChartWidgetGraph
+          items={ items }
+          onZoom={ handleZoom }
+          isZoomResetInitial={ isZoomResetInitial }
+          title={ title }
+        />
+      </Box>
+    );
+  })();
+
   return (
     <>
       <Box
-        height={ chartHeight }
+        height="100%"
         display="flex"
         flexDirection="column"
         ref={ ref }
@@ -122,6 +167,7 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
         borderRadius="md"
         border="1px"
         borderColor={ borderColor }
+        className={ className }
       >
         <Grid
           gridTemplateColumns="auto auto 36px"
@@ -167,7 +213,7 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
             />
           </Tooltip>
 
-          { !isError && (
+          { hasItems && (
             <Menu>
               <MenuButton
                 gridColumn={ 3 }
@@ -216,36 +262,10 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
           ) }
         </Grid>
 
-        { items ? (
-          <Box h={ chartHeight || 'auto' } maxW="100%">
-            <ChartWidgetGraph
-              margin={{ bottom: 20 }}
-              items={ items }
-              onZoom={ handleZoom }
-              isZoomResetInitial={ isZoomResetInitial }
-              title={ title }
-            />
-          </Box>
-        ) : (
-          <Flex
-            alignItems="center"
-            justifyContent="center"
-            flexGrow={ 1 }
-            py={ 4 }
-          >
-            <Text
-              variant="secondary"
-              fontSize="sm"
-              textAlign="center"
-            >
-              { `The data didn${ apos }t load. Please, ` }
-              <Link href={ window.document.location.href }>try to reload the page.</Link>
-            </Text>
-          </Flex>
-        ) }
+        { content }
       </Box>
 
-      { items && (
+      { hasItems && (
         <FullscreenChartModal
           isOpen={ isFullscreen }
           items={ items }
@@ -258,4 +278,4 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
   );
 };
 
-export default React.memo(ChartWidget);
+export default React.memo(chakra(ChartWidget));

ui/shared/chart/ChartWidgetGraph.tsx

@@ -23,7 +23,7 @@ interface Props {
   items: Array<TimeChartItem>;
   onZoom: () => void;
   isZoomResetInitial: boolean;
-  margin: ChartMargin;
+  margin?: ChartMargin;
 }
 
 const MAX_SHOW_ITEMS = 100;

ui/shared/chart/ChartWidgetSkeleton.tsx

@@ -3,10 +3,9 @@ import React from 'react';
 
 interface Props {
   hasDescription: boolean;
-  chartHeight?: string;
 }
 
-const ChartWidgetSkeleton = ({ hasDescription, chartHeight }: Props) => {
+const ChartWidgetSkeleton = ({ hasDescription }: Props) => {
   return (
     <Box
       height="235px"
@@ -15,7 +14,7 @@ const ChartWidgetSkeleton = ({ hasDescription, chartHeight }: Props) => {
       <Skeleton w="75%" h="24px"/>
       { hasDescription && <Skeleton w="50%" h="18px" mt={ 1 }/> }
 
-      <Skeleton w="100%" h={ chartHeight || '150px' } mt={ 5 }/>
+      <Skeleton w="100%" h="150px" mt={ 5 }/>
     </Box>
   );
 };

ui/stats/ChartWidgetContainer.tsx

@@ -45,7 +45,6 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
 
   return (
     <ChartWidget
-      chartHeight="100%"
       isError={ isError }
       items={ items }
       title={ title }