|
|
|
@ -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, |
|
|
|
@ -20,8 +21,57 @@ export default function StatisticsSearch({
|
|
|
|
|
categoryTypeOptions, |
|
|
|
|
handlerBarTicks, |
|
|
|
|
handlerTitleName, |
|
|
|
|
handleChangeSearchType |
|
|
|
|
handleChangeSearchType, |
|
|
|
|
parseTimeToDate |
|
|
|
|
}) { |
|
|
|
|
const [total, setTotal] = useState([]); |
|
|
|
|
const [top, setTop] = useState([]); |
|
|
|
|
|
|
|
|
|
// searchType과 searchData가 바뀔때마다 state 업데이트
|
|
|
|
|
useEffect(() => { |
|
|
|
|
chartInit(); |
|
|
|
|
}, [searchData]); |
|
|
|
|
|
|
|
|
|
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 totalValue = convertToSeconds(timeGraph); |
|
|
|
|
const topValue = convertToSeconds(timeTop); |
|
|
|
|
|
|
|
|
|
setTotal(totalValue); |
|
|
|
|
setTop(topValue); |
|
|
|
|
} 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)); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const barOptions = { |
|
|
|
|
elements: { |
|
|
|
|
rectangle: { |
|
|
|
@ -70,7 +120,7 @@ export default function StatisticsSearch({
|
|
|
|
|
zeroLineColor: gridLineColor |
|
|
|
|
}, |
|
|
|
|
ticks: { |
|
|
|
|
...handlerBarTicks(), |
|
|
|
|
...handlerBarTicks(total), |
|
|
|
|
min: 0, |
|
|
|
|
fontColor: labelColor |
|
|
|
|
} |
|
|
|
@ -82,7 +132,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 +160,16 @@ 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 (searchType.category === 'TIME') { |
|
|
|
|
const dateValue = parseTimeToDate(value); |
|
|
|
|
return (output = ` ${label} : ${dateValue}`); |
|
|
|
|
} else if (searchType.category === 'DISTANCE') { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const output = ` ${label} : ${value} 건`; |
|
|
|
|
return output; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
@ -131,7 +187,7 @@ export default function StatisticsSearch({
|
|
|
|
|
datasets: [ |
|
|
|
|
{ |
|
|
|
|
labels: searchData.topData.map(i => i.name), |
|
|
|
|
data: searchData.topData.map(i => i.value), |
|
|
|
|
data: top, |
|
|
|
|
// 레드버전
|
|
|
|
|
// backgroundColor: [
|
|
|
|
|
// '#ffe8d1',
|
|
|
|
|