Configurer l’infobulle

Afin d’afficher des informations sur une carte, sur une image ou sur un calendrier, vous pouvez configurer une infobulle. Vous pouvez utiliser et configurer l’infobulle standard ou bien personnaliser une infobulle HTML pour davantage de précision. La personnalisation d’une infobulle peut prendre un peu plus du temps, mais permet de tirer le meilleur parti de vos données. Pour passer de l’interface de configuration standard à la configuration d’infobulle personnalisée, choisissez modèle HTML personnalisé dans la liste déroulante type d’infobulle.

../../../_images/tooltip__select-type--fr.jpg

Paramétrage de l’infobulle

Infobulle standard

Il est bien évidemment possible de configurer ce qui sera affiché dans l’infobulle en choisissant les champs souhaités et leur ordre. Un aperçu est disponible dans la colonne de droite pour voir en simultané le rendu final de l’infobulle.

../../../_images/tooltip__settings--fr.png

Paramétrage de l’infobulle

Pour chacun des champs, les 3 actions suivantes sont disponibles et signifient :

../../../_images/tooltip__actions.png

Actions sur les champs

  • Glisser/déposer pour changer la position de ce champ dans l’infobulle

  • Cliquer pour retirer le champ de l’infobulle

  • Cliquer pour ajouter le champ à l’infobulle

../../../_images/tooltip__preview--fr.png

L’aperçu

Infobulle personnalisée en HTML

Lorsque vous sélectionnez Infobulle personnalisée en HTML, un éditeur HTML s’affiche. L’approche est similaire à l’écriture de “pages” sur votre domaine ; vous pouvez utiliser n’importe quel ODS Widget et même intégrer d’autres visualisations dans l’infobulle. Vous pouvez même utiliser les classes de dispositions en grille.

../../../_images/tooltip__custom-tooltip--fr.jpg

Un exemple d’infobulle personnalisée.

Lorsque l’infobulle s’affiche, une variable record est “injectée” et est disponible pour être utilisée. Cet objet record contient les propriétés suivantes :

  • record.fields: objet contenant toutes les valeurs de l’enregistrement (par ex. record.fields.tree_height)

  • record.recordid: identifiant unique de cet enregistrement

  • record.datasetid: identifiant du jeu de données

Grâce à ces propriétés, vous pouvez afficher directement les valeurs dans l’infobulle, ou même les utiliser pour afficher des données depuis d’autres jeux de données.

Le schéma du jeu de données est également injecté sous la forme d’une variable fields, qui contient un tableau d’objets représentant les champs (vous pouvez utiliser ng-repeat pour faire une boucle sur ces champs). Un objet champ (ici “field”) contient les propriétés suivantes :

  • field.name : l’identifiant du champ, par exemple pour récupérer une valeur à l’intérieur de record.fields

  • field.type : le type du champ (text, decimal, integer, date, datetime, geo_point_2d, geo_shape)

  • field.label : un label destiné à l’affichage

Voici le code de l’exemple ci-dessus :

<ul style="display: block; list-style-type: none; color: #2c3f56; padding:0; margin:0;">
    <li><strong style="font-size:17px;">{{ record.fields.name | limitTo:25 }}</strong></li>
    <li>{{ record.fields.organisation | limitTo:40}}</li>
    <li ng-if="record.fields.description" style="color:#bbb;">{{ record.fields.description | limitTo:140 }}</li>
    <li ng-if="!record.fields.description" style="font-style:italic;color:#bbb;">No description provided<br/></li>
    <br/>
    <li ng-if="record.fields.has_issue == 'TRUE'" style="color:#ec643c;"><i class="fa fa-exclamation-triangle"></i> An issue has been reported on this  portal</li>
    <li>
        <ul style="list-style-type: none; color: #2c3f56;padding:0 0 15px;margin-top:0px;">
            <li style="display: inline;float:left;"><strong style="font-size:13px;"><a ng-href="https://docs.google.com/forms/  d/1-9m30rCw492oGCB7Pg3aOsZ-q03KBeJsw_GZFLqIvNE/   viewform?entry.1740897944={{record.fields.name}}&amp;entry.1624486384={{record.fields.url}}&amp;entry.462034829&amp;entry.848235220"   style="color:#ccc;" target="_blank">Report an issue </a></strong><i class="fa fa-external-link" style="color:#ccc;"></i></li>
            <li style="display: inline;float:right;"><strong style="font-size:13px;"><a ng-href="{{record.fields.url}}" style="color:#ec643c;"  target="_blank">Open this portal </a></strong><i class="fa fa-external-link" style="color:#ec643c;"></i></li>
        </ul>
    </li>
</ul>

Si vous souhaitez afficher une image à partir de l’un des champs fichier de votre jeu de données, vous pouvez utiliser le widget ods-record-image.

Vous pouvez utiliser un <ods-dataset-context> pour afficher une visualisation à partir d’un autre jeu de données; dans l’exemple suivant, les données sont récupérées à partir d’un autre jeu de donnée qui a été filtré à partir d’une des valeurs de l’enregistrement sélectionné.

<div class="my-tooltip">
    <!-- Display the name of the city directly from the point that the user selected -->
    <h1>City report : {{ record.fields.city_name }}</h1>

    <!-- Display an image from the dataset -->
    <ods-record-image field="city_logo" record="record"></ods-record-image>

    <!-- Create a context reading data from another dataset but filtered on
         the city that the user clicked on -->
    <ods-dataset-context context="alerts"
                         alerts-dataset="city-alerts-realtime"
                         alerts-parameters="{'refine.city': city_name}">
        <ods-table context="alerts"></ods-table>
    </ods-dataset-context>
</div>