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

비정상상황 통계 화면 작업

pull/2/head
hhjk00 10 months ago
parent
dfcba2bdc0
commit
727274904f
1 changed files with 140 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 177
      src/containers/statistics/AbnormalSituationContainer.js

177
src/containers/statistics/AbnormalSituationContainer.js
Unescape View File

@ -13,14 +13,21 @@ 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 AbnormalSituationContainer({
tooltipShadow,
gridLineColor,
labelColor
}) {
const dispatch = useDispatch();
const { abnormal, abnormalSearch } = useSelector(
state => state.statisticsState
);
const [searchType, setSearchType] = useState({
abnormalType: '비행경로이탈',
category: 'PLAN',
dateType: 'year',
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
@ -33,6 +40,10 @@ export default function AbnormalSituationContainer({
const titleName = '비정상상황 통계';
useEffect(() => {
dispatch(StcsActions.ABNORMAL_STCS.request());
}, []);
useEffect(() => {
const { year, month } = searchType;
const lastDay = new Date(year, month, 0).getDate();
@ -41,18 +52,65 @@ export default function AbnormalSituationContainer({
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.ABNORMAL_STCS_SEARCH.request({
cate: category,
date,
type: dateType
})
);
}, [searchType]);
// 검색조건 handler
const handleChangeSearchType = useCallback(
(type, val) => {
setSearchType({
...searchType,
[type]:
type === 'dateType' || type === 'abnormalType' ? val : Number(val)
[type]: val
});
},
[searchType]
);
// 그래프 타이틀 handler
const handlerTitleName = category => {
const categoryMappings = {
PLAN: '비행경로이탈',
ALTITUDE: '비정상고도',
CRASH: '충돌위험'
};
return categoryMappings[category];
};
// Bar Graph handler
const handlerBarTicks = () => {
const data = abnormalSearch.graphData.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 options = {
elements: {
rectangle: {
@ -101,9 +159,8 @@ export default function AbnormalSituationContainer({
zeroLineColor: gridLineColor
},
ticks: {
stepSize: 100,
...handlerBarTicks(),
min: 0,
max: 400,
fontColor: labelColor
}
}
@ -111,22 +168,10 @@ export default function AbnormalSituationContainer({
}
},
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: abnormalSearch.graphData.map(i => i.name),
datasets: [
{
data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
data: abnormalSearch.graphData.map(i => i.value),
backgroundColor: '#00bcd4',
borderColor: '#00bcd4',
barThickness: 15
@ -156,7 +201,7 @@ export default function AbnormalSituationContainer({
label(tooltipItem, data) {
const label = data.datasets[0].labels[tooltipItem.index] || '',
value = data.datasets[0].data[tooltipItem.index];
const output = ` ${label} : ${value} %`;
const output = ` ${label} : ${value}건`;
return output;
}
},
@ -170,11 +215,11 @@ export default function AbnormalSituationContainer({
}
},
data2 = {
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'],
labels: abnormalSearch.topData.map(i => i.name),
datasets: [
{
labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'],
data: [10, 20, 30, 40, 80],
labels: abnormalSearch.topData.map(i => i.name),
data: abnormalSearch.topData.map(i => i.value),
//레드버전
// backgroundColor: [
// '#ffe8d1',
@ -202,7 +247,63 @@ export default function AbnormalSituationContainer({
<div className='pal-card-box statistics'>
<div>
<Row>
<Col md='4'>
{abnormal.map((i, idx) => (
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowSpan='2'>
{idx === 0 ? (
<>
<span>
<FcAlarmClock />
</span>
<span>비행경로이탈</span>
</>
) : idx === 1 ? (
<>
<span>
<FcWorkflow />
</span>
<span>비정상고도</span>
</>
) : (
<>
<span>
<FcBarChart />
</span>
<span>충돌위험</span>
</>
)}
<span>{i.name}</span>
</th>
<td colSpan='3'>
<span className='date'>년</span>
<span className='date-data'>
{addCommasToNumber(i.year)}건
</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>
{addCommasToNumber(i.month)}건
</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>
{addCommasToNumber(i.day)}건
</span>
</td>
</tr>
</table>
</div>
</Col>
))}
{/* <Col md='4'>
<div>
<table className='statistics-table'>
<tr>
@ -288,7 +389,7 @@ export default function AbnormalSituationContainer({
</tr>
</table>
</div>
</Col>
</Col> */}
</Row>
</div>
<div>
@ -323,18 +424,16 @@ export default function AbnormalSituationContainer({
bsSize='sm'
onChange={e =>
handleChangeSearchType(
'abnormalType',
'category',
e.target.value
)
}
>
<option value={'비행경로이탈'}>
비행경로이탈
</option>
<option value={'비정상고도'}>
<option value={'PLAN'}>비행경로이탈</option>
<option value={'ALTITUDE'}>
비정상고도
</option>
<option value={'충돌위험'}>충돌위험</option>
<option value={'CRASH'}>충돌위험</option>
</CustomInput>
</Col>
</Row>
@ -354,7 +453,9 @@ export default function AbnormalSituationContainer({
<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.abnormalType} 통계</CardTitle>
<CardTitle tag='h4'>
{handlerTitleName(searchType.category)} 통계
</CardTitle>
<div className='select-date-wrap'>
<Row>
<div className='select-date'>
@ -371,13 +472,13 @@ export default function AbnormalSituationContainer({
<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
@ -394,7 +495,7 @@ export default function AbnormalSituationContainer({
</CustomInput>
</div>
{searchType.dateType === 'day' ||
searchType.dateType === 'time' ? (
searchType.dateType === 'one-day' ? (
<div className='select-date'>
<CustomInput
inline
@ -417,7 +518,7 @@ export default function AbnormalSituationContainer({
</CustomInput>
</div>
) : null}
{searchType.dateType === 'time' ? (
{searchType.dateType === 'one-day' ? (
<div className='select-date'>
<CustomInput
inline
@ -460,7 +561,9 @@ export default function AbnormalSituationContainer({
<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.abnormalType} TOP5</CardTitle>
<CardTitle tag='h4'>
{handlerTitleName(searchType.category)} TOP5
</CardTitle>
</CardHeader>
<CardBody>
<div style={{ height: '275px' }}>

Write Preview
Loading…
Cancel
Save