asb_cloud_front/src/pages/TelemetryView/ChartTimeOnlineFooter.jsx

42 lines
1.3 KiB
React
Raw Normal View History

2021-08-12 17:47:16 +05:00
import {ValueDisplay} from '../../components/Display'
2021-04-16 15:50:01 +05:00
import {ControlOutlined} from '@ant-design/icons'
import {Popover} from 'antd'
export const ChartTimeOnlineFooter = ({ data, lineGroup }) => {
const getFooterData = (name) => {
const dataIdx = data && lineGroup?.find(line => line?.footer === name)?.xAccessorName
return (<ValueDisplay value={data?.[dataIdx]}/>)
}
2021-04-16 15:50:01 +05:00
let spValues = getFooterData('SP')
const idleValues = getFooterData('IDLE')
2021-04-16 15:50:01 +05:00
const popContent = lineGroup?.filter(line => line.footer === true).map(line => (
2021-04-16 15:50:01 +05:00
<div key={line.label}>
{line.label}
<ValueDisplay value={data?.[line.xAccessorName]}/>
</div>
))
2021-04-16 15:50:01 +05:00
return(
<div>
{popContent?.length > 0 ? (
<Popover content={popContent}>
<div className={'chart-footer'}>
<ControlOutlined className={'display_label'}/>
<div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
</div>
</Popover>
) : (
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
</div>
)}
<div style={{display: 'flex'}}>
<span className='display_label'>х.х.</span>
<div style={{display: 'flex', flexDirection: 'column'}}>{idleValues}</div>
2021-04-16 15:50:01 +05:00
</div>
</div>
)
}