#74

dataesr · Dec 9, 2024 · 538d3ad · 538d3ad
1 parent 2e10849
commit 538d3ad
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 8 deletions.
diff --git a/client/src/components/cards/genders-card/index.tsx b/client/src/components/cards/genders-card/index.tsx
@@ -14,6 +14,7 @@ type CardProps = {
 import "./style.scss";
 
 export default function GendersCard({ currentYear, values }: CardProps) {
+  const rootStyles = getComputedStyle(document.documentElement);
   const secteursOptions = {
     chart: {
       backgroundColor: "transparent",
@@ -27,6 +28,17 @@ export default function GendersCard({ currentYear, values }: CardProps) {
       align: "center",
       verticalAlign: "middle",
       y: 60,
+      style: {
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontSize: "16px",
+        fontFamily: "Marianne, sans-serif",
+      },
+    },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
     },
     tooltip: {
       pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",

diff --git a/client/src/components/cards/sectors-card/index.tsx b/client/src/components/cards/sectors-card/index.tsx
@@ -14,6 +14,7 @@ type CardProps = {
 import "./style.scss";
 
 export default function SectorsCard({ currentYear, values }: CardProps) {
+  const rootStyles = getComputedStyle(document.documentElement);
   const secteursOptions = {
     chart: {
       backgroundColor: "transparent",
@@ -27,6 +28,17 @@ export default function SectorsCard({ currentYear, values }: CardProps) {
       align: "center",
       verticalAlign: "middle",
       y: 60,
+      style: {
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontSize: "16px",
+        fontFamily: "Marianne, sans-serif",
+      },
+    },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
     },
     tooltip: {
       pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",

diff --git a/client/src/components/cards/students-card/index.tsx b/client/src/components/cards/students-card/index.tsx
@@ -1,4 +1,4 @@
-import { Row, Col, Badge } from "@dataesr/dsfr-plus";
+import { Row, Col, Badge, Title } from "@dataesr/dsfr-plus";
 
 import "./style.scss";
 
@@ -36,7 +36,7 @@ export default function StudentsCard({
             )}
           </Row>
           <p className="fr-card__desc card-description">{descriptionNode}</p>
-          <h3 className="fr-card__title">
+          <Title as="h3" className="fr-card__title">
             {to !== "#" ? (
               <a href={to} className="fr-card__link">
                 <div className="key-number">
@@ -68,7 +68,7 @@ export default function StudentsCard({
                 )}
               </>
             )}
-          </h3>
+          </Title>
         </div>
       </div>
     </div>

diff --git a/client/src/components/cards/students-card/style.scss b/client/src/components/cards/students-card/style.scss
@@ -1,6 +1,5 @@
 .students-card {
   .key-number {
-    color: #222;
     font-size: 2.5rem;
     font-style: normal;
     font-weight: 500;
@@ -11,7 +10,6 @@
   .students-label {
     font-size: 0.9rem;
     font-weight: 700;
-    color: #222;
     display: inline-block;
     padding: 0;
     padding-bottom: 10px;

diff --git a/client/src/pages/atlas/charts/filieres-genders.tsx b/client/src/pages/atlas/charts/filieres-genders.tsx
@@ -19,17 +19,30 @@ export default function FilieresGendersChart({
   if (isLoading) {
     return <Template />;
   }
+  const rootStyles = getComputedStyle(document.documentElement);
   const filieresOptions = {
     chart: {
       backgroundColor: "transparent",
       type: "bar",
       height: "600",
     },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     title: {
       text: "",
     },
     xAxis: {
       categories: data.map((filiere) => filiere.label),
+      labels: {
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
+      },
       title: {
         text: "",
       },
@@ -41,9 +54,17 @@ export default function FilieresGendersChart({
       title: {
         text: "Nombre d'étudiants",
         align: "high",
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
       },
       labels: {
         overflow: "justify",
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
       },
       gridLineWidth: 0,
     },

diff --git a/client/src/pages/atlas/charts/filieres-sectors.tsx b/client/src/pages/atlas/charts/filieres-sectors.tsx
@@ -19,12 +19,19 @@ export default function FilieresSectorsChart({
   if (isLoading) {
     return <Template />;
   }
+  const rootStyles = getComputedStyle(document.documentElement);
   const filieresOptions = {
     chart: {
       backgroundColor: "transparent",
       type: "bar",
       height: "600",
     },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     title: {
       text: "",
     },
@@ -35,15 +42,29 @@ export default function FilieresSectorsChart({
       },
       gridLineWidth: 0.5,
       lineWidth: 0,
+      labels: {
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
+      },
     },
     yAxis: {
       min: 0,
       title: {
         text: "Nombre d'étudiants",
         align: "high",
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
       },
       labels: {
         overflow: "justify",
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
       },
       gridLineWidth: 0,
     },

diff --git a/client/src/pages/atlas/charts/genders-histo.tsx b/client/src/pages/atlas/charts/genders-histo.tsx
@@ -71,6 +71,8 @@ export default function GendersHistoChart({
       break;
   }
 
+  const rootStyles = getComputedStyle(document.documentElement);
+
   const options = {
     chart: {
       type,
@@ -79,21 +81,43 @@ export default function GendersHistoChart({
       },
       backgroundColor: "transparent",
     },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     title: { text: "" },
     credits: {
       enabled: false,
     },
     xAxis: {
       categories: data.map((item) => item.annee_universitaire),
+      labels: {
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
+      },
     },
     yAxis: {
       min: 0,
       title: {
         text: "Nombre d'étudiants",
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
       },
       stackLabels: {
         enabled: true,
       },
+      labels: {
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
+      },
     },
     tooltip: {
       headerFormat: "<b>{point.x}</b><br/>",

diff --git a/client/src/pages/atlas/charts/genders-pie/index.tsx b/client/src/pages/atlas/charts/genders-pie/index.tsx
@@ -16,12 +16,19 @@ export default function GenderChart({
   if (isLoading || !data || !data.length) {
     return <div>Loader</div>;
   }
+  const rootStyles = getComputedStyle(document.documentElement);
   const secteursOptions = {
     chart: {
       type: "pie",
       height: "60%",
       backgroundColor: "transparent",
     },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     title: {
       text: "",
     },

diff --git a/client/src/pages/atlas/charts/map-pie-genders/index.jsx b/client/src/pages/atlas/charts/map-pie-genders/index.jsx
@@ -96,9 +96,16 @@ export default function MapPieGenders({
   const b = -a * minStaff;
 
   // Build the chart
+  const rootStyles = getComputedStyle(document.documentElement);
   const options = {
     title: { text: "" },
     credits: { enabled: false },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     chart: {
       animation: false,
       backgroundColor: "transparent",

diff --git a/client/src/pages/atlas/charts/map-pie-sectors/index.jsx b/client/src/pages/atlas/charts/map-pie-sectors/index.jsx
@@ -95,9 +95,16 @@ export default function MapPieSectors({
   const b = -a * minStaff;
 
   // Build the chart
+  const rootStyles = getComputedStyle(document.documentElement);
   const options = {
     title: { text: "" },
     credits: { enabled: false },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     chart: {
       animation: false,
       backgroundColor: "transparent",

diff --git a/client/src/pages/atlas/charts/sectors-histo.tsx b/client/src/pages/atlas/charts/sectors-histo.tsx
@@ -69,6 +69,8 @@ export default function SectorsHistoChart({
       break;
   }
 
+  const rootStyles = getComputedStyle(document.documentElement);
+
   const options = {
     chart: {
       type,
@@ -77,6 +79,12 @@ export default function SectorsHistoChart({
       },
       backgroundColor: "transparent",
     },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     title: {
       text: "",
     },
@@ -85,15 +93,31 @@ export default function SectorsHistoChart({
     },
     xAxis: {
       categories: data.map((item) => item.annee_universitaire),
+      labels: {
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
+      },
     },
     yAxis: {
       min: 0,
       title: {
         text: "Nombre d'étudiants",
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
       },
       stackLabels: {
         enabled: true,
       },
+      labels: {
+        style: {
+          color: rootStyles.getPropertyValue("--label-color"),
+          fontFamily: "Marianne, sans-serif",
+        },
+      },
     },
     tooltip: {
       headerFormat: "<b>{point.x}</b><br/>",

diff --git a/client/src/pages/atlas/charts/sectors-pie/index.tsx b/client/src/pages/atlas/charts/sectors-pie/index.tsx
@@ -16,6 +16,7 @@ export default function SectortsChart({
   if (isLoading || !data || !data.length) {
     return <div>Loader</div>;
   }
+  const rootStyles = getComputedStyle(document.documentElement);
   const secteursOptions = {
     chart: {
       type: "pie",
@@ -28,6 +29,12 @@ export default function SectortsChart({
     credits: {
       enabled: false,
     },
+    legend: {
+      itemStyle:{
+        color: rootStyles.getPropertyValue("--label-color"),
+        fontFamily: "Marianne, sans-serif",
+      }
+    },
     plotOptions: {
       series: {
         allowPointSelect: true,