From 1fb26ff5a8223349eb933aada85d5f8e31527c87 Mon Sep 17 00:00:00 2001
From: Quy_FE <ngocquywork99@gmail.com>
Date: Tue, 27 May 2025 16:16:11 +0700
Subject: [PATCH] =?UTF-8?q?Feat=20:=20tooltip=20cho=20ph=E1=BA=A7n=20bi?=
 =?UTF-8?q?=E1=BB=83u=20=C4=91=E1=BB=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../boxChart/BoxDoughnutBarChart.js           | 22 ++++++++++---
 src/_components/boxChart/BoxDoughnutChar.js   | 20 ++++++++++--
 src/_components/boxChart/boxChart.scss        | 32 +++++++++++++++++--
 3 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/_components/boxChart/BoxDoughnutBarChart.js b/src/_components/boxChart/BoxDoughnutBarChart.js
index 9a18dca..3a0f49b 100644
--- a/src/_components/boxChart/BoxDoughnutBarChart.js
+++ b/src/_components/boxChart/BoxDoughnutBarChart.js
@@ -43,11 +43,23 @@ export default function BoxDoughnutBarChart({
         <div className='doughnut-chart-content flex-1'>
           <RDoughnutChart data={dataDoughnut} />
         </div>
-        <div className='origin-vertical justify-content-center align-item-center flex-1'>
-          <p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
-          <p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>
-            {target > 0 ? target : '...'}
-          </p>
+        <div className='origin-vertical justify-content-center align-item-center flex-1' style={{cursor:'pointer'}}>
+            <div className="tooltip">
+              <p 
+                style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {current}
+                <span className="tooltiptext" style={{color: PRIMARY_COLOR}}>Số lượng đã tham gia: {current}</span>
+              </p>
+              </div>
+            <div className="tooltip"> 
+              <p 
+                style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {target > 0 ? target : '...'}
+                <span className="tooltiptext" style={{color: '#01AEF0'}}>Tổng số: {target > 0 ? target : '...'}</span>
+              </p>
+            </div>
         </div>
       </div>
     </div>
diff --git a/src/_components/boxChart/BoxDoughnutChar.js b/src/_components/boxChart/BoxDoughnutChar.js
index a20cc9d..c0ffd87 100644
--- a/src/_components/boxChart/BoxDoughnutChar.js
+++ b/src/_components/boxChart/BoxDoughnutChar.js
@@ -10,8 +10,24 @@ export default function BoxDoughnutChart({data = [], title, propsContainer}) {
   const renderStats = () => {
     return (
       <>
-        <p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
-        <p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>{target > 0 ? target : '...'}</p>
+        <div style={{cursor:'pointer',display: 'flex', flexDirection: 'column', alignItems:'center'}}>
+            <div className="tooltip">
+              <p 
+                style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {current}
+                <span className="tooltiptext" style={{color: PRIMARY_COLOR}}>Số lượng đã tham gia: {current}</span>
+              </p>
+            </div>
+            <div className="tooltip"> 
+              <p 
+                style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {target > 0 ? target : '...'}
+                <span className="tooltiptext" style={{color: '#01AEF0'}}>Tổng số: {target > 0 ? target : '...'}</span>
+              </p>
+            </div>
+        </div>
       </>
     )
   }
diff --git a/src/_components/boxChart/boxChart.scss b/src/_components/boxChart/boxChart.scss
index e22ff06..4c65b41 100644
--- a/src/_components/boxChart/boxChart.scss
+++ b/src/_components/boxChart/boxChart.scss
@@ -12,7 +12,7 @@
   }
 
   @media (max-width: 1599px) {
-    max-width: 220px;
+    max-width: 260px;
   }
 
   .box-chart-title {
@@ -65,7 +65,35 @@
     width: 300px;
 
     @media (max-width: 1750px) {
-      max-width: 220px;
+      max-width: 240px;
     }
   }
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  .tooltiptext {
+    visibility: hidden;
+    width: max-content;
+    background-color: #fff;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 1.4rem;
+  }
+
+  &:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
 }
\ No newline at end of file