Mises à jour sur le composant IndicateurChart

incubateur-ademe · Jan 10, 2025 · 3146ec5 · 3146ec5
1 parent d0619ae
commit 3146ec5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/....react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx b/....react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
@@ -85,7 +85,7 @@ const IndicateurDetailChart = ({
 
         {!!metadonnee && (
           <DataSourceTooltip metadonnee={metadonnee}>
-            <Icon icon="information-line" className="text-primary" />
+            <Icon icon="information-line" className="text-primary px-6" />
           </DataSourceTooltip>
         )}
       </div>
@@ -100,7 +100,7 @@ const IndicateurDetailChart = ({
   ) : (
     <EmptyCard
       size="xs"
-      className="h-64"
+      className="h-64 my-8"
       picto={(props) => <PictoIndicateurVide {...props} />}
       title="Aucune valeur n'est associée aux résultats ou aux objectifs de la collectivité !"
     />

diff --git a/...oiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx b/...oiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx
@@ -5,8 +5,23 @@ import {
   makeOption,
 } from '@/app/ui/charts/echarts';
 import SpinnerLoader from '@/app/ui/shared/SpinnerLoader';
+import { GridComponentOption } from 'echarts';
 import { TIndicateurValeur } from '../useIndicateurValeurs';
 
+type ChartVariant = 'thumbnail' | 'modal' | 'detail';
+
+const variantToHeight: Record<ChartVariant, number> = {
+  thumbnail: 320,
+  modal: 550,
+  detail: 450,
+};
+
+const variantToGrid: Record<ChartVariant, GridComponentOption> = {
+  thumbnail: { top: '8%', bottom: '15%', right: '5%' },
+  modal: {},
+  detail: { left: 32, right: 32 },
+};
+
 /** Data issues de l'api pour générer les données formatées pour echarts */
 /** TODO: le format devra être revu après la refonte indicateurs et la maj du fetch */
 export type IndicateurChartData = {
@@ -27,8 +42,8 @@ export type IndicateurChartProps = {
   title?: string;
   /** Booléen de chargement des données et infos du graphique */
   isLoading: boolean;
-  /** Taille du graphe */
-  variant?: 'thumbnail' | 'modal' | 'detail';
+  /** Variant du graphe, en fonction du cas d'utilisation */
+  variant?: ChartVariant;
   /** ClassName du container */
   className?: string;
 };
@@ -67,17 +82,9 @@ const IndicateurChart = ({
     },
   ];
 
-  const style = { height: 450 };
-  if (variant === 'thumbnail') style.height = 320;
-  if (variant === 'modal') style.height = 550;
+  const style = { height: variantToHeight[variant] };
 
-  let grid = {};
-  if (variant === 'thumbnail') {
-    grid = { top: '8%', bottom: '15%', right: '5%' };
-  }
-  if (variant === 'detail') {
-    grid = { left: 32, right: 32 };
-  }
+  const grid = variantToGrid[variant];
 
   const option = makeOption({
     option: {