Установил начальным значением селектора дат предыдущие сутки.

CODE_STANDART.md

@@ -63,27 +63,6 @@
     const page: ReactNode = lazy(() => import (...))
     ```
 
-### 1.4. Работа с репозиторием
-
-#### 1.4.1. Подготовка к публикации работы по заданию
-При получений задания необходимо создать для неё ветку, наследуемую от **dev**.
-Ветка должна именоваться в **kebab-case** и иметь префикс соответствующий типу задачи:
-* "**feature/**" - для нового функционала или визуала;
-* "**fix/**" - для багов и любых исправлений.
-
-Название ветки должно кратко описывать проблему или новые возможности.
-
-Далее необходимо создать *pull request* на ветку dev от новосозданной и сразу отметить его как WIP.
-При завершении задания метку WIP необходимо снять.
-
-#### 1.4.2 Оформление коммита
-Изменения файлов необходимо разделять на коммиты по общим изменениям и соответствующе его именовать.
-Если в коммит попадает более одного логического изменения стоит указывать их в виде маркированного списка, например:
-```
-    * На странице "Мониторинг" и "Архив" сокращено колличество запросов;
-    * Страница "Сообщения" удалена.
-```
-
 ## 2. JS
 1. Методы, константы и переменные документируются в соответствии с `JSDoc`;
 2. При документации страниц необходимо указать её название, краткое описание и описание получаемых параметров:

README.md

@@ -40,7 +40,7 @@ npx openapi -i http://{IP_ADDRESS}:{PORT}/swagger/v1/swagger.json -o src/service
 |:-------------------------|:--------|:------------------------------------|
 | 127.0.0.1:5000           | oul     | Локальный адрес вашей машины        |
 | 192.168.1.113:5000       | oud     | Локальный адрес development-сервера |
-| 46.146.207.184:80        | oug_dev | Внешний адрес development-сервера   |
+| 46.146.209.148:89        | oug_dev | Внешний адрес development-сервера   |
 | cloud.digitaldrilling.ru | oug     | Внешний адрес production-сервера    |
 
 ## 3. Компиляция production-версии приложения
@@ -60,53 +60,3 @@ npm run build
 ```bash
 npm start
 ```
-
-## 5. Подготовка к работе с гит репозиторием
-
-### 5.1. Генерация SSH-ключей
-Для генерации ключей, в **Git Bash**, либо в **bash** консоли необходимо ввести команду:
-```bash
-ssh-keygen
-```
-
-Предложенный путь сохранения ключа оставить без изменений
-
-Пароль для ускорения работы можно не задавать
-
-После чего публичный ключ необходимо занести ключ в [Gitea](http://46.146.207.184:8080/), в настройках пользователя.
-
-Чтобы получить публичный ключ необходимо ввести в консоли команду:
-```bash
-cat ~/.ssh/id_rsa.pub
-```
-
-Далее ключ небходимо проверить, для этого необходимо нажать соответствующую кнопку в Gitea, скопировать и выполнить предложенную команду в консоли, после чего вывод вставить в поле на странице.
-
-### 5.2. Генерация GPG-ключей
-Для генерации ключей, в **Git Bash**, либо в **bash** консоли необходимо ввести команду:
-```bash
-gpg --full-generate-key
-```
-Тип ключа выбираем *RSA and RSA* (по умолчанию 1). Длину ключа рекомендуется задавать 4096. Далее необходимо заполнить все опрошенные данные, пароль оставить пустым.
-
-После чего публичный ключ необходимо занести ключ в [Gitea](http://46.146.207.184:8080/), в настройках пользователя.
-
-Чтобы получить публичный ключ необходимо ввести в консоли команду:
-```bash
-gpg --export --armor <email>
-```
-
-Где вместо `<email>` необходимо подставить электронную почту, указанную к ключу.
-
-Далее ключ небходимо проверить, для этого необходимо нажать соответствующую кнопку в Gitea, скопировать и выполнить предложенную команду в консоли, после чего вывод вставить в поле на странице.
-
-### 5.3. Настройка подписания коммитов (требуется GPG-ключ)
-Перед началом необходимо получить ID GPG-ключа, для этого выполним команду:
-```bash
-gpg --list-keys <email>
-```
-
-Где вместо `<email>` необходимо подставить электронную почту, указанную к ключу. Из полученного вывода нам нужна только строка под строкой `rsa4096`. Эту строку мы передадим в следующую команду на место `<key-id>`:
-```bash
-git config --user.signingkey <key-id>
-```

package-lock.json

@@ -16,7 +16,8 @@
         "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",
@@ -14687,6 +14688,19 @@
         "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",
@@ -26397,6 +26411,12 @@
         "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,7 +11,8 @@
     "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",
@@ -24,11 +25,11 @@
     "dev": "webpack-dev-server --env=\"ENV=dev\" --open --hot",
 
     "oul": "npx openapi -i http://127.0.0.1:5000/swagger/v1/swagger.json -o src/services/api",
-    "oud": "npx openapi -i http://192.168.1.10:5000/swagger/v1/swagger.json -o src/services/api",
+    "oud": "npx openapi -i http://192.168.1.113:5000/swagger/v1/swagger.json -o src/services/api",
     "oug": "npx openapi -i https://cloud.digitaldrilling.ru/swagger/v1/swagger.json -o src/services/api",
-    "oug_dev": "npx openapi -i http://46.146.207.184/swagger/v1/swagger.json -o src/services/api"
+    "oug_dev": "npx openapi -i http://46.146.209.148:89/swagger/v1/swagger.json -o src/services/api"
   },
-  "proxy": "http://46.146.207.184",
+  "proxy": "http://46.146.209.148:89",
   "eslintConfig": {
     "extends": [
       "react-app",

src/components/Table/DateRangeWrapper.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { DatePicker, } from 'antd'
 import moment, { Moment } from 'moment'
 import { RangeValue } from 'rc-picker/lib/interface'
@@ -20,7 +20,7 @@ export type DateRangeWrapperProps = RangePickerSharedProps<Moment> & {
 /**
  * Подготавливает значения к передаче в селектор
  *
- * @param value Массиз из 2 дат
+ * @param value Массив из 2 дат
  * @param isUTC Конвертировать ли значения в UTC
  * @returns Подготовленные даты
  */
@@ -32,18 +32,23 @@ const normalizeDates = (value?: RangeValue<Moment>, isUTC?: boolean): RangeValue
     ]
 }
 
-export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, allowClear, ...other }) => (
+export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, allowClear, ...other }) => {
-    <RangePicker
+    const normalizeValue: RangeValue<Moment> = useMemo(() => normalizeDates(value, isUTC), [value, isUTC])
-        showTime
+
-        allowClear={allowClear}
+    const defaultValue: RangeValue<Moment> = useMemo(() => normalizeDates([
-        format={defaultFormat}
+        moment().subtract(1, 'days').startOf('day'),
-        defaultValue={[
+        moment().startOf('day'),
-            moment().subtract(1, 'days').startOf('day'),
+    ], isUTC), [value, isUTC])
-            moment().startOf('day'),
+
-        ]}
+    return (
-        value={normalizeDates(value, isUTC)}
+        <RangePicker
-        {...other}
+            showTime
-    />
+            allowClear={allowClear}
-))
+            format={defaultFormat}
+            value={normalizeValue?.[0] ? normalizeValue : defaultValue}
+            {...other}
+        />
+    )
+})
 
 export default DateRangeWrapper

src/components/d3/D3Chart.tsx

@@ -1,10 +1,11 @@
 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, useElementSize, usePartialProps } from '@utils'
+import { isDev, usePartialProps } from '@utils'
 
 import D3MouseZone from './D3MouseZone'
 import { getChartClass } from './functions'
@@ -130,7 +131,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
 
     const [charts, setCharts] = useState<ChartRegistry<DataType>[]>([])
 
-    const [rootRef, { width, height }] = useElementSize<HTMLDivElement>()
+    const [rootRef, { width, height }] = useElementSize()
 
     const xAxis = useMemo(() => {
         if (!data) return

src/components/d3/D3HorizontalPercentChart.tsx

@@ -1,9 +1,10 @@
 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 { useElementSize, usePartialProps } from '@utils'
+import { usePartialProps } from '@utils'
 import { ChartOffset } from './types'
 
 import '@styles/components/d3.less'
@@ -33,7 +34,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 }) => {
     const offset = usePartialProps<ChartOffset>(givenOffset, defaultOffset)
 
-    const [divRef, { width, height }] = useElementSize<HTMLDivElement>()
+    const [divRef, { width, height }] = useElementSize()
     const rootRef = useRef<SVGGElement | null>(null)
 
     const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
@@ -73,13 +74,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,10 +1,11 @@
 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, useElementSize, usePartialProps, useUserSettings } from '@utils'
+import { isDev, usePartialProps, useUserSettings } from '@utils'
 
 import {
     BaseDataType,
@@ -212,7 +213,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<HTMLDivElement>()
+    const [rootRef, { width, height }] = useElementSize()
 
     const yAxisArea = useCallback(() => d3.select(yAxisRef), [yAxisRef])
     const axesArea = useCallback(() => d3.select(axesAreaRef), [axesAreaRef])

src/pages/Well/Telemetry/Messages.jsx

@@ -33,7 +33,7 @@ export const makeMessageColumns = (idWell) => [
     <Tooltip title={'Нажмите для перехода в архив'}>
       <Link
         style={{ color: 'inherit'}}
-        to={`/well/${idWell}/telemetry/monitoring?range=1800&end=${moment(item?.date).add(27, 'minute').local().toISOString()}`}
+        to={`/well/${idWell}/telemetry/monitoring?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}
       >
         <LinkOutlined />
         &nbsp;

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

