|
|
@ -22,7 +22,7 @@ export default function StatisticsSearch({ |
|
|
|
handlerTitleName, |
|
|
|
handlerTitleName, |
|
|
|
handleChangeSearchType |
|
|
|
handleChangeSearchType |
|
|
|
}) { |
|
|
|
}) { |
|
|
|
const options = { |
|
|
|
const barOptions = { |
|
|
|
elements: { |
|
|
|
elements: { |
|
|
|
rectangle: { |
|
|
|
rectangle: { |
|
|
|
borderWidth: 2, |
|
|
|
borderWidth: 2, |
|
|
@ -78,7 +78,7 @@ export default function StatisticsSearch({ |
|
|
|
] |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
data = { |
|
|
|
totalData = { |
|
|
|
labels: searchData.graphData.map(i => i.name), |
|
|
|
labels: searchData.graphData.map(i => i.name), |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
@ -90,7 +90,7 @@ export default function StatisticsSearch({ |
|
|
|
] |
|
|
|
] |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const options2 = { |
|
|
|
const doughnutOptions = { |
|
|
|
responsive: true, |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: true, |
|
|
|
maintainAspectRatio: true, |
|
|
|
responsiveAnimationDuration: 500, |
|
|
|
responsiveAnimationDuration: 500, |
|
|
@ -125,7 +125,7 @@ export default function StatisticsSearch({ |
|
|
|
bodyFontColor: '#000' |
|
|
|
bodyFontColor: '#000' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
data2 = { |
|
|
|
topData = { |
|
|
|
labels: searchData.topData.map(i => i.name), |
|
|
|
labels: searchData.topData.map(i => i.name), |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
@ -316,8 +316,8 @@ export default function StatisticsSearch({ |
|
|
|
<CardBody> |
|
|
|
<CardBody> |
|
|
|
<div style={{ height: '400px' }}> |
|
|
|
<div style={{ height: '400px' }}> |
|
|
|
<Bar |
|
|
|
<Bar |
|
|
|
data={data} |
|
|
|
data={totalData} |
|
|
|
options={options} |
|
|
|
options={barOptions} |
|
|
|
height={400} |
|
|
|
height={400} |
|
|
|
plugins={{ |
|
|
|
plugins={{ |
|
|
|
afterDraw: function (chart) { |
|
|
|
afterDraw: function (chart) { |
|
|
@ -353,7 +353,11 @@ export default function StatisticsSearch({ |
|
|
|
</CardHeader> |
|
|
|
</CardHeader> |
|
|
|
<CardBody> |
|
|
|
<CardBody> |
|
|
|
<div style={{ height: '275px' }}> |
|
|
|
<div style={{ height: '275px' }}> |
|
|
|
<Doughnut data={data2} options={options2} height={275} /> |
|
|
|
<Doughnut |
|
|
|
|
|
|
|
data={topData} |
|
|
|
|
|
|
|
options={doughnutOptions} |
|
|
|
|
|
|
|
height={275} |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* <div className='d-flex justify-content-between mt-3 mb-1'> |
|
|
|
{/* <div className='d-flex justify-content-between mt-3 mb-1'> |
|
|
|
<div className='d-flex align-items-center'></div> |
|
|
|
<div className='d-flex align-items-center'></div> |
|
|
|