Feat : xử lý chart bar

src/_components/boxChart/BoxDoughnutChar.js

@@ -5,7 +5,7 @@ import './boxChart.scss'
 export default function BoxDoughnutChart({data = [], title, propsContainer}) {
   const [current, target] = data
   
-  const chartData = (current / target === 1 || current > target) ? [current] : [current, target - current];
+  // const chartData = (current / target === 1 || current > target) ? [current] : [current, target - current];
   
   const renderStats = () => {
     return (
@@ -21,7 +21,7 @@ export default function BoxDoughnutChart({data = [], title, propsContainer}) {
       <p className='box-chart-subtitle'>{title}</p>
       <div className='d-flex flex-1'>
         <div className='doughnut-chart-content flex-1'>
-          <RDoughnutChart data={chartData} />
+          <RDoughnutChart data={data} />
         </div>
         <div className='origin-vertical justify-content-center align-item-center flex-1'>
           {renderStats()}

src/_components/chart/RDoughnutChart.js

@@ -10,36 +10,44 @@ export default function RDoughnutChart({data = [], ...other}) {
     return null
   }
 
-  // data = data.map((item, index) => {
-  //   if (index === 1 && item === 0) {
-  //     return 1
-  //   }
-  //   return item
-  // })
-  // console.log('data',data);
+  const total = data[1] === 0 ? 1 : data[0] + data[1];
+  const percentageData = [
+    (data[0] / total) * 100,
+    (data[1] / total) * 100,
+  ];
+
+  const adjustedData = (percentageData[0] === 0 && percentageData[1] === 0) || percentageData[1] === percentageData[0] ? [0, 1] : percentageData;
 
   return <Chart 
             type='doughnut' 
             data={{
-              labels: [],
+              labels: ['Số tham gia',"Tổng số"],
               datasets: [
                 {
                   label: '',
-                  data,
+                  data: adjustedData,
                   backgroundColor: [
                     PRIMARY_COLOR, '#01AEF0'
                   ],
                   borderWidth: 0
                 },
               ],
+              hoverOffset: 4
             }} 
             options={{
               responsive: true,
               maintainAspectRatio: false,
               plugins: {
                 tooltip: {
-                  enabled: false
-                }
+                  callbacks: {
+                    label: function (tooltipItem) {
+                      const label = tooltipItem.label || '';
+                      const value = data[tooltipItem.dataIndex];
+                      return `${label}: ${value}`;
+                    },
+                  },
+                },
+                legend: false,
               }
             }}
             {...other} 

src/_screens/home/education-department/index.js

@@ -95,17 +95,17 @@ export default function EducationDepartmentHome() {
     });
   }
 
-  useEffect(() => {
-    getDataOrganization()
-    getDataStatisticCircle()
+  useEffect(async () => {
+    await getDataOrganization()
+    await getDataStatisticCircle()
   }, [])
 
-  useEffect(() => {
-    getDataStudentChart()
+  useEffect(async () => {
+    await getDataStudentChart()
   }, [dateStudentChart])
 
-  useEffect(() => {
-    getDataTeacherChart()
+  useEffect(async () => {
+    await getDataTeacherChart()
   }, [dateTeacherChart])
 
   const getDataTeacher = async () => {