refactor chart resize

ui/charts/EthereumDailyTxsChart.tsx

 import { useToken } from '@chakra-ui/react';
-import _debounce from 'lodash/debounce';
 import React from 'react';
 
+import type { ChartMargin } from 'ui/shared/chart/types';
+
 import json from 'data/charts_eth_txs.json';
 import ChartArea from 'ui/shared/chart/ChartArea';
 import ChartAxis from 'ui/shared/chart/ChartAxis';
@@ -10,52 +11,18 @@ import ChartLine from 'ui/shared/chart/ChartLine';
 import ChartOverlay from 'ui/shared/chart/ChartOverlay';
 import ChartTooltip from 'ui/shared/chart/ChartTooltip';
 import useBrushX from 'ui/shared/chart/useBrushX';
+import useChartSize from 'ui/shared/chart/useChartSize';
 import useTimeChartController from 'ui/shared/chart/useTimeChartController';
 
 interface Props {
-  margin?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-  };
+  margin?: ChartMargin;
 }
 
 const EthereumDailyTxsChart = ({ margin }: Props) => {
   const ref = React.useRef<SVGSVGElement>(null);
   const overlayRef = React.useRef<SVGRectElement>(null);
 
-  const [ rect, setRect ] = React.useState<{ width: number; height: number}>({ width: 0, height: 0 });
-
-  const calculateRect = React.useCallback(() => {
-    const rect = ref.current?.getBoundingClientRect();
-    return { width: rect?.width || 0, height: rect?.height || 0 };
-  }, []);
-
-  React.useEffect(() => {
-    setRect(calculateRect());
-  }, [ calculateRect ]);
-
-  React.useEffect(() => {
-    let timeoutId: number;
-    const resizeHandler = _debounce(() => {
-      setRect({ width: 0, height: 0 });
-      timeoutId = window.setTimeout(() => {
-        setRect(calculateRect());
-      }, 0);
-    }, 100);
-    const resizeObserver = new ResizeObserver(resizeHandler);
-
-    resizeObserver.observe(document.body);
-    return function cleanup() {
-      resizeObserver.unobserve(document.body);
-      window.clearTimeout(timeoutId);
-    };
-  }, [ calculateRect ]);
-
-  const { width, height } = rect;
-  const innerWidth = Math.max(width - (margin?.left || 0) - (margin?.right || 0), 0);
-  const innerHeight = Math.max(height - (margin?.bottom || 0) - (margin?.top || 0), 0);
+  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, margin);
 
   const brushLimits = React.useMemo(() => (
     [ [ 0, innerHeight ], [ innerWidth, height ] ] as [[number, number], [number, number]]

ui/shared/chart/ChartTooltip.tsx

@@ -2,17 +2,12 @@ import { useToken, useColorModeValue } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
-import type { TimeChartItem } from 'ui/shared/chart/types';
+import type { TimeChartItem, ChartMargin } from 'ui/shared/chart/types';
 
 interface Props {
   width?: number;
   height?: number;
-  margin?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
+  margin?: ChartMargin;
   data: {
     items: Array<TimeChartItem>;
   };

ui/shared/chart/types.tsx

@@ -2,3 +2,10 @@ export interface TimeChartItem {
   date: Date;
   value: number;
 }
+
+export interface ChartMargin {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}

ui/shared/chart/useBrushX.tsx

@@ -13,7 +13,7 @@ export default function useBrushX({ limits, anchor }: Props) {
   const brushSelectionBg = useToken('colors', useColorModeValue('blackAlpha.400', 'whiteAlpha.500'));
 
   React.useEffect(() => {
-    if (!anchor || brushRef.current) {
+    if (!anchor || brushRef.current || limits[1][0] === 0) {
       return;
     }
 
@@ -25,7 +25,7 @@ export default function useBrushX({ limits, anchor }: Props) {
     });
 
     const gBrush = svgEl?.append('g')
-      .attr('class', 'brush')
+      .attr('class', 'ChartBrush')
       .call(brushRef.current);
 
     gBrush.select('.selection')

ui/shared/chart/useChartSize.tsx

+import _debounce from 'lodash/debounce';
+import React from 'react';
+
+import type { ChartMargin } from 'ui/shared/chart/types';
+
+export default function useChartSize(svgEl: SVGSVGElement | null, margin?: ChartMargin) {
+  const [ rect, setRect ] = React.useState<{ width: number; height: number}>({ width: 0, height: 0 });
+
+  const calculateRect = React.useCallback(() => {
+    const rect = svgEl?.getBoundingClientRect();
+    return { width: rect?.width || 0, height: rect?.height || 0 };
+  }, [ svgEl ]);
+
+  React.useEffect(() => {
+    setRect(calculateRect());
+  }, [ calculateRect ]);
+
+  React.useEffect(() => {
+    let timeoutId: number;
+    const resizeHandler = _debounce(() => {
+      setRect({ width: 0, height: 0 });
+      timeoutId = window.setTimeout(() => {
+        setRect(calculateRect());
+      }, 0);
+    }, 100);
+    const resizeObserver = new ResizeObserver(resizeHandler);
+
+    resizeObserver.observe(document.body);
+    return function cleanup() {
+      resizeObserver.unobserve(document.body);
+      window.clearTimeout(timeoutId);
+    };
+  }, [ calculateRect ]);
+
+  return React.useMemo(() => {
+    return {
+      width: rect.width,
+      height: rect.height,
+      innerWidth: Math.max(rect.width - (margin?.left || 0) - (margin?.right || 0), 0),
+      innerHeight: Math.max(rect.height - (margin?.bottom || 0) - (margin?.top || 0), 0),
+    };
+  }, [ margin?.bottom, margin?.left, margin?.right, margin?.top, rect ]);
+}