adaptive chart

ui/charts/EthereumDailyTxsChart.tsx

@@ -8,33 +8,48 @@ import GridLine from 'ui/shared/graphs/GridLine';
 import Line from 'ui/shared/graphs/Line';
 import useTimeGraphController from 'ui/shared/graphs/useTimeGraphController';
 
-const dimensions = {
-  width: 600,
-  height: 300,
-  margin: { top: 0, right: 0, bottom: 20, left: 65 },
-};
 const data = {
   items: json.map((d) => ({ ...d, date: new Date(d.date) })),
 };
 
-const EthereumDailyTxsChart = () => {
-  const { width, height, margin } = dimensions;
-  const svgWidth = width + margin.left + margin.right;
-  const svgHeight = height + margin.top + margin.bottom;
-  const controller = useTimeGraphController({ data, width, height });
-  const { yTickFormat, xScale, yScale } = controller;
+interface Props {
+  margin?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+}
+
+const EthereumDailyTxsChart = ({ margin }: Props) => {
+  const ref = React.useRef<SVGSVGElement>(null);
+  const [ rect, setRect ] = React.useState<{ width: number; height: number}>();
+
+  React.useEffect(() => {
+    const rect = ref.current?.getBoundingClientRect();
+    rect && setRect({ width: rect.width, height: rect.height });
+  }, [ ]);
+
+  const width = rect?.width || 0;
+  const height = rect?.height || 0;
+
+  const innerWidth = width - (margin?.left || 0) - (margin?.right || 0);
+  const innerHeight = height - (margin?.bottom || 0) - (margin?.top || 0);
+
+  const { yTickFormat, xScale, yScale } = useTimeGraphController({ data, width: innerWidth, height: innerHeight });
 
   const lineColor = useToken('colors', 'blue.500');
 
   return (
-    <svg width={ svgWidth } height={ svgHeight }>
-      <g transform={ `translate(${ margin.left },${ margin.top })` }>
+    <svg width={ width || '100%' } height={ height || '100%' } ref={ ref }>
+      { width > 0 && (
+        <g transform={ `translate(${ margin?.left || 0 },${ margin?.top || 0 })` }>
           { /* BASE GRID LINE */ }
           <GridLine
             type="horizontal"
             scale={ yScale }
             ticks={ 1 }
-          size={ width }
+            size={ innerWidth }
             disableAnimation
           />
 
@@ -43,14 +58,14 @@ const EthereumDailyTxsChart = () => {
             type="vertical"
             scale={ xScale }
             ticks={ 5 }
-          size={ height }
-          transform={ `translate(0, ${ height })` }
+            size={ innerHeight }
+            transform={ `translate(0, ${ innerHeight })` }
           />
           <GridLine
             type="horizontal"
             scale={ yScale }
             ticks={ 5 }
-          size={ width }
+            size={ innerWidth }
           />
 
           { /* GRAPH */ }
@@ -78,12 +93,13 @@ const EthereumDailyTxsChart = () => {
           <Axis
             type="bottom"
             scale={ xScale }
-          transform={ `translate(0, ${ height })` }
+            transform={ `translate(0, ${ innerHeight })` }
             ticks={ 5 }
           />
         </g>
+      ) }
     </svg>
   );
 };
 
-export default EthereumDailyTxsChart;
+export default React.memo(EthereumDailyTxsChart);

ui/pages/Graph.tsx

+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import EthereumDailyTxsChart from 'ui/charts/EthereumDailyTxsChart';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
+const CHART_MARGIN = { bottom: 20, left: 65 };
+
 const Graph = () => {
   return (
     <Page>
       <PageTitle text="Ethereum Daily Transactions Chart"/>
-      <EthereumDailyTxsChart/>
+      <Box w="100%" h="400px">
+        <EthereumDailyTxsChart margin={ CHART_MARGIN }/>
+      </Box>
     </Page>
   );
 };