Merge branch 'feature/monitoring-limiter' into dev

src/components/d3/index.ts

@@ -1,6 +1,4 @@
 export * from './D3Chart'
 export type { D3ChartProps } from './D3Chart'
 
-export * from './D3MonitoringCharts'
-
 export * from './types'

src/components/d3/monitoring/D3HorizontalCursor.tsx

@@ -1,12 +1,12 @@
-import { CSSProperties, ReactNode, SVGProps, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CSSProperties, ReactNode, SVGProps, useEffect, useMemo, useRef, useState } from 'react'
 import * as d3 from 'd3'
 
+import { wrapPlugin } from '@components/d3/plugins/base'
 import { useD3MouseZone } from '@components/d3/D3MouseZone'
-import { ChartGroup, ChartSizes } from '@components/d3/D3MonitoringCharts'
+import { D3TooltipPosition } from '@components/d3/plugins/D3Tooltip'
 import { getChartIcon, isDev, usePartialProps } from '@utils'
 
-import { wrapPlugin } from './base'
+import { ChartGroup, ChartSizes } from './D3MonitoringCharts'
-import { D3TooltipPosition } from './D3Tooltip'
 
 import '@styles/d3.less'
 

src/components/d3/monitoring/D3MonitoringChartEditor.tsx

@@ -1,9 +1,10 @@
 import { Button, Form, FormItemProps, Input, InputNumber, Select, Tooltip } from 'antd'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 
-import { ColorPicker, Color } from '../ColorPicker'
+import { MinMax } from '@components/d3/types'
+import { ColorPicker, Color } from '@components/ColorPicker'
+
 import { ExtendedChartDataset } from './D3MonitoringCharts'
-import { MinMax } from './types'
 
 const { Item: RawItem } = Form
 

src/components/d3/monitoring/D3MonitoringCharts.tsx

@@ -16,18 +16,19 @@ import {
     ChartRegistry,
     ChartTick,
     MinMax
-} from './types'
+} from '@components/d3/types'
 import {
     BasePluginSettings,
     D3ContextMenu,
     D3ContextMenuSettings,
-    D3HorizontalCursor,
+} from '@components/d3/plugins'
-    D3HorizontalCursorSettings
+import D3MouseZone from '@components/d3/D3MouseZone'
-} from './plugins'
+import { getByAccessor, getChartClass, getGroupClass, getTicks } from '@components/d3/functions'
-import D3MouseZone from './D3MouseZone'
+import { renderArea, renderLine, renderNeedle, renderPoint, renderRectArea } from '@components/d3/renders'
-import D3MonitoringGroupsEditor from './D3MonitoringGroupsEditor'
+
-import { getByAccessor, getChartClass, getGroupClass, getTicks } from './functions'
+import D3MonitoringEditor from './D3MonitoringEditor'
-import { renderArea, renderLine, renderNeedle, renderPoint, renderRectArea } from './renders'
+import { D3HorizontalCursor, D3HorizontalCursorSettings } from './D3HorizontalCursor'
+import D3MonitoringLimitChart, { TelemetryRegulators } from './D3MonitoringLimitChart'
 
 const roundTo = (v: number, to: number = 50) => {
     if (v === 0) return v
@@ -73,7 +74,15 @@ const defaultOffsets: ChartOffset = {
     top: 10,
     bottom: 10,
     left: 100,
-    right: 10,
+    right: 20,
+}
+
+const defaultRegulators: TelemetryRegulators = {
+    1: { color: '#59B359', label: 'Скорость блока' },
+    2: { color: '#FF0000', label: 'Давление' },
+    3: { color: '#0000CC', label: 'Осевая нагрузка' },
+    4: { color: '#990099', label: 'Момент на роторе' },
+    5: { color: '#007070', label: 'Расход' },
 }
 
 const getDefaultYAxisConfig = <DataType,>(): ChartAxis<DataType> => ({
@@ -191,6 +200,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     const [chartAreaRef, setChartAreaRef] = useState<SVGGElement | null>(null)
     const [axesAreaRef, setAxesAreaRef] = useState<SVGGElement | null>(null)
     const [settingsVisible, setSettingsVisible] = useState<boolean>(false)
+    const [regulators, setRegulators] = useState<TelemetryRegulators>(defaultRegulators)
 
     const offset = usePartialProps(_offset, defaultOffsets)
     const yTicks = usePartialProps<Required<ChartTick<DataType>>>(_yTicks, getDefaultYTicks)
@@ -271,23 +281,28 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
         }
     ), [chartArea])
 
