From ad798773367de63b50c8ac5c17824afb6c9e1f68 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Thu, 18 Nov 2021 13:04:30 +0500
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=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BC?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/Column.jsx             |  9 +++----
 src/pages/TelemetryView/MonitoringColumn.jsx | 25 +++++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/charts/Column.jsx b/src/components/charts/Column.jsx
index cc48d04..3944dc3 100644
--- a/src/components/charts/Column.jsx
+++ b/src/components/charts/Column.jsx
@@ -45,7 +45,7 @@ export const GetOrCreateDatasetByLineConfig = (data, lineConfig) => {
   return dataset
 }
 
-export const Column = ({ lineGroup, data, postParsing, additionalPointData, interval, yDisplay, yStart, savePreviousData }) => {
+export const Column = React.memo(({ lineGroup, data, postParsing, additionalPointData, interval, yDisplay, yStart }) => {
   const [dataParams, setDataParams] = useState({data: {datasets:[]}, yStart, })
 
   useEffect(()=>{
@@ -62,9 +62,6 @@ export const Column = ({ lineGroup, data, postParsing, additionalPointData, inte
           ...additionalPointData?.(dataItem, lineCfg)
         })).filter(point => (point.x ?? null) !== null && (point.y ?? null) !== null)
 
-        if (savePreviousData)
-          points = [...dataset.data, ...points]
-
         if(points?.length > 2)
           points.sort((a,b) => a.y > b.y ? 1 : -1)
 
@@ -79,7 +76,7 @@ export const Column = ({ lineGroup, data, postParsing, additionalPointData, inte
       return {...preDataParams}
     })
 
-  }, [data, lineGroup, interval, yDisplay, yStart, postParsing, savePreviousData, additionalPointData])
+  }, [data, lineGroup, interval, yDisplay, yStart, postParsing, additionalPointData])
 
   return <ChartTimeBase dataParams = { dataParams } options = { chartPluginsOptions } />
-}
+})
diff --git a/src/pages/TelemetryView/MonitoringColumn.jsx b/src/pages/TelemetryView/MonitoringColumn.jsx
index 97e4be0..7a0c79c 100644
--- a/src/pages/TelemetryView/MonitoringColumn.jsx
+++ b/src/pages/TelemetryView/MonitoringColumn.jsx
@@ -2,6 +2,7 @@ import { Grid, GridItem } from '../../components/Grid'
 import { Column, GetOrCreateDatasetByLineConfig } from '../../components/charts/Column'
 import { ChartTimeOnlineFooter } from './ChartTimeOnlineFooter'
 import { useEffect, useState } from 'react'
+import { makeDateSorter } from '../../components/Table'
 
 const stroke = (sz = '2px', c = 'white') => ({ textShadow: `-${sz} -${sz} 0 ${c}, ${sz} -${sz} 0 ${c}, -${sz} ${sz} 0 ${c}, ${sz} ${sz} 0 ${c}` })
 
@@ -19,15 +20,17 @@ const GetLimitShape = (flowChartData, points, accessor) => {
   return min.concat(max.reverse()) ?? []
 }
 
-const RemoveSimilar = (input) => {
+const RemoveSimilar = (input, accessor) => {
+  if (!input || input.length <= 0) return input
   const data = [input[0]]
   for (let i = 1; i < input.length; i++)
-    if (input[i].y !== input[i - 1].y)
+    if (input[i][accessor] !== input[i - 1][accessor])
       data.push(input[i])
   return data
 }
 
 export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, showBorder, style, headerHeight, pointCount }) => {
+  const [dataStore, setDataStore] = useState([])
   const [lineGroupWithoutShapes, setLineGroupWithoutShapes] = useState([])
   const dataLast = data?.[data.length - 1]
   const yStart = new Date(+(dataLast?.date ? new Date(dataLast.date) : new Date()) - interval * 1000 * 0.97)
@@ -44,10 +47,6 @@ export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, sho
     lineGroupWithoutShapes.forEach(lineCfg => {
       const lineDataSet = GetOrCreateDatasetByLineConfig(data.data, lineCfg)
 
-      lineDataSet.data = RemoveSimilar(lineDataSet.data)
-      if (lineDataSet.data.length > pointCount)
-        lineDataSet.data.splice(0, pointCount - lineDataSet.data.length)
-
       if (flowChartData) {
         lineGroup.filter(cfg => cfg.isShape && cfg.xAccessorName === lineCfg.xAccessorName).forEach(areaCfg => {
           const dataset = GetOrCreateDatasetByLineConfig(data.data, areaCfg)
@@ -57,6 +56,17 @@ export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, sho
     })
   }
 
+  useEffect(() => {
+    setDataStore(prevData => {
+      let newData = [...prevData, ...data]
+      newData.sort(makeDateSorter('date'))
+      newData = RemoveSimilar(newData, 'date')
+      if (newData.length > pointCount)
+        newData.splice(0, pointCount - newData.length)
+      return newData
+    })
+  }, [data, pointCount])
+
   useEffect(() => {
     setLineGroupWithoutShapes(lineGroup.filter(cfg => !cfg.isShape))
   }, [lineGroup])
@@ -75,14 +85,13 @@ export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, sho
           ))}
         </Grid>
         <Column
-          data={data}
+          data={dataStore}
           lineGroup={lineGroupWithoutShapes}
           postParsing={postParsing}
           additionalPointData={addPointData}
           interval={interval}
           yDisplay={false}
           yStart={yStart}
-          savePreviousData={true}
         />
       </div>
       <ChartTimeOnlineFooter data={dataLast} lineGroup={lineGroup} />