fix(graphs): add indicator for filtres

dataesr · May 17, 2024 · 8738490 · 8738490
1 parent 35823f4
commit 8738490
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/components/graphs/contributions-by-name.tsx b/src/components/graphs/contributions-by-name.tsx
@@ -11,7 +11,7 @@ const ContributionsGraphByName = () => {
   const url = filter === "object" ? contributionUrl : contactUrl;
   const { data, isLoading, isError } = useGetContributionData(url, 0);
   const contributions = (data as { data: [] })?.data;
-
+  console.log(filter);
   if (isLoading) {
     return <div>Chargement...</div>;
   }
@@ -58,7 +58,9 @@ const ContributionsGraphByName = () => {
       type: "bar",
     },
     title: {
-      text: "Top 15 des contributeurs",
+      text: `Top 15 des contributeurs ${
+        filter === "object" ? "par objet" : "via formulaire contact"
+      }`,
     },
     xAxis: {
       categories: names,
@@ -83,12 +85,15 @@ const ContributionsGraphByName = () => {
     <>
       <Button
         className="fr-mr-1w"
-        variant="secondary"
+        variant={filter === "object" ? "primary" : "secondary"}
         onClick={() => setFilter("object")}
       >
         Par objet
       </Button>
-      <Button variant="secondary" onClick={() => setFilter("contact")}>
+      <Button
+        variant={filter === "contact" ? "primary" : "secondary"}
+        onClick={() => setFilter("contact")}
+      >
         Via formulaire contact
       </Button>
       <HighchartsReact highcharts={Highcharts} options={options} />

diff --git a/src/components/graphs/contributions-by-year.tsx b/src/components/graphs/contributions-by-year.tsx
@@ -3,7 +3,7 @@ import HighchartsReact from "highcharts-react-official";
 import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
 import { contributionUrl, contactUrl } from "../../config/api";
 import { useState } from "react";
-import { Button, Col, Row } from "@dataesr/dsfr-plus";
+import { Button } from "@dataesr/dsfr-plus";
 
 const ContributionsGraphByYear = () => {
   const [filter, setFilter] = useState("contributions");
@@ -44,7 +44,9 @@ const ContributionsGraphByYear = () => {
       type: "column",
     },
     title: {
-      text: "Nombre de contributions par mois et par année",
+      text: `Nombre de contributions ${
+        filter === "object" ? "par objet" : "via formulaire contact"
+      } par mois et par année`,
     },
     xAxis: {
       categories: [
@@ -74,12 +76,15 @@ const ContributionsGraphByYear = () => {
     <>
       <Button
         className="fr-mr-1w"
-        variant="secondary"
+        variant={filter === "object" ? "primary" : "secondary"}
         onClick={() => setFilter("object")}
       >
         Par objet
       </Button>
-      <Button variant="secondary" onClick={() => setFilter("contact")}>
+      <Button
+        variant={filter === "contact" ? "primary" : "secondary"}
+        onClick={() => setFilter("contact")}
+      >
         Via formulaire contact
       </Button>
       <HighchartsReact highcharts={Highcharts} options={options} />