@@ -1,269 +0,0 @@
-import { Button, Input, Modal, Radio, Table } from 'antd'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import moment from 'moment'
-import * as d3 from 'd3'
-
-import { useWell } from '@asb/context'
-import LoaderPortal from '@components/LoaderPortal'
-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'
-
-import '@styles/limiting_parameter_statistics.less'
-
-const columns = [
-    makeColumn('Цвет', 'color', { width: 50, render: (d) => (
-        <div style={{ backgroundColor: d, padding: '5px 0' }} />
-    ) }),
-    makeTextColumn('Уставка', 'nameFeedRegulator'),
-    makeNumericColumn('Проходка, м', 'depth'),
-    makeNumericColumn('Кол-во включений', 'numberInclusions', undefined, undefined, makeNumericRender(0)),
-]
-
-export const LimitingParameterStatistics = memo(() => {
-    const [isOpen, setIsOpen] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
-    const [data, setData] = useState([])
-    const [mode, setMode] = useState('depth')
-    const [depthFilter, setDepthFilter] = useState({ from: null, to: null })
-    const [dateFilter, setDateFilter] = useState([moment().subtract(1, 'day'), moment()])
-
-    const [svgRef, setSvgRef] = useState()
-    const [selectedRegulator, setSelectedRegulator] = useState(null)
-
-    const [ref, { width, height }] = useElementSize()
-
-    const [well] = useWell()
-
-    const onDepthChanged = useCallback((e, type) => {
-        setDepthFilter((prev) => ({ ...prev, [type]: e?.target?.value }))
-    }, [])
-
-    const onRow = useCallback((record) => {
-        const out = {
-            onMouseEnter: () => {
-                setSelectedRegulator(record.idFeedRegulator)
-                d3.selectAll('.tl-pie-part')
-                    .filter((d) => d.data.idFeedRegulator === record.idFeedRegulator)
-                    .attr('transform', 'scale(1.05)')
-            },
-            onMouseLeave: () => {
-                setSelectedRegulator(null)
-                d3.selectAll('.tl-pie-part')
-                    .filter((d) => d.data.idFeedRegulator === record.idFeedRegulator)
-                    .attr('transform', 'scale(1)')
-            }
-        }
-        if (record.idFeedRegulator === selectedRegulator)
-            out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600' }
-        return out
-    }, [selectedRegulator])
-
-    const onPieOver = useCallback(function (e, d) {
-        setSelectedRegulator(d.data.idFeedRegulator)
-        d3.select(this).attr('transform', 'scale(1.05)')
-    }, [])
-
-    const onPieOut = useCallback(function (e, d) {
-        setSelectedRegulator(null)
-        d3.select(this).attr('transform', 'scale(1)')
-    }, [])
-
-    const update = useCallback(() => {
-        invokeWebApiWrapperAsync(
-            async () => {
-                const data = await LimitingParameterService.getStat(well.id,
-                    mode === 'time' ? dateFilter[0] : undefined,
-                    mode === 'time' ? dateFilter[1] : undefined,
-                    mode === 'depth' ? depthFilter.from : undefined,
-                    mode === 'depth' ? depthFilter.to : undefined,
-                )
-                setData(data)
-            },
-            setIsLoading,
-            `Не удалось загрузить статистику использования уставок`,
-            { actionName: `Загрузка статистики использования уставок`, well }
-        )
-    }, [well, mode, dateFilter, depthFilter])
-
-    const pie = useMemo(() => d3.pie().value((d) => d.totalMinutes), [])
-
-    const getColor = useMemo(() => makeGetColor(data?.map((row) => row.idFeedRegulator).filter(unique)), [data])
-
-    const tableData = useMemo(() => {
-        if (!data) return null
-        const totalTime = data.reduce((out, stat) => out + stat.totalMinutes, 0)
-        return data.map((stat) => ({
-            ...stat,
-            color: getColor(stat.idFeedRegulator),
-            percent: stat.totalMinutes / totalTime * 100,
-        }))
-    }, [data, getColor])
-
-    const pieData = useMemo(() => tableData ? pie(tableData) : null, [tableData])
-
-    const radius = useMemo(() => Math.min(width, height) / 2, [width, height])
-
-    useEffect(update, [])
-
-    useEffect(() => {
-        if (!pieData) return
-        const slices = d3.select(svgRef)
-            .select('.slices')
-            .selectAll('path')
-            .data(pieData)
-
-        slices.exit().remove()
-        const newSlices = slices.enter().append('path')
-
-        slices.merge(newSlices)
-            .attr('class', 'tl-pie-part')
-            .attr('d', d3.arc().innerRadius(radius * 0.4).outerRadius(radius * 0.8))
-            .attr('fill', (d) => d.data.color)
-            .attr('data-id', (d) => d.idFeedRegulator)
-            .on('mouseover', onPieOver)
-            .on('mouseout', onPieOut)
-    }, [svgRef, pieData, radius, onPieOver, onPieOut])
-
-    useEffect(() => {
-        if (!pieData) return
-        const innerArc = d3.arc().innerRadius(radius * 0.4).outerRadius(radius * 0.8)
-        const outerArc = d3.arc().innerRadius(radius * 0.9).outerRadius(radius * 0.9)
-
-        const lines = d3.select(svgRef)
-            .select('.lines')
-            .selectAll('polyline')
-            .data(pieData, (d) => d.data.nameFeedRegulator)
-
-        lines.exit().remove()
-        const newLines = lines.enter()
-            .append('polyline')
-
-        const abovePi = (d) => (d.startAngle + d.endAngle) / 2 < Math.PI
-
-        lines.merge(newLines)
-            .style('display', (d) => d.data.idFeedRegulator !== selectedRegulator ? 'none' : 'block')
-            .attr('points', (d) => {
-                const pos = outerArc.centroid(d)
-                pos[0] = radius * 0.95 * (abovePi(d) ? 1 : -1)
-                return [innerArc.centroid(d), outerArc.centroid(d), pos]
-            })
-
-        const lables = d3.select(svgRef)
-            .select('.labels')
-            .selectAll('text')
-            .data(pieData, (d) => d.data.nameFeedRegulator)
-
-        lables.exit().remove()
-        const newLabels = lables.enter()
-            .append('text')
-            .attr('dy', '.35em')
-
-        lables.merge(newLabels)
-            .attr('transform', (d) => {
-                const pos = outerArc.centroid(d)
-                pos[0] = radius * 0.95 * (abovePi(d) ? 1 : -1)
-                return `translate(${pos})`
-            })
-            .style('text-anchor', (d) => abovePi(d) ? 'start' : 'end')
-            .style('display', (d) => d.data.idFeedRegulator !== selectedRegulator ? 'none' : 'block')
-            .attr('width', radius * 0.4)
-            .text((d) => `${d.data.percent.toFixed(2)}% (${d.data.totalMinutes.toFixed(2)} мин)`)
-
-    }, [svgRef, pieData, radius, selectedRegulator])
-
-    return (
-        <>
-            <Button onClick={() => setIsOpen(true)}>Статистика использования уставок</Button>
-            <Modal
-                centered
-                width={1024}
-                footer={false}
-                title={'Статистика использования уставок'}
-                onCancel={() => setIsOpen(false)}
-                open={isOpen}
-            >
-                <LoaderPortal show={isLoading}>
-                    <div className={'filter-groups'}>
-                        <Input.Group compact style={{ flex: 1 }}>
-                            <Input
-                                addonBefore={(
-                                    <Radio
-                                        checked={mode === 'depth'}
-                                        onChange={() => setMode('depth')}
-                                    >
-                                        По глубине
-                                    </Radio>
-                                )}
-                                allowClear
-                                disabled={mode !== 'depth'}
-                                prefix={'От'}
-                                suffix={'м'}
-                                style={{ width: 'calc(50% + 113px / 2)', textAlign: 'right' }}
-                                onChange={(e) => onDepthChanged(e, 'from')}
-                                value={depthFilter.from}
-                            />
-                            <Input
-                                allowClear
-                                disabled={mode !== 'depth'}
-                                prefix={'До'}
-                                suffix={'м'}
-                                style={{ width: 'calc(50% - 113px / 2)', textAlign: 'right' }}
-                                onChange={(e) => onDepthChanged(e, 'to')}
-                                value={depthFilter.to}
-                            />
-                        </Input.Group>
-                        <Input.Group compact style={{ flex: 1 }}>
-                            <Input style={{ width: 128 }} addonBefore={(
-                                <Radio
-                                    checked={mode === 'time'}
-                                    onChange={() => setMode('time')}
-                                >
-                                    По времени
-                                </Radio>
-                            )}/>
-                            <DateRangeWrapper
-                                showTime
-                                value={dateFilter}
-                                disabled={mode !== 'time'}
-                                onCalendarChange={setDateFilter}
-                                disabledDate={(date) => date.isAfter(moment())}
-                            />
-                        </Input.Group>
-                    </div>
-                    <Button onClick={update} style={{ marginTop: 10 }}>Обновить</Button>
-                    <div className={'lps-pie-chart'} ref={ref}>
-                        {data ? (
-                            <svg ref={setSvgRef} width={'100%'} height={'100%'}>
-                                <g transform={`translate(${width / 2}, ${height / 2})`}>
-                                    <g className={'slices'} stroke={'#0005'} />
-                                    <g className={'labels'} fill={'black'} />
-                                    <g className={'lines'} fill={'none'} stroke={'black'} />
-                                </g>
-                            </svg>
-                        ) : (
-                            <div className={'empty-wrapper'}>
-                                <Empty />
-                            </div>
-                        )}
-                    </div>
-                    <div className={'modal-label'}>Итоговая таблица по скважине</div>
-                    <Table
-                        bordered
-                        size={'small'}
-                        pagination={false}
-                        dataSource={tableData}
-                        columns={columns}
-                        onRow={onRow}
-                    />
-                </LoaderPortal>
-            </Modal>
-        </>
-    )
-})
-
-export default LimitingParameterStatistics

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

