Move useMainGraphWidth

Author: apata

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -1,4 +1,10 @@
-import React, { ReactNode, useCallback, useMemo, useState } from 'react'
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react'
 import { UIMode, useTheme } from '../../theme-context'
 import {
   FormattableMetric,
@@ -760,3 +766,27 @@ const METRIC_LABELS = {
   scroll_depth: 'Scroll depth',
   time_on_page: 'Time on page'
 }
+
+export function useMainGraphWidth(
+  mainGraphContainer: React.RefObject<HTMLDivElement>
+): { width: number } {
+  const [width, setWidth] = useState<number>(0)
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(([e]) => {
+      setWidth(e.contentRect.width)
+    })
+
+    if (mainGraphContainer.current) {
+      resizeObserver.observe(mainGraphContainer.current)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [mainGraphContainer])
+
+  return {
+    width
+  }
+}

assets/js/dashboard/stats/graph/visitor-graph.tsx

@@ -17,7 +17,7 @@ import { DashboardPeriod } from '../../dashboard-time-periods'
 import { DashboardState } from '../../dashboard-state'
 import { nowForSite } from '../../util/date'
 import { getStaleTime } from '../../hooks/api-client'
-import { MainGraph, MainGraphContainer } from './main-graph'
+import { MainGraph, MainGraphContainer, useMainGraphWidth } from './main-graph'
 import { createStatsQuery } from '../../stats-query'
 import { isRealTimeDashboard } from '../../util/filters'
 
@@ -451,27 +451,3 @@ function useGuessTopStatsHeight(
       getStoredTopStatsHeight(site) ?? DEFAULT_TOP_STATS_LOADING_HEIGHT_PX
   }
 }
-
-function useMainGraphWidth(
-  mainGraphContainer: React.RefObject<HTMLDivElement>
-): { width: number } {
-  const [width, setWidth] = useState<number>(0)
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(([e]) => {
-      setWidth(e.contentRect.width)
-    })
-
-    if (mainGraphContainer.current) {
-      resizeObserver.observe(mainGraphContainer.current)
-    }
-
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [mainGraphContainer])
-
-  return {
-    width
-  }
-}