pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

통계화면

pull/2/head
김지은 11 months ago
parent
faeec3f1d9
commit
8cb76f6cdc
2 changed files with 166 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/assets/css/custom.css
  2. 198
      src/views/statistics/FlightView.js

5
src/assets/css/custom.css
Unescape View File

@ -1131,3 +1131,8 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
background: #ffefec!important; background: #ffefec!important;
border-color: #ffefec!important; border-color: #ffefec!important;
box-shadow: -5px 0 0 #ffefec, 5px 0 0 #ffefec!important; } box-shadow: -5px 0 0 #ffefec, 5px 0 0 #ffefec!important; }
.statistics .chart-wrap .card {min-height:520px}
.statistics .card .card-title{font-size:1.125rem}
.statistics .select-date-wrap{padding-left:1rem;padding-right:1rem}
.statistics .select-date + .select-date{margin-left:0.5rem}

198
src/views/statistics/FlightView.js
Unescape View File

@ -15,16 +15,25 @@ import {
CustomInput, CustomInput,
Label Label
} from 'reactstrap'; } from 'reactstrap';
import { Search, Calendar } from 'react-feather'; import {
Search,
Calendar,
Monitor,
Tablet,
ArrowDown,
ArrowUp
} from 'react-feather';
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
import { Bar } from 'react-chartjs-2'; import { Bar, Doughnut, Polar } from 'react-chartjs-2';
import Flatpickr from 'react-flatpickr'; import Flatpickr from 'react-flatpickr';
export default function Flight({ export default function Flight({
tooltipShadow, tooltipShadow,
gridLineColor, gridLineColor,
labelColor, labelColor,
successColorShade successColorShade,
warningLightColor,
primary
}) { }) {
const titleName = '비행 통계'; const titleName = '비행 통계';
const options = { const options = {
@ -101,15 +110,79 @@ export default function Flight({
datasets: [ datasets: [
{ {
data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190], data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
backgroundColor: successColorShade, backgroundColor: '#00bcd4',
borderColor: 'transparent', borderColor: '#00bcd4',
barThickness: 15 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 ( return (
<CustomMainLayout title={titleName}> <CustomMainLayout title={titleName}>
<div className='pal-card-box'> <div className='pal-card-box statistics'>
<div> <div>
<Row> <Row>
<Col md='4'> <Col md='4'>
@ -250,37 +323,88 @@ export default function Flight({
</Row> </Row>
</div> </div>
<div> <div>
<div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> <Row className='mt-2'>
<div> <Col md='8' className='chart-wrap'>
<h4>비행시간 통계</h4> <Card>
</div> <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
<div className='d-flex align-items-center'> <CardTitle tag='h4'>비행 시간 통계</CardTitle>
<Button.Ripple color='primary' size='sm'> <div className='select-date-wrap'>
<Search size={16} /> <Row>
검색 <div className='select-date'>
</Button.Ripple> <CustomInput inline type='select' id='' bsSize='sm'>
</div> <option>년</option>
</div> <option>월</option>
<Card> <option>일</option>
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> <option>시간</option>
<CardTitle tag='h4'>Latest Statistics</CardTitle> </CustomInput>
<div className='d-flex align-items-center'> </div>
<Calendar size={14} /> <div className='select-date'>
<Flatpickr <CustomInput inline type='select' id='' bsSize='sm'>
options={{ <option>2023</option>
mode: 'range', <option>2022</option>
defaultDate: ['2019-05-01', '2019-05-10'] <option>2021</option>
}} </CustomInput>
className='form-control flat-picker bg-transparent border-0 shadow-none' </div>
/> <div className='select-date'>
</div> <CustomInput
</CardHeader> inline
<CardBody> type='select'
<div style={{ height: '400px' }}> id=''
<Bar data={data} options={options} height={400} /> bsSize='sm'
</div> value='월'
</CardBody> >
</Card> <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>
</div> </div>
</CustomMainLayout> </CustomMainLayout>

Write Preview
Loading…
Cancel
Save