|
|
|
@ -14,15 +14,32 @@ import {
|
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { Search } from 'react-feather'; |
|
|
|
|
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; |
|
|
|
|
import { Bar, Doughnut, Polar } from 'react-chartjs-2'; |
|
|
|
|
import { Bar, Doughnut } from 'react-chartjs-2'; |
|
|
|
|
import { useState } from 'react'; |
|
|
|
|
|
|
|
|
|
export default function FlightContainer({ |
|
|
|
|
tooltipShadow, |
|
|
|
|
gridLineColor, |
|
|
|
|
labelColor |
|
|
|
|
}) { |
|
|
|
|
const [searchType, setSearchType] = useState({ |
|
|
|
|
type: 'year', |
|
|
|
|
year: new Date().getFullYear(), |
|
|
|
|
month: new Date().getMonth() + 1, |
|
|
|
|
day: new Date().getDate() |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log(searchType); |
|
|
|
|
|
|
|
|
|
const titleName = '비행 통계'; |
|
|
|
|
|
|
|
|
|
const handleChangeSearchType = (type, val) => { |
|
|
|
|
setSearchType({ |
|
|
|
|
...searchType, |
|
|
|
|
[type]: type === 'type' ? val : Number(val) |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
|
elements: { |
|
|
|
|
rectangle: { |
|
|
|
@ -318,46 +335,83 @@ export default function FlightContainer({
|
|
|
|
|
<div className='select-date-wrap'> |
|
|
|
|
<Row> |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput inline type='select' id='' bsSize='sm'> |
|
|
|
|
<option>년</option> |
|
|
|
|
<option>월</option> |
|
|
|
|
<option>일</option> |
|
|
|
|
<option>시간</option> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='select' |
|
|
|
|
id='' |
|
|
|
|
bsSize='sm' |
|
|
|
|
value={searchType.type} |
|
|
|
|
onChange={e => |
|
|
|
|
handleChangeSearchType('type', e.target.value) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option value='year'>년</option> |
|
|
|
|
<option value='month'>월</option> |
|
|
|
|
<option value='day'>일</option> |
|
|
|
|
<option value='time'>시간</option> |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{searchType.type === 'month' || |
|
|
|
|
searchType.type === 'day' || |
|
|
|
|
searchType.type === 'time' ? ( |
|
|
|
|
<> |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput inline type='select' id='' bsSize='sm'> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='select' |
|
|
|
|
id='' |
|
|
|
|
bsSize='sm' |
|
|
|
|
value={searchType.year} |
|
|
|
|
onChange={e => |
|
|
|
|
handleChangeSearchType('year', e.target.value) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option>2023</option> |
|
|
|
|
<option>2022</option> |
|
|
|
|
<option>2021</option> |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
{searchType.type === 'day' || |
|
|
|
|
searchType.type === 'time' ? ( |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='select' |
|
|
|
|
id='' |
|
|
|
|
bsSize='sm' |
|
|
|
|
value='월' |
|
|
|
|
value={searchType.month} |
|
|
|
|
onChange={e => |
|
|
|
|
handleChangeSearchType( |
|
|
|
|
'month', |
|
|
|
|
e.target.value |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option value={1}>1</option> |
|
|
|
|
<option value={2}>2</option> |
|
|
|
|
<option value={11}>11</option> |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
{searchType.type === 'time' ? ( |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='select' |
|
|
|
|
id='' |
|
|
|
|
bsSize='sm' |
|
|
|
|
value='일' |
|
|
|
|
value={searchType.day} |
|
|
|
|
onChange={e => |
|
|
|
|
handleChangeSearchType('day', e.target.value) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option value={1}>1</option> |
|
|
|
|
<option value={2}>2</option> |
|
|
|
|
<option value={7}>7</option> |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
</> |
|
|
|
|
) : null} |
|
|
|
|
</Row> |
|
|
|
|
{/* <Calendar size={14} /> |
|
|
|
|
<Flatpickr |
|
|
|
|