Mise à jour de la librairie sur les graphes indicateur

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames';
 import { useState } from 'react';
 
-import IndicateurChart from '@/app/app/pages/collectivite/Indicateurs/chart/IndicateurChart';
 import { TIndicateurDefinition } from '@/app/app/pages/collectivite/Indicateurs/types';
 import { useIndicateurValeurs } from '@/app/app/pages/collectivite/Indicateurs/useIndicateurValeurs';
-import { getLeftLineChartMargin } from '@/app/ui/charts/Line/utils';
-import { Button, Icon } from '@/ui';
+import PictoIndicateurVide from '@/app/ui/pictogrammes/PictoIndicateurVide';
+import { Button, EmptyCard, Icon } from '@/ui';
+import DownloadIndicateurChartModal from '../../chart/DownloadIndicateurChart';
+import IndicateurChart from '../../chart/IndicateurChart';
 import { DataSourceTooltip } from './DataSourceTooltip';
 import { transformeValeurs } from './transformeValeurs';
 
@@ -42,82 +43,67 @@ const IndicateurDetailChart = ({
     });
 
   // sépare les données objectifs/résultats
-  const { valeurs, metadonnee } = transformeValeurs(valeursBrutes, source);
+  const { valeurs, objectifs, resultats, metadonnee } = transformeValeurs(
+    valeursBrutes,
+    source
+  );
+
   const data = {
     unite: definition.unite,
-    valeurs,
+    valeurs: { objectifs, resultats },
   };
 
   // Rempli ne peut pas être utilisé pour l'affichage car les objectifs ne sont pas pris en compte mais doivent quand même apparaître
   const hasValeurOrObjectif = valeurs.length > 0;
 
-  return (
-    <div
-      data-test={`chart-${definition.id}`}
-      className={classNames(
-        'flex flex-col p-6 border border-grey-4 rounded-lg',
-        className
-      )}
-    >
-      <div className="flex justify-between gap-16 mb-6">
-        <div
-          className={classNames('font-bold text-primary-9', {
-            'grow text-center': !hasValeurOrObjectif,
-          })}
-        >
-          {titre}
+  return hasValeurOrObjectif ? (
+    <>
+      <div
+        data-test={`chart-${definition.id}`}
+        className={classNames(
+          'flex flex-col py-6 border border-grey-4 rounded-lg',
+          className
+        )}
+      >
+        <div className="flex justify-between mx-8">
+          <div className="font-bold text-lg text-primary-9">
+            {definition.titre}
+          </div>
+
+          {!!rempli && (
+            <Button
+              size="xs"
+              variant="outlined"
+              onClick={() => setIsChartOpen(true)}
+            >
+              Télécharger le graphique
+            </Button>
+          )}
         </div>
-        {!!rempli && (
-          <Button
-            size="xs"
-            variant="outlined"
-            className="h-fit shrink-0"
-            onClick={() => setIsChartOpen(true)}
-          >
-            Télécharger le graphique
-          </Button>
+
+        <IndicateurChart data={data} isLoading={isLoadingValeurs} />
+
+        {!!metadonnee && (
+          <DataSourceTooltip metadonnee={metadonnee}>
+            <Icon icon="information-line" className="text-primary px-6" />
+          </DataSourceTooltip>
         )}
       </div>
 
-      <IndicateurChart
-        className="min-h-[16rem]"
-        isLoading={isLoadingValeurs}
+      <DownloadIndicateurChartModal
+        openState={{ isOpen: isChartOpen, setIsOpen: setIsChartOpen }}
         data={data}
-        chartConfig={{
-          theme: {
-            axis: {
-              ticks: {
-                text: {
-                  fontSize: 14,
-                },
-              },
-            },
-          },
-          margin: {
-            top: 16,
-            right: 16,
-            bottom: 48,
-            left: getLeftLineChartMargin(data.valeurs) + 8,
-          },
-          legend: { isOpen: true },
-        }}
-        chartInfos={{
-          modal: { isOpen: isChartOpen, setIsOpen: setIsChartOpen },
-          fileName,
-          title: titre,
-        }}
+        isLoading={isLoadingValeurs}
+        title={definition.titre}
       />
-      {!!metadonnee && (
-        <DataSourceTooltip metadonnee={metadonnee}>
-          <Icon icon="information-line" className="text-primary" />
-        </DataSourceTooltip>
-      )}
-      {!hasValeurOrObjectif && (
-        <div className="mx-auto text-sm text-grey-7">
-          Aucune valeur renseignée pour l’instant
-        </div>
-      )}
-    </div>
+    </>
+  ) : (
+    <EmptyCard
+      size="xs"
+      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é !"
+    />
   );
 };
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/DownloadIndicateurChart.tsx

@@ -0,0 +1,36 @@
+import { Modal } from '@/ui';
+import { OpenState } from '@/ui/utils/types';
+import IndicateurChart, { IndicateurChartData } from './IndicateurChart';
+
+type Props = {
+  openState: OpenState;
+  data: IndicateurChartData;
+  isLoading: boolean;
+  title?: string;
+};
+
+const DownloadIndicateurChartModal = ({
+  openState,
+  data,
+  isLoading,
+  title,
+}: Props) => {
+  if (!openState.isOpen) return null;
+
+  return (
+    <Modal
+      size="xl"
+      openState={openState}
+      render={() => (
+        <IndicateurChart
+          data={data}
+          isLoading={isLoading}
+          title={title}
+          variant="modal"
+        />
+      )}
+    />
+  );
+};
+
+export default DownloadIndicateurChartModal;