forked from HoangLaoTa/gk_se_web_report
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.1 KiB
32 lines
1.1 KiB
import { PRIMARY_COLOR } from '../../_constants/common'
|
|
import RDoughnutChart from '../chart/RDoughnutChart'
|
|
import './boxChart.scss'
|
|
|
|
export default function BoxDoughnutChart({data = [], title, propsContainer}) {
|
|
const [current, target] = data
|
|
|
|
const chartData = (current / target === 1 || current > target) ? [current] : [current, target - current];
|
|
|
|
const renderStats = () => {
|
|
return (
|
|
<>
|
|
<p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
|
|
<p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>{target > 0 ? target : '...'}</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="box-chart-container" {...propsContainer}>
|
|
<p className='box-chart-subtitle'>{title}</p>
|
|
<div className='d-flex flex-1'>
|
|
<div className='doughnut-chart-content flex-1'>
|
|
<RDoughnutChart data={chartData} />
|
|
</div>
|
|
<div className='origin-vertical justify-content-center align-item-center flex-1'>
|
|
{renderStats()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |