|
|
|
@ -7,17 +7,106 @@ import {
|
|
|
|
|
Col, |
|
|
|
|
Row, |
|
|
|
|
Card, |
|
|
|
|
CardHeader, |
|
|
|
|
CardTitle, |
|
|
|
|
CardBody, |
|
|
|
|
FormGroup, |
|
|
|
|
Input, |
|
|
|
|
CustomInput, |
|
|
|
|
Label |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { Search } from 'react-feather'; |
|
|
|
|
import { Search, Calendar } from 'react-feather'; |
|
|
|
|
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; |
|
|
|
|
import { Bar } from 'react-chartjs-2'; |
|
|
|
|
import Flatpickr from 'react-flatpickr'; |
|
|
|
|
|
|
|
|
|
export default function Flight() { |
|
|
|
|
export default function Flight({ |
|
|
|
|
tooltipShadow, |
|
|
|
|
gridLineColor, |
|
|
|
|
labelColor, |
|
|
|
|
successColorShade |
|
|
|
|
}) { |
|
|
|
|
const titleName = '비행 통계'; |
|
|
|
|
const options = { |
|
|
|
|
elements: { |
|
|
|
|
rectangle: { |
|
|
|
|
borderWidth: 2, |
|
|
|
|
borderSkipped: 'bottom' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
responsive: true, |
|
|
|
|
maintainAspectRatio: false, |
|
|
|
|
responsiveAnimationDuration: 500, |
|
|
|
|
legend: { |
|
|
|
|
display: false |
|
|
|
|
}, |
|
|
|
|
tooltips: { |
|
|
|
|
// Updated default tooltip UI
|
|
|
|
|
shadowOffsetX: 1, |
|
|
|
|
shadowOffsetY: 1, |
|
|
|
|
shadowBlur: 8, |
|
|
|
|
shadowColor: tooltipShadow, |
|
|
|
|
backgroundColor: '#fff', |
|
|
|
|
titleFontColor: '#000', |
|
|
|
|
bodyFontColor: '#000' |
|
|
|
|
}, |
|
|
|
|
scales: { |
|
|
|
|
xAxes: [ |
|
|
|
|
{ |
|
|
|
|
display: true, |
|
|
|
|
gridLines: { |
|
|
|
|
display: true, |
|
|
|
|
color: gridLineColor, |
|
|
|
|
zeroLineColor: gridLineColor |
|
|
|
|
}, |
|
|
|
|
scaleLabel: { |
|
|
|
|
display: false |
|
|
|
|
}, |
|
|
|
|
ticks: { |
|
|
|
|
fontColor: labelColor |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
yAxes: [ |
|
|
|
|
{ |
|
|
|
|
display: true, |
|
|
|
|
gridLines: { |
|
|
|
|
color: gridLineColor, |
|
|
|
|
zeroLineColor: gridLineColor |
|
|
|
|
}, |
|
|
|
|
ticks: { |
|
|
|
|
stepSize: 100, |
|
|
|
|
min: 0, |
|
|
|
|
max: 400, |
|
|
|
|
fontColor: labelColor |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data = { |
|
|
|
|
labels: [ |
|
|
|
|
'7/12', |
|
|
|
|
'8/12', |
|
|
|
|
'9/12', |
|
|
|
|
'10/12', |
|
|
|
|
'11/12', |
|
|
|
|
'12/12', |
|
|
|
|
'13/12', |
|
|
|
|
'14/12', |
|
|
|
|
'15/12', |
|
|
|
|
'16/12', |
|
|
|
|
'17/12' |
|
|
|
|
], |
|
|
|
|
datasets: [ |
|
|
|
|
{ |
|
|
|
|
data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190], |
|
|
|
|
backgroundColor: successColorShade, |
|
|
|
|
borderColor: 'transparent', |
|
|
|
|
barThickness: 15 |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
return ( |
|
|
|
|
<CustomMainLayout title={titleName}> |
|
|
|
|
<div className='pal-card-box'> |
|
|
|
@ -160,6 +249,39 @@ export default function Flight() {
|
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
|
|
|
|
<div> |
|
|
|
|
<h4>비행시간 통계</h4> |
|
|
|
|
</div> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple color='primary' size='sm'> |
|
|
|
|
<Search size={16} /> |
|
|
|
|
검색 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Card> |
|
|
|
|
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> |
|
|
|
|
<CardTitle tag='h4'>Latest Statistics</CardTitle> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Calendar size={14} /> |
|
|
|
|
<Flatpickr |
|
|
|
|
options={{ |
|
|
|
|
mode: 'range', |
|
|
|
|
defaultDate: ['2019-05-01', '2019-05-10'] |
|
|
|
|
}} |
|
|
|
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</CardHeader> |
|
|
|
|
<CardBody> |
|
|
|
|
<div style={{ height: '400px' }}> |
|
|
|
|
<Bar data={data} options={options} height={400} /> |
|
|
|
|
</div> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</CustomMainLayout> |
|
|
|
|
); |
|
|
|
|