src/components/statistics/StatisticsSearch.js

@@ -9,7 +9,6 @@ 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,
@@ -21,57 +20,8 @@ export default function StatisticsSearch({
   categoryTypeOptions,
   handlerBarTicks,
   handlerTitleName,
-  handleChangeSearchType,
-  parseTimeToDate
+  handleChangeSearchType
 }) {
-  const [total, setTotal] = useState([]);
-  const [top, setTop] = useState([]);
-
-  // searchType과 searchData가 바뀔때마다 state 업데이트
-  useEffect(() => {
-    chartInit();
-  }, [searchData]);
-
-  const convertToSeconds = timeArr => {
-    return timeArr.map(time => {
-      const [hours, minutes, seconds] = String(time).split(':').map(Number);
-      return hours * 3600 + minutes * 60 + seconds;
-    });
-  };
-
-  const chartInit = () => {
-    if (searchType.category === 'TIME') {
-      // ['00:00:00', '12:34:56'] -> [0,45296] 초 단위로 변경
-      const timeGraph = searchData.graphData.map(i => i.value).filter(i => i);
-      const timeTop = searchData.topData.map(i => i.value).filter(i => i);
-
-      const totalValue = convertToSeconds(timeGraph);
-      const topValue = convertToSeconds(timeTop);
-
-      setTotal(totalValue);
-      setTop(topValue);
-    } 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));
-    }
-  };
-
   const barOptions = {
       elements: {
         rectangle: {
@@ -120,7 +70,7 @@ export default function StatisticsSearch({
               zeroLineColor: gridLineColor
             },
             ticks: {
-              ...handlerBarTicks(total),
+              ...handlerBarTicks(),
               min: 0,
               fontColor: labelColor
             }
@@ -132,7 +82,7 @@ export default function StatisticsSearch({
       labels: searchData.graphData.map(i => i.name),
       datasets: [
         {
-          data: total,
+          data: searchData.graphData.map(i => i.value),
           backgroundColor: '#00bcd4',
           borderColor: '#00bcd4',
           barThickness: 15
@@ -160,16 +110,10 @@ export default function StatisticsSearch({
       tooltips: {
         callbacks: {
           label(tooltipItem, data) {
-            let label = data.datasets[0].labels[tooltipItem.index] || '',
-              value = data.datasets[0].data[tooltipItem.index],
-              output = ` ${label} : ${value} 건`;
-
-            if (searchType.category === 'TIME') {
-              const dateValue = parseTimeToDate(value);
-              return (output = ` ${label} : ${dateValue}`);
-            } else if (searchType.category === 'DISTANCE') {
-            }
+            const label = data.datasets[0].labels[tooltipItem.index] || '',
+              value = data.datasets[0].data[tooltipItem.index];
 
+            const output = ` ${label} : ${value} 건`;
             return output;
           }
         },
@@ -187,7 +131,7 @@ export default function StatisticsSearch({
       datasets: [
         {
           labels: searchData.topData.map(i => i.name),
-          data: top,
+          data: searchData.topData.map(i => i.value),
           // 레드버전
           // backgroundColor: [
           //   '#ffe8d1',

src/components/statistics/StatisticsTotal.js

@@ -5,7 +5,7 @@ export default function StatisticsTotal({
   totalData,
   titleName,
   totalTitle,
-  parseTimeToSeconds,
+  parseTime,
   addCommasToNumber
 }) {
   const renderIcon = idx => {
@@ -16,7 +16,7 @@ export default function StatisticsTotal({
 
   const renderData = (data, titleName, idx) => {
     if (titleName) {
-      if (idx === 0) return parseTimeToSeconds(data);
+      if (idx === 0) return parseTime(data);
       if (idx === 1) return <>{addCommasToNumber(data)}m</>;
       return <>{addCommasToNumber(data)}건</>;
     } else {

src/containers/statistics/AbnormalSituationContainer.js

@@ -79,7 +79,8 @@ export default function AbnormalSituationContainer() {
   };
 
   // Bar Graph handler
-  const handlerBarTicks = data => {
+  const handlerBarTicks = () => {
+    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,7 +78,8 @@ export default function FlightContainer() {
   };
 
   // Bar Graph handler
-  const handlerBarTicks = data => {
+  const handlerBarTicks = () => {
+    const data = flightSearch.graphData.map(i => i.value);
     const max = Math.ceil(Math.max(...data) / 10) * 10;
     const stepSize = handlerStepSize(max);
 
@@ -99,11 +100,13 @@ export default function FlightContainer() {
       .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
-  // '24:35:12' -> '1일 35분 12초'
-  const parseTimeToSeconds = time => {
+  // '24:35:12' -> 1일 35분 12초
+  const parseTime = time => {
     if (time === 'noData' || time === '00:00:00') return '0초';
 
-    const [hour, minute, second] = String(time).split(':').map(Number);
+    const [hour, minute, second] = time.split(':').map(Number);
+
+    const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
 
     const parts = [
       formatPart(Math.floor(hour / 24), '일'),
@@ -115,31 +118,6 @@ export default function FlightContainer() {
     return parts.join(' ');
   };
 
-  const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
-
-  // 975 -> '16분 15초'
-  const parseTimeToDate = time => {
-    const { days, hours, minutes, seconds } = secondsToDHMS(time);
-
-    const parts = [
-      formatPart(days, '일'),
-      formatPart(hours, '시간'),
-      formatPart(minutes, '분'),
-      formatPart(seconds, '초')
-    ];
-
-    return parts.join(' ');
-  };
-
-  const secondsToDHMS = time => {
-    const days = Math.floor(time / 86400);
-    const hours = Math.floor((time % 86400) / 3600);
-    const minutes = Math.floor((time % 3600) / 60);
-    const seconds = time % 60;
-
-    return { days, hours, minutes, seconds };
-  };
-
   return (
     <CustomMainLayout title={titleName}>
       <div className='pal-card-box statistics'>
@@ -147,11 +125,11 @@ export default function FlightContainer() {
           titleName={titleName}
           totalTitle={totalTitle}
           totalData={flight}
-          parseTimeToSeconds={parseTimeToSeconds}
+          parseTime={parseTime}
           addCommasToNumber={addCommasToNumber}
         />
         <StatisticsSearch
-          parseTimeToDate={parseTimeToDate}
+          category={searchType.category}
           searchData={flightSearch}
           searchType={searchType}
           categoryTypeOptions={categoryTypeOptions}

src/containers/statistics/FlightResultContainer.js

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