* Описан хук useElementSize на основе ResizeObserver

* пакет usehooks-ts удалён

package-lock.json

@@ -16,8 +16,7 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
-        "rxjs": "^7.5.5",
+        "rxjs": "^7.5.5"
-        "usehooks-ts": "^2.6.0"
       },
       "devDependencies": {
         "@babel/core": "^7.18.2",
@@ -14688,19 +14687,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
-      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
-      "engines": {
-        "node": ">=16.15.0",
-        "npm": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -26411,12 +26397,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "usehooks-ts": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
-      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
-      "requires": {}
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -11,8 +11,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
-    "rxjs": "^7.5.5",
+    "rxjs": "^7.5.5"
-    "usehooks-ts": "^2.6.0"
   },
   "scripts": {
     "test": "jest",

src/components/d3/D3Chart.tsx

@@ -1,11 +1,10 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { isDev, usePartialProps } from '@utils'
+import { isDev, useElementSize, usePartialProps } from '@utils'
 
 import D3MouseZone from './D3MouseZone'
 import { getChartClass } from './functions'
@@ -131,7 +130,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
 
     const [charts, setCharts] = useState<ChartRegistry<DataType>[]>([])
 
-    const [rootRef, { width, height }] = useElementSize()
+    const [rootRef, { width, height }] = useElementSize<HTMLDivElement>()
 
     const xAxis = useMemo(() => {
         if (!data) return

src/components/d3/D3HorizontalPercentChart.tsx

@@ -1,10 +1,9 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { usePartialProps } from '@utils'
+import { useElementSize, usePartialProps } from '@utils'
 import { ChartOffset } from './types'
 
 import '@styles/components/d3.less'
@@ -34,7 +33,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 }) => {
     const offset = usePartialProps<ChartOffset>(givenOffset, defaultOffset)
 
-    const [divRef, { width, height }] = useElementSize()
+    const [divRef, { width, height }] = useElementSize<HTMLDivElement>()
     const rootRef = useRef<SVGGElement | null>(null)
 
     const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
@@ -74,13 +73,13 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
         rects.exit().remove()
 
         const selectedRects = r.selectChild<SVGGElement>('.data')
-                               .selectAll<SVGRectElement, PercentChartDataType>('rect')
+            .selectAll<SVGRectElement, PercentChartDataType>('rect')
 
         selectedRects.attr('fill', (d) => d.color || 'black')
-                     .attr('y', (d) => yScale(d.name) ?? null)
+            .attr('y', (d) => yScale(d.name) ?? null)
-                     .attr('height', yScale.bandwidth())
+            .attr('height', yScale.bandwidth())
-                     .transition(delay)
+            .transition(delay)
-                     .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
+            .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
 
         afterDraw?.(selectedRects)
 

src/components/d3/monitoring/D3MonitoringCharts.tsx

@@ -1,11 +1,10 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { isDev, usePartialProps, useUserSettings } from '@utils'
+import { isDev, useElementSize, usePartialProps, useUserSettings } from '@utils'
 
 import {
     BaseDataType,
@@ -213,7 +212,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     const yTicks = usePartialProps<Required<ChartTick<DataType>>>(_yTicks, getDefaultYTicks)
     const yAxisConfig = usePartialProps<ChartAxis<DataType>>(_yAxisConfig, getDefaultYAxisConfig)
 
-    const [rootRef, { width, height }] = useElementSize()
+    const [rootRef, { width, height }] = useElementSize<HTMLDivElement>()
 
     const yAxisArea = useCallback(() => d3.select(yAxisRef), [yAxisRef])
     const axesArea = useCallback(() => d3.select(axesAreaRef), [axesAreaRef])

src/pages/Well/Telemetry/TelemetryView/LimitingParameterStatistics/index.jsx

@@ -1,6 +1,5 @@
 import { Button, Input, Modal, Radio, Table } from 'antd'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import moment from 'moment'
 import * as d3 from 'd3'
 
@@ -10,6 +9,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DateRangeWrapper, makeColumn, makeNumericColumn, makeNumericRender, makeTextColumn } from '@components/Table'
 import { LimitingParameterService } from '@api'
 import { unique } from '@utils/filters'
+import { useElementSize } from '@utils'
 
 import { makeGetColor } from '@pages/Well/WellOperations/Tvd'
 
@@ -35,7 +35,7 @@ export const LimitingParameterStatistics = memo(() => {
     const [svgRef, setSvgRef] = useState()
     const [selectedRegulator, setSelectedRegulator] = useState(null)
 
-    const [rootRef, { width, height }] = useElementSize()
+    const [ref, { width, height }] = useElementSize()
 
     const [well] = useWell()
 
@@ -108,6 +108,7 @@ export const LimitingParameterStatistics = memo(() => {
 
     const radius = useMemo(() => Math.min(width, height) / 2, [width, height])
 
+    useEffect(() => console.log(radius), [radius])
     useEffect(update, [])
 
     useEffect(() => {
@@ -236,7 +237,7 @@ export const LimitingParameterStatistics = memo(() => {
                         </Input.Group>
                     </div>
                     <Button onClick={update} style={{ marginTop: 10 }}>Обновить</Button>
-                    <div className={'lps-pie-chart'} ref={rootRef}>
+                    <div className={'lps-pie-chart'} ref={ref}>
                         {data ? (
                             <svg ref={setSvgRef} width={'100%'} height={'100%'}>
                                 <g transform={`translate(${width / 2}, ${height / 2})`}>

src/pages/Well/WellOperations/Tvd/TLChart.jsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Empty } from 'antd'
 import moment from 'moment'
 import * as d3 from 'd3'
@@ -8,7 +7,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DetectedOperationService } from '@api'
 import { unique } from '@utils/filters'
-import { formatDate } from '@utils'
+import { formatDate, useElementSize } from '@utils'
 
 import { makeTooltipRender } from '../../Telemetry/Operations/OperationsChart'
 import { makeGetColor } from '.'

src/pages/Well/WellOperations/Tvd/TLPie.jsx

@@ -1,5 +1,4 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
@@ -8,6 +7,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DetectedOperationService } from '@api'
 import { unique } from '@utils/filters'
+import { useElementSize } from '@utils'
 
 import { makeGetColor } from '.'
 

src/utils/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './cachedFetch'
 export * from './functionalValue'
+export * from './useElementSize'
 export * from './usePartialProps'
 export * from './useUserSettings'

src/utils/hooks/useElementSize.ts

@@ -0,0 +1,25 @@
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
+
+export const useElementSize = <T extends Element>(): [MutableRefObject<T | null>, DOMRectReadOnly] => {
+    const ref = useRef<T>(null)
+    const [rect, setRect] = useState<DOMRectReadOnly>(new DOMRect())
+
+    const observer = useMemo(() => new ResizeObserver((entries) => {
+        if (entries.length <= 0) return
+        const rect = entries[0].contentRect
+        setRect(rect)
+        console.log(rect)
+    }), [])
+
+    useEffect(() => {
+        if (!ref.current) return
+        observer.observe(ref.current)
+
+        return () => {
+            if (!ref.current) return
+            observer.unobserve(ref.current)
+        }
+    }, [ref.current, observer])
+
+    return [ref, rect]
+}