Компоненты-селекторы сгрупированы в одну директорию

src/components/Layout/LayoutPortal.tsx

@@ -2,7 +2,7 @@ import { memo, ReactNode } from 'react'
 import { Layout, LayoutProps } from 'antd'
 
 import PageHeader from '@components/PageHeader'
-import WellTreeSelector from '@components/WellTreeSelector'
+import WellTreeSelector from '@components/selectors/WellTreeSelector'
 
 export type LayoutPortalProps = LayoutProps & {
   title?: ReactNode

src/components/selectors/TelemetrySelect.tsx

@@ -0,0 +1,34 @@
+import { Select, SelectProps } from 'antd'
+import { memo } from 'react'
+
+import { getTelemetryLabel } from '@components/views'
+import { TelemetryDto } from '@api'
+
+import '@styles/components/telemetry_select.less'
+
+export type TelemetrySelectProps = SelectProps & {
+    telemetry?: TelemetryDto[],
+    value?: TelemetryDto ,
+    onChange?: (value?: TelemetryDto) => void,
+}
+
+export const TelemetrySelect = memo<TelemetrySelectProps>(({ telemetry, value, onChange, ...other }) => (
+    <Select
+        allowClear
+        value={value?.id}
+        onChange={(id) => onChange?.(telemetry?.find((row) => row.id === id))}
+        className={'telemetry_select'}
+        dropdownClassName={'telemetry_select'}
+        {...other}
+    >
+        {telemetry?.map((row, i) => (
+            <Select.Option key={i} value={row.id}>
+                <span className={row?.info?.well ? 'telemetry_used' : 'telemetry_unused'}>
+                    {getTelemetryLabel(row)}
+                </span>
+            </Select.Option>
+        ))}
+    </Select>
+))
+
+export default TelemetrySelect

src/components/selectors/WellTreeSelector.tsx

@@ -7,9 +7,9 @@ import { RawValueType } from 'rc-tree-select/lib/TreeSelect'
 import { LabelInValueType } from 'rc-select/lib/Select'
 
 import { isRawDate } from '@utils'
-import LoaderPortal from './LoaderPortal'
+import LoaderPortal from '@components/LoaderPortal'
-import { WellIcon, WellIconState } from './icons'
+import { WellIcon, WellIconState } from '@components/icons'
-import { invokeWebApiWrapperAsync } from './factory'
+import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DepositService, DepositDto } from '@api'
 
 import { ReactComponent as DepositIcon } from '@images/DepositIcon.svg'

src/pages/AdminPanel/WellController/TelemetrySelect.jsx

@@ -1,23 +0,0 @@
-import { memo } from 'react'
-import { Select } from 'antd'
-
-import { getTelemetryLabel } from '@components/views'
-
-export const TelemetrySelect = memo(({ telemetry, value, onChange }) => (
-    <Select
-        allowClear
-        value={value?.id}
-        onChange={(id) => onChange?.(telemetry.find((row) => row.id === id))}
-        dropdownClassName={'telemetry_select'}
-    >
-        {telemetry.map((row, i) => (
-            <Select.Option key={i} value={row.id}>
-                <span className={row?.info?.well ? 'telemetry_used' : 'telemetry_unused'}>
-                    {getTelemetryLabel(row)}
-                </span>
-            </Select.Option>
-        ))}
-    </Select>
-))
-
-export default TelemetrySelect

src/pages/AdminPanel/WellController/index.jsx

@@ -21,13 +21,11 @@ import {
 } from '@components/Table'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { TelemetryView, CompanyView } from '@components/views'
+import TelemetrySelect from '@components/selectors/TelemetrySelect'
 import { hasPermission } from '@utils/permissions'
 import { arrayOrDefault } from '@utils'
 
 import { coordsFixed } from '../DepositController'
-import TelemetrySelect from './TelemetrySelect'
-
-import '@styles/admin.css'
 
 const wellTypes = [
     { value: 1, label: 'Наклонно-направленная' },

src/pages/Analytics/Statistics.jsx

@@ -2,8 +2,8 @@ import { Table as RawTable, Typography } from 'antd'
 import { Fragment, memo, useCallback, useEffect, useState } from 'react'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { WellSelector } from '@components/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
+import { WellSelector } from '@components/selectors/WellSelector'
 import { makeGroupColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 import { OperationStatService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'

src/pages/Analytics/WellCompositeEditor/index.jsx

@@ -8,7 +8,7 @@ import {
 } from '@api'
 import { arrayOrDefault } from '@utils'
 import LoaderPortal from '@components/LoaderPortal'
-import WellSelector from '@components/WellSelector'
+import WellSelector from '@components/selectors/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { PrivateDefaultRoute, PrivateMenuItemLink, PrivateRoute } from '@components/Private'
 

src/pages/Archive/index.jsx

@@ -5,7 +5,7 @@ import { Flex } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DatePickerWrapper, makeDateSorter } from '@components/Table'
-import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
+import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 import { TelemetryDataSaubService } from '@api'
 
 import { normalizeData } from '@pages/TelemetryView'

src/pages/DrillingProgram/CategoryAdder.jsx

@@ -2,7 +2,7 @@ import { Form, Select } from 'antd'
 import { FileAddOutlined } from '@ant-design/icons'
 import { memo, useCallback, useEffect, useState } from 'react'
 
-import Poprompt from '@components/Poprompt'
+import Poprompt from '@components/selectors/Poprompt'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillingProgramService } from '@api'
 

src/pages/DrillingProgram/CategoryRender.jsx

@@ -6,11 +6,11 @@ import {
     TableOutlined,
 } from '@ant-design/icons'
 
-import Poprompt from '@components/Poprompt'
 import { UserView } from '@components/views'
 import UploadForm from '@components/UploadForm'
 import DownloadLink from '@components/DownloadLink'
 import LoaderPortal from '@components/LoaderPortal'
+import Poprompt from '@components/selectors/Poprompt'
 import { formatBytes, invokeWebApiWrapperAsync, notify } from '@components/factory'
 import { DrillingProgramService } from '@api'
 import { formatDate } from '@utils'

src/pages/TelemetryView/SetpointSender.jsx

@@ -6,7 +6,7 @@ import { Grid, GridItem } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { makeNumericRender, EditableTable } from '@components/Table'
-import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
+import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 
 export const SetpointSender = ({ idWell, onClose, visible, setpointNames }) => {
     const [expirePeriod, setExpirePeriod] = useState(defaultPeriod)

src/pages/TelemetryView/index.jsx

@@ -12,7 +12,7 @@ import { makeDateSorter } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { Grid, GridItem, Flex } from '@components/Grid'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
+import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 import { hasPermission } from '@utils/permissions'
 import { Subscribe } from '@services/signalr'
 

src/styles/admin.css

@@ -1,12 +0,0 @@
-
-.telemetry_select {
-    min-width: 300px !important;
-}
-
-.telemetry_select .telemetry_used {
-    color: black;
-}
-
-.telemetry_select .telemetry_unused {
-    color: gray;
-}

src/styles/charts.less

@@ -0,0 +1,8 @@
+.d3-chart {
+    > .d3-chart-tooltip {
+        position: absolute;
+        background: #AAAAAAC0;
+        padding: 5px;
+        border-radius: 5px;
+    }
+}

src/styles/components/telemetry_select.less

@@ -0,0 +1,11 @@
+.telemetry_select {
+    min-width: 300px !important;
+
+    & .telemetry_used {
+        color: black;
+    }
+
+    & .telemetry_unused {
+        color: gray;
+    }
+}