From de58c81e871ceeef631a103fbfeca9c081eac8da Mon Sep 17 00:00:00 2001 From: goodmice Date: Thu, 22 Dec 2022 12:33:01 +0500 Subject: [PATCH] =?UTF-8?q?*=20=D0=9E=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=20?= =?UTF-8?q?=D1=85=D1=83=D0=BA=20useElementSize=20=D0=BD=D0=B0=20=D0=BE?= =?UTF-8?q?=D1=81=D0=BD=D0=BE=D0=B2=D0=B5=20ResizeObserver=20*=20=D0=BF?= =?UTF-8?q?=D0=B0=D0=BA=D0=B5=D1=82=20usehooks-ts=20=D1=83=D0=B4=D0=B0?= =?UTF-8?q?=D0=BB=D1=91=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 22 +--------------- package.json | 3 +-- src/components/d3/D3Chart.tsx | 5 ++-- .../d3/D3HorizontalPercentChart.tsx | 15 ++++++----- .../d3/monitoring/D3MonitoringCharts.tsx | 5 ++-- .../LimitingParameterStatistics/index.jsx | 7 +++--- src/pages/Well/WellOperations/Tvd/TLChart.jsx | 3 +-- src/pages/Well/WellOperations/Tvd/TLPie.jsx | 2 +- src/utils/hooks/index.ts | 1 + src/utils/hooks/useElementSize.ts | 25 +++++++++++++++++++ 10 files changed, 45 insertions(+), 43 deletions(-) create mode 100644 src/utils/hooks/useElementSize.ts diff --git a/package-lock.json b/package-lock.json index 8912fac..2114437 100755 --- a/package-lock.json +++ b/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", - "usehooks-ts": "^2.6.0" + "rxjs": "^7.5.5" }, "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", diff --git a/package.json b/package.json index 8ac132b..5814f6c 100755 --- a/package.json +++ b/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", - "usehooks-ts": "^2.6.0" + "rxjs": "^7.5.5" }, "scripts": { "test": "jest", diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx index c6d37ab..1cfdd25 100644 --- a/src/components/d3/D3Chart.tsx +++ b/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 = >({ const [charts, setCharts] = useState[]>([]) - const [rootRef, { width, height }] = useElementSize() + const [rootRef, { width, height }] = useElementSize() const xAxis = useMemo(() => { if (!data) return diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx index 17ea77b..8b5898f 100644 --- a/src/components/d3/D3HorizontalPercentChart.tsx +++ b/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(({ }) => { const offset = usePartialProps(givenOffset, defaultOffset) - const [divRef, { width, height }] = useElementSize() + const [divRef, { width, height }] = useElementSize() const rootRef = useRef(null) const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current]) @@ -74,13 +73,13 @@ export const D3HorizontalPercentChart = memo(({ rects.exit().remove() const selectedRects = r.selectChild('.data') - .selectAll('rect') + .selectAll('rect') selectedRects.attr('fill', (d) => d.color || 'black') - .attr('y', (d) => yScale(d.name) ?? null) - .attr('height', yScale.bandwidth()) - .transition(delay) - .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0) + .attr('y', (d) => yScale(d.name) ?? null) + .attr('height', yScale.bandwidth()) + .transition(delay) + .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0) afterDraw?.(selectedRects) diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index 9fc9c3b..524355a 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/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 = >({ const yTicks = usePartialProps>>(_yTicks, getDefaultYTicks) const yAxisConfig = usePartialProps>(_yAxisConfig, getDefaultYAxisConfig) - const [rootRef, { width, height }] = useElementSize() + const [rootRef, { width, height }] = useElementSize() const yAxisArea = useCallback(() => d3.select(yAxisRef), [yAxisRef]) const axesArea = useCallback(() => d3.select(axesAreaRef), [axesAreaRef]) diff --git a/src/pages/Well/Telemetry/TelemetryView/LimitingParameterStatistics/index.jsx b/src/pages/Well/Telemetry/TelemetryView/LimitingParameterStatistics/index.jsx index 3060a0c..59f16fa 100644 --- a/src/pages/Well/Telemetry/TelemetryView/LimitingParameterStatistics/index.jsx +++ b/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(() => { -
+
{data ? ( diff --git a/src/pages/Well/WellOperations/Tvd/TLChart.jsx b/src/pages/Well/WellOperations/Tvd/TLChart.jsx index c4e6bba..d680d6f 100644 --- a/src/pages/Well/WellOperations/Tvd/TLChart.jsx +++ b/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 '.' diff --git a/src/pages/Well/WellOperations/Tvd/TLPie.jsx b/src/pages/Well/WellOperations/Tvd/TLPie.jsx index 6062f03..4a85df1 100644 --- a/src/pages/Well/WellOperations/Tvd/TLPie.jsx +++ b/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 '.' diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index d4f229e..20d2cac 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -1,4 +1,5 @@ export * from './cachedFetch' export * from './functionalValue' +export * from './useElementSize' export * from './usePartialProps' export * from './useUserSettings' diff --git a/src/utils/hooks/useElementSize.ts b/src/utils/hooks/useElementSize.ts new file mode 100644 index 0000000..76cea60 --- /dev/null +++ b/src/utils/hooks/useElementSize.ts @@ -0,0 +1,25 @@ +import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react' + +export const useElementSize = (): [MutableRefObject, DOMRectReadOnly] => { + const ref = useRef(null) + const [rect, setRect] = useState(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] +}