add different views of chart

dataesr · Jun 27, 2024 · 5e669c2 · 5e669c2
1 parent 7821da0
commit 5e669c2
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 37 deletions.
diff --git a/client/src/pages/atlas/charts/sector-stacked.tsx b/client/src/pages/atlas/charts/sector-stacked.tsx
@@ -7,64 +7,111 @@ type HistoData = {
   effectif_pu: number;
 };
 
-export default function SectorStackedChart({ data = [], isLoading = true }: { data: HistoData[], isLoading: boolean }) {
+type SeriesData = {
+  name: string;
+  data: number[];
+  color: string;
+}[];
+
+export default function SectorStackedChart({
+  data = [],
+  isLoading = true,
+  type,
+  view,
+}: {
+  data: HistoData[];
+  isLoading: boolean;
+  type: "column" | "line";
+  view: "basic" | "percentage";
+}) {
   if (isLoading || !data || !data.length) {
-    return (
-      <div>Loader</div>
-    );
+    return <div>Loader</div>;
+  }
+
+  let series: SeriesData;
+  switch (view) {
+    case "basic":
+      series = [
+        {
+          name: "Secteur privé",
+          data: data.map((item) => item.effectif_pr),
+          color: "#755F4D",
+        },
+        {
+          name: "Secteur public",
+          data: data.map((item) => item.effectif_pu),
+          color: "#748CC0",
+        },
+      ];
+      break;
+    case "percentage":
+      series = [
+        {
+          name: "Secteur privé",
+          data: data.map(
+            (item) =>
+              (item.effectif_pr * 100) / (item.effectif_pr + item.effectif_pu)
+          ),
+          color: "#755F4D",
+        },
+        {
+          name: "Secteur public",
+          data: data.map(
+            (item) =>
+              (item.effectif_pu * 100) / (item.effectif_pr + item.effectif_pu)
+          ),
+          color: "#748CC0",
+        },
+      ];
+      break;
+    default:
+      series = [];
+      break;
   }
 
   const options = {
     chart: {
-      type: 'column'
+      type,
+      animation: {
+        duration: 500,
+      },
     },
     title: {
-      text: '',
+      text: "",
+    },
+    credits: {
+      enabled: false,
     },
     xAxis: {
-      categories: data.map((item) => item.annee_universitaire)
+      categories: data.map((item) => item.annee_universitaire),
     },
     yAxis: {
       min: 0,
       title: {
-        text: 'Count trophies'
+        text: "Count trophies",
       },
       stackLabels: {
-        enabled: true
-      }
+        enabled: true,
+      },
     },
     tooltip: {
-      headerFormat: '<b>{point.x}</b><br/>',
-      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
+      headerFormat: "<b>{point.x}</b><br/>",
+      pointFormat: "{series.name}: {point.y}<br/>Total: {point.stackTotal}",
     },
     plotOptions: {
       column: {
-        stacking: 'normal',
+        stacking: "normal",
         dataLabels: {
-          enabled: false
-        }
-      }
-    },
-    credit: {
-      enabled: false
+          enabled: false,
+        },
+      },
     },
-    series: [{
-      name: 'Secteur privé',
-      data: data.map((item) => item.effectif_pr),
-      color: '#755F4D'
-    }, {
-      name: 'Secteur public',
-      data: data.map((item) => item.effectif_pu),
-      color: '#748CC0'
-    }]
-  }
+    series,
+  };
 
   return (
     <section>
-      <HighchartsReact
-        highcharts={Highcharts}
-        options={options}
-      />
+      <HighchartsReact highcharts={Highcharts} options={options} />
     </section>
   );
-}
+}
diff --git a/client/src/pages/atlas/components/main/tabs/sectors.tsx b/client/src/pages/atlas/components/main/tabs/sectors.tsx
@@ -1,6 +1,6 @@
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams, useNavigate } from "react-router-dom";
-
 import {
   Container,
   Row,
@@ -10,19 +10,21 @@ import {
   Badge,
   Button,
 } from "@dataesr/dsfr-plus";
+
 import SectortsChart from "../../../charts/sectors.tsx";
 import {
   getNumberOfStudents,
   getNumberOfStudentsByYear,
   getSimilarElements,
 } from "../../../../../api/atlas.ts";
 import SectorStackedChart from "../../../charts/sector-stacked.tsx";
-
 import { DataByYear, SimilarData } from "../../../../../types/atlas.ts";
 import StudentsCardWithTrend from "../../../../../components/cards/students-card-with-trend/index.tsx";
 import TrendCard from "../../../charts/trend.tsx";
 
 export function Sectors() {
+  const [chartView, setChartView] = useState<"basic" | "percentage">("basic");
+  const [chartType, setChartType] = useState<"column" | "line">("column");
   const [searchParams] = useSearchParams();
   const currentYear = searchParams.get("annee_universitaire") || "2022-23";
   const params = [...searchParams]
@@ -104,6 +106,22 @@ export function Sectors() {
     return <div>Loading...</div>;
   }
 
+  const toggleView = () => {
+    if (chartView === "basic") {
+      setChartView("percentage");
+    } else {
+      setChartView("basic");
+    }
+  };
+
+  const toggleType = () => {
+    if (chartType === "column") {
+      setChartType("line");
+    } else {
+      setChartType("column");
+    }
+  };
+
   return (
     <Container as="section" fluid>
       <Row gutters>
@@ -162,7 +180,33 @@ export function Sectors() {
             Données historiques depuis l'année universitaire{" "}
             <Badge color="yellow-tournesol">2001-02</Badge>
           </Title>
-          <SectorStackedChart data={dataByYear} isLoading={isLoadingByYear} />
+          <div className="text-right">
+            <Button onClick={() => toggleView()} size="sm" variant="text">
+              #
+              {chartView === "basic" ? (
+                <span className="fr-icon-arrow-right-s-fill" />
+              ) : (
+                <span className="fr-icon-arrow-left-s-fill" />
+              )}
+              %
+            </Button>
+            <Button onClick={() => toggleType()} size="sm" variant="text">
+              <span className="fr-icon-bar-chart-box-line" />
+              {chartType === "column" ? (
+                <span className="fr-icon-arrow-right-s-fill" />
+              ) : (
+                <span className="fr-icon-arrow-left-s-fill" />
+              )}
+
+              <span className="fr-icon-line-chart-line" />
+            </Button>
+          </div>
+          <SectorStackedChart
+            data={dataByYear}
+            isLoading={isLoadingByYear}
+            type={chartType}
+            view={chartView}
+          />
         </Col>
       </Row>
       {dataSimilarSorted?.length > 0 && (