Доработан график D3HorizontalChart

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>
     )

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
 }