From a965a9b69375102a883d925fa7191f405d8c2e3e Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Mon, 3 Oct 2022 13:47:34 +0400
Subject: [PATCH 1/9] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=B0=20=D0=BF=D0=BE=D0=B4?=
 =?UTF-8?q?=D1=81=D0=B8=D1=81=D1=82=D0=B5=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/D3HorizontalChart.tsx     |  4 +--
 src/pages/Telemetry/OperationTime/index.tsx | 28 +++++++++++----------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/d3/D3HorizontalChart.tsx b/src/components/d3/D3HorizontalChart.tsx
index 421108b..05c7888 100644
--- a/src/components/d3/D3HorizontalChart.tsx
+++ b/src/components/d3/D3HorizontalChart.tsx
@@ -129,11 +129,11 @@ const D3HorizontalChart = memo((
                 //@ts-ignore
                 .transition(t)
                 //@ts-ignore
-                .attr('width', d => x(d.data.percent))
+                .attr('width', d => d.data.percent >= 0 ? x(d.data.percent) : 0)
         })
 
         return () => {
-            svg.selectAll("g").selectAll("*").remove()
+            svg.remove()
         }
     }, [width, height, data])
 
diff --git a/src/pages/Telemetry/OperationTime/index.tsx b/src/pages/Telemetry/OperationTime/index.tsx
index d442d29..7423971 100644
--- a/src/pages/Telemetry/OperationTime/index.tsx
+++ b/src/pages/Telemetry/OperationTime/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import React, { memo, ReactNode, useCallback, useEffect, useState } from 'react'
 import { Col, Row, Select } from 'antd'
 import { Moment } from 'moment'
 
@@ -55,9 +55,10 @@ const tableColumns = [
     makeColumn('Кол-во запусков', 'operationCount'),
 ]
 
