hhjk00
11 months ago
3 changed files with 403 additions and 408 deletions
@ -0,0 +1,399 @@
|
||||
import '../../assets/css/custom.css'; |
||||
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||
import '@styles/react/libs/tables/react-dataTable-component.scss'; |
||||
import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; |
||||
import { |
||||
Button, |
||||
Col, |
||||
Row, |
||||
Card, |
||||
CardHeader, |
||||
CardTitle, |
||||
CardBody, |
||||
CustomInput |
||||
} from 'reactstrap'; |
||||
import { Search } from 'react-feather'; |
||||
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; |
||||
import { Bar, Doughnut, Polar } from 'react-chartjs-2'; |
||||
|
||||
export default function FlightContainer({ |
||||
tooltipShadow, |
||||
gridLineColor, |
||||
labelColor |
||||
}) { |
||||
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: '#00bcd4', |
||||
borderColor: '#00bcd4', |
||||
barThickness: 15 |
||||
} |
||||
] |
||||
}; |
||||
|
||||
const options2 = { |
||||
responsive: true, |
||||
maintainAspectRatio: true, |
||||
responsiveAnimationDuration: 500, |
||||
cutoutPercentage: 60, |
||||
legend: { |
||||
position: 'bottom', |
||||
labels: { |
||||
usePointStyle: true, |
||||
padding: 18, |
||||
boxWidth: 8, |
||||
fontColor: labelColor, |
||||
fontSize: 14, |
||||
fontWeight: 500, |
||||
fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR'] |
||||
} |
||||
}, |
||||
tooltips: { |
||||
callbacks: { |
||||
label(tooltipItem, data) { |
||||
const label = data.datasets[0].labels[tooltipItem.index] || '', |
||||
value = data.datasets[0].data[tooltipItem.index]; |
||||
const output = ` ${label} : ${value} %`; |
||||
return output; |
||||
} |
||||
}, |
||||
shadowOffsetX: 1, |
||||
shadowOffsetY: 1, |
||||
shadowBlur: 8, |
||||
shadowColor: tooltipShadow, |
||||
backgroundColor: '#fff', |
||||
titleFontColor: '#000', |
||||
bodyFontColor: '#000' |
||||
} |
||||
}, |
||||
data2 = { |
||||
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], |
||||
datasets: [ |
||||
{ |
||||
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], |
||||
data: [10, 20, 30, 40, 80], |
||||
//레드버전
|
||||
// backgroundColor: [
|
||||
// '#ffe8d1',
|
||||
// '#ffb59e',
|
||||
// '#f0826b',
|
||||
// '#Bd4f38',
|
||||
// '#8a1c05'
|
||||
// ],
|
||||
|
||||
backgroundColor: [ |
||||
'#ccffff', |
||||
'#99ffff', |
||||
'#66ffff', |
||||
'#33efff', |
||||
'#00bcd4' |
||||
], |
||||
borderWidth: 0, |
||||
pointStyle: 'rectRounded' |
||||
} |
||||
] |
||||
}; |
||||
|
||||
return ( |
||||
<CustomMainLayout title={titleName}> |
||||
<div className='pal-card-box statistics'> |
||||
<div> |
||||
<Row> |
||||
<Col md='4'> |
||||
<div> |
||||
<table className='statistics-table'> |
||||
<tr> |
||||
<th rowSpan='2'> |
||||
<span> |
||||
<FcAlarmClock /> |
||||
</span> |
||||
<span>총 비행시간</span> |
||||
<span>PA0001</span> |
||||
</th> |
||||
<td colSpan='3'> |
||||
<span className='date'>년</span> |
||||
<span className='date-data'>8일 10시간 35분 12초</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<span className='date'>월</span> |
||||
<span className='date-data'>1일 35분 12초</span> |
||||
</td> |
||||
<td> |
||||
<span className='date'>일</span> |
||||
<span className='date-data'>35분 12초</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</Col> |
||||
<Col md='4'> |
||||
<div> |
||||
<table className='statistics-table'> |
||||
<tr> |
||||
<th rowSpan='2'> |
||||
<span> |
||||
<FcWorkflow /> |
||||
</span> |
||||
<span>총 비행거리</span> |
||||
<span>PA0002</span> |
||||
</th> |
||||
<td colSpan='3'> |
||||
<span className='date'>년</span> |
||||
<span className='date-data'>10,845m</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<span className='date'>월</span> |
||||
<span className='date-data'>1,201m</span> |
||||
</td> |
||||
<td> |
||||
<span className='date'>일</span> |
||||
<span className='date-data'>53m</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</Col> |
||||
<Col md='4'> |
||||
<div> |
||||
<table className='statistics-table'> |
||||
<tr> |
||||
<th rowSpan='2'> |
||||
<span> |
||||
<FcBarChart /> |
||||
</span> |
||||
<span>총 비행횟수</span> |
||||
<span>PA0002</span> |
||||
</th> |
||||
<td colSpan='3'> |
||||
<span className='date'>년</span> |
||||
<span className='date-data'>1,024,845건</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<span className='date'>월</span> |
||||
<span className='date-data'>111,201건</span> |
||||
</td> |
||||
<td> |
||||
<span className='date'>일</span> |
||||
<span className='date-data'>153건</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div> |
||||
<Row> |
||||
<Col> |
||||
<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> |
||||
<CardBody className='pal-card-body'> |
||||
<div className='search-cont'> |
||||
<dl> |
||||
<dt> |
||||
<div className='search-box'> |
||||
<div className='search-list-ti'>검색조건</div> |
||||
<div className='search-list'> |
||||
<div className='search-list-cont'> |
||||
<Row> |
||||
<Col className='list-input' md='4' sm='12'> |
||||
<CustomInput |
||||
inline |
||||
type='select' |
||||
id='' |
||||
bsSize='sm' |
||||
> |
||||
<option>비행시간</option> |
||||
<option>비행거리</option> |
||||
<option>비행횟수</option> |
||||
</CustomInput> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dt> |
||||
</dl> |
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div> |
||||
<Row className='mt-2'> |
||||
<Col md='8' className='chart-wrap'> |
||||
<Card> |
||||
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> |
||||
<CardTitle tag='h4'>비행 시간 통계</CardTitle> |
||||
<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> |
||||
</div> |
||||
<div className='select-date'> |
||||
<CustomInput inline type='select' id='' bsSize='sm'> |
||||
<option>2023</option> |
||||
<option>2022</option> |
||||
<option>2021</option> |
||||
</CustomInput> |
||||
</div> |
||||
<div className='select-date'> |
||||
<CustomInput |
||||
inline |
||||
type='select' |
||||
id='' |
||||
bsSize='sm' |
||||
value='월' |
||||
> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
</CustomInput> |
||||
</div> |
||||
<div className='select-date'> |
||||
<CustomInput |
||||
inline |
||||
type='select' |
||||
id='' |
||||
bsSize='sm' |
||||
value='일' |
||||
> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
</CustomInput> |
||||
</div> |
||||
</Row> |
||||
{/* <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> |
||||
</Col> |
||||
<Col md='4' className='chart-wrap'> |
||||
<Card> |
||||
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> |
||||
<CardTitle tag='h4'>비행시간 TOP5</CardTitle> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<div style={{ height: '275px' }}> |
||||
<Doughnut data={data2} options={options2} height={275} /> |
||||
</div> |
||||
{/* <div className='d-flex justify-content-between mt-3 mb-1'> |
||||
<div className='d-flex align-items-center'></div> |
||||
</div> */} |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</CustomMainLayout> |
||||
); |
||||
} |
@ -1,412 +1,8 @@
|
||||
import '../../assets/css/custom.css'; |
||||
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||
import '@styles/react/libs/tables/react-dataTable-component.scss'; |
||||
import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; |
||||
import { |
||||
Button, |
||||
Col, |
||||
Row, |
||||
Card, |
||||
CardHeader, |
||||
CardTitle, |
||||
CardBody, |
||||
FormGroup, |
||||
Input, |
||||
CustomInput, |
||||
Label |
||||
} from 'reactstrap'; |
||||
import { |
||||
Search, |
||||
Calendar, |
||||
Monitor, |
||||
Tablet, |
||||
ArrowDown, |
||||
ArrowUp |
||||
} from 'react-feather'; |
||||
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; |
||||
import { Bar, Doughnut, Polar } from 'react-chartjs-2'; |
||||
import Flatpickr from 'react-flatpickr'; |
||||
import FlightContainer from '../../containers/statistics/FlightContainer'; |
||||
|
||||
export default function Flight({ |
||||
tooltipShadow, |
||||
gridLineColor, |
||||
labelColor, |
||||
successColorShade, |
||||
warningLightColor, |
||||
primary |
||||
}) { |
||||
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: '#00bcd4', |
||||
borderColor: '#00bcd4', |
||||
barThickness: 15 |
||||
} |
||||
] |
||||
}; |
||||
|
||||
const options2 = { |
||||
responsive: true, |
||||
maintainAspectRatio: true, |
||||
responsiveAnimationDuration: 500, |
||||
cutoutPercentage: 60, |
||||
legend: { |
||||
position: 'bottom', |
||||
labels: { |
||||
usePointStyle: true, |
||||
padding: 18, |
||||
boxWidth: 8, |
||||
fontColor: labelColor, |
||||
fontSize: 14, |
||||
fontWeight: 500, |
||||
fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR'] |
||||
} |
||||
}, |
||||
tooltips: { |
||||
callbacks: { |
||||
label(tooltipItem, data) { |
||||
const label = data.datasets[0].labels[tooltipItem.index] || '', |
||||
value = data.datasets[0].data[tooltipItem.index]; |
||||
const output = ` ${label} : ${value} %`; |
||||
return output; |
||||
} |
||||
}, |
||||
shadowOffsetX: 1, |
||||
shadowOffsetY: 1, |
||||
shadowBlur: 8, |
||||
shadowColor: tooltipShadow, |
||||
backgroundColor: '#fff', |
||||
titleFontColor: '#000', |
||||
bodyFontColor: '#000' |
||||
} |
||||
}, |
||||
data2 = { |
||||
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], |
||||
datasets: [ |
||||
{ |
||||
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], |
||||
data: [10, 20, 30, 40, 80], |
||||
//레드버전
|
||||
// backgroundColor: [
|
||||
// '#ffe8d1',
|
||||
// '#ffb59e',
|
||||
// '#f0826b',
|
||||
// '#Bd4f38',
|
||||
// '#8a1c05'
|
||||
// ],
|
||||
|
||||
backgroundColor: [ |
||||
'#ccffff', |
||||
'#99ffff', |
||||
'#66ffff', |
||||
'#33efff', |
||||
'#00bcd4' |
||||
], |
||||
borderWidth: 0, |
||||
pointStyle: 'rectRounded' |
||||
} |
||||
] |
||||
}; |
||||
|
||||
return ( |
||||
<CustomMainLayout title={titleName}> |
||||
<div className='pal-card-box statistics'> |
||||
<div> |
||||
<Row> |
||||
<Col md='4'> |
||||
<div> |
||||
<table className='statistics-table'> |
||||
<tr> |
||||
<th rowspan='2'> |
||||
<span> |
||||
<FcAlarmClock /> |
||||
</span> |
||||
<span>총 비행시간</span> |
||||
<span>PA0001</span> |
||||
</th> |
||||
<td colspan='3'> |
||||
<span className='date'>년</span> |
||||
<span className='date-data'>8일 10시간 35분 12초</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<span className='date'>월</span> |
||||
<span className='date-data'>1일 35분 12초</span> |
||||
</td> |
||||
<td> |
||||
<span className='date'>일</span> |
||||
<span className='date-data'>35분 12초</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</Col> |
||||
<Col md='4'> |
||||
<div> |
||||
<table className='statistics-table'> |
||||
<tr> |
||||
<th rowspan='2'> |
||||
<span> |
||||
<FcWorkflow /> |
||||
</span> |
||||
<span>총 비행거리</span> |
||||
<span>PA0002</span> |
||||
</th> |
||||
<td colspan='3'> |
||||
<span className='date'>년</span> |
||||
<span className='date-data'>10,845m</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<span className='date'>월</span> |
||||
<span className='date-data'>1,201m</span> |
||||
</td> |
||||
<td> |
||||
<span className='date'>일</span> |
||||
<span className='date-data'>53m</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</Col> |
||||
<Col md='4'> |
||||
<div> |
||||
<table className='statistics-table'> |
||||
<tr> |
||||
<th rowspan='2'> |
||||
<span> |
||||
<FcBarChart /> |
||||
</span> |
||||
<span>총 비행횟수</span> |
||||
<span>PA0002</span> |
||||
</th> |
||||
<td colspan='3'> |
||||
<span className='date'>년</span> |
||||
<span className='date-data'>1,024,845건</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<span className='date'>월</span> |
||||
<span className='date-data'>111,201건</span> |
||||
</td> |
||||
<td> |
||||
<span className='date'>일</span> |
||||
<span className='date-data'>153건</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div> |
||||
<Row> |
||||
<Col> |
||||
<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> |
||||
<CardBody className='pal-card-body'> |
||||
<div className='search-cont'> |
||||
<dl> |
||||
<dt> |
||||
<div className='search-box'> |
||||
<div className='search-list-ti'>검색조건</div> |
||||
<div className='search-list'> |
||||
<div className='search-list-cont'> |
||||
<Row> |
||||
<Col className='list-input' md='4' sm='12'> |
||||
<CustomInput |
||||
inline |
||||
type='select' |
||||
id='' |
||||
bsSize='sm' |
||||
> |
||||
<option>비행시간</option> |
||||
<option>비행거리</option> |
||||
<option>비행횟수</option> |
||||
</CustomInput> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dt> |
||||
</dl> |
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div> |
||||
<Row className='mt-2'> |
||||
<Col md='8' className='chart-wrap'> |
||||
<Card> |
||||
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> |
||||
<CardTitle tag='h4'>비행 시간 통계</CardTitle> |
||||
<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> |
||||
</div> |
||||
<div className='select-date'> |
||||
<CustomInput inline type='select' id='' bsSize='sm'> |
||||
<option>2023</option> |
||||
<option>2022</option> |
||||
<option>2021</option> |
||||
</CustomInput> |
||||
</div> |
||||
<div className='select-date'> |
||||
<CustomInput |
||||
inline |
||||
type='select' |
||||
id='' |
||||
bsSize='sm' |
||||
value='월' |
||||
> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
</CustomInput> |
||||
</div> |
||||
<div className='select-date'> |
||||
<CustomInput |
||||
inline |
||||
type='select' |
||||
id='' |
||||
bsSize='sm' |
||||
value='일' |
||||
> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
<option>1</option> |
||||
</CustomInput> |
||||
</div> |
||||
</Row> |
||||
{/* <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> |
||||
</Col> |
||||
<Col md='4' className='chart-wrap'> |
||||
<Card> |
||||
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> |
||||
<CardTitle tag='h4'>비행시간 TOP5</CardTitle> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<div style={{ height: '275px' }}> |
||||
<Doughnut data={data2} options={options2} height={275} /> |
||||
</div> |
||||
{/* <div className='d-flex justify-content-between mt-3 mb-1'> |
||||
<div className='d-flex align-items-center'></div> |
||||
</div> */} |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</CustomMainLayout> |
||||
); |
||||
export default function FlightView() { |
||||
return <FlightContainer />; |
||||
} |
||||
|
Loading…
Reference in new issue