diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
index da5968f1db..d34a597ced 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
@@ -85,7 +85,7 @@ const IndicateurDetailChart = ({
{!!metadonnee && (
-
+
)}
@@ -100,7 +100,7 @@ const IndicateurDetailChart = ({
) : (
}
title="Aucune valeur n'est associée aux résultats ou aux objectifs de la collectivité !"
/>
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx
index c2ba10a8ff..064d83bc62 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx
+++ b/app.territoiresentransitions.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 = {
+ thumbnail: 320,
+ modal: 550,
+ detail: 450,
+};
+
+const variantToGrid: Record = {
+ 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: {