-    const onGroupsChange = useCallback((sets: ExtendedChartDataset<DataType>[][]) => {
+    const onGroupsChange = useCallback((settings: ExtendedChartDataset<DataType>[][], regulators: TelemetryRegulators) => {
         if (chartName) {
             invokeWebApiWrapperAsync(
                 async () => {
-                    await UserSettingsService.update(chartName, sets)
+                    await UserSettingsService.update(chartName, {
+                        settings,
+                        regulators,
+                    })
                 },
                 undefined,
                 'Не удалось сохранить параметры графиков'
             )
         }
-        setDatasets(sets)
+        setDatasets(settings)
+        setRegulators(regulators)
         setSettingsVisible(false)
     }, [chartName])
 
     const onGroupsReset = useCallback(() => {
         setSettingsVisible(false)
         setDatasets(datasetGroups)
+        setRegulators(defaultRegulators)
         if (chartName) {
             invokeWebApiWrapperAsync(
                 async () => await UserSettingsService.delete(chartName),
@@ -305,13 +320,20 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                 let sets = chartName ? await UserSettingsService.get(chartName) : null
                 if (typeof sets === 'string')
                     sets = JSON.parse(sets)
-                if (Array.isArray(sets)) {
+                if (sets && Array.isArray(sets.settings)) {
-                    setDatasets(sets)
+                    if (sets.regulators)
+                        setRegulators(sets.regulators)
+                    if (Array.isArray(sets.settings)) {
+                        setDatasets(sets.settings)
+                    }
                 } else if (Array.isArray(datasetGroups)) {
                     setDatasets(datasetGroups)
                     if (chartName) {
                         invokeWebApiWrapperAsync(
-                            async () => await UserSettingsService.insert(chartName, datasetGroups),
+                            async () => await UserSettingsService.insert(chartName, {
+                                settings: datasetGroups,
+                                regulators: defaultRegulators,
+                            }),
                             undefined,
                             'Не удалось сохранить настройки графиков'
                         )
@@ -572,6 +594,16 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                                     return <line key={`${i}`} x1={x} x2={x} y1={sizes.chartsTop} y2={offset.top + sizes.inlineHeight} />
                                 })}
                             </g>
+                            <D3MonitoringLimitChart
+                                regulators={regulators}
+                                data={data}
+                                yAxis={yAxis}
+                                width={20}
+                                height={sizes.chartsHeight}
+                                left={sizes.inlineWidth + sizes.left}
+                                top={sizes.chartsTop}
+                                zoneWidth={sizes.inlineWidth}
+                            />
                             <D3MouseZone width={width} height={height} offset={{ ...offset, top: sizes.chartsTop }}>
                                 <D3HorizontalCursor
                                     {...plugins?.cursor}
@@ -588,8 +620,9 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                     </div>
                 )}
-                <D3MonitoringGroupsEditor
+                <D3MonitoringEditor
                     groups={datasets}
+                    regulators={regulators}
                     visible={settingsVisible}
                     onChange={onGroupsChange}
                     onCancel={() => setSettingsVisible(false)}

src/components/d3/monitoring/D3MonitoringEditor.tsx

@@ -3,16 +3,19 @@ import { Button, Divider, Empty, Modal, Popconfirm, Tooltip, Tree } from 'antd'
 import { UndoOutlined } from '@ant-design/icons'
 import { EventDataNode } from 'antd/lib/tree'
 
+import { notify } from '@components/factory'
 import { getChartIcon } from '@utils'
 
 import { ExtendedChartDataset } from './D3MonitoringCharts'
+import { TelemetryRegulators } from './D3MonitoringLimitChart'
 import D3MonitoringChartEditor from './D3MonitoringChartEditor'
-import { notify } from '../factory'
+import D3MonitoringLimitEditor from './D3MonitoringLimitEditor'
 
 export type D3MonitoringGroupsEditorProps<DataType> = {
     visible?: boolean
     groups: ExtendedChartDataset<DataType>[][]
-    onChange: (value: ExtendedChartDataset<DataType>[][]) => void
+    regulators: TelemetryRegulators
+    onChange: (value: ExtendedChartDataset<DataType>[][], regs: TelemetryRegulators) => void
     onCancel: () => void
     onReset: () => void
 }
@@ -36,9 +39,12 @@ const getNodePos = (node: EventDataNode): { group: number, chart?: number } => {
     return { group: out[1], chart: out[2] }
 }
 
-const _D3MonitoringGroupsEditor = <DataType,>({
+type EditingMode = null | 'limit' | 'chart'
+
+const _D3MonitoringEditor = <DataType,>({
     visible,
     groups: oldGroups,
+    regulators: oldRegulators,
     onChange,
     onCancel,
     onReset,
@@ -46,10 +52,13 @@ const _D3MonitoringGroupsEditor = <DataType,>({
     const [groups, setGroups] = useState<ExtendedChartDataset<DataType>[][]>([])
     const [expand, setExpand] = useState<Key[]>([])
     const [selected, setSelected] = useState<Key[]>([])
+    const [mode, setMode] = useState<EditingMode>(null)
+    const [regulators, setRegulators] = useState<TelemetryRegulators>({})
 
     useEffect(() => setGroups(oldGroups), [oldGroups])
+    useEffect(() => setRegulators(oldRegulators), [oldRegulators])
 
-    const onModalOk = useCallback(() => onChange(groups), [groups])
+    const onModalOk = useCallback(() => onChange(groups, regulators), [groups, regulators])
 
     const onDrop = useCallback((info: {
         node: EventDataNode
@@ -148,23 +157,29 @@ const _D3MonitoringGroupsEditor = <DataType,>({
                         selectedKeys={selected}
                         treeData={treeItems}
                         onDrop={onDrop}
-                        onSelect={setSelected}
+                        onSelect={(value) => {
+                            setSelected(value)
+                            setMode('chart')
+                        }}
                         height={250}
                     />
+                    <Button onClick={() => setMode('limit')}>Ограничение подачи</Button>
                 </div>
                 <Divider type={'vertical'} style={{ height: '100%', padding: '0 5px' }} />
                 <div style={divStyle}>
-                    {selectedGroup && selectedChart ? (
+                    {mode === 'chart' && selectedGroup && selectedChart ? (
                         <D3MonitoringChartEditor<DataType> group={selectedGroup} chart={selectedChart} onChange={onChartChange} />
+                    ) : (mode === 'limit' ? (
+                        <D3MonitoringLimitEditor<DataType> value={regulators} onChange={setRegulators} />
                     ) : (
                         <Empty description={'Выберите график для редактирования'} />
-                    )}
+                    ))}
                 </div>
             </div>
         </Modal>
     )
 }
 
-export const D3MonitoringGroupsEditor = memo(_D3MonitoringGroupsEditor) as typeof _D3MonitoringGroupsEditor
+export const D3MonitoringEditor = memo(_D3MonitoringEditor) as typeof _D3MonitoringEditor
 
-export default D3MonitoringGroupsEditor
+export default D3MonitoringEditor

src/components/d3/monitoring/D3MonitoringLimitChart.tsx

@@ -0,0 +1,181 @@
+import { CSSProperties, memo, useEffect, useMemo, useState } from 'react'
+import * as d3 from 'd3'
+
+import { Grid, GridItem } from '@components/Grid'
+import { formatDate, makeDisplayValue } from '@utils'
+import { TelemetryDataSaubDto } from '@api'
+
+type LimitChartData = {
+    id: number
+    dateStart: Date
+    dateEnd: Date
+    depthStart: number | null
+    depthEnd: number | null
+}
+
+type LimitChartDataRaw = {
+    id?: number
+    dateStart?: string
+    dateEnd?: string
+    depthStart?: number | null
+    depthEnd?: number | null
+}
+
+export type TelemetryRegulators = Record<number, {
+    color: string
+    label: string
+}>
+
+const getLast = (out: LimitChartDataRaw[]) => out.at(-1) as LimitChartDataRaw
+function isDataCorrect(value: LimitChartDataRaw): value is Required<LimitChartDataRaw> {
+    return typeof value.id !== 'undefined'
+}
+
+const calcualteData = <DataType extends TelemetryDataSaubDto>(data: DataType[]) => {
+    const out = data.filter((row) => row.dateTime).reduce((out, row) => {
+        const last = getLast(out)
+        if (last.id === row.idFeedRegulator) {
+            if (!row.idFeedRegulator) return out
+            last.dateEnd = row.dateTime
+            last.depthEnd = row.wellDepth
+        } else {
+            let n: LimitChartDataRaw = {}
+            if (row.idFeedRegulator) {
+                n = {
+                    id: row.idFeedRegulator,
+                    dateStart: row.dateTime,
+                    dateEnd: row.dateTime,
+                    depthStart: row.wellDepth,
+                    depthEnd: row.wellDepth,
+                }
+            }
+            out.push(n)
+        }
+        return out
+    }, [{}] as LimitChartDataRaw[])
+
+    return out.filter(isDataCorrect).map<LimitChartData>((row) => ({
+        id: row.id,
+        dateStart: new Date(row.dateStart),
+        dateEnd: new Date(row.dateEnd),
+        depthStart: row.depthStart,
+        depthEnd: row.depthEnd,
+    }))
+}
+
+export type D3MonitoringLimitChartProps<DataType> = {
+    yAxis?: d3.ScaleTime<number, number, never>
+    regulators: TelemetryRegulators
+    data: DataType[]
+    width: number
+    height: number
+    left: number
+    top: number
+    zoneWidth?: number
+}
+
+const tooltipWidth = 270
+const tooltipHeight = 120
+
+const displayValue = makeDisplayValue()
+
+const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
+    yAxis,
+    data: chartData,
+    width,
+    height,
+    left,
+    top,
+    regulators,
+    zoneWidth = 0,
+}: D3MonitoringLimitChartProps<DataType>) => {
+    const [ref, setRef] = useState<SVGGElement | null>(null)
+    const [selected, setSelected] = useState<LimitChartData & { x: number, y: number, visible: boolean }>()
+
+    const data = useMemo(() => calcualteData(chartData), [chartData])
+
+    useEffect(() => {
+        if (!ref || !yAxis) return
+        const elms = d3.select(ref).select('.bars').selectAll<SVGRectElement, unknown>('rect').data(data)
+
+        elms.exit().remove()
+        const newElms = elms.enter().append('rect')
+
+        elms.merge(newElms)
+            .attr('width', width)
+            .attr('height', (d) => Math.max(yAxis(d.dateEnd) - yAxis(d.dateStart), 1))
+            .attr('y', (d) => yAxis(d.dateStart))
+            .attr('fill', (d) => regulators[d.id].color)
+            .on('mouseover', (_, d) => {
+                const y = yAxis(d.dateStart) - tooltipHeight
+                setSelected({ ...d, y, x: -tooltipWidth - 10, visible: true })
+            })
+            .on('mouseout', () => setSelected((pre) => pre ? ({ ...pre, visible: false }) : undefined))
+    }, [yAxis, data, ref, width])
+
+    const zoneY1 = useMemo(() => yAxis && selected ? yAxis(selected.dateStart) : 0, [yAxis, selected])
+    const zoneY2 = useMemo(() => yAxis && selected ? yAxis(selected.dateEnd) : 0, [yAxis, selected])
+
+    const opacityStyle: CSSProperties = useMemo(() => ({
+        transition: 'opacity .1s ease-in-out',
+        opacity: selected?.visible ? 1 : 0,
+    }), [selected])
+
+    const tooltipStyle: CSSProperties = useMemo(() => ({
+        ...opacityStyle,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    }), [opacityStyle])
+
+    return (
+        <g transform={`translate(${left}, ${top})`} stroke={'#333'} strokeWidth={1} fill={'none'}>
+            <g ref={setRef} >
+                <g className={'bars'} strokeWidth={0} />
+                {selected && (
+                    <g
+                        style={opacityStyle}
+                        pointerEvents={'none'}
+                        strokeDasharray={'6, 3, 3, 3'}
+                        stroke={regulators[selected.id].color}
+                    >
+                        <line x1={-zoneWidth} x2={0} y1={zoneY1} y2={zoneY1} />
+                        <line x1={-zoneWidth} x2={0} y1={zoneY2} y2={zoneY2} />
+                        <rect
+                            opacity={0.1}
+                            stroke={'none'}
+                            x={-zoneWidth}
+                            y={zoneY1}
+                            width={zoneWidth}
+                            height={zoneY2 - zoneY1}
+                            fill={regulators[selected.id].color}
+                        />
+                    </g>
+                )}
+            </g>
+            <rect x={0} y={0} width={width} height={height} />
+            {selected && (
+                <foreignObject width={tooltipWidth} height={tooltipHeight} x={selected.x} y={selected.y} pointerEvents={'none'}>
+                    <div className={'tooltip bottom'} style={tooltipStyle}>
+                        <span>Ограничивающий параметр</span>
+                        <span>{regulators[selected.id].label}</span>
+                        <Grid style={{ margin: 0, padding: 0 }}>
+                            <GridItem row={1} col={1}>Начало:</GridItem>
+                            <GridItem row={1} col={2}>{formatDate(selected.dateStart)}</GridItem>
+                            <GridItem row={1} col={3}>{displayValue(selected.depthStart)}</GridItem>
+                            <GridItem row={1} col={4}>м.</GridItem>
+                            <GridItem row={2} col={1}>Конец:</GridItem>
+                            <GridItem row={2} col={2}>{formatDate(selected.dateEnd)}</GridItem>
+                            <GridItem row={2} col={3}>{displayValue(selected.depthEnd)}</GridItem>
+                            <GridItem row={2} col={4}>м.</GridItem>
+                        </Grid>
+                    </div>
+                </foreignObject>
+            )}
+        </g>
+    )
+}
+
+export const D3MonitoringLimitChart = memo(_D3MonitoringLimitChart) as typeof _D3MonitoringLimitChart
+
+export default D3MonitoringLimitChart

src/components/d3/monitoring/D3MonitoringLimitEditor.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react'
+import { TelemetryRegulators } from './D3MonitoringLimitChart'
+
+export type D3MonitoringLimitEditorProps = {
+    value: TelemetryRegulators
+    onChange: (value: TelemetryRegulators) => void
+}
+
+const _D3MonitoringLimitEditor = <DataType,>({ value, onChange }: D3MonitoringLimitEditorProps) => {
+
+    return (
+        <></>
+    )
+}
+
+export const D3MonitoringLimitEditor = memo(_D3MonitoringLimitEditor) as typeof _D3MonitoringLimitEditor
+
+export default D3MonitoringLimitEditor

src/components/d3/monitoring/index.ts

@@ -0,0 +1 @@
+export * from './D3MonitoringCharts'

src/components/d3/plugins/index.ts

@@ -1,6 +1,5 @@
 export * from './base'
 export * from './D3ContextMenu'
 export * from './D3Cursor'
-export * from './D3HorizontalCursor'
 export * from './D3Legend'
 export * from './D3Tooltip'

src/pages/Telemetry/Archive/index.jsx

@@ -5,7 +5,7 @@ import { Select } from 'antd'
 
 import { useIdWell } from '@asb/context'
 import { Flex } from '@components/Grid'
-import { D3MonitoringCharts } from '@components/d3'
+import { D3MonitoringCharts } from '@components/d3/monitoring'
 import { CopyUrlButton } from '@components/CopyUrl'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'

src/pages/Telemetry/TelemetryView/index.jsx

@@ -4,7 +4,7 @@ import { Button, Select } from 'antd'
 
 import { useIdWell } from '@asb/context'
 import { makeDateSorter } from '@components/Table'
-import { D3MonitoringCharts } from '@components/d3'
+import { D3MonitoringCharts } from '@components/d3/monitoring'
 import LoaderPortal from '@components/LoaderPortal'
 import { Grid, GridItem, Flex } from '@components/Grid'
 import { invokeWebApiWrapperAsync } from '@components/factory'

src/styles/d3.less

@@ -8,7 +8,7 @@
         @arrow-size: 8px;
 
         width: 100%;
-        height: 100% - @arrow-size;
+        height: 100%;
     
         font-size: 13px;
         color: @color;
@@ -30,6 +30,7 @@
 
         &.top {
             margin-top: @arrow-size;
+            height: 100% - @arrow-size;
 
             &::after {
                 border-bottom-color: @bg-color;
@@ -42,6 +43,7 @@
     
         &.bottom {
             margin-bottom: @arrow-size;
+            height: 100% - @arrow-size;
 
             &::after {
                 border-top-color: @bg-color;
@@ -53,8 +55,11 @@
 
         &.left {
             margin-left: @arrow-size;
+            width: 100% - @arrow-size;
+
             &::after {
                 border-right-color: @bg-color;
+                margin-top: -@arrow-size;
                 top: 50%;
                 right: 100%;
             }
@@ -62,8 +67,11 @@
 
         &.right {
             margin-right: @arrow-size;
+            width: 100% - @arrow-size;
+
             &::after {
                 border-left-color: @bg-color;
+                margin-top: -@arrow-size;
                 top: 50%;
                 left: 100%;
             }

src/utils/functions/numbers.tsx

@@ -35,7 +35,11 @@ export const makeDisplayValue = ({
     def = '----',
     inf = (v) => `${v < 0 ? '-' : ''}\u221E`,
     fixed = 2
-}: DisplayValueOptions) => (v: unknown): ReactNode => {
+}: DisplayValueOptions = {
+    def: '----',
+    inf: (v) => `${v < 0 ? '-' : ''}\u221E`,
+    fixed: 2
+}) => (v: unknown): ReactNode => {
     if (typeof v === 'undefined' || v === null || String(v) === 'NaN') return def
     let f = Number(v)
     if (typeof v === 'string') {