forked from ddrilling/asb_cloud_front
Исправлена обработка данных мониторинга
This commit is contained in:
parent
66d6936e6e
commit
ad79877336
@ -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 } />
|
||||||
}
|
})
|
||||||
|
@ -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} />
|
||||||
|
Loading…
Reference in New Issue
Block a user