Исправлена обработка данных мониторинга

This commit is contained in:
goodmice 2021-11-18 13:04:30 +05:00
parent 66d6936e6e
commit ad79877336
2 changed files with 20 additions and 14 deletions

View File

@ -45,7 +45,7 @@ export const GetOrCreateDatasetByLineConfig = (data, lineConfig) => {
return dataset 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, }) const [dataParams, setDataParams] = useState({data: {datasets:[]}, yStart, })
useEffect(()=>{ useEffect(()=>{
@ -62,9 +62,6 @@ export const Column = ({ lineGroup, data, postParsing, additionalPointData, inte
...additionalPointData?.(dataItem, lineCfg) ...additionalPointData?.(dataItem, lineCfg)
})).filter(point => (point.x ?? null) !== null && (point.y ?? null) !== null) })).filter(point => (point.x ?? null) !== null && (point.y ?? null) !== null)
if (savePreviousData)
points = [...dataset.data, ...points]
if(points?.length > 2) if(points?.length > 2)
points.sort((a,b) => a.y > b.y ? 1 : -1) points.sort((a,b) => a.y > b.y ? 1 : -1)
@ -79,7 +76,7 @@ export const Column = ({ lineGroup, data, postParsing, additionalPointData, inte
return {...preDataParams} return {...preDataParams}
}) })
}, [data, lineGroup, interval, yDisplay, yStart, postParsing, savePreviousData, additionalPointData]) }, [data, lineGroup, interval, yDisplay, yStart, postParsing, additionalPointData])
return <ChartTimeBase dataParams = { dataParams } options = { chartPluginsOptions } /> return <ChartTimeBase dataParams = { dataParams } options = { chartPluginsOptions } />
} })

View File

@ -2,6 +2,7 @@ import { Grid, GridItem } from '../../components/Grid'
import { Column, GetOrCreateDatasetByLineConfig } from '../../components/charts/Column' import { Column, GetOrCreateDatasetByLineConfig } from '../../components/charts/Column'
import { ChartTimeOnlineFooter } from './ChartTimeOnlineFooter' import { ChartTimeOnlineFooter } from './ChartTimeOnlineFooter'
import { useEffect, useState } from 'react' 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}` }) 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()) ?? [] return min.concat(max.reverse()) ?? []
} }
const RemoveSimilar = (input) => { const RemoveSimilar = (input, accessor) => {
if (!input || input.length <= 0) return input
const data = [input[0]] const data = [input[0]]
for (let i = 1; i < input.length; i++) 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]) data.push(input[i])
return data return data
} }
export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, showBorder, style, headerHeight, pointCount }) => { export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, showBorder, style, headerHeight, pointCount }) => {
const [dataStore, setDataStore] = useState([])
const [lineGroupWithoutShapes, setLineGroupWithoutShapes] = useState([]) const [lineGroupWithoutShapes, setLineGroupWithoutShapes] = useState([])
const dataLast = data?.[data.length - 1] const dataLast = data?.[data.length - 1]
const yStart = new Date(+(dataLast?.date ? new Date(dataLast.date) : new Date()) - interval * 1000 * 0.97) 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 => { lineGroupWithoutShapes.forEach(lineCfg => {
const lineDataSet = GetOrCreateDatasetByLineConfig(data.data, 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) { if (flowChartData) {
lineGroup.filter(cfg => cfg.isShape && cfg.xAccessorName === lineCfg.xAccessorName).forEach(areaCfg => { lineGroup.filter(cfg => cfg.isShape && cfg.xAccessorName === lineCfg.xAccessorName).forEach(areaCfg => {
const dataset = GetOrCreateDatasetByLineConfig(data.data, 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(() => { useEffect(() => {
setLineGroupWithoutShapes(lineGroup.filter(cfg => !cfg.isShape)) setLineGroupWithoutShapes(lineGroup.filter(cfg => !cfg.isShape))
}, [lineGroup]) }, [lineGroup])
@ -75,14 +85,13 @@ export const MonitoringColumn = ({ lineGroup, data, flowChartData, interval, sho
))} ))}
</Grid> </Grid>
<Column <Column
data={data} data={dataStore}
lineGroup={lineGroupWithoutShapes} lineGroup={lineGroupWithoutShapes}
postParsing={postParsing} postParsing={postParsing}
additionalPointData={addPointData} additionalPointData={addPointData}
interval={interval} interval={interval}
yDisplay={false} yDisplay={false}
yStart={yStart} yStart={yStart}
savePreviousData={true}
/> />
</div> </div>
<ChartTimeOnlineFooter data={dataLast} lineGroup={lineGroup} /> <ChartTimeOnlineFooter data={dataLast} lineGroup={lineGroup} />