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] =?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: [],