시간 통계 그래프 데이터 단위 수정

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,
@@ -20,8 +21,57 @@ export default function StatisticsSearch({
   categoryTypeOptions,
   handlerBarTicks,
   handlerTitleName,
-  handleChangeSearchType
+  handleChangeSearchType,
+  parseTimeToDate
 }) {
+  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: {
@@ -70,7 +120,7 @@ export default function StatisticsSearch({
               zeroLineColor: gridLineColor
             },
             ticks: {
-              ...handlerBarTicks(),
+              ...handlerBarTicks(total),
               min: 0,
               fontColor: labelColor
             }
@@ -82,7 +132,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 +160,16 @@ 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 (searchType.category === 'TIME') {
+              const dateValue = parseTimeToDate(value);
+              return (output = ` ${label} : ${dateValue}`);
+            } else if (searchType.category === 'DISTANCE') {
+            }
 
-            const output = ` ${label} : ${value} 건`;
             return output;
           }
         },
@@ -131,7 +187,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/components/statistics/StatisticsTotal.js

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

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);
 
@@ -100,13 +99,11 @@ export default function FlightContainer() {
       .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
-  // '24:35:12' -> 1일 35분 12초
+  // '24:35:12' -> '1일 35분 12초'
-  const parseTime = time => {
+  const parseTimeToSeconds = time => {
     if (time === 'noData' || time === '00:00:00') return '0초';
 
-    const [hour, minute, second] = time.split(':').map(Number);
+    const [hour, minute, second] = String(time).split(':').map(Number);
-
-    const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
 
     const parts = [
       formatPart(Math.floor(hour / 24), '일'),
@@ -118,6 +115,31 @@ 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'>
@@ -125,11 +147,11 @@ export default function FlightContainer() {
           titleName={titleName}
           totalTitle={totalTitle}
           totalData={flight}
-          parseTime={parseTime}
+          parseTimeToSeconds={parseTimeToSeconds}
           addCommasToNumber={addCommasToNumber}
         />
         <StatisticsSearch
-          category={searchType.category}
+          parseTimeToDate={parseTimeToDate}
           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);