Données

La première étape dans la réalisation du tableau de bord consiste à définir les données qui seront utilisés. La biblithièque supporte de manière standard différents fournisseurs. Certaines opérations sont génériques (<Filter>), alors que d'autres exploitent des capacités spécifiques à un fournisseur (propriété meta de <Dataset>).

Source de données

Connecter une source

Le composant Dataset permet de définir des jeux de données qui seront utilisés par les graphiques. On peut également ajouter des métadonnées (producteurs), qui s'afficheront sous les graphiques utilisant ce dataset.

<Dashboard>
    <Dataset
    id="monIdentifiantUnique"
    url="https://data.ademe.fr/data-fair/api/v1/datasets"
    type='datafair'    resource="sinoe-(r)-destination-des-dma-collectes-par-type-de-traitement/lines"
    >
      <Producer url="https://www.sinoe.org">Ademe</Producer>
      <Producer url="https://odema-hautsdefrance.org/">Odema</Producer>
    </Dataset>
  {/* [...] */}
</Dashboard>

Filter les données

Il s'agit de filtres envoyés à l'API du fournisseur de données. Il utilise des opérateurs standards (eq, ne, contains, etc.) qui sont ensuite automatiquement traduits dans le format attendu par le fournisseur de données. Voir la liste des opérateur. Attention, les fournisseurs ne supportent pas toujours tous les opérateurs.

<Filter field='L_REGION'>Hauts-de-France</Filter> // operateur eq (égalité) par défaut
<Filter field='L_TYP_REG_DECHET' operator='ne'>Encombrants</Filter>

Fournisseurs diposnibles

  • WFS 1.1
  • DataFair
  • Fichier

Manipuler les données

Transform

Le composant enfant <Transform> est optionnel. Il permet de modifier localement les données du <Dataset> parent. Il doit contenir soit :

  • Une fonction javascript qui traite les données.
  • Une requête SQL (chaîne de caractères) (voir la documentation Alasql).

Si plusieurs <Transform> sont ajoutés, ils sont appliqués successivement sur les données. Cette opération est effectuée côté client, et ne modifie donc pas l'appel à l'API.

<Dashboard>
    <Dataset
    id="dma_par_type_de_traitement"
    url="https://data.ademe.fr/data-fair/api/v1/datasets"
    type='datafair'
    resource="sinoe-(r)-destination-des-dma-collectes-par-type-de-traitement/lines"
    >
      <Transform>{(data) => data.filter((e) => e.TONNAGE_DMA > 3000)}</Transform>
      <Transform>SELECT * FROM ? ORDER BY [TONNAGE_DMA] DESC LIMIT 5</Transform>
    </Dataset>
  {/* [...] */}
</Dashboard>

Join

Join permet de faire une jointure avec un autre jeu de données. L'ordre avec les composants Transform est respecté. Ainsi, un Transform placé après une jointure s'appliquera sur le produit de la jointure.

  • dataset : identifiant du dataset à joindre (= table de droite)
  • joinKey : un tableau avec les champs à joindre (ex : ['leftKey','RightKey])
  • joinType : type de jointure right | left | full | inner (défaut inner)
<Dashboard>
      <Dataset
        id="ref_epci_odema"
        resource='odema:territoire_epci'
        url='https://www.geo2france.fr/geoserver/ows'
        type='wfs'
        pageSize={1000}
      >
         <Filter field='annee'>{useControl('annee')}</Filter>
      </Dataset>

      <Dataset 
        id="sinoe_synthese_indic" 
        resource='sinoe59-indic-synth-acteur/lines'
        url="https://data.ademe.fr/data-fair/api/v1/datasets"
        type='datafair'
        pageSize={5000}>
            <Filter field='l_region'>Hauts-de-France</Filter>
            <Filter field='annee'>{useControl('annee')}</Filter>
            <Join dataset="ref_epci_odema" joinKey={["c_acteur","c_acteur_sinoe" ]} />
            <Transform>SELECT c_acteur, name_short as nom, tonnage_omr, tonnage_bio FROM ?</Transform>
      </Dataset>
</Dashboard>

Performances et eco-conception 🌱

La bibliothèque va systématiquement éviter de lancer plusieurs fois la même requête. Il est donc important de différencier les opérations s'appliquant côté fournisseur de données de celles effectuées par le client.

Provider WFS

Le WFS permet d'alléger les requêtes en ne demandant que les champs nécessaire (https://docs.geoserver.org/main/en/user/services/wfs/reference.html#getfeature). Cette fonctionnalité (non standard entre les différents fournisseurs), peut être utilisée en utilisant la propriété meta de <Dataset>.

Idéalement, on utilisera la même propriété meta pour les dataset lié au même fournisseur, afin de réduire le nombre de requête sur le serveur.

<Dataset
  id="epci_hdf_pop"
  resource="spld:epci"
  url='https://www.geo2france.fr/geoserver/ows'
  type='wfs'
  pageSize={1000}
  meta={{properties:['nature_epci', 'pop_mun', 'nom_epci']}} >

</Dataset>

DataPreview

Un tableau simple pour visualiser les données du dataset. Il s'agit d'un composant utilisable pour faciliter la conception 🔧 du tableau de bord. La clé rowKey (colonne qui contient une clé unique) du tableau est optionnelle, mais améliore les performances sur des gros datasets.

<Dashboard>
    <Dataset
    id="monIdentifiantUnique"
    url="https://data.ademe.fr/data-fair/api/v1/datasets"
    type='datafair'    
    resource="sinoe-(r)-destination-des-dma-collectes-par-type-de-traitement/lines"
    />

    <DataPreview dataset_id='myuniquedatasetid' pageSize={5} rowKey='_i'/>

  {/* [...] */}
</Dashboard>