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

비행 실적 통계 api 연결

pull/2/head
hhjk00 10 months ago
parent
a6e2b2498a
commit
8ba0af2580
1 changed files with 76 additions and 107 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. 117
      src/containers/statistics/FlightResultContainer.js

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

@ -84,30 +84,29 @@ export default function ResultContainer({
// 그래프 타이틀 handler // 그래프 타이틀 handler
const handlerTitleName = category => { const handlerTitleName = category => {
const categoryMappings = { const categoryMappings = {
TIME: '비행 실적', FLT_RESULT: '비행 실적',
DISTANCE: '비행 계획', FLT_PLAN: '비행 계획',
FLT_COUNT: '비행 승인' FLT_PLAN_APRVN: '비행 승인'
}; };
return categoryMappings[category]; return categoryMappings[category];
}; };
// Bar Graph handler
const handlerBarTicks = () => { const handlerBarTicks = () => {
const data = resultSearch.topData.map(i => i.value); const data = resultSearch.graphData.map(i => i.value);
const max = Math.max(...data); const max = Math.ceil(Math.max(...data) / 10) * 10;
const min = Math.min(...data);
const stepSize = handlerStepSize(max); const stepSize = handlerStepSize(max);
return { max, min, stepSize }; return { max, stepSize };
}; };
const handlerStepSize = max => { const handlerStepSize = max => {
if (max <= 1000) { const exponent = Math.ceil(Math.log10(max));
return 100; return 10 ** (exponent - 1);
} else if (max <= 5000) { };
return 500;
} else { const addCommasToNumber = number => {
return 1000; return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
}; };
const options = { const options = {
@ -159,6 +158,7 @@ export default function ResultContainer({
}, },
ticks: { ticks: {
...handlerBarTicks(), ...handlerBarTicks(),
min: 0,
fontColor: labelColor fontColor: labelColor
} }
} }
@ -166,10 +166,10 @@ export default function ResultContainer({
} }
}, },
data = { data = {
labels: resultSearch?.topData.map(i => i.name), labels: resultSearch.graphData.map(i => i.name),
datasets: [ datasets: [
{ {
data: resultSearch?.topData.map(i => i.value), data: resultSearch.graphData.map(i => i.value),
backgroundColor: '#00bcd4', backgroundColor: '#00bcd4',
borderColor: '#00bcd4', borderColor: '#00bcd4',
barThickness: 15 barThickness: 15
@ -199,7 +199,7 @@ export default function ResultContainer({
label(tooltipItem, data) { label(tooltipItem, data) {
const label = data.datasets[0].labels[tooltipItem.index] || '', const label = data.datasets[0].labels[tooltipItem.index] || '',
value = data.datasets[0].data[tooltipItem.index]; value = data.datasets[0].data[tooltipItem.index];
const output = ` ${label} : ${value} %`; const output = ` ${label} : ${value}건`;
return output; return output;
} }
}, },
@ -213,11 +213,11 @@ export default function ResultContainer({
} }
}, },
data2 = { data2 = {
labels: resultSearch?.graphData.map(i => i.name), labels: resultSearch?.topData.map(i => i.name),
datasets: [ datasets: [
{ {
labels: resultSearch?.graphData.map(i => i.name), labels: resultSearch?.topData.map(i => i.name),
data: resultSearch?.graphData.map(i => i.value), data: resultSearch?.topData.map(i => i.value),
// 레드버전 // 레드버전
// backgroundColor: [ // backgroundColor: [
// '#ffe8d1', // '#ffe8d1',
@ -245,93 +245,62 @@ export default function ResultContainer({
<div className='pal-card-box statistics'> <div className='pal-card-box statistics'>
<div> <div>
<Row> <Row>
{result.map((i, idx) => (
<Col md='4'> <Col md='4'>
<div> <div>
<table className='statistics-table'> <table className='statistics-table'>
<tr> <tr>
<th rowSpan='2'> <th rowSpan='2'>
{idx === 0 ? (
<>
<span> <span>
<FcAlarmClock /> <FcAlarmClock />
</span> </span>
<span>비행 실적</span> <span>비행 실적</span>
<span>PA0001</span> </>
</th> ) : idx === 1 ? (
<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> <span>
<FcWorkflow /> <FcWorkflow />
</span> </span>
<span>비행 계획</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> <span>
<FcBarChart /> <FcBarChart />
</span> </span>
<span>비행 승인</span> <span>비행 승인</span>
<span>PA0002</span> </>
)}
<span>{i.name}</span>
</th> </th>
<td colSpan='3'> <td colSpan='3'>
<span className='date'>년</span> <span className='date'>년</span>
<span className='date-data'>1,024,845건</span> <span className='date-data'>
{addCommasToNumber(i.year)}건
</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<span className='date'>월</span> <span className='date'>월</span>
<span className='date-data'>111,201건</span> <span className='date-data'>
{addCommasToNumber(i.month)}건
</span>
</td> </td>
<td> <td>
<span className='date'>일</span> <span className='date'>일</span>
<span className='date-data'>153건</span> <span className='date-data'>
{addCommasToNumber(i.day)}건
</span>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
</Col> </Col>
))}
</Row> </Row>
</div> </div>
<div> <div>

Write Preview
Loading…
Cancel
Save