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: {