plugins 함수화

src/components/statistics/StatisticsSearch.js

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