From 1ee4e28984a1eb6b83433b6bc20a65f99159064a Mon Sep 17 00:00:00 2001 From: hhjk00 Date: Thu, 16 Nov 2023 19:18:18 +0900 Subject: [PATCH] =?UTF-8?q?=EC=8B=9C=EA=B0=84,=20=EA=B1=B0=EB=A6=AC=20?= =?UTF-8?q?=ED=86=B5=EA=B3=84=20=EA=B7=B8=EB=9E=98=ED=94=84=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=88=98=EC=A0=95=20(=EC=A7=84=ED=96=89?= =?UTF-8?q?=EC=A4=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/statistics/StatisticsSearch.js | 64 +++++++++++++++++-- .../statistics/AbnormalSituationContainer.js | 3 +- src/containers/statistics/FlightContainer.js | 4 +- .../statistics/FlightResultContainer.js | 3 +- 4 files changed, 61 insertions(+), 13 deletions(-) diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js index 2c675e7..49e6b89 100644 --- a/src/components/statistics/StatisticsSearch.js +++ b/src/components/statistics/StatisticsSearch.js @@ -9,6 +9,7 @@ import { } from 'reactstrap'; import { Search } from 'react-feather'; import { Bar, Doughnut } from 'react-chartjs-2'; +import { useEffect, useState } from 'react'; export default function StatisticsSearch({ tooltipShadow, @@ -22,6 +23,53 @@ export default function StatisticsSearch({ handlerTitleName, handleChangeSearchType }) { + 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); + + 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 graphSeconds = convertToSeconds(timeGraph); + const topSeconds = convertToSeconds(timeTop); + + setTotal(graphSeconds); + setTop(topSeconds); + } else if (searchType.category === 'DISTANCE') { + // [0.0, 0.1] -> [0, 0] + const distanceTotal = searchData.graphData + .map(i => i.value) + .filter(i => i); + const distanceTop = searchData.topData.map(i => i.value).filter(i => i); + + const totalValue = distanceTotal.map(distance => { + return parseInt(distance); + }); + const topValue = distanceTop.map(distance => { + return parseInt(distance); + }); + + setTotal(totalValue); + setTop(topValue); + } else { + setTotal(searchData.graphData.map(i => i.value)); + setTop(searchData.topData.map(i => i.value)); + } + }, [searchData]); + const barOptions = { elements: { rectangle: { @@ -70,7 +118,7 @@ export default function StatisticsSearch({ zeroLineColor: gridLineColor }, ticks: { - ...handlerBarTicks(), + ...handlerBarTicks(total), min: 0, fontColor: labelColor } @@ -82,7 +130,7 @@ export default function StatisticsSearch({ labels: searchData.graphData.map(i => i.name), datasets: [ { - data: searchData.graphData.map(i => i.value), + data: total, backgroundColor: '#00bcd4', borderColor: '#00bcd4', barThickness: 15 @@ -110,10 +158,14 @@ export default function StatisticsSearch({ tooltips: { callbacks: { label(tooltipItem, data) { - const label = data.datasets[0].labels[tooltipItem.index] || '', - value = data.datasets[0].data[tooltipItem.index]; + let label = data.datasets[0].labels[tooltipItem.index] || '', + value = data.datasets[0].data[tooltipItem.index], + output = ` ${label} : ${value} 건`; + + // if (category === 'TIME') { + // } else if (category === 'DISTANCE') { + // } - const output = ` ${label} : ${value} 건`; return output; } }, @@ -131,7 +183,7 @@ export default function StatisticsSearch({ datasets: [ { labels: searchData.topData.map(i => i.name), - data: searchData.topData.map(i => i.value), + data: top, // 레드버전 // backgroundColor: [ // '#ffe8d1', diff --git a/src/containers/statistics/AbnormalSituationContainer.js b/src/containers/statistics/AbnormalSituationContainer.js index bbe3334..2c80953 100644 --- a/src/containers/statistics/AbnormalSituationContainer.js +++ b/src/containers/statistics/AbnormalSituationContainer.js @@ -79,8 +79,7 @@ export default function AbnormalSituationContainer() { }; // Bar Graph handler - const handlerBarTicks = () => { - const data = abnormalSearch.graphData.map(i => i.value); + const handlerBarTicks = data => { const max = Math.ceil(Math.max(...data) / 10) * 10; const stepSize = handlerStepSize(max); diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js index 760b2f0..764de31 100644 --- a/src/containers/statistics/FlightContainer.js +++ b/src/containers/statistics/FlightContainer.js @@ -78,8 +78,7 @@ export default function FlightContainer() { }; // Bar Graph handler - const handlerBarTicks = () => { - const data = flightSearch.graphData.map(i => i.value); + const handlerBarTicks = data => { const max = Math.ceil(Math.max(...data) / 10) * 10; const stepSize = handlerStepSize(max); @@ -129,7 +128,6 @@ export default function FlightContainer() { addCommasToNumber={addCommasToNumber} /> { - const data = resultSearch.graphData.map(i => i.value); + const handlerBarTicks = data => { const max = Math.ceil(Math.max(...data) / 10) * 10; const stepSize = handlerStepSize(max);