Personnalisation du graphique des activités quotidiennes mais il y a …

…un pb d'affichage du tooltip
charlenry · Mar 3, 2023 · 9f2568b · 9f2568b
1 parent 6897908
commit 9f2568b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/src/components/Activity/Activity.js b/src/components/Activity/Activity.js
@@ -29,14 +29,31 @@ const Activity = ({ activityModel }) => {
           <CartesianGrid horizontal="true" vertical="" />
           <XAxis dataKey="day" />
           <YAxis />
-          <Tooltip />
-          <Bar dataKey="kilogram" fill="#282D30" barSize={7} />
-          <Bar dataKey="calories" fill="#E60000" barSize={7} />
+          <Tooltip content={<CustomTooltip />} />
+          <Bar dataKey="kilogram" fill="#282D30" barSize={7} radius={[20, 20, 0, 0]} />
+          <Bar dataKey="calories" fill="#E60000" barSize={7} radius={[20, 20, 0, 0]}/>
           <Legend />
         </BarChart>
       </div>
     </div>
   );
 };
 
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    // console.log('Valeur de active: ', active);
+    // console.log('Valeur de payload: ', payload);
+    // console.log('Valeur de label: ', label);
+    return (
+      <div className="custom-tooltip">
+        <p className="label">{`${payload[0].value}kg`}</p>
+        <p className="label">{`${payload[1].value}kcal`}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
 export default Activity;
diff --git a/src/components/Activity/Activity.scss b/src/components/Activity/Activity.scss
@@ -10,4 +10,28 @@
     font-weight: 500;
     color: $black;
   }
+}
+
+
+.custom-tooltip {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: -7rem;
+  left: 2.1rem;
+  border: 1px solid #E60000;
+  z-index: 10;
+
+  p.label {
+    background-color: #E60000;
+    color: white;
+    font-size: 0.7rem;
+    line-height: 2.4rem;
+    font-weight: 500;
+    width: 5rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
diff --git a/src/components/Performance/Performance.js b/src/components/Performance/Performance.js
@@ -1,4 +1,4 @@
-import "./Performance.scss";
+import './Performance.scss';
 import React from "react";
 import {
   ResponsiveContainer,

diff --git a/src/components/TodayScore/TodayScore.js b/src/components/TodayScore/TodayScore.js
@@ -24,6 +24,7 @@ const TodayScore = ({ infosModel }) => {
           cy={'50%'}
           innerRadius={80}
           outerRadius={90}
+          cornerRadius="50%"
           fill="#ff0000"
         />
       </PieChart>

diff --git a/src/style/app.scss b/src/style/app.scss
@@ -7,6 +7,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  border: 0.1px dashed #868686;
 }
 @font-face {
   font-family: 'Roboto';
@@ -173,3 +174,5 @@ body {
   max-height: 12.4rem;
   overflow: hidden;
 }
+
+