add legend in charts

dataesr · Jun 11, 2024 · 3a9f86b · 3a9f86b
1 parent 37b9422
commit 3a9f86b
Show file tree

Hide file tree

Showing 4 changed files with 418 additions and 248 deletions.
diff --git a/client/src/pages/atlas/charts/gender.tsx b/client/src/pages/atlas/charts/gender.tsx
@@ -6,73 +6,75 @@ type GenderData = {
   y: number;
 }[];
 
-export default function GenderChart({ data = [], isLoading, currentYear }: { data: GenderData, isLoading: boolean, currentYear: string }) {
+export default function GenderChart({
+  data = [],
+  isLoading,
+  currentYear,
+}: {
+  data: GenderData;
+  isLoading: boolean;
+  currentYear: string;
+}) {
   if (isLoading || !data || !data.length) {
-    return (
-      <div>Loader</div>
-    );
+    return <div>Loader</div>;
   }
   const secteursOptions = {
     chart: {
-      type: 'pie'
+      type: "pie",
+      height: "80%",
     },
     title: {
-      text: "Pourcentage d'étudiants inscrits regroupés par genre pour l'année universitaire " + currentYear,
-      align: 'left'
+      text:
+        "Pourcentage d'étudiants inscrits regroupés par genre pour l'année universitaire " +
+        currentYear,
+      align: "center",
     },
     credits: {
-      enabled: false
+      enabled: false,
     },
-    // tooltip: {
-    //   valueSuffix: ' étudiants'
-    // },
-    // subtitle: {
-    //   text:
-    //     'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>',
-    //   align: 'left'
-    // },
     plotOptions: {
       series: {
         allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: [{
-          enabled: true,
-          distance: 20
-        }, {
-          enabled: true,
-          distance: -40,
-          format: '{point.percentage:.1f}%',
-          style: {
-            fontSize: '1.2em',
-            textOutline: 'none',
-            opacity: 0.7
+        cursor: "pointer",
+        dataLabels: [
+          {
+            enabled: false,
+            distance: 20,
           },
-          filter: {
-            operator: '>',
-            property: 'percentage',
-            value: 10
-          }
-        }]
+          {
+            enabled: true,
+            distance: -40,
+            format: "{point.percentage:.1f}%",
+            style: {
+              fontSize: "1em",
+              textOutline: "none",
+              opacity: 0.7,
+            },
+            filter: {
+              operator: ">",
+              property: "percentage",
+              value: 10,
+            },
+          },
+        ],
       },
       pie: {
-        colors: ['#efcb3a', '#e18b76'],
-      }
+        colors: ["#efcb3a", "#e18b76"],
+      },
     },
     series: [
       {
-        name: 'Nombre d\'étudiants',
+        name: "Nombre d'étudiants",
         colorByPoint: true,
-        data
-      }
-    ]
-  }
+        data,
+        showInLegend: true,
+      },
+    ],
+  };
 
   return (
     <section>
-      <HighchartsReact
-        highcharts={Highcharts}
-        options={secteursOptions}
-      />
+      <HighchartsReact highcharts={Highcharts} options={secteursOptions} />
     </section>
   );
-}
+}
diff --git a/client/src/pages/atlas/charts/sectors.tsx b/client/src/pages/atlas/charts/sectors.tsx
@@ -6,65 +6,75 @@ type SectorData = {
   y: number;
 }[];
 
-export default function SectortsChart({ data = [], isLoading = false }: { data: SectorData, isLoading: boolean }) {
+export default function SectortsChart({
+  data = [],
+  isLoading = false,
+  currentYear,
+}: {
+  data: SectorData;
+  isLoading: boolean;
+  currentYear: string;
+}) {
   if (isLoading || !data || !data.length) {
-    return (
-      <div>Loader</div>
-    );
+    return <div>Loader</div>;
   }
   const secteursOptions = {
     chart: {
-      type: 'pie',
-      height: '50%',
+      type: "pie",
+      height: "80%",
     },
     title: {
-      text: '',
+      text:
+        "Pourcentage d'étudiants inscrits regroupés par secteur pour l'année universitaire " +
+        currentYear,
+      align: "center",
     },
     credits: {
-      enabled: false
+      enabled: false,
     },
     plotOptions: {
       series: {
         allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: [{
-          enabled: true,
-          distance: 20
-        }, {
-          enabled: true,
-          distance: -40,
-          format: '{point.percentage:.1f}%',
-          style: {
-            fontSize: '1.2em',
-            textOutline: 'none',
-            opacity: 0.7
+        cursor: "pointer",
+        dataLabels: [
+          {
+            enabled: false,
+            distance: 20,
           },
-          filter: {
-            operator: '>',
-            property: 'percentage',
-            value: 10
-          }
-        }]
+          {
+            enabled: true,
+            distance: -40,
+            format: "{point.percentage:.1f}%",
+            style: {
+              fontSize: "1em",
+              textOutline: "none",
+              opacity: 0.7,
+            },
+            filter: {
+              operator: ">",
+              property: "percentage",
+              value: 10,
+            },
+          },
+        ],
       },
       pie: {
-        colors: ['#748CC0', '#755F4D'],
-      }
+        colors: ["#748CC0", "#755F4D"],
+      },
     },
     series: [
       {
-        name: 'Nombre d\'étudiants',
+        name: "Nombre d'étudiants",
         colorByPoint: true,
         data,
-      }
-    ]
-  }
+        showInLegend: true,
+      },
+    ],
+  };
 
   return (
     <section>
-      <HighchartsReact
-        highcharts={Highcharts}
-        options={secteursOptions}
-      />
+      <HighchartsReact highcharts={Highcharts} options={secteursOptions} />
     </section>
   );
-}
+}