From b478143e49dc982ace03b15f664a4db22f9c9388 Mon Sep 17 00:00:00 2001 From: hhjk00 Date: Fri, 17 Nov 2023 20:40:15 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=ED=86=B5=EA=B3=84=20=EA=B7=B8=EB=9E=98=ED=94=84=20=EB=9D=BC?= =?UTF-8?q?=EB=B2=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/statistics/StatisticsSearch.js | 30 ++++++++++++-- src/components/statistics/StatisticsTotal.js | 4 +- .../statistics/AbnormalSituationContainer.js | 15 ++++++- src/containers/statistics/FlightContainer.js | 39 +++++++++++++++---- .../statistics/FlightResultContainer.js | 16 ++++++-- 5 files changed, 86 insertions(+), 18 deletions(-) diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js index 4cd288fe..de5c1525 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 66b958aa..f89c7060 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 056e16b2..454a97e7 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 a176b135..73602fbf 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;