|
|
@ -40,82 +40,75 @@ const options = { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const arrColors = [ |
|
|
|
|
|
|
|
successColorShade, |
|
|
|
|
|
|
|
warningLightColor, |
|
|
|
|
|
|
|
primaryColorShade, |
|
|
|
|
|
|
|
yellowColor, |
|
|
|
|
|
|
|
blueColor |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const arrColorsClass = [ |
|
|
|
|
|
|
|
'successColorShade', |
|
|
|
|
|
|
|
'warningLightColor', |
|
|
|
|
|
|
|
'primaryColorShade', |
|
|
|
|
|
|
|
'yellowColor', |
|
|
|
|
|
|
|
'blueColor' |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const titles = { |
|
|
|
const titles = { |
|
|
|
droneStatus: '드론 현황', |
|
|
|
droneStatus: '드론 현황', |
|
|
|
flightsRegion: 'TOP5 지역 별 비행횟수 통계' |
|
|
|
flightsRegion: 'TOP5 지역 별 비행횟수 통계' |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const DashboardStcsArea = props => { |
|
|
|
export const DashboardStcsArea = ({ data, title, setStartDate, startDate }) => { |
|
|
|
const [chartData, setChartData] = useState({}); |
|
|
|
const [chartData, setChartData] = useState({}); |
|
|
|
|
|
|
|
|
|
|
|
const arrColors = [ |
|
|
|
useEffect(() => { |
|
|
|
successColorShade, |
|
|
|
chartDataInit(); |
|
|
|
warningLightColor, |
|
|
|
}, [data]); |
|
|
|
primaryColorShade, |
|
|
|
|
|
|
|
yellowColor, |
|
|
|
|
|
|
|
blueColor |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const arrColorsClass = [ |
|
|
|
|
|
|
|
'successColorShade', |
|
|
|
|
|
|
|
'warningLightColor', |
|
|
|
|
|
|
|
'primaryColorShade', |
|
|
|
|
|
|
|
'yellowColor', |
|
|
|
|
|
|
|
'blueColor' |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const chartDataInit = () => { |
|
|
|
const chartDataInit = () => { |
|
|
|
let arrArea = []; |
|
|
|
if (data.length > 0) { |
|
|
|
let arrValue = []; |
|
|
|
let arrArea = []; |
|
|
|
|
|
|
|
let arrValue = []; |
|
|
|
|
|
|
|
|
|
|
|
props.data?.map(item => { |
|
|
|
data?.map(item => { |
|
|
|
arrArea.push(item.typeCd); |
|
|
|
arrArea.push(item.typeCd); |
|
|
|
arrValue.push(item.count); |
|
|
|
arrValue.push(item.count); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
setChartData({ |
|
|
|
setChartData({ |
|
|
|
labels: arrArea, |
|
|
|
labels: arrArea, |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
data: arrValue, |
|
|
|
data: arrValue, |
|
|
|
backgroundColor: arrColors, |
|
|
|
backgroundColor: arrColors, |
|
|
|
borderWidth: 0, |
|
|
|
borderWidth: 0, |
|
|
|
pointStyle: 'rectRounded' |
|
|
|
pointStyle: 'rectRounded' |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setChartData({}); |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
chartDataInit(); |
|
|
|
|
|
|
|
}, [props.data]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Card> |
|
|
|
<Card> |
|
|
|
<CardHeader className=''> |
|
|
|
<CardHeader className=''> |
|
|
|
<div className='w-100 d-flex justify-content-between'> |
|
|
|
<div className='w-100 d-flex justify-content-between'> |
|
|
|
<CardTitle tag='h4'>{titles[`${props.title}`]}</CardTitle> |
|
|
|
<CardTitle tag='h4'>{titles[`${title}`]}</CardTitle> |
|
|
|
{/* <div className='d-flex align-items-center'> |
|
|
|
|
|
|
|
<Calendar size={14} /> |
|
|
|
|
|
|
|
<Flatpickr |
|
|
|
|
|
|
|
options={{ |
|
|
|
|
|
|
|
mode: 'single', |
|
|
|
|
|
|
|
dateFormat: "Y-m-d", |
|
|
|
|
|
|
|
defaultDate: ['today'], |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> */} |
|
|
|
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
{props.title === 'flightsRegion' && ( |
|
|
|
{title === 'flightsRegion' && ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div className='datepicker-border-sm'> |
|
|
|
<div className='datepicker-border-sm'> |
|
|
|
<div className='datepicker-custom'> |
|
|
|
<div className='datepicker-custom'> |
|
|
|
<Calendar size={14} /> |
|
|
|
<Calendar size={14} /> |
|
|
|
<DatePicker |
|
|
|
<DatePicker |
|
|
|
locale={ko} |
|
|
|
locale={ko} |
|
|
|
selected={props.startDate} |
|
|
|
selected={startDate} |
|
|
|
onChange={date => props.setStartDate(date)} |
|
|
|
onChange={date => setStartDate(date)} |
|
|
|
dateFormat='yyy / MMMM' |
|
|
|
dateFormat='yyy / MMMM' |
|
|
|
showMonthYearPicker |
|
|
|
showMonthYearPicker |
|
|
|
showFullMonthYearPicker |
|
|
|
showFullMonthYearPicker |
|
|
@ -134,32 +127,16 @@ export const DashboardStcsArea = props => { |
|
|
|
</CardHeader> |
|
|
|
</CardHeader> |
|
|
|
<CardBody> |
|
|
|
<CardBody> |
|
|
|
<div style={{ height: '275px' }}> |
|
|
|
<div style={{ height: '275px' }}> |
|
|
|
<Doughnut |
|
|
|
{Object.keys(chartData).length > 0 ? ( |
|
|
|
data={chartData} |
|
|
|
<Doughnut data={chartData} options={options} height={275} /> |
|
|
|
options={options} |
|
|
|
) : ( |
|
|
|
height={275} |
|
|
|
<div className='d-flex justify-content-center align-items-center h-100'> |
|
|
|
plugins={{ |
|
|
|
<p>표시할 데이터가 없습니다.</p> |
|
|
|
afterDraw: function (chart) { |
|
|
|
</div> |
|
|
|
let ctx = chart.chart.ctx; |
|
|
|
)} |
|
|
|
let width = chart.chart.width; |
|
|
|
|
|
|
|
let height = chart.chart.height; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chart.clear(); |
|
|
|
|
|
|
|
ctx.save(); |
|
|
|
|
|
|
|
ctx.textAlign = 'center'; |
|
|
|
|
|
|
|
ctx.textBaseline = 'middle'; |
|
|
|
|
|
|
|
ctx.fillText( |
|
|
|
|
|
|
|
'표시할 데이터가 없습니다.', |
|
|
|
|
|
|
|
width / 2, |
|
|
|
|
|
|
|
height / 2 |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
ctx.restore(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='doughnut-chart-list'> |
|
|
|
<div className='doughnut-chart-list'> |
|
|
|
{props.data?.map((item, index) => { |
|
|
|
{data?.map((item, index) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div key={index}> |
|
|
|
<div key={index}> |
|
|
|
<div className='doughnut-chart-list-ti'> |
|
|
|
<div className='doughnut-chart-list-ti'> |
|
|
@ -167,23 +144,6 @@ export const DashboardStcsArea = props => { |
|
|
|
<span className='ti'>{item.typeCd}</span> |
|
|
|
<span className='ti'>{item.typeCd}</span> |
|
|
|
<span className='ti'>({item.count})</span> |
|
|
|
<span className='ti'>({item.count})</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{/* <div className='doughnut-chart-list-ti'> |
|
|
|
|
|
|
|
<span className='dot-icon warningLightColor'></span> |
|
|
|
|
|
|
|
<span className='ti'>인천광역시</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='doughnut-chart-list-ti'> |
|
|
|
|
|
|
|
<span className='dot-icon primaryColorShade'></span> |
|
|
|
|
|
|
|
<span className='ti'>충청북도</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='doughnut-chart-list-ti'> |
|
|
|
|
|
|
|
<span className='dot-icon yellowColor'></span> |
|
|
|
|
|
|
|
<span className='ti'>세종시</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='doughnut-chart-list-ti'> |
|
|
|
|
|
|
|
<span className='dot-icon blueColor'></span> |
|
|
|
|
|
|
|
<span className='ti'>제주도</span> |
|
|
|
|
|
|
|
</div> */} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
})} |
|
|
|
})} |
|
|
|