@@ -20,7 +20,6 @@ import {
 
 import { makeChartGroups, yAxis } from './dataset'
 import { ADDITIVE_PAGES, cutData, DATA_COUNT, getLoadingInterval, makeDateTimeDisabled } from './archive_methods'
-import LimitingParameterStatistics from './LimitingParameterStatistics'
 import ActiveMessagesOnline from './ActiveMessagesOnline'
 import TelemetrySummary from './TelemetrySummary'
 import WirelineRunOut from './WirelineRunOut'
@@ -266,7 +265,6 @@ const TelemetryView = memo(() => {
                             </Select>
                         </div>
                         <Setpoints />
-                        <LimitingParameterStatistics />
                         <WirelineRunOut />
                         <div className={'icons'}>
                             <img src={isTorqueStabEnabled(spinLast) ? MomentStabPicEnabled : MomentStabPicDisabled} alt={'TorqueMaster'} />

src/pages/Well/WellNavigationMenu.jsx

@@ -3,6 +3,7 @@ import {
     AlertOutlined,
     BarChartOutlined,
     BuildOutlined,
+    ControlOutlined,
     DeploymentUnitOutlined,
     ExperimentOutlined,
     FilePdfOutlined,
@@ -16,7 +17,7 @@ import { makeItem, PrivateMenu } from '@components/PrivateMenu'
 
 export const menuItems = [
     makeItem('Телеметрия', 'telemetry', [], <FundViewOutlined />, [
-        makeItem('Мониторинг', 'monitoring', [], <FundViewOutlined />),
+        makeItem('Мониторинг', 'telemetry', [], <FundViewOutlined />),
         makeItem('Сообщения', 'messages', [], <AlertOutlined />),
         makeItem('ННБ', 'dashboard_nnb', [], <FolderOutlined />),
         makeItem('Операции', 'operations', [], <FolderOutlined />),

src/pages/Well/WellOperations/OperationEditor/WellOperationsEditor.jsx

@@ -6,6 +6,8 @@ import { useState, useEffect, memo, useMemo, useCallback } from 'react'
 import { useTopRightBlock, useWell } from '@asb/context'
 import {
   EditableTable,
+  makeColumn,
+  makeNumericColumnOptions,
   makeSelectColumn,
   makeDateColumn,
   makeNumericColumn,
@@ -70,10 +72,11 @@ export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
       const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
       const take = pageNumAndPageSize.pageSize
       const paginatedOperations = await WellOperationService.getOperations(well.id,
-        undefined, undefined, undefined, undefined, undefined, idType, undefined, skip, take)
+        idType, undefined, undefined, undefined, undefined,
+        undefined, undefined, skip, take)
       const operations = paginatedOperations?.items ?? []
       setOperations(operations)
-      const total = paginatedOperations.count ?? paginatedOperations.items?.length ?? 0
+      const total = paginatedOperations.count?? paginatedOperations.items?.length ?? 0
       setPaginationTotal(total)
     },
     setShowLoader,

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

@@ -1,4 +1,5 @@
 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'
@@ -7,7 +8,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DetectedOperationService } from '@api'
 import { unique } from '@utils/filters'
-import { formatDate, useElementSize } from '@utils'
+import { formatDate } from '@utils'
 
 import { makeTooltipRender } from '../../Telemetry/Operations/OperationsChart'
 import { makeGetColor } from '.'

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

@@ -1,4 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useElementSize } from 'usehooks-ts'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
@@ -7,7 +8,6 @@ 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/pages/Well/index.jsx

@@ -95,11 +95,10 @@ const Well = memo(() => {
                         <Route path={'*'} element={<NoAccessComponent />} />
 
                         <Route path={'telemetry/*'} element={<Telemetry />}>
-                            <Route index element={<Navigate to={'monitoring'} replace />} />
+                            <Route index element={<Navigate to={'telemetry'} replace />} />
                             <Route path={'*'} element={<NoAccessComponent />} />
-                            <Route path={'telemetry'} element={<Navigate to={'../monitoring'} replace />} /> {/* TODO: Remove in next release */}
 
-                            <Route path={'monitoring'} element={<TelemetryView />} />
+                            <Route path={'telemetry'} element={<TelemetryView />} />
                             <Route path={'messages'} element={<Messages />} />
                             <Route path={'dashboard_nnb/*'} element={<DashboardNNB />} />
                             <Route path={'operations'} element={<Operations />} />

src/styles/limiting_parameter_statistics.less

@@ -1,29 +0,0 @@
-.filter-groups {
-    display: flex;
-    gap: 10px;
-
-    & .filter-label {
-        display: flex;
-        align-items: center;
-    }
-
-    & .date-filter {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        justify-content: center;
-        align-items: center;
-    }
-}
-
-.modal-label {
-    width: 100%;
-    margin: 20px 0;
-    font-size: 1rem;
-    text-align: center;
-}
-
-.lps-pie-chart {
-    min-height: 30vh;
-    max-height: 50vh;
-}

src/utils/hooks/index.ts

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

src/utils/hooks/useElementSize.ts

@@ -1,24 +0,0 @@
-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)
-    }), [])
-
-    useEffect(() => {
-        if (!ref.current) return
-        observer.observe(ref.current)
-
-        return () => {
-            if (!ref.current) return
-            observer.unobserve(ref.current)
-        }
-    }, [ref.current, observer])
-
-    return [ref, rect]
-}