diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js index 2c675e71..49e6b892 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 bbe33343..2c809535 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 760b2f02..764de313 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);