adjust chart height

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -30,6 +30,7 @@ const AddressCoinBalanceChart = ({ addressQuery }: Props) => {
 
   return (
     <ChartWidget
+      chartHeight="200px"
       title="Balances"
       items={ items }
       isLoading={ isLoading || isError }

ui/shared/chart/ChartWidget.tsx

@@ -18,11 +18,12 @@ type Props = {
   title: string;
   description?: string;
   isLoading: boolean;
+  chartHeight?: string;
 }
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, chartHeight }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
@@ -78,7 +79,7 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
   }, [ title ]);
 
   if (isLoading) {
-    return <ChartWidgetSkeleton hasDescription={ Boolean(description) }/>;
+    return <ChartWidgetSkeleton hasDescription={ Boolean(description) } chartHeight={ chartHeight }/>;
   }
 
   if (items) {
@@ -172,12 +173,14 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
             </Menu>
           </Grid>
 
-          <ChartWidgetGraph
-            items={ items }
-            onZoom={ handleZoom }
-            isZoomResetInitial={ isZoomResetInitial }
-            title={ title }
-          />
+          <Box h={ chartHeight || 'auto' }>
+            <ChartWidgetGraph
+              items={ items }
+              onZoom={ handleZoom }
+              isZoomResetInitial={ isZoomResetInitial }
+              title={ title }
+            />
+          </Box>
         </Box>
 
         <FullscreenChartModal
@@ -194,4 +197,4 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
   return null;
 };
 
-export default ChartWidget;
+export default React.memo(ChartWidget);

ui/shared/chart/ChartWidgetGraph.tsx

@@ -31,7 +31,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
   const overlayRef = React.useRef<SVGRectElement>(null);
   const chartId = useMemo(() => `chart-${ title.split(' ').join('') }`, [ title ]);
   const [ range, setRange ] = React.useState<[ number, number ]>([ 0, Infinity ]);
-  const { innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
+  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
 
   const displayedData = useMemo(() => items.slice(range[0], range[1]), [ items, range ]);
   const chartData = [ { items: items, name: 'Value', color } ];
@@ -54,9 +54,9 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
   }, [ isZoomResetInitial ]);
 
   return (
-    <svg width="100%" height="100%" ref={ ref } cursor="pointer" id={ chartId }>
+    <svg width={ width || '100%' } height={ height || 'auto' } ref={ ref } cursor="pointer" id={ chartId } opacity={ width ? 1 : 0 }>
 
-      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ innerWidth ? 1 : 0 }>
+      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` }>
         <ChartGridLine
           type="horizontal"
           scale={ yScale }

ui/shared/chart/ChartWidgetSkeleton.tsx

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