Compare commits

..

2 Commits

Author SHA1 Message Date
hhjk00 f82b3fe710 조건문 수정 10 months ago
hhjk00 b0451cbd0d plugins 함수화 10 months ago
  1. 44
      src/components/statistics/StatisticsSearch.js
  2. 4
      src/components/statistics/StatisticsTotal.js

44
src/components/statistics/StatisticsSearch.js

@ -112,7 +112,8 @@ export default function StatisticsSearch({
label(tooltipItem, data) { label(tooltipItem, data) {
const label = data.datasets[0].labels[tooltipItem.index] || '', const label = data.datasets[0].labels[tooltipItem.index] || '',
value = data.datasets[0].data[tooltipItem.index]; value = data.datasets[0].data[tooltipItem.index];
const output = ` ${label} : ${value} %`;
const output = ` ${label} : ${value}`;
return output; return output;
} }
}, },
@ -153,6 +154,25 @@ export default function StatisticsSearch({
] ]
}; };
const handlerPlugins = chartData => {
return {
afterDraw: function (chart) {
if (chartData.datasets[0].data.length <= 0) {
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();
}
}
};
};
return ( return (
<> <>
<div> <div>
@ -319,26 +339,7 @@ export default function StatisticsSearch({
data={totalData} data={totalData}
options={barOptions} options={barOptions}
height={400} height={400}
plugins={{ plugins={handlerPlugins(totalData)}
afterDraw: function (chart) {
if (totalData.datasets[0].data.length <= 0) {
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>
</CardBody> </CardBody>
@ -357,6 +358,7 @@ export default function StatisticsSearch({
data={topData} data={topData}
options={doughnutOptions} options={doughnutOptions}
height={275} height={275}
plugins={handlerPlugins(topData)}
/> />
</div> </div>
{/* <div className='d-flex justify-content-between mt-3 mb-1'> {/* <div className='d-flex justify-content-between mt-3 mb-1'>

4
src/components/statistics/StatisticsTotal.js

@ -2,8 +2,8 @@ import { Col, Row } from 'reactstrap';
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
export default function StatisticsTotal({ export default function StatisticsTotal({
titleName,
totalData, totalData,
titleName,
totalTitle, totalTitle,
parseTime, parseTime,
addCommasToNumber addCommasToNumber
@ -15,7 +15,7 @@ export default function StatisticsTotal({
}; };
const renderData = (data, titleName, idx) => { const renderData = (data, titleName, idx) => {
if (titleName === '비행 통계') { if (titleName) {
if (idx === 0) return parseTime(data); if (idx === 0) return parseTime(data);
if (idx === 1) return <>{addCommasToNumber(data)}m</>; if (idx === 1) return <>{addCommasToNumber(data)}m</>;
return <>{addCommasToNumber(data)}</>; return <>{addCommasToNumber(data)}</>;

Loading…
Cancel
Save