-const OperationTime = () => {
+const OperationTime = memo(() => {
     const [showLoader, setShowLoader] = useState(false)
     const [data, setData] = useState<DataType[]>([])
+    const [selectedData, setSelectedData] = useState<DataType[]>([])
     const [dateRange, setDateRange] = useState<Moment[]>([])
     const [childrenData, setChildrenData] = useState<ReactNode[]>([])
     const [well] = useWell()
@@ -65,17 +66,18 @@ const OperationTime = () => {
     const errorNotifyText = `Не удалось загрузить данные`
 
     useEffect(() => {
-
         invokeWebApiWrapperAsync(
             async () => {
                 if (!well.id) return
                 try {
-                    setData(arrayOrDefault(await SubsystemOperationTimeService.getStat(
+                    const responseData:DataType[] = arrayOrDefault(await SubsystemOperationTimeService.getStat(
                         well.id,
                         undefined,
                         dateRange[1] ? dateRange[0]?.toISOString() : undefined,
                         dateRange[1]?.toISOString(),
-                        )))
+                    ))
+                    setData(responseData)
+                    setSelectedData(responseData)
                 } catch(e) {
                     setData([])
                     throw e
@@ -95,16 +97,15 @@ const OperationTime = () => {
         )))
     }, [data])
 
-    const selectChange = (value: string[]) => {
-
-        setData(data.reduce((previousValue: DataType[], currentValue) => {
+    const selectChange = useCallback((value: string[]) => {
+        setSelectedData(selectedData.reduce((previousValue: DataType[], currentValue) => {
             if (value.includes(currentValue.subsystemName)) {
                 previousValue.push(currentValue)
             }
             return previousValue
         }, []))
 
-    }
+    },[data]);
 
     return (
         <LoaderPortal show={showLoader}>
@@ -112,8 +113,9 @@ const OperationTime = () => {
             <Row align={'middle'} justify={'space-between'} wrap={false} style={{ backgroundColor: 'white' }}>
                 <Col span={18}>
                     <Select
+                        allowClear
                         mode="multiple"
-                        defaultValue={data.map(d => d.subsystemName)}
+                        value={selectedData.map(d => d.subsystemName)}
                         onChange={selectChange}
                         style={{ width: '100%' }}
                     >
@@ -129,7 +131,7 @@ const OperationTime = () => {
             </Row>
             <div style={{width: '100%', height: '50vh'}}>
                 <D3HorizontalChart
-                    data={data.map(item => ({name: item.subsystemName, percent: item.kUsage * 100}))}
+                    data={selectedData.map(item => ({name: item.subsystemName, percent: item.kUsage * 100}))}
                     colors={subsystemColors}
                     width={'100%'}
                     height={'50vh'}
@@ -138,13 +140,13 @@ const OperationTime = () => {
             <Table
                 size={'small'}
                 columns={tableColumns}
-                dataSource={data.map((d, i) => ({...d, color: subsystemColors[i]}))}
+                dataSource={selectedData.map((d, i) => ({...d, color: subsystemColors[i]}))}
                 scroll={{ y: '25vh', x: true }}
                 pagination={false}
             />
         </LoaderPortal>
     )
-}
+})
 
 export default wrapPrivateComponent(OperationTime, {
     requirements: [],

From 74b309ee872810b18248b7a11ab8e76240fc9b8c Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Tue, 4 Oct 2022 13:55:18 +0400
Subject: [PATCH 2/9] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BD=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=20D3Horizon?=
 =?UTF-8?q?talChart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/D3HorizontalChart.tsx | 55 ++++++++++---------------
 1 file changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/components/d3/D3HorizontalChart.tsx b/src/components/d3/D3HorizontalChart.tsx
index 05c7888..27dc934 100644
--- a/src/components/d3/D3HorizontalChart.tsx
+++ b/src/components/d3/D3HorizontalChart.tsx
@@ -33,8 +33,8 @@ const D3HorizontalChart = memo((
 
     useEffect(() => {
         if (width < 100 || height < 100) return
-        const _width = width - margin.left - margin.right
-        const _height = height - margin.top - margin.bottom
+        const chartWidth = width - margin.left - margin.right
+        const chartHeight = height - margin.top - margin.bottom
 
         const svg = d3.select('#d3-horizontal-chart')
             .attr('width', '100%')
@@ -42,47 +42,42 @@ const D3HorizontalChart = memo((
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`)
 
-        const percents = ['percents']
         const names = data.map(d => d.name)
-
-        const stackedData = d3.stack()
-            //@ts-ignore
-            .keys(percents)(data)
-
         const xMax = 100
 
         // scales
 
         const x = d3.scaleLinear()
             .domain([0, xMax])
-            .range([0, _width])
+            .range([0, chartWidth])
 
         const y = d3.scaleBand()
             .domain(names)
-            .range([0, _height])
-            .padding(0.25)
+            .range([0, chartHeight])
 
         // axes
 
+        const tickValues = [0, 25, 50, 75, 100]
+
         const xAxisTop = d3.axisTop(x)
-            .tickValues([0, 25, 50, 75, 100])
+            .tickValues(tickValues)
             .tickFormat(d => d + '%')
 
         const xAxisBottom = d3.axisBottom(x)
-            .tickValues([0, 25, 50, 75, 100])
+            .tickValues(tickValues)
             .tickFormat(d => d + '%')
 
         const yAxisLeft = d3.axisLeft(y)
 
         const gridlines = d3.axisBottom(x)
-            .tickValues([0, 25, 50, 75, 100])
-            .tickFormat(d => '')
-            .tickSize(_height)
+            .tickValues(tickValues)
+            .tickFormat(() => '')
+            .tickSize(chartHeight)
 
         const yAxisRight = d3.axisRight(y)
             .ticks(0)
             .tickValues([])
-            .tickFormat(d => '')
+            .tickFormat(() => '')
 
         svg.append('g')
             .attr('transform', `translate(0,0)`)
@@ -98,38 +93,30 @@ const D3HorizontalChart = memo((
             .call(yAxisLeft)
 
         svg.append('g')
-            .attr('transform', `translate(0,${_height})`)
+            .attr('transform', `translate(0,${chartHeight})`)
             .call(xAxisBottom)
 
         svg.append('g')
-            .attr('transform', `translate(${_width},0)`)
+            .attr('transform', `translate(${chartWidth},0)`)
             .call(yAxisRight)
 
         const layers = svg.append('g')
             .selectAll('g')
-            .data(stackedData)
+            .data(data)
             .join('g')
 
-        // transition for bars
-        const duration = 1000
-        const t = d3.transition()
-            .duration(duration)
-            .ease(d3.easeLinear)
-
         layers.each(function() {
             d3.select(this)
                 .selectAll('rect')
-                //@ts-ignore
-                .data(d => d)
+                .data(data)
                 .join('rect')
                 .attr('fill', (d, i) => colors ? colors[i] : 'black')
-                //@ts-ignore
-                .attr('y', d => y(d.data.name))
+                .attr('y', d => String(y(d.name)))
                 .attr('height', y.bandwidth())
-                //@ts-ignore
-                .transition(t)
-                //@ts-ignore
-                .attr('width', d => d.data.percent >= 0 ? x(d.data.percent) : 0)
+                .transition()
+                .duration(1000)
+                .ease(d3.easeLinear)
+                .attr('width', d => d.percent >= 0 ? x(d.percent) : 0)
         })
 
         return () => {

From be7e76acf71367910beab59f788605256d473082 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Wed, 5 Oct 2022 14:20:39 +0400
Subject: [PATCH 3/9] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/DateRangeWrapper.tsx   |  5 +-
 src/components/d3/D3HorizontalChart.tsx     | 24 +++++---
 src/pages/Telemetry/OperationTime/index.tsx | 66 +++++++++++++++------
 3 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/src/components/Table/DateRangeWrapper.tsx b/src/components/Table/DateRangeWrapper.tsx
index 587e3bf..4ad140f 100755
--- a/src/components/Table/DateRangeWrapper.tsx
+++ b/src/components/Table/DateRangeWrapper.tsx
@@ -11,6 +11,7 @@ const { RangePicker } = DatePicker
 export type DateRangeWrapperProps = RangePickerSharedProps<Moment> & {
     value?: RangeValue<Moment>,
     isUTC?: boolean
+    allowClear?: boolean
 }
 
 const normalizeDates = (value?: RangeValue<Moment>, isUTC?: boolean): RangeValue<Moment> => {
@@ -21,10 +22,10 @@ const normalizeDates = (value?: RangeValue<Moment>, isUTC?: boolean): RangeValue
   ]
 }
 
-export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, ...other }) => (
+export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, allowClear = false, ...other }) => (
   <RangePicker
     showTime
-    allowClear={false}
+    allowClear={allowClear}
     format={defaultFormat}
     defaultValue={[
       moment().subtract(1, 'days').startOf('day'),
diff --git a/src/components/d3/D3HorizontalChart.tsx b/src/components/d3/D3HorizontalChart.tsx
index 27dc934..939a525 100644
--- a/src/components/d3/D3HorizontalChart.tsx
+++ b/src/components/d3/D3HorizontalChart.tsx
@@ -7,7 +7,7 @@ import { useElementSize } from 'usehooks-ts'
 
 import '@styles/d3.less'
 
-type DataType = {
+export type HorizontalChartDataType = {
     name: string
     percent: number
 }
@@ -15,16 +15,22 @@ type DataType = {
 type D3HorizontalChartProps = {
     width?: string
     height?: string
-    data: DataType[]
+    data: HorizontalChartDataType[]
     colors?: string[]
+    selected?: string | null
+    onMouseOver?: (e: MouseEvent, d: HorizontalChartDataType) => void
+    onMouseOut?: (e: MouseEvent, d: HorizontalChartDataType) => void
 }
 
-const D3HorizontalChart = memo((
+export const D3HorizontalChart = memo((
     {
         width: givenWidth = '100%',
         height: givenHeight = '100%',
+        selected,
         data,
-        colors
+        colors,
+        onMouseOver,
+        onMouseOut,
     }: D3HorizontalChartProps) => {
 
     const [rootRef, { width, height }] = useElementSize()
@@ -54,6 +60,7 @@ const D3HorizontalChart = memo((
         const y = d3.scaleBand()
             .domain(names)
             .range([0, chartHeight])
+            .padding(0.25)
 
         // axes
 
@@ -113,16 +120,17 @@ const D3HorizontalChart = memo((
                 .attr('fill', (d, i) => colors ? colors[i] : 'black')
                 .attr('y', d => String(y(d.name)))
                 .attr('height', y.bandwidth())
-                .transition()
-                .duration(1000)
-                .ease(d3.easeLinear)
                 .attr('width', d => d.percent >= 0 ? x(d.percent) : 0)
+                .attr('stroke', d => selected && d.name === selected ? 'black' : '')
+                .attr('stroke-width', d => selected && d.name === selected ? '2' : '0')
+                .on('mouseover', onMouseOver ? onMouseOver : () => {})
+                .on('mouseout', onMouseOut ? onMouseOut : () => {})
         })
 
         return () => {
             svg.remove()
         }
-    }, [width, height, data])
+    }, [width, height, data, colors, selected, onMouseOver, onMouseOut])
 
     return (
         <LoaderPortal show={false} style={{width: givenWidth, height: givenHeight}}>
diff --git a/src/pages/Telemetry/OperationTime/index.tsx b/src/pages/Telemetry/OperationTime/index.tsx
index 7423971..2caed16 100644
--- a/src/pages/Telemetry/OperationTime/index.tsx
+++ b/src/pages/Telemetry/OperationTime/index.tsx
@@ -5,7 +5,7 @@ import { Moment } from 'moment'
 import { DateRangeWrapper, makeColumn, makeNumericRender, Table } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { arrayOrDefault, wrapPrivateComponent } from '@utils'
-import D3HorizontalChart from '@components/d3/D3HorizontalChart'
+import { D3HorizontalChart, HorizontalChartDataType } from '@components/d3/D3HorizontalChart'
 import { useWell } from '@asb/context'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { SubsystemOperationTimeService } from '@api'
@@ -49,22 +49,50 @@ const tableColumns = [
             <div style={{ backgroundColor: color, padding: '5px 0' }} />
         ) }),
     makeColumn('Подсистема', 'subsystemName'),
-    makeColumn('% использования', 'kUsage', { render: val => (+val * 100).toFixed(2) }),
-    makeColumn('Проходка, м', 'sumDepthInterval', {render: makeNumericRender(2)}),
-    makeColumn('Время работы, ч', 'usedTimeHours', {render: makeNumericRender(2)}),
-    makeColumn('Кол-во запусков', 'operationCount'),
+    makeColumn('% использования', 'kUsage', { width: 200, render: val => makeNumericRender(2)(+val * 100) }),
+    makeColumn('Проходка, м', 'sumDepthInterval', { width: 200, render: makeNumericRender(2) }),
+    makeColumn('Время работы, ч', 'usedTimeHours', { width: 200, render: makeNumericRender(2) }),
+    makeColumn('Кол-во запусков', 'operationCount', { width: 200, render: makeNumericRender(0) }),
 ]
 
 const OperationTime = memo(() => {
     const [showLoader, setShowLoader] = useState(false)
     const [data, setData] = useState<DataType[]>([])
     const [selectedData, setSelectedData] = useState<DataType[]>([])
-    const [dateRange, setDateRange] = useState<Moment[]>([])
+    const [dateRange, setDateRange] = useState<Moment[] | null>([])
+    const [selected, setSelected] = useState<string | null>(null)
     const [childrenData, setChildrenData] = useState<ReactNode[]>([])
     const [well] = useWell()
 
     const errorNotifyText = `Не удалось загрузить данные`
 
+    const onRow = useCallback((item: DataType) => {
+        const out = {
+            onMouseEnter: () => {
+                setSelected(item.subsystemName)
+            },
+            onMouseLeave: () => {
+                setSelected(null)
+            },
+            style: {}
+        }
+
+        if (item.subsystemName === selected) {
+            out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600' }
+
+        }
+
+        return out
+    }, [selected])
+
+    const onMouseOver = useCallback(function (e: MouseEvent, d: HorizontalChartDataType) {
+        setSelected(d.name)
+    }, [])
+
+    const onMouseOut = useCallback(function (e: MouseEvent, d: HorizontalChartDataType) {
+        setSelected(null)
+    }, [])
+
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
@@ -73,8 +101,8 @@ const OperationTime = memo(() => {
                     const responseData:DataType[] = arrayOrDefault(await SubsystemOperationTimeService.getStat(
                         well.id,
                         undefined,
-                        dateRange[1] ? dateRange[0]?.toISOString() : undefined,
-                        dateRange[1]?.toISOString(),
+                        dateRange && dateRange[1] ? dateRange[0]?.toISOString() : undefined,
+                        dateRange && dateRange[1] ? dateRange[1].toISOString() : undefined,
                     ))
                     setData(responseData)
                     setSelectedData(responseData)
@@ -124,25 +152,29 @@ const OperationTime = memo(() => {
                 </Col>
                 <Col span={6}>
                     <DateRangeWrapper
+                        allowClear
+                        allowEmpty={[true, true]}
                         onCalendarChange={(dateRange: any) => setDateRange(dateRange)}
-                        value={[dateRange[0], dateRange[1]]}
+                        value={[dateRange && dateRange[0], dateRange && dateRange[1]]}
                     />
                 </Col>
             </Row>
-            <div style={{width: '100%', height: '50vh'}}>
-                <D3HorizontalChart
-                    data={selectedData.map(item => ({name: item.subsystemName, percent: item.kUsage * 100}))}
-                    colors={subsystemColors}
-                    width={'100%'}
-                    height={'50vh'}
-                />
-            </div>
+            <D3HorizontalChart
+                data={selectedData.map(item => ({name: item.subsystemName, percent: item.kUsage * 100}))}
+                colors={subsystemColors}
+                selected={selected}
+                width={'100%'}
+                height={'50vh'}
+                onMouseOver={onMouseOver}
+                onMouseOut={onMouseOut}
+            />
             <Table
                 size={'small'}
                 columns={tableColumns}
                 dataSource={selectedData.map((d, i) => ({...d, color: subsystemColors[i]}))}
                 scroll={{ y: '25vh', x: true }}
                 pagination={false}
+                onRow={onRow}
             />
         </LoaderPortal>
     )

From 1b23ee343750d3c26f40adfd28d4a59c90e5ba58 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Tue, 11 Oct 2022 01:27:27 +0400
Subject: [PATCH 4/9] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/D3HorizontalPercentChart.tsx           | 20 ++++-------
 src/pages/Telemetry/OperationTime/index.jsx   | 36 ++++++++++++-------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx
index 938ab72..18cc6f8 100644
--- a/src/components/d3/D3HorizontalPercentChart.tsx
+++ b/src/components/d3/D3HorizontalPercentChart.tsx
@@ -20,9 +20,7 @@ export type D3HorizontalChartProps = {
     height?: Property.Height
     data: PercentChartDataType[]
     offset?: Partial<ChartOffset>
-    selected?: string | null
-    onMouseOver?: (e: MouseEvent, d: PercentChartDataType) => void
-    onMouseOut?: (e: MouseEvent, d: PercentChartDataType) => void
+    afterDraw?: (d: d3.Selection<SVGGElement, unknown, null, undefined>) => void
 }
 
 const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 }
@@ -32,9 +30,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     height: givenHeight = '100%',
     offset: givenOffset,
     data,
-    selected = null,
-    onMouseOver = () => {},
-    onMouseOut= () => {},
+    afterDraw,
 }) => {
     const offset = usePartialProps<ChartOffset>(givenOffset, defaultOffset)
 
@@ -51,8 +47,8 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 
     useEffect(() => { /// Отрисовываем оси X сверху и снизу
         if (width < 100 || height < 100 || !root) return
-        const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).tickValues([0, 25, 50, 75, 100]).tickSize(-inlineHeight)
-        const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).tickValues([0, 25, 50, 75, 100])
+        const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
+        const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
 
         root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
         root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
@@ -77,15 +73,13 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
             .selectAll<SVGRectElement, PercentChartDataType>('rect')
             .attr('fill', (d) => d.color || 'black')
             .attr('y', (d) => yScale(d.name) ?? null)
-            .attr('stroke', d => selected && d.name === selected ? 'black' : '')
-            .attr('stroke-width', d => selected && d.name === selected ? '2' : '0')
             .attr('height', yScale.bandwidth())
-            .on('mouseover', onMouseOver)
-            .on('mouseout', onMouseOut)
             .transition(delay)
             .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
 
-    }, [data, width, height, root, yScale, xScale, selected])
+        afterDraw?.(root)
+
+    }, [data, width, height, root, yScale, xScale, afterDraw])
 
     return (
         <LoaderPortal show={false} style={{ width: givenWidth, height: givenHeight }}>
diff --git a/src/pages/Telemetry/OperationTime/index.jsx b/src/pages/Telemetry/OperationTime/index.jsx
index f71457b..1fd56e9 100644
--- a/src/pages/Telemetry/OperationTime/index.jsx
+++ b/src/pages/Telemetry/OperationTime/index.jsx
@@ -45,7 +45,7 @@ export const OperationTime = memo(() => {
     const [showLoader, setShowLoader] = useState(false)
     const [data, setData] = useState([])
     const [selected, setSelected] = useState([])
-    const [selectedOnHover, setSelectedOnHover] = useState(null)
+    const [selectedSubsystem, setSelectedSubsystem] = useState(null)
     const [dateRange, setDateRange] = useState([])
     const [well] = useWell()
 
@@ -63,36 +63,46 @@ export const OperationTime = memo(() => {
     const onRow = useCallback((item) => {
         const out = {
             onMouseEnter: () => {
-                setSelectedOnHover(item.subsystemName)
+                setSelectedSubsystem(item.subsystemName)
             },
             onMouseLeave: () => {
-                setSelectedOnHover(null)
+                setSelectedSubsystem(null)
             },
         }
 
-        if (item.subsystemName === selectedOnHover) {
-            out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600' }
+        if (item.subsystemName === selectedSubsystem) {
+            out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600', transition: 'all 0.2s ease-out' }
         }
 
         return out
-    }, [selectedOnHover])
+    }, [selectedSubsystem])
 
-    const onMouseOver = useCallback(function (e, d) {
-        setSelectedOnHover(d.name)
+    const onMouseOver = useCallback((_, d) => {
+        setSelectedSubsystem(d.name)
     }, [])
 
-    const onMouseOut = useCallback(function (e, d) {
-        setSelectedOnHover(null)
+    const onMouseOut = useCallback(() => {
+        setSelectedSubsystem(null)
     }, [])
 
+    const afterDraw = useCallback(function(selection) {
+        selection.selectAll('rect')
+                 .on('mouseover', onMouseOver)
+                 .on('mouseout', onMouseOut)
+                 .transition(200)
+                 .style('stroke-width', d => d.name === selectedSubsystem ? '2' : '0')
+                 .style('stroke', d => d.name === selectedSubsystem ? 'black' : '')
+                 .style('stroke-opacity', '0.4')
+    }, [onMouseOver, onMouseOut, selectedSubsystem])
+
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
                 if (!well.id) return
 
                 // Ограничение задаётся только если выбраны обе даты
-                const startDate = dateRange && dateRange[1] ? dateRange[0]?.toISOString() : undefined
-                const endDate = dateRange && dateRange[1] ? dateRange[1]?.toISOString() : undefined
+                const startDate = dateRange?.[1] ? dateRange[0]?.toISOString() : undefined
+                const endDate = dateRange?.[1] ? dateRange[1]?.toISOString() : undefined
 
                 const data = await SubsystemOperationTimeService.getStat(well.id, undefined, startDate, endDate)
                 // Выбираем цвета для подсистем (если цветов не хватает начинаем сначала)
@@ -132,11 +142,11 @@ export const OperationTime = memo(() => {
             <D3HorizontalPercentChart
                 data={chartData}
                 colors={subsystemColors}
-                selected={selectedOnHover}
                 width={'100%'}
                 height={'50vh'}
                 onMouseOver={onMouseOver}
                 onMouseOut={onMouseOut}
+                afterDraw={afterDraw}
             />
             <Table
                 bordered

From 6455be0891ff657276ebad95bc20c75c4cae9ba0 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Tue, 11 Oct 2022 11:05:53 +0400
Subject: [PATCH 5/9] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Telemetry/OperationTime/index.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Telemetry/OperationTime/index.jsx b/src/pages/Telemetry/OperationTime/index.jsx
index 1fd56e9..a29d7c5 100644
--- a/src/pages/Telemetry/OperationTime/index.jsx
+++ b/src/pages/Telemetry/OperationTime/index.jsx
@@ -144,8 +144,6 @@ export const OperationTime = memo(() => {
                 colors={subsystemColors}
                 width={'100%'}
                 height={'50vh'}
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
                 afterDraw={afterDraw}
             />
             <Table

From 116de6e912f6395014e6091c0c79285660f432bd Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Wed, 12 Oct 2022 16:45:34 +0400
Subject: [PATCH 6/9] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/D3HorizontalPercentChart.tsx           | 20 ++++++-------
 src/pages/Telemetry/OperationTime/index.jsx   | 30 +++++++------------
 src/styles/operation_time.less                |  5 ++++
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx
index 18cc6f8..224fa52 100644
--- a/src/components/d3/D3HorizontalPercentChart.tsx
+++ b/src/components/d3/D3HorizontalPercentChart.tsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import * as d3 from 'd3'
@@ -20,7 +20,7 @@ export type D3HorizontalChartProps = {
     height?: Property.Height
     data: PercentChartDataType[]
     offset?: Partial<ChartOffset>
-    afterDraw?: (d: d3.Selection<SVGGElement, unknown, null, undefined>) => void
+    afterDraw?: (d: d3.Selection<d3.BaseType, PercentChartDataType, d3.BaseType, unknown>) => void
 }
 
 const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 }
@@ -37,7 +37,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const [divRef, { width, height }] = useElementSize()
     const rootRef = useRef<SVGGElement | null>(null)
 
-    const root = useMemo(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
+    const root = useCallback(() => d3.select(rootRef.current), [rootRef.current])
 
     const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
     const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
@@ -50,15 +50,15 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
         const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
         const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
 
-        root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
-        root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
+        root().selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
+        root().selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
             .selectAll('.tick')
             .attr('class', 'tick grid-line')
     }, [root, width, height, xScale, inlineHeight])
 
     useEffect(() => { /// Отрисовываем ось Y слева
         if (width < 100 || height < 100 || !root) return
-        root.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
+        root().selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
     }, [root, width, height, yScale])
 
     useEffect(() => {
@@ -66,10 +66,10 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 
         const delay = d3.transition().duration(500).ease(d3.easeLinear)
 
-        const rects = root.selectChild('.data').selectAll('rect').data(data)
+        const rects = root().selectChild('.data').selectAll('rect').data(data)
         rects.enter().append('rect')
         rects.exit().remove()
-        root.selectChild<SVGGElement>('.data')
+        root().selectChild<SVGGElement>('.data')
             .selectAll<SVGRectElement, PercentChartDataType>('rect')
             .attr('fill', (d) => d.color || 'black')
             .attr('y', (d) => yScale(d.name) ?? null)
@@ -77,14 +77,14 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
             .transition(delay)
             .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
 
-        afterDraw?.(root)
+        afterDraw?.(root().selectChild('.data').selectAll('rect'))
 
     }, [data, width, height, root, yScale, xScale, afterDraw])
 
     return (
         <LoaderPortal show={false} style={{ width: givenWidth, height: givenHeight }}>
             <div ref={divRef} style={{ width: '100%', height: '100%' }}>
-                <svg id={'d3-horizontal-chart'} width={'100%'} height={'100%'}>
+                <svg width={'100%'} height={'100%'}>
                     <g ref={rootRef} transform={`translate(${offset.left}, ${offset.top})`}>
                         <g className={'axis x top'}></g>
                         <g className={'axis x bottom'} transform={`translate(0, ${inlineHeight})`}></g>
diff --git a/src/pages/Telemetry/OperationTime/index.jsx b/src/pages/Telemetry/OperationTime/index.jsx
index a29d7c5..9e55b25 100644
--- a/src/pages/Telemetry/OperationTime/index.jsx
+++ b/src/pages/Telemetry/OperationTime/index.jsx
@@ -21,6 +21,8 @@ const subsystemColors = [
     '#ecf0f1', '#bdc3c7', '#95a5a6', '#7f8c8d',
 ]
 
+const tableStyle = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600', transition: 'all 0.2s ease-out' }
+
 const tableColumns = [
     makeColumn('Цвет', 'color', { width: 60, render: (backgroundColor) => (
         <div className={'table_color'} style={{ backgroundColor }} />
@@ -62,37 +64,25 @@ export const OperationTime = memo(() => {
 
     const onRow = useCallback((item) => {
         const out = {
-            onMouseEnter: () => {
-                setSelectedSubsystem(item.subsystemName)
-            },
-            onMouseLeave: () => {
-                setSelectedSubsystem(null)
-            },
+            onMouseEnter: () => setSelectedSubsystem(item.subsystemName),
+            onMouseLeave: () => setSelectedSubsystem(null),
         }
 
         if (item.subsystemName === selectedSubsystem) {
-            out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600', transition: 'all 0.2s ease-out' }
+            out.style = tableStyle
         }
 
         return out
     }, [selectedSubsystem])
 
-    const onMouseOver = useCallback((_, d) => {
-        setSelectedSubsystem(d.name)
-    }, [])
+    const onMouseOver = useCallback((_, d) => setSelectedSubsystem(d.name), [])
 
-    const onMouseOut = useCallback(() => {
-        setSelectedSubsystem(null)
-    }, [])
+    const onMouseOut = useCallback(() => setSelectedSubsystem(null), [])
 
-    const afterDraw = useCallback(function(selection) {
-        selection.selectAll('rect')
-                 .on('mouseover', onMouseOver)
+    const afterDraw = useCallback(selection => {
+        selection.on('mouseover', onMouseOver)
                  .on('mouseout', onMouseOut)
-                 .transition(200)
-                 .style('stroke-width', d => d.name === selectedSubsystem ? '2' : '0')
-                 .style('stroke', d => d.name === selectedSubsystem ? 'black' : '')
-                 .style('stroke-opacity', '0.4')
+                 .classed('selected_graph_column', d => d.name === selectedSubsystem)
     }, [onMouseOver, onMouseOut, selectedSubsystem])
 
     useEffect(() => {
diff --git a/src/styles/operation_time.less b/src/styles/operation_time.less
index d35e54f..851c178 100644
--- a/src/styles/operation_time.less
+++ b/src/styles/operation_time.less
@@ -1,3 +1,8 @@
 .table_color {
     padding: 5px 0;
 }
+
+.selected_graph_column {
+    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .6));
+    transition: all 0.2s ease-out
+}
\ No newline at end of file

From 83666424adb23293e2ea10978c10b829e8feae1e Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Wed, 12 Oct 2022 17:37:45 +0400
Subject: [PATCH 7/9] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/D3HorizontalPercentChart.tsx           | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx
index 224fa52..2a532db 100644
--- a/src/components/d3/D3HorizontalPercentChart.tsx
+++ b/src/components/d3/D3HorizontalPercentChart.tsx
@@ -20,7 +20,7 @@ export type D3HorizontalChartProps = {
     height?: Property.Height
     data: PercentChartDataType[]
     offset?: Partial<ChartOffset>
-    afterDraw?: (d: d3.Selection<d3.BaseType, PercentChartDataType, d3.BaseType, unknown>) => void
+    afterDraw?: (d: d3.Selection<SVGRectElement, PercentChartDataType, SVGGElement, unknown>) => void
 }
 
 const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 }
@@ -37,7 +37,8 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const [divRef, { width, height }] = useElementSize()
     const rootRef = useRef<SVGGElement | null>(null)
 
-    const root = useCallback(() => d3.select(rootRef.current), [rootRef.current])
+    const selectedRootRef = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
+    const root = selectedRootRef()
 
     const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
     const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
@@ -50,15 +51,15 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
         const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
         const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
 
-        root().selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
-        root().selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
+        root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
+        root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
             .selectAll('.tick')
             .attr('class', 'tick grid-line')
     }, [root, width, height, xScale, inlineHeight])
 
     useEffect(() => { /// Отрисовываем ось Y слева
         if (width < 100 || height < 100 || !root) return
-        root().selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
+        root.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
     }, [root, width, height, yScale])
 
     useEffect(() => {
@@ -66,18 +67,20 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 
         const delay = d3.transition().duration(500).ease(d3.easeLinear)
 
-        const rects = root().selectChild('.data').selectAll('rect').data(data)
+        const rects = root.selectChild('.data').selectAll('rect').data(data)
         rects.enter().append('rect')
         rects.exit().remove()
-        root().selectChild<SVGGElement>('.data')
-            .selectAll<SVGRectElement, PercentChartDataType>('rect')
-            .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)
 
-        afterDraw?.(root().selectChild('.data').selectAll('rect'))
+        const selectedRects = root.selectChild<SVGGElement>('.data')
+                                  .selectAll<SVGRectElement, PercentChartDataType>('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)
+
+        afterDraw?.(selectedRects)
 
     }, [data, width, height, root, yScale, xScale, afterDraw])
 

From a574b78cdb13b63a68d725c9b6a54889c5d925ca Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Thu, 13 Oct 2022 09:44:59 +0400
Subject: [PATCH 8/9] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/D3HorizontalPercentChart.tsx           | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx
index 2a532db..0b04bd0 100644
--- a/src/components/d3/D3HorizontalPercentChart.tsx
+++ b/src/components/d3/D3HorizontalPercentChart.tsx
@@ -37,8 +37,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const [divRef, { width, height }] = useElementSize()
     const rootRef = useRef<SVGGElement | null>(null)
 
-    const selectedRootRef = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
-    const root = selectedRootRef()
+    const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
 
     const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
     const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
@@ -47,32 +46,35 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const yScale = useMemo(() => d3.scaleBand().domain(data.map((d) => d.name)).range([0, inlineHeight]).padding(0.25), [data, inlineHeight])
 
     useEffect(() => { /// Отрисовываем оси X сверху и снизу
-        if (width < 100 || height < 100 || !root) return
+        const r = root()
+        if (width < 100 || height < 100 || !r) return
         const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
         const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
 
-        root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
-        root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
+        r.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
+        r.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
             .selectAll('.tick')
             .attr('class', 'tick grid-line')
     }, [root, width, height, xScale, inlineHeight])
 
     useEffect(() => { /// Отрисовываем ось Y слева
-        if (width < 100 || height < 100 || !root) return
-        root.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
+        const r = root()
+        if (width < 100 || height < 100 || !r) return
+        r.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
     }, [root, width, height, yScale])
 
     useEffect(() => {
-        if (width < 100 || height < 100 || !root) return
+        const r = root()
+        if (width < 100 || height < 100 || !r) return
 
         const delay = d3.transition().duration(500).ease(d3.easeLinear)
 
-        const rects = root.selectChild('.data').selectAll('rect').data(data)
+        const rects = r.selectChild('.data').selectAll('rect').data(data)
         rects.enter().append('rect')
         rects.exit().remove()
 
-        const selectedRects = root.selectChild<SVGGElement>('.data')
-                                  .selectAll<SVGRectElement, PercentChartDataType>('rect')
+        const selectedRects = r.selectChild<SVGGElement>('.data')
+                               .selectAll<SVGRectElement, PercentChartDataType>('rect')
 
         selectedRects.attr('fill', (d) => d.color || 'black')
                      .attr('y', (d) => yScale(d.name) ?? null)

From fee0849ea46c4ad858bfc39b4bdcb0206fbdb6a3 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Thu, 13 Oct 2022 14:28:06 +0400
Subject: [PATCH 9/9] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BD=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=20D3Horizon?=
 =?UTF-8?q?talChart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Telemetry/OperationTime/index.jsx | 30 +--------------------
 src/styles/operation_time.less              |  5 ----
 2 files changed, 1 insertion(+), 34 deletions(-)

diff --git a/src/pages/Telemetry/OperationTime/index.jsx b/src/pages/Telemetry/OperationTime/index.jsx
index 9e55b25..3b78fae 100644
--- a/src/pages/Telemetry/OperationTime/index.jsx
+++ b/src/pages/Telemetry/OperationTime/index.jsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import { Select } from 'antd'
 import moment from 'moment'
 
@@ -21,8 +21,6 @@ const subsystemColors = [
     '#ecf0f1', '#bdc3c7', '#95a5a6', '#7f8c8d',
 ]
 
-const tableStyle = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600', transition: 'all 0.2s ease-out' }
-
 const tableColumns = [
     makeColumn('Цвет', 'color', { width: 60, render: (backgroundColor) => (
         <div className={'table_color'} style={{ backgroundColor }} />
@@ -47,7 +45,6 @@ export const OperationTime = memo(() => {
     const [showLoader, setShowLoader] = useState(false)
     const [data, setData] = useState([])
     const [selected, setSelected] = useState([])
-    const [selectedSubsystem, setSelectedSubsystem] = useState(null)
     const [dateRange, setDateRange] = useState([])
     const [well] = useWell()
 
@@ -62,29 +59,6 @@ export const OperationTime = memo(() => {
         color: d.color,
     })), [selectedData])
 
-    const onRow = useCallback((item) => {
-        const out = {
-            onMouseEnter: () => setSelectedSubsystem(item.subsystemName),
-            onMouseLeave: () => setSelectedSubsystem(null),
-        }
-
-        if (item.subsystemName === selectedSubsystem) {
-            out.style = tableStyle
-        }
-
-        return out
-    }, [selectedSubsystem])
-
-    const onMouseOver = useCallback((_, d) => setSelectedSubsystem(d.name), [])
-
-    const onMouseOut = useCallback(() => setSelectedSubsystem(null), [])
-
-    const afterDraw = useCallback(selection => {
-        selection.on('mouseover', onMouseOver)
-                 .on('mouseout', onMouseOut)
-                 .classed('selected_graph_column', d => d.name === selectedSubsystem)
-    }, [onMouseOver, onMouseOut, selectedSubsystem])
-
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
@@ -134,7 +108,6 @@ export const OperationTime = memo(() => {
                 colors={subsystemColors}
                 width={'100%'}
                 height={'50vh'}
-                afterDraw={afterDraw}
             />
             <Table
                 bordered
@@ -143,7 +116,6 @@ export const OperationTime = memo(() => {
                 dataSource={selectedData}
                 scroll={{ y: '25vh', x: true }}
                 pagination={false}
-                onRow={onRow}
             />
         </LoaderPortal>
     )
diff --git a/src/styles/operation_time.less b/src/styles/operation_time.less
index 851c178..db5332d 100644
--- a/src/styles/operation_time.less
+++ b/src/styles/operation_time.less
@@ -1,8 +1,3 @@
 .table_color {
     padding: 5px 0;
-}
-
-.selected_graph_column {
-    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .6));
-    transition: all 0.2s ease-out
 }
\ No newline at end of file