diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js index 49e6b89..9781284 100644 --- a/src/components/statistics/StatisticsSearch.js +++ b/src/components/statistics/StatisticsSearch.js @@ -21,33 +21,35 @@ export default function StatisticsSearch({ categoryTypeOptions, handlerBarTicks, handlerTitleName, - handleChangeSearchType + handleChangeSearchType, + parseTimeToDate }) { 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); + chartInit(); + }, [searchData]); - 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 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 graphSeconds = convertToSeconds(timeGraph); - const topSeconds = convertToSeconds(timeTop); + const totalValue = convertToSeconds(timeGraph); + const topValue = convertToSeconds(timeTop); - setTotal(graphSeconds); - setTop(topSeconds); + setTotal(totalValue); + setTop(topValue); } else if (searchType.category === 'DISTANCE') { // [0.0, 0.1] -> [0, 0] const distanceTotal = searchData.graphData @@ -68,7 +70,7 @@ export default function StatisticsSearch({ setTotal(searchData.graphData.map(i => i.value)); setTop(searchData.topData.map(i => i.value)); } - }, [searchData]); + }; const barOptions = { elements: { @@ -162,9 +164,11 @@ export default function StatisticsSearch({ value = data.datasets[0].data[tooltipItem.index], output = ` ${label} : ${value} 건`; - // if (category === 'TIME') { - // } else if (category === 'DISTANCE') { - // } + if (searchType.category === 'TIME') { + const dateValue = parseTimeToDate(value); + return (output = ` ${label} : ${dateValue}`); + } else if (searchType.category === 'DISTANCE') { + } return output; } diff --git a/src/components/statistics/StatisticsTotal.js b/src/components/statistics/StatisticsTotal.js index e38e3ae..f60fe61 100644 --- a/src/components/statistics/StatisticsTotal.js +++ b/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 { diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js index 764de31..8730ed6 100644 --- a/src/containers/statistics/FlightContainer.js +++ b/src/containers/statistics/FlightContainer.js @@ -99,13 +99,11 @@ export default function FlightContainer() { .replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; - // '24:35:12' -> 1일 35분 12초 - const parseTime = time => { + // '24:35:12' -> '1일 35분 12초' + const parseTimeToSeconds = time => { if (time === 'noData' || time === '00:00:00') return '0초'; - const [hour, minute, second] = time.split(':').map(Number); - - const formatPart = (value, unit) => (value > 0 ? `${value}${unit}` : ''); + const [hour, minute, second] = String(time).split(':').map(Number); const parts = [ formatPart(Math.floor(hour / 24), '일'), @@ -117,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 (
@@ -124,10 +147,11 @@ export default function FlightContainer() { titleName={titleName} totalTitle={totalTitle} totalData={flight} - parseTime={parseTime} + parseTimeToSeconds={parseTimeToSeconds} addCommasToNumber={addCommasToNumber} />