Créer des visualisations qui correspondent à des filtres (avec AngularJS)¶

★★★ Avancé - durée : 30 minutes

Dans ce tutoriel, vous allez apprendre à créer différentes options de visualisations qui correspondent à des filtres associés. Cela peut être particulièrement utile avec les graphes, puisque ces derniers perdent de leur intérêt une fois les filtres associés activés. Ce tutoriel peut être entièrement personnalisé et réutilisé avec n’importe quel tableau de bord ou élément de contenu créé avec HTML/CSS sur Opendatasoft.

Au cours de ce tutoriel, vous allez apprendre :

comment utiliser la directive AngularJS ng-if
quand et comment utiliser l’objet context.parameters dans la directive ng-if

PRÉREQUIS

Pour tester ce tutoriel et/ou intégrer la configuration masquer/afficher aux widgets d’une page existante, vous avez besoin d’un accès à l’interface d’administration d’un portail Opendatasoft, ainsi que de la permission “Éditer toutes les pages”.
Le niveau de difficulté de ce tutoriel étant “Avancé”, nous partons du principe que vous connaissez suffisamment bien HTML et CSS pour reconnaître et comprendre leurs structures et fonctionnements respectifs. Toutefois, d’autres points plus techniques seront expliqués en détail.
Nous vous recommandons vivement de suivre ce tutoriel avec le jeu de données <https://data.opendatasoft.com/explore/dataset/shanghai-world-university-ranking%40public/>`_, qui est utilisé ici. Toutefois, si vous préférez choisir un autre jeu de données pour suivre le tutoriel, pensez à adapter chaque étape.

Afficher toutes les images

Masquer toutes les images

Créer la base

Dans ce tutoriel, nous allons créer une page composée d’une visualisation et de son filtre de jeu de données associé à l’aide du jeu de données Shanghai World University Ranking <https://data.opendatasoft.com/explore/dataset/shanghai-world-university-ranking%40public/>, disponible sur notre réseau de données Opendatasoft.

1 + Commençons à créer notre page en ajoutant le code de widget de la visualisation souhaitée. Ici, nous avons choisi d’afficher un nuage de points représentant le top 20 des meilleurs pays du classement. Pour chaque pays, le graphe indique le score moyen.

Remarque

En fonction de l’environnement (nouvelle page ou tableau de bord existant) dans lequel vous effectuez ce tutoriel, vous pourrez peut-être voir les tags <div class="container"> et <div class="ods-box">. Il s’agit des tags par défaut qui créent le cadre par défaut d’une page Opendatasoft. Si vous souhaitez conserver ce cadre, veillez à ajouter le code du tutoriel entre ces tags par défaut.

<div class="container">
   <div class="ods-box">

    <ods-dataset-context context="shanghaiworlduniversityrankingpublic" shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking@public" shanghaiworlduniversityrankingpublic-parameters="{'sort':'world_rank'}">
    <ods-chart align-month="true">
       <ods-chart-query context="shanghaiworlduniversityrankingpublic" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </ods-dataset-context>

   </div>
</div>

2 + Avant de continuer, déclarez le contexte unique de votre page à l’aide du widget odsDatasetContext. Cela va permettre à nos widgets d’interagir entre eux, et constitue une étape importante dans la création d’un tableau de bord.

Important

Pensez à supprimer le tag ods-dataset-context au-dessus du code du widget de graphe. Remplacez également le nom du contexte actuel (ici, shanghaiworlduniversityrankingpublic) par le nouveau (ici worlduniversityranking).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   </div>
</div>

</ods-dataset-context>

3 + Ajoutez un filtre associé au jeu de données choisi à l’aide du widget odsFacets. Ici, nous avons récupéré le filtre Country, qui est une facette existante du jeu de données publié sur Données.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

4 + Cliquez sur Aperçu. D’un point de vue technique, tout fonctionne correctement : le graphe se met à jour en fonction de l’option de filtre choisie. Toutefois, le graphe filtré devient complètement inutile, puisqu’il n’affiche qu’un seul point.

Nous avons besoin d’une autre visualisation, qui s’affiche uniquement si le filtre est utilisé. Cette visualisation alternative remplace celle par défaut, c’est-à-dire le graphe non filtré qui perd de son intérêt une fois filtré. C’est parti !

Ajouter une visualisation alternative avec AngularJS

5 + Avant d’explorer les expressions et directives AngularJS, ajoutons le code de widget de notre visualisation optionnelle juste en dessous du premier. Ici, nous avons choisi d’afficher un diagramme en bâtons représentant le top 10 des meilleures universités du classement. Pour chaque université, le score moyen est affiché dans le graphe. Gardez à l’esprit que ce graphe est uniquement affiché quand le filtre est utilisé, ce qui signifie que le nouveau graphe optionnel affichera toujours le top 10 des universités par pays choisi.

Important

N’oubliez pas d’effacer le code et de remplacer le nom du contexte par celui déclaré plus tôt (cf. étape 2).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

6 + Le moment est venu de s’intéresser à AngularJS. Nous allons devoir ajouter une directive AngularJS aux deux visualisations : celle par défaut (qui NE doit PAS être affichée si le filtre est utilisé) et le graphe optionnel (qui doit UNIQUEMENT être affiché si le filtre est utilisé). Les directives AngularJS devant être ajoutées dans un tag HTML, la meilleure méthode pour ce faire après avoir observé le code est d’ajouter des tags div. De cette façon, le code pourra rester propre. Enveloppez maintenant chaque graphe entre des tags div.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <div>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

7 + Nous disposons désormais de l’environnement idéal pour écrire nos directives AngularJS ! Commençons par le graphe alternatif, celui qui doit uniquement être affiché si le filtre est utilisé. Pour ce faire, nous devons utiliser la directive AngularJS ng-if. Il s’agit d’une expression conditionnelle qui détermine si un élément HTML doit être affiché ou non.

Observons la syntaxe de l’expression que nous allons utiliser.

ng-if="mycontext.parameters['refine.field_ID']"

ng-click est la directive AngularJS. Elle est toujours suivie d’un signe égal, =, qui indique que ce qui vient après est une expression. Cette expression sera évaluée par la directive et doit toujours se trouver entre des guillemets doubles ".

mycontext.parameters peut être vu comme un objet qui contient une liste de paramètres en lien avec le contexte, qui jouent le rôle de filtres. La liste de paramètres doit être placée entre des crochets [ ], et chaque paramètre doit être placé entre des guillemets simples '. Dans le cadre de ce tutoriel, puisque c’est l’utilisation du filtre Country``qui va déterminer l'option de visualisation de graphe à afficher, nous avons besoin de l'objet ``mycontext.parameters pour utiliser le paramètre de filtre dans notre expression ng-if. mycontext doit être remplacé par le nom du contexte de la page.

refine indique que nous utilisons un paramètre de filtre.
.field_ID nous permet de préciser le filtre spécifique que nous allons appliqué. field_ID doit être remplacé par l’identifiant technique du champ utilisé comme filtre.

Pour faire simple, la syntaxe ng-if signifie : ” Si mycontext est filtré avec field_ID, [les éléments HTML associés sont affichés] ”.

8 + Ajoutez la directive ng-if au tag div enveloppant le graphe alternatif. Pensez à remplacer mycontext par le nom du contexte de la page (cf. étape 2) et field_ID par l’identifiant technique du champ du jeu de données que nous utilisons en tant que filtre (cf. étape 3). Dans ce tutoriel, mycontext est remplacé par worlduniversityranking, et field_ID par country.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <div>
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

9 + Cliquez sur Aperçu : notre graphe optionnel est masqué par défaut. Mais une fois le filtre utilisé, il apparaît !

10 + Il est temps de faire disparaître le graphe par défaut quand le filtre est utilisé (et le graphe alternatif affiché) ! Nous voulons simplement que cette expression fasse l’exact opposé de ce que nous avons fait précédemment. La bonne nouvelle ? Vous pouvez le faire sans avoir à écrire une toute nouvelle expression. Nous avons seulement besoin de réutiliser l’expression précédente et d’ajouter un seul caractère au début de celle-ci : un point d’exclamation !.

ng-if="! mycontext.parameters['refine.field_ID']"

Placé au début d’une expression, un point d’exclamation ! inverse le comportement de celle-ci. Pour faire simple, l’expression signifie : “Si mycontext est filtré avec field_ID, [les éléments HTML associés NE sont PAS affichés] ”.

11 + Ajoutez la directive ng-if dans le tag div enveloppant le premier graphe par défaut. Pensez à remplacer mycontext et field_ID comme dans l’expression précédente (cf. étape 8).

Remarque

Vous pouvez également copier la directive ng-if précédente avec son expression et ajouter ! au début de celle-ci.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <div ng-if="! worlduniversityranking.parameters['refine.country']">
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
     </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

12 + Cliquez sur Aperçu : tout fonctionne parfaitement !

Ajouter la touche finale

13 + À ce stade, il ne nous reste plus qu’à embellir la page ! Organisons nos éléments HTML à l’aide de Bootstrap. Dans le cadre de ce tutoriel, nous allons utiliser une seule ligne qui sera divisée en 2 : la visualisation se trouvera à gauche, tandis que le filtre s’affichera à droite. Compte tenu de la taille d’une visualisation par rapport à celle d’une liste de filtres, nous allons utiliser 9 colonnes pour la visualisation et 3 pour les filtres.

Important

Si vous ne maîtrisez pas Bootstrap, ni la façon dont il organise une page Web, consultez notre tutoriel “Créer un tableau de bord (2e partie)” (section “Mettre en forme votre tableau de bord : organiser vos widgets en lignes et en colonnes”).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

   <div class="row">

     <div class="col-md-9">
       <div ng-if="! worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
           <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
          </ods-chart-query>
        </ods-chart>
      </div>

      <div ng-if="worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
          <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
            <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
            </ods-chart-serie>
          </ods-chart-query>
         </ods-chart>
        </div>
      </div>

     <div class="col-md-3">
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

</ods-dataset-context>

14 + Pour finir, ajoutons des titres et des indications textuelles pour garantir que tout le monde comprend le fonctionnement de la page et de son contenu.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

   <div class="row">

     <div class="col-md-9">
    <div ng-if="! worlduniversityranking.parameters['refine.country']">
    <h2>
        Top 20 countries <i class="fa fa-globe" aria-hidden="true"></i>
    </h2>
    <h5>
        by average score
    </h5>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
   <h2>
       Top 10 university <i class="fa fa-university" aria-hidden="true"></i>
   </h2>
   <h5>
       by average score
   </h5>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>
      </div>

     <div class="col-md-3">
     <h3>
         Countries
     </h3>
     <h5>
         Pick a country to see its universities and scores
     </h5>
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

</ods-dataset-context>

FÉLICITATIONS !

Vous avez terminé ce tutoriel et savez maintenant comment créer différentes options de visualisations pour vous assurer qu’elles correspondent aux filtres de la page. De plus, vous devez suffisamment maîtriser la combinaison de ng-if et context.parameters pour l’utiliser à votre guise !