Ajoute l'infobulle décrivant la source externe de données sélectionné…

…e (dans le graphe indicateur détail)

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/DataSourceTooltip.tsx

@@ -0,0 +1,46 @@
+import {Tooltip} from '@tet/ui';
+import {Indicateurs} from '@tet/api';
+
+/**
+ * Affiche une infobulle donnant les informations disponibles pour une source de
+ * données externe.
+ */
+export const DataSourceTooltip = ({
+  metadonnee,
+  children,
+}: {
+  metadonnee: Indicateurs.domain.SourceMetadonnee;
+  children: JSX.Element;
+}) => {
+  return (
+    <Tooltip
+      label={
+        <div>
+          {!!metadonnee.diffuseur && (
+            <p>
+              Diffuseur : <b>{metadonnee.diffuseur}</b>
+            </p>
+          )}
+          {!!metadonnee.producteur && (
+            <p>
+              Producteur : <b>{metadonnee.producteur}</b>
+            </p>
+          )}
+          Version : <b>{new Date(metadonnee.dateVersion).getFullYear()}</b>
+          {!!metadonnee.methodologie && (
+            <p>
+              Méthodologie / Périmètre : <b>{metadonnee.methodologie}</b>
+            </p>
+          )}
+          {!!metadonnee.limites && (
+            <p>
+              Points d’attention / Limites : <b>{metadonnee.limites}</b>
+            </p>
+          )}
+        </div>
+      }
+    >
+      {children}
+    </Tooltip>
+  );
+};

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

@@ -1,12 +1,13 @@
 import {useState} from 'react';
 import classNames from 'classnames';
 
-import {Button} from '@tet/ui';
+import {Button, Icon} from '@tet/ui';
 import IndicateurChart from 'app/pages/collectivite/Indicateurs/chart/IndicateurChart';
 import {TIndicateurDefinition} from 'app/pages/collectivite/Indicateurs/types';
 import {useIndicateurValeurs} from 'app/pages/collectivite/Indicateurs/useIndicateurValeurs';
 import {getLeftLineChartMargin} from 'ui/charts/Line/utils';
 import {transformeValeurs} from './transformeValeurs';
+import {DataSourceTooltip} from './DataSourceTooltip';
 
 type Props = {
   definition: TIndicateurDefinition;
@@ -39,7 +40,7 @@ const IndicateurDetailChart = ({
     });
 
   // sépare les données objectifs/résultats
-  const {valeurs} = transformeValeurs(valeursBrutes, source);
+  const {valeurs, metadonnee} = transformeValeurs(valeursBrutes, source);
   const data = {
     unite: definition.unite,
     valeurs,
@@ -101,7 +102,11 @@ const IndicateurDetailChart = ({
           title: 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

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/transformeValeurs.ts

@@ -12,12 +12,15 @@ export function transformeValeurs(
         | 'objectif'
         | 'objectifCommentaire'
         | 'resultatCommentaire'
+        | 'source'
       >[]
     | undefined,
-  source?: string
+  sourceId?: string
 ) {
   const objectifs: TIndicateurValeur[] = [];
   const resultats: TIndicateurValeur[] = [];
+  let derniereSourceVersion = 0;
+  let derniereSource = null;
 
   valeursBrutes?.forEach(
     ({
@@ -27,6 +30,7 @@ export function transformeValeurs(
       resultat,
       objectifCommentaire,
       resultatCommentaire,
+      source,
     }) => {
       if (typeof objectif === 'number') {
         objectifs.push({
@@ -35,7 +39,7 @@ export function transformeValeurs(
           valeur: objectif,
           commentaire: objectifCommentaire || '',
           type: 'objectif',
-          source: source || null,
+          source: sourceId || null,
         });
       }
 
@@ -46,9 +50,16 @@ export function transformeValeurs(
           valeur: resultat,
           commentaire: resultatCommentaire || '',
           type: 'resultat',
-          source: source || null,
+          source: sourceId || null,
         });
       }
+      if (source) {
+        const version = new Date(source.dateVersion).getTime();
+        if (version > derniereSourceVersion) {
+          derniereSourceVersion = version;
+          derniereSource = source;
+        }
+      }
     }
   );
 
@@ -57,5 +68,7 @@ export function transformeValeurs(
     valeurs: [...objectifs, ...resultats],
     objectifs,
     resultats,
+    // dernière métadonnées disponibles pour la source voulue
+    metadonnee: derniereSource as Indicateurs.domain.Valeur['source'] | null,
   };
 }

e2e/cypress/integration/17-indicateurs/steps.js

@@ -160,6 +160,11 @@ When(
         values: {
           source_id: sourceId,
           date_version: new Date().toISOString(),
+          diffuseur: 'ORCAE',
+          producteur: 'Atmo AURA',
+          methodologie:
+            'inventaire cadastral des émissions de GES / scope 1 & 2',
+          limites: 'secrétisation des données pour certains secteurs',
         },
         columns: 'id',
       }).then(({data}) => {