시간 통계 bar 그래프 y축 단위 변경

src/components/statistics/StatisticsSearch.js

@@ -22,7 +22,7 @@ export default function StatisticsSearch({
   handlerBarTicks,
   handlerTitleName,
   handleChangeSearchType,
-  secondsToDateString
+  formatSeconds
 }) {
   const [total, setTotal] = useState([]);
   const [top, setTop] = useState([]);
@@ -44,23 +44,20 @@ export default function StatisticsSearch({
     const filteredData = data =>
       data.filter(i => i && !['nodata', 'NoData'].includes(i));
 
+    const graph = filteredData(graphData.map(i => i.value));
+    const top = filteredData(topData.map(i => i.value));
+
     if (searchType.category === 'TIME') {
       // ['00:00:00', '12:34:56'] -> [0,45296] 초 단위로 변경
-      const timeGraph = filteredData(graphData.map(i => i.value));
+      const totalValue = parseTimeToSeconds(graph);
-      const timeTop = filteredData(topData.map(i => i.value));
+      const topValue = parseTimeToSeconds(top);
-
-      const totalValue = parseTimeToSeconds(timeGraph);
-      const topValue = parseTimeToSeconds(timeTop);
 
       setTotal(totalValue);
       setTop(topValue);
     } else if (searchType.category === 'DISTANCE') {
       // [0.1234, 0.5678] -> [0.1, 0.5]
-      const distanceTotal = filteredData(graphData.map(i => i.value));
+      const totalValue = graph.map(i => i.toFixed(1));
-      const distanceTop = filteredData(topData.map(i => i.value));
+      const topValue = top.map(i => i.toFixed(1));
-
-      const totalValue = distanceTotal.map(i => i.toFixed(1));
-      const topValue = distanceTop.map(i => i.toFixed(1));
 
       setTotal(totalValue);
       setTop(topValue);
@@ -92,7 +89,7 @@ export default function StatisticsSearch({
               output = ` ${value} 건`;
 
             if (searchType.category === 'TIME') {
-              const dateValue = secondsToDateString(value);
+              const dateValue = formatSeconds(value);
               return (output = ` ${dateValue}`);
             } else if (searchType.category === 'DISTANCE') {
               return (output = ` ${value} m`);
@@ -136,7 +133,7 @@ export default function StatisticsSearch({
             ticks: {
               callback: function (value, index, values) {
                 if (searchType.category === 'TIME') {
-                  const dateValue = secondsToDateString(value, 'yAxes');
+                  const dateValue = formatSeconds(value);
                   return dateValue;
                 } else if (searchType.category === 'DISTANCE') {
                   return value + 'm';
@@ -188,7 +185,7 @@ export default function StatisticsSearch({
               output = ` ${label} : ${value} 건`;
 
             if (searchType.category === 'TIME') {
-              const dateValue = secondsToDateString(value);
+              const dateValue = formatSeconds(value);
               return (output = ` ${label} : ${dateValue}`);
             } else if (searchType.category === 'DISTANCE') {
               return (output = ` ${label} : ${value} m`);

src/components/statistics/StatisticsTotal.js

@@ -5,7 +5,7 @@ export default function StatisticsTotal({
   totalData,
   titleName,
   totalTitle,
-  timeStringToDateString,
+  formatTimeString,
   formatNumber,
   formatDistance
 }) {
@@ -17,7 +17,7 @@ export default function StatisticsTotal({
 
   const renderData = (data, titleName, idx) => {
     if (titleName) {
-      if (idx === 0) return timeStringToDateString(data);
+      if (idx === 0) return formatTimeString(data);
       if (idx === 1) return <>{formatDistance(data)}m</>;
       return <>{formatNumber(data)}건</>;
     } else {

src/containers/statistics/FlightContainer.js

@@ -120,7 +120,7 @@ export default function FlightContainer() {
   };
 
   // '24:35:12' -> '1일 35분 12초'
-  const timeStringToDateString = time => {
+  const formatTimeString = time => {
     if (time === 'noData' || time === '00:00:00') return '0초';
 
     const [hour, minute, second] = String(time).split(':').map(Number);
@@ -135,13 +135,10 @@ export default function FlightContainer() {
     return parts.join(' ');
   };
 
-  const formatPart = (value, unit) => {
+  const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
-    if (unit === 's' && value === 0) return '0s';
-    return value > 0 ? `${value}${unit}` : '';
-  };
 
   // 975 -> '16분 15초'
-  const secondsToDateString = (time, yAxes) => {
+  const formatSeconds = time => {
     const { days, hours, minutes, seconds } = secondsToDHMS(time);
 
     let parts = [
@@ -151,15 +148,6 @@ export default function FlightContainer() {
       formatPart(seconds, '초')
     ];
 
-    if (yAxes) {
-      parts = [
-        formatPart(days, 'd'),
-        formatPart(hours, 'h'),
-        formatPart(minutes, 'm'),
-        formatPart(seconds, 's')
-      ];
-    }
-
     return parts.join(' ');
   };
 
@@ -179,16 +167,16 @@ export default function FlightContainer() {
           titleName={titleName}
           totalTitle={totalTitle}
           totalData={flight}
-          timeStringToDateString={timeStringToDateString}
+          formatTimeString={formatTimeString}
           formatDistance={formatDistance}
           formatNumber={formatNumber}
         />
         <StatisticsSearch
-          secondsToDateString={secondsToDateString}
           searchData={flightSearch}
           searchType={searchType}
           categoryTypeOptions={categoryTypeOptions}
           dateLists={dateLists}
+          formatSeconds={formatSeconds}
           handlerBarTicks={handlerBarTicks}
           handlerTitleName={handlerTitleName}
           handleChangeSearchType={handleChangeSearchType}