From 1704b78058a04b32ea35227961ada54855b3d2df Mon Sep 17 00:00:00 2001
From: Quy_FE <ngocquywork99@gmail.com>
Date: Tue, 29 Apr 2025 15:56:23 +0700
Subject: [PATCH] =?UTF-8?q?Feat=20:=20x=E1=BB=AD=20l=C3=BD=20chart=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_components/boxChart/BoxDoughnutChar.js   |  4 +--
 src/_components/chart/RDoughnutChart.js       | 30 ++++++++++++-------
 .../home/education-department/index.js        | 14 ++++-----
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/_components/boxChart/BoxDoughnutChar.js b/src/_components/boxChart/BoxDoughnutChar.js
index abc7f51..da02c47 100644
--- a/src/_components/boxChart/BoxDoughnutChar.js
+++ b/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()}
diff --git a/src/_components/chart/RDoughnutChart.js b/src/_components/chart/RDoughnutChart.js
index ea29a09..0cd9456 100644
--- a/src/_components/chart/RDoughnutChart.js
+++ b/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} 
diff --git a/src/_screens/home/education-department/index.js b/src/_screens/home/education-department/index.js
index dc7f589..1c32b67 100644
--- a/src/_screens/home/education-department/index.js
+++ b/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 () => {