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

비행 통계 api 연결

pull/2/head
hhjk00 10 months ago
parent
8ba0af2580
commit
ce8b767ec8
2 changed files with 179 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 243
      src/containers/statistics/FlightContainer.js
  2. 7
      src/containers/statistics/FlightResultContainer.js

243
src/containers/statistics/FlightContainer.js
Unescape View File

@ -13,14 +13,19 @@ import { Search } from 'react-feather';
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
import { Bar, Doughnut } from 'react-chartjs-2';
import { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as StcsActions from '../../modules/statistics/actions';
export default function FlightContainer({
tooltipShadow,
gridLineColor,
labelColor
}) {
const dispatch = useDispatch();
const { flight, flightSearch } = useSelector(state => state.statisticsState);
const [searchType, setSearchType] = useState({
flightType: '비행시간',
category: 'TIME',
dateType: 'year',
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
@ -33,25 +38,97 @@ export default function FlightContainer({
const titleName = '비행 통계';
useEffect(() => {
dispatch(StcsActions.FLIGHT_STCS.request());
}, []);
// 해당 월에 맞는 요일 표출
useEffect(() => {
const { year, month } = searchType;
const lastDay = new Date(year, month, 0).getDate();
const lastDay = new Date(year, Number(month), 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList });
}, [searchType.month]);
useEffect(() => {
const { category, dateType, year, month, day } = searchType;
const dateMapping = {
month: year,
day: `${year}-${month}`,
'one-day': `${year}-${month}-${day}`
};
const date = dateMapping[dateType] || '';
dispatch(
StcsActions.FLIGHT_STCS_SEARCH.request({
cate: category,
date,
type: dateType
})
);
}, [searchType]);
// 검색조건 handler
const handleChangeSearchType = useCallback(
(type, val) => {
setSearchType({
...searchType,
[type]: type === 'dateType' || type === 'flightType' ? val : Number(val)
[type]: val
});
},
[searchType]
);
// 그래프 타이틀 handler
const handlerTitleName = category => {
const categoryMappings = {
TIME: '비행 시간',
DISTANCE: '비행 거리',
FLT_COUNT: '비행 횟수'
};
return categoryMappings[category];
};
// Bar Graph handler
const handlerBarTicks = () => {
const data = flightSearch.topData.map(i => i.value);
const max = Math.ceil(Math.max(...data) / 10) * 10;
const stepSize = handlerStepSize(max);
return { max, stepSize };
};
const handlerStepSize = max => {
const exponent = Math.ceil(Math.log10(max));
return 10 ** (exponent - 1);
};
const addCommasToNumber = number => {
if (number === 'noData') return 0;
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
const parseTime = time => {
if (time === 'noData') {
return '0초';
}
const [hour, minute, second] = time.split(':').map(Number);
const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
const parts = [
formatPart(Math.floor(hour / 24), '일'),
formatPart(hour % 24, '시간'),
formatPart(minute, '분'),
formatPart(second, '초')
].filter(Boolean);
return parts.join(' ');
};
const options = {
elements: {
rectangle: {
@ -100,9 +177,8 @@ export default function FlightContainer({
zeroLineColor: gridLineColor
},
ticks: {
stepSize: 100,
...handlerBarTicks(),
min: 0,
max: 400,
fontColor: labelColor
}
}
@ -110,22 +186,10 @@ export default function FlightContainer({
}
},
data = {
labels: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12'
],
labels: flightSearch.graphData.map(i => i.name),
datasets: [
{
data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
data: flightSearch.graphData.map(i => i.value),
backgroundColor: '#00bcd4',
borderColor: '#00bcd4',
barThickness: 15
@ -169,11 +233,11 @@ export default function FlightContainer({
}
},
data2 = {
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'],
labels: flightSearch.topData.map(i => i.name),
datasets: [
{
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'],
data: [10, 20, 30, 40, 80],
labels: flightSearch.topData.map(i => i.name),
data: flightSearch.topData.map(i => i.value),
// 레드버전
// backgroundColor: [
// '#ffe8d1',
@ -201,93 +265,74 @@ export default function FlightContainer({
<div className='pal-card-box statistics'>
<div>
<Row>
<Col md='4'>
{flight.map((i, idx) => (
<Col md='4' key={idx}>
<div>
<table className='statistics-table'>
<tr>
<th rowSpan='2'>
<span>
{idx === 0 ? (
<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>
) : idx === 1 ? (
<FcWorkflow />
) : (
<FcBarChart />
)}
</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 />
{idx === 0
? '총 비행시간'
: idx === 1
? '총 비행거리'
: '총 비행횟수'}
</span>
<span>총 비행횟수</span>
<span>PA0002</span>
<span>{i.name}</span>
</th>
<td colSpan='3'>
<span className='date'>년</span>
<span className='date-data'>1,024,845건</span>
<span className='date-data'>
{idx === 0 ? (
<>{parseTime(i.year)}</>
) : idx === 1 ? (
<>{addCommasToNumber(i.year)}m</>
) : (
<>{addCommasToNumber(i.year)}건</>
)}
</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>111,201건</span>
<span className='date-data'>
{idx === 0 ? (
<>{parseTime(i.month)}</>
) : idx === 1 ? (
<>{addCommasToNumber(i.month)}m</>
) : (
<>{addCommasToNumber(i.month)}건</>
)}
</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>153건</span>
<span className='date-data'>
{idx === 0 ? (
<>{parseTime(i.day)}</>
) : idx === 1 ? (
<>{addCommasToNumber(i.day)}m</>
) : (
<>{addCommasToNumber(i.day)}건</>
)}
</span>
</td>
</tr>
</table>
</div>
</Col>
))}
</Row>
</div>
<div>
@ -297,12 +342,12 @@ export default function FlightContainer({
<div>
<h4>검색조건</h4>
</div>
<div className='d-flex align-items-center'>
{/* <div className='d-flex align-items-center'>
<Button.Ripple color='primary' size='sm'>
<Search size={16} />
검색
</Button.Ripple>
</div>
</div> */}
</div>
<Card>
<CardBody className='pal-card-body'>
@ -322,14 +367,18 @@ export default function FlightContainer({
bsSize='sm'
onChange={e =>
handleChangeSearchType(
'flightType',
'category',
e.target.value
)
}
>
<option value={'비행시간'}>비행시간</option>
<option value={'비행거리'}>비행거리</option>
<option value={'비행횟수'}>비행횟수</option>
<option value={'TIME'}>비행 시간</option>
<option value={'DISTANCE'}>
비행 거리
</option>
<option value={'FLT_COUNT'}>
비행 횟수
</option>
</CustomInput>
</Col>
</Row>
@ -349,7 +398,9 @@ export default function FlightContainer({
<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'>{searchType.flightType} 통계</CardTitle>
<CardTitle tag='h4'>
{handlerTitleName(searchType.category)} 통계
</CardTitle>
<div className='select-date-wrap'>
<Row>
<div className='select-date'>
@ -366,13 +417,13 @@ export default function FlightContainer({
<option value='year'>년</option>
<option value='month'>월</option>
<option value='day'>일</option>
<option value='time'>시간</option>
<option value='one-day'>시간</option>
</CustomInput>
</div>
{searchType.dateType === 'month' ||
searchType.dateType === 'day' ||
searchType.dateType === 'time' ? (
searchType.dateType === 'one-day' ? (
<>
<div className='select-date'>
<CustomInput
@ -389,7 +440,7 @@ export default function FlightContainer({
</CustomInput>
</div>
{searchType.dateType === 'day' ||
searchType.dateType === 'time' ? (
searchType.dateType === 'one-day' ? (
<div className='select-date'>
<CustomInput
inline
@ -412,7 +463,7 @@ export default function FlightContainer({
</CustomInput>
</div>
) : null}
{searchType.dateType === 'time' ? (
{searchType.dateType === 'one-day' ? (
<div className='select-date'>
<CustomInput
inline
@ -455,7 +506,9 @@ export default function FlightContainer({
<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'>{searchType.flightType} TOP5</CardTitle>
<CardTitle tag='h4'>
{handlerTitleName(searchType.category)} TOP5
</CardTitle>
</CardHeader>
<CardBody>
<div style={{ height: '275px' }}>

7
src/containers/statistics/FlightResultContainer.js
Unescape View File

@ -106,6 +106,7 @@ export default function ResultContainer({
};
const addCommasToNumber = number => {
if (number === 'NoData') return 0;
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
@ -213,11 +214,11 @@ export default function ResultContainer({
}
},
data2 = {
labels: resultSearch?.topData.map(i => i.name),
labels: resultSearch.topData.map(i => i.name),
datasets: [
{
labels: resultSearch?.topData.map(i => i.name),
data: resultSearch?.topData.map(i => i.value),
labels: resultSearch.topData.map(i => i.name),
data: resultSearch.topData.map(i => i.value),
// 레드버전
// backgroundColor: [
// '#ffe8d1',

Write Preview
Loading…
Cancel
Save