diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js index 4cd288f..de5c152 100644 --- a/src/components/statistics/StatisticsSearch.js +++ b/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`); diff --git a/src/components/statistics/StatisticsTotal.js b/src/components/statistics/StatisticsTotal.js index 66b958a..f89c706 100644 --- a/src/components/statistics/StatisticsTotal.js +++ b/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 { diff --git a/src/containers/statistics/AbnormalSituationContainer.js b/src/containers/statistics/AbnormalSituationContainer.js index 056e16b..454a97e 100644 --- a/src/containers/statistics/AbnormalSituationContainer.js +++ b/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 diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js index a176b13..73602fb 100644 --- a/src/containers/statistics/FlightContainer.js +++ b/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} /> { - 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;