비행 시간 통계 그래프 라벨 수정

src/components/statistics/StatisticsSearch.js

@@ -22,12 +22,11 @@ export default function StatisticsSearch({
   handlerBarTicks,
   handlerTitleName,
   handleChangeSearchType,
-  parseTimeToDate
+  secondsToDateString
 }) {
   const [total, setTotal] = useState([]);
   const [top, setTop] = useState([]);
 
-  // searchType과 searchData가 바뀔때마다 state 업데이트
   useEffect(() => {
     chartInit();
   }, [searchData]);
@@ -86,6 +85,22 @@ export default function StatisticsSearch({
       },
       tooltips: {
         // Updated default tooltip UI
+        callbacks: {
+          label(tooltipItem, data) {
+            // let label = data.labels[tooltipItem.index] || '',
+            let value = data.datasets[0].data[tooltipItem.index],
+              output = ` ${value} 건`;
+
+            if (searchType.category === 'TIME') {
+              const dateValue = secondsToDateString(value);
+              return (output = ` ${dateValue}`);
+            } else if (searchType.category === 'DISTANCE') {
+              return (output = ` ${value} m`);
+            }
+
+            return output;
+          }
+        },
         shadowOffsetX: 1,
         shadowOffsetY: 1,
         shadowBlur: 8,
@@ -119,6 +134,15 @@ export default function StatisticsSearch({
               zeroLineColor: gridLineColor
             },
             ticks: {
+              callback: function (value, index, values) {
+                if (searchType.category === 'TIME') {
+                  const dateValue = secondsToDateString(value, 'yAxes');
+                  return dateValue;
+                } else if (searchType.category === 'DISTANCE') {
+                  return value + 'm';
+                }
+                return value;
+              },
               ...handlerBarTicks(total),
               min: 0,
               fontColor: labelColor
@@ -164,7 +188,7 @@ export default function StatisticsSearch({
               output = ` ${label} : ${value} 건`;
 
             if (searchType.category === 'TIME') {
-              const dateValue = parseTimeToDate(value);
+              const dateValue = secondsToDateString(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,
-  parseTimeToSeconds,
+  timeStringToDateString,
   formatNumber,
   formatDistance
 }) {
@@ -17,7 +17,7 @@ export default function StatisticsTotal({
 
   const renderData = (data, titleName, idx) => {
     if (titleName) {
-      if (idx === 0) return parseTimeToSeconds(data);
+      if (idx === 0) return timeStringToDateString(data);
       if (idx === 1) return <>{formatDistance(data)}m</>;
       return <>{formatNumber(data)}건</>;
     } else {

src/containers/statistics/AbnormalSituationContainer.js

@@ -87,8 +87,19 @@ export default function AbnormalSituationContainer() {
   };
 
   const handlerStepSize = max => {
-    const exponent = Math.ceil(Math.log10(max));
-    return 10 ** (exponent - 1);
+    const exponent = Math.floor(Math.log10(max));
+    const base = Math.pow(10, exponent);
+    let stepSize;
+
+    if (max / base > 5) {
+      stepSize = base;
+    } else if (max / (base / 2) > 5) {
+      stepSize = base / 2;
+    } else {
+      stepSize = base / 5;
+    }
+
+    return stepSize;
   };
 
   // 123456789 -> 123,456,789

src/containers/statistics/FlightContainer.js

@@ -86,8 +86,19 @@ export default function FlightContainer() {
   };
 
   const handlerStepSize = max => {
-    const exponent = Math.ceil(Math.log10(max));
-    return 10 ** (exponent - 1);
+    const exponent = Math.floor(Math.log10(max));
+    const base = Math.pow(10, exponent);
+    let stepSize;
+
+    if (max / base > 5) {
+      stepSize = base;
+    } else if (max / (base / 2) > 5) {
+      stepSize = base / 2;
+    } else {
+      stepSize = base / 5;
+    }
+
+    return stepSize;
   };
 
   // 1234.2345 -> 1,234.2
@@ -109,7 +120,7 @@ export default function FlightContainer() {
   };
 
   // '24:35:12' -> '1일 35분 12초'
-  const parseTimeToSeconds = time => {
+  const timeStringToDateString = time => {
     if (time === 'noData' || time === '00:00:00') return '0초';
 
     const [hour, minute, second] = String(time).split(':').map(Number);
@@ -124,19 +135,31 @@ export default function FlightContainer() {
     return parts.join(' ');
   };
 
-  const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : '');
+  const formatPart = (value, unit) => {
+    if (unit === 's' && value === 0) return '0s';
+    return value > 0 ? `${value}${unit}` : '';
+  };
 
   // 975 -> '16분 15초'
-  const parseTimeToDate = time => {
+  const secondsToDateString = (time, yAxes) => {
     const { days, hours, minutes, seconds } = secondsToDHMS(time);
 
-    const parts = [
+    let parts = [
       formatPart(days, '일'),
       formatPart(hours, '시간'),
       formatPart(minutes, '분'),
       formatPart(seconds, '초')
     ];
 
+    if (yAxes) {
+      parts = [
+        formatPart(days, 'd'),
+        formatPart(hours, 'h'),
+        formatPart(minutes, 'm'),
+        formatPart(seconds, 's')
+      ];
+    }
+
     return parts.join(' ');
   };
 
@@ -156,12 +179,12 @@ export default function FlightContainer() {
           titleName={titleName}
           totalTitle={totalTitle}
           totalData={flight}
-          parseTimeToSeconds={parseTimeToSeconds}
+          timeStringToDateString={timeStringToDateString}
           formatDistance={formatDistance}
           formatNumber={formatNumber}
         />
         <StatisticsSearch
-          parseTimeToDate={parseTimeToDate}
+          secondsToDateString={secondsToDateString}
           searchData={flightSearch}
           searchType={searchType}
           categoryTypeOptions={categoryTypeOptions}

src/containers/statistics/FlightResultContainer.js

@@ -86,10 +86,20 @@ export default function ResultContainer() {
   };
 
   const handlerStepSize = max => {
-    const exponent = Math.ceil(Math.log10(max));
-    return 10 ** (exponent - 1);
+    const exponent = Math.floor(Math.log10(max));
+    const base = Math.pow(10, exponent);
+    let stepSize;
+
+    if (max / base > 5) {
+      stepSize = base;
+    } else if (max / (base / 2) > 5) {
+      stepSize = base / 2;
+    } else {
+      stepSize = base / 5;
+    }
+
+    return stepSize;
   };
-
   // 123456789 -> 123,456,789
   const formatNumber = number => {
     if (number === 'NoData') return 0;