비행 실적 통계 api 연결

src/containers/statistics/FlightResultContainer.js

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