시간, 거리 통계 그래프 데이터 수정 (진행중)

src/components/statistics/StatisticsSearch.js

@@ -9,6 +9,7 @@ import {
 } from 'reactstrap';
 import { Search } from 'react-feather';
 import { Bar, Doughnut } from 'react-chartjs-2';
+import { useEffect, useState } from 'react';
 
 export default function StatisticsSearch({
   tooltipShadow,
@@ -22,6 +23,53 @@ export default function StatisticsSearch({
   handlerTitleName,
   handleChangeSearchType
 }) {
+  const [total, setTotal] = useState([]);
+  const [top, setTop] = useState([]);
+
+  // searchType과 searchData가 바뀔때마다 state 업데이트
+  useEffect(() => {
+    if (searchType.category === 'TIME') {
+      // ['00:00:00', '12:34:56'] -> [0,45296] 초단위로 변경
+      const timeGraph = searchData.graphData
+        .map(i => i.value)
+        .filter(time => time);
+      const timeTop = searchData.topData.map(i => i.value).filter(time => time);
+
+      const convertToSeconds = timeArr => {
+        return timeArr.map(time => {
+          console.log(time);
+          const [hours, minutes, seconds] = time.split(':').map(Number);
+          return hours * 3600 + minutes * 60 + seconds;
+        });
+      };
+
+      const graphSeconds = convertToSeconds(timeGraph);
+      const topSeconds = convertToSeconds(timeTop);
+
+      setTotal(graphSeconds);
+      setTop(topSeconds);
+    } else if (searchType.category === 'DISTANCE') {
+      // [0.0, 0.1] -> [0, 0]
+      const distanceTotal = searchData.graphData
+        .map(i => i.value)
+        .filter(i => i);
+      const distanceTop = searchData.topData.map(i => i.value).filter(i => i);
+
+      const totalValue = distanceTotal.map(distance => {
+        return parseInt(distance);
+      });
+      const topValue = distanceTop.map(distance => {
+        return parseInt(distance);
+      });
+
+      setTotal(totalValue);
+      setTop(topValue);
+    } else {
+      setTotal(searchData.graphData.map(i => i.value));
+      setTop(searchData.topData.map(i => i.value));
+    }
+  }, [searchData]);
+
   const barOptions = {
       elements: {
         rectangle: {
@@ -70,7 +118,7 @@ export default function StatisticsSearch({
               zeroLineColor: gridLineColor
             },
             ticks: {
-              ...handlerBarTicks(),
+              ...handlerBarTicks(total),
               min: 0,
               fontColor: labelColor
             }
@@ -82,7 +130,7 @@ export default function StatisticsSearch({
       labels: searchData.graphData.map(i => i.name),
       datasets: [
         {
-          data: searchData.graphData.map(i => i.value),
+          data: total,
           backgroundColor: '#00bcd4',
           borderColor: '#00bcd4',
           barThickness: 15
@@ -110,10 +158,14 @@ export default function StatisticsSearch({
       tooltips: {
         callbacks: {
           label(tooltipItem, data) {
-            const label = data.datasets[0].labels[tooltipItem.index] || '',
+            let label = data.datasets[0].labels[tooltipItem.index] || '',
-              value = data.datasets[0].data[tooltipItem.index];
+              value = data.datasets[0].data[tooltipItem.index],
+              output = ` ${label} : ${value} 건`;
+
+            // if (category === 'TIME') {
+            // } else if (category === 'DISTANCE') {
+            // }
 
-            const output = ` ${label} : ${value} 건`;
             return output;
           }
         },
@@ -131,7 +183,7 @@ export default function StatisticsSearch({
       datasets: [
         {
           labels: searchData.topData.map(i => i.name),
-          data: searchData.topData.map(i => i.value),
+          data: top,
           // 레드버전
           // backgroundColor: [
           //   '#ffe8d1',

src/containers/statistics/AbnormalSituationContainer.js

@@ -79,8 +79,7 @@ export default function AbnormalSituationContainer() {
   };
 
   // Bar Graph handler
-  const handlerBarTicks = () => {
+  const handlerBarTicks = data => {
-    const data = abnormalSearch.graphData.map(i => i.value);
     const max = Math.ceil(Math.max(...data) / 10) * 10;
     const stepSize = handlerStepSize(max);
 

src/containers/statistics/FlightContainer.js

@@ -78,8 +78,7 @@ export default function FlightContainer() {
   };
 
   // Bar Graph handler
-  const handlerBarTicks = () => {
+  const handlerBarTicks = data => {
-    const data = flightSearch.graphData.map(i => i.value);
     const max = Math.ceil(Math.max(...data) / 10) * 10;
     const stepSize = handlerStepSize(max);
 
@@ -129,7 +128,6 @@ export default function FlightContainer() {
           addCommasToNumber={addCommasToNumber}
         />
         <StatisticsSearch
-          category={searchType.category}
           searchData={flightSearch}
           searchType={searchType}
           categoryTypeOptions={categoryTypeOptions}

src/containers/statistics/FlightResultContainer.js

@@ -78,8 +78,7 @@ export default function ResultContainer() {
   };
 
   // Bar Graph handler
-  const handlerBarTicks = () => {
+  const handlerBarTicks = data => {
-    const data = resultSearch.graphData.map(i => i.value);
     const max = Math.ceil(Math.max(...data) / 10) * 10;
     const stepSize = handlerStepSize(max);