commit
8c13a2c108
21 changed files with 554 additions and 177 deletions
@ -1,75 +1,125 @@ |
||||
import { Subtitles } from '@material-ui/icons' |
||||
import { PRIMARY_COLOR } from '../../_constants/common' |
||||
import RDoughnutChart from '../chart/RDoughnutChart' |
||||
import './boxChart.scss' |
||||
import { VerticalBarChart } from '../chart/VerticalBarChart' |
||||
import { useState } from 'react' |
||||
import { useEffect, useState } from 'react' |
||||
import InputDate from '../Auth/InputDate' |
||||
import { renderIconButton, renderIconButtonLeft, renderIconDate } from '../renderIcon' |
||||
|
||||
export default function BoxDoughnutBarChart({dataDoughnut = [], dataBarChart = [], labelsBarChart = [], dateBarChat, onSetDateBarChart, titleDoughnut, subtitleDoughnut, titleLine, subTitleLine}) { |
||||
const Btn = ({ icon, isDisabled = false, onClick }) => { |
||||
return ( |
||||
<div className='d-flex justify-content-center align-items-center'> |
||||
<button className={`d-flex custom-button ${isDisabled ? "button-disable" : ""}`} onClick={onClick} disabled={isDisabled}> |
||||
<div>{icon}</div> |
||||
</button> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default function BoxDoughnutBarChart({ |
||||
dataDoughnut = [],
|
||||
dataBarChart = [],
|
||||
labelsBarChart = [],
|
||||
dateBarChat, |
||||
onSetDateBarChart, |
||||
titleDoughnut, |
||||
subtitleDoughnut, |
||||
titleLine, |
||||
subTitleLine, |
||||
}) { |
||||
const [month, setMonth] = useState(dateBarChat) |
||||
const [monthError, setMonthError] = useState('') |
||||
const [current, target] = dataDoughnut |
||||
|
||||
const changeMonth = (date) => { |
||||
const handleMonthChange = (date) => { |
||||
setMonth(date) |
||||
!!onSetDateBarChart && onSetDateBarChart(date) |
||||
} |
||||
|
||||
const _dataDoughnut = (dataDoughnut?.[0] / dataDoughnut?.[1] === 1 || dataDoughnut?.[0] > dataDoughnut?.[1]) ? [dataDoughnut?.[0]] : [dataDoughnut?.[0], dataDoughnut?.[1] - dataDoughnut?.[0]] |
||||
const renderDoughnutSection = () => ( |
||||
<div style={{borderBottom: '1px solid #c4c4c4', paddingBottom: '1.6rem', flex: 0.38, display: 'flex', flexDirection: 'column'}}> |
||||
{titleDoughnut && <p className='box-chart-title'>{titleDoughnut}</p>} |
||||
{subtitleDoughnut && <p className='box-chart-subtitle'>{subtitleDoughnut}</p>} |
||||
<div className='d-flex flex-1'> |
||||
<div className='doughnut-chart-content flex-1'> |
||||
<RDoughnutChart data={dataDoughnut} /> |
||||
</div> |
||||
<div className='origin-vertical justify-content-center align-item-center flex-1'> |
||||
<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> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
|
||||
const renderBarSection = () => ( |
||||
<div className='d-flex' style={{marginTop: '1.2rem', flexDirection: 'column', flex: 0.62}}> |
||||
{titleLine && <p className='box-chart-title'>{titleLine}</p>} |
||||
{subTitleLine && <p className='box-chart-subtitle'>{subTitleLine}</p>} |
||||
{dataBarChart.length > 0 ? ( |
||||
<div className='flex-1' style={{padding: '1.6rem 0'}}> |
||||
<VerticalBarChart data={dataBarChart} labels={labelsBarChart}/> |
||||
</div> |
||||
) : ( |
||||
<div className="d-flex justify-content-center align-items-center flex-1"> |
||||
Không có dữ liệu để hiển thị |
||||
</div> |
||||
)} |
||||
</div> |
||||
) |
||||
const handleClickNext = () => { |
||||
const newMonth = month.getMonth() + 1; |
||||
const newYear = month.getFullYear(); |
||||
|
||||
if (newMonth > 11) { |
||||
setMonth(new Date(newYear + 1, 0, 1)); |
||||
} else { |
||||
setMonth(new Date(newYear, newMonth, 1)); |
||||
} |
||||
}; |
||||
|
||||
const handleClickPrev = () => { |
||||
const newMonth = month.getMonth() - 1; |
||||
const newYear = month.getFullYear(); |
||||
|
||||
if (newMonth < 0) { |
||||
setMonth(new Date(newYear - 1, 11, 1));
|
||||
} else { |
||||
setMonth(new Date(newYear, newMonth, 1)); |
||||
} |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
onSetDateBarChart?.(month); |
||||
}, [month]); |
||||
|
||||
const renderIconDate = () => { |
||||
return ( |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 20 20"> |
||||
<path
|
||||
fill="#00bbb5"
|
||||
d="M5.673 0a.7.7 0 0 1 .7.7v1.309h7.517v-1.3a.7.7 0 0 1 1.4 0v1.3H18a2 2 0 0 1 2 1.999v13.993A2 2 0 0 1 18 20H2a2 2 0 0 1-2-1.999V4.008a2 2 0 0 1 2-1.999h2.973V.699a.7.7 0 0 1 .7-.699M1.4 7.742v10.259a.6.6 0 0 0 .6.6h16a.6.6 0 0 0 .6-.6V7.756zm5.267 6.877v1.666H5v-1.666zm4.166 0v1.666H9.167v-1.666zm4.167 0v1.666h-1.667v-1.666zm-8.333-3.977v1.666H5v-1.666zm4.166 0v1.666H9.167v-1.666zm4.167 0v1.666h-1.667v-1.666zM4.973 3.408H2a.6.6 0 0 0-.6.6v2.335l17.2.014V4.008a.6.6 0 0 0-.6-.6h-2.71v.929a.7.7 0 0 1-1.4 0v-.929H6.373v.92a.7.7 0 0 1-1.4 0z" |
||||
/> |
||||
</svg> |
||||
) |
||||
} |
||||
const isDisabledNext = new Date(month).getMonth() === new Date().getMonth() && new Date(month).getFullYear() === new Date().getFullYear(); |
||||
|
||||
|
||||
return ( |
||||
<div className="box-chart-container"> |
||||
<div style={{borderBottom: '1px solid #c4c4c4', paddingBottom: '1.6rem', flex: 0.38, display: 'flex', flexDirection: 'column'}}> |
||||
{!!titleDoughnut && <p className='box-chart-title'>{titleDoughnut}</p>} |
||||
{!!subtitleDoughnut && <p className='box-chart-subtitle'>{subtitleDoughnut}</p>} |
||||
<div className='d-flex flex-1'> |
||||
<div className='doughnut-chart-content flex-1'> |
||||
<RDoughnutChart data={_dataDoughnut} /> |
||||
</div> |
||||
<div className='origin-vertical justify-content-center align-item-center flex-1'> |
||||
<p style={{fontSize: '1.8rem'}}>{dataDoughnut?.[0] + '/' + dataDoughnut?.[1]}</p> |
||||
<p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{Math.round(dataDoughnut?.[0]/dataDoughnut?.[1] * 100) + '%'}</p> |
||||
</div> |
||||
{renderDoughnutSection()} |
||||
{renderBarSection()} |
||||
<div className='d-flex justify-content-center align-items-center'> |
||||
<Btn icon={renderIconButtonLeft()} isDisabled={false} onClick={handleClickPrev} /> |
||||
<div className='d-flex justify-content-center align-item-center' style={{width: 140, alignSelf: 'center'}}> |
||||
<InputDate |
||||
maxDate={new Date()} |
||||
label={''} |
||||
styleContainer={{flex: 1}} |
||||
value={month} |
||||
setValue={handleMonthChange} |
||||
name="month" |
||||
renderLabelIcon={renderIconDate} |
||||
errorText={monthError} |
||||
errorAbsolute={true} |
||||
popperPlacement='top' |
||||
typeErrText='underAbsolute' |
||||
isMonthPicker |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div className='d-flex' style={{marginTop: '1.2rem', flexDirection: 'column', flex: 0.62}}> |
||||
{!!titleLine && <p className='box-chart-title'>{titleLine}</p>} |
||||
{!!subTitleLine && <p className='box-chart-subtitle'>{subTitleLine}</p>} |
||||
<div className='flex-1' style={{padding: '1.6rem 0'}}> |
||||
<VerticalBarChart data={dataBarChart} labels={labelsBarChart}/> |
||||
</div> |
||||
</div> |
||||
<div className='d-flex justify-content-center align-item-center' style={{width: 140, alignSelf: 'center'}}> |
||||
{/* {renderArrowLeft()} |
||||
<span style={{padding: '0 2rem', fontSize: '1.8rem'}}>Tháng 11</span> |
||||
{renderArrowRight()} */} |
||||
<InputDate |
||||
maxDate={new Date()} |
||||
label={''} |
||||
styleContainer={{flex: 1}} |
||||
value={month} |
||||
setValue={changeMonth} |
||||
name="month" |
||||
renderLabelIcon={renderIconDate} |
||||
errorText={monthError} |
||||
errorAbsolute={true} |
||||
// placeholder={"Chọn ngày sinh"}
|
||||
popperPlacement='top' |
||||
typeErrText='underAbsolute' |
||||
isMonthPicker |
||||
/> |
||||
<Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} /> |
||||
</div> |
||||
</div> |
||||
) |
||||
|
||||
Loading…
Reference in new issue