Merge pull request #71 from RealWagmi/feature/density-chart

feat: density chart

package.json

@@ -64,8 +64,11 @@
     "@real-wagmi/sdk": "1.4.0",
     "@real-wagmi/v3-sdk": "1.4.0",
     "@storybook/addon-themes": "^7.5.3",
+    "@tanstack/react-query": "^5.59.16",
     "@types/styled-system": "^5.1.15",
     "@types/uuid": "^9.0.7",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2",
     "framer-motion": "10.11.2",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",

src/components/Charts/Density/constants.ts

@@ -1,5 +1,4 @@
 export const DEFAULT_SURROUNDING_TICKS = 300;
 export const INITIAL_TICKS_TO_FETCH = 200;
-export const ZOOM_INTERVAL = 20;
 
 export const maxUint128 = 2n ** 128n - 1n;

src/components/Charts/Density/hooks/useChartResize.ts

@@ -0,0 +1,28 @@
+import ReactEcharts from 'echarts-for-react';
+import { MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+
+interface IUseChartResize {
+    chartRef: MutableRefObject<ReactEcharts | null>;
+}
+
+export const useChartResize = (): IUseChartResize => {
+    const chartRef = useRef<ReactEcharts>(null);
+
+    const resizeHandler = useCallback((): void => {
+        const echartsInstance = chartRef.current?.getEchartsInstance();
+        echartsInstance && echartsInstance.resize();
+    }, [chartRef]);
+
+    useEffect(() => {
+        window.addEventListener('resize', resizeHandler);
+        return (): void => {
+            window.removeEventListener('resize', resizeHandler);
+        };
+    }, [resizeHandler]);
+
+    return useMemo((): IUseChartResize => {
+        return {
+            chartRef,
+        };
+    }, []);
+};