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