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'
|
|
|
|
|
|
2021-10-19 12:47:21 +05:00
|
|
|
|
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
|
|
|
|
|
2021-10-19 12:47:21 +05:00
|
|
|
|
let spValues = getFooterData('SP')
|
|
|
|
|
const idleValues = getFooterData('IDLE')
|
2021-04-16 15:50:01 +05:00
|
|
|
|
|
2021-10-19 12:47:21 +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}
|
2021-10-19 12:47:21 +05:00
|
|
|
|
<ValueDisplay value={data?.[line.xAccessorName]}/>
|
|
|
|
|
</div>
|
|
|
|
|
))
|
2021-04-16 15:50:01 +05:00
|
|
|
|
|
2021-10-19 12:47:21 +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>
|
2021-10-19 12:47:21 +05:00
|
|
|
|
)
|
|
|
|
|
}
|