Créer un tableau de bord (2e partie)

★★☆ Intermédiaire - durée : 1 heure

Ce tutoriel va vous guider tout au long des étapes de transformation d’un simple tableau de bord avec 3 visualisations en un tableau de bord organisé et mis en forme avec des widgets interactifs liés les uns aux autres !

../_images/dashboard2_final.png

Au cours de ce tutoriel, vous allez apprendre :

  • à lier des widgets à l’aide d’un contexte ;

  • à ajouter d’autres widgets Opendatasoft ;

  • à utiliser des classes CSS pour mettre en forme et organiser votre tableau de bord.

PRÉREQUIS

  • Pour créer un tableau de bord, vous avez besoin d’un accès à l’interface d’administration d’un portail Opendatasoft, ainsi que de la permission “Éditer toutes les pages”.

  • Nous vous recommandons vivement de suivre la première partie de ce tutoriel, “Créer un tableau de bord (1re partie)”, puisque la seconde partie commence avec ce que nous avons fait dans la première partie. Les prérequis de la première partie contiennent également toutes les informations sur l’exemple de jeu de données choisi.

Afficher toutes les images

Masquer toutes les images

Lier vos widgets

À la fin de la première partie de ce tutoriel de création d’un tableau de bord, nous avions un simple tableau de bord avec un titre et 3 widgets (une vue Tableau, une vue Carte et un graphe provenant du même jeu de données), les uns au-dessus des autres. Dans la partie précédente, nous avons également vu que l’avantage des widgets était qu’ils pouvaient interagir entre eux. Toutefois, si nous dessinons une forme sur la carte, celle-ci filtre les éléments affichés, mais elle est la seule à réagir. Le tableau et le graphe ignorent notre filtre.

Cela s’explique par le fait que nos widgets ne sont pas encore liés les uns aux autres. Pour résoudre ce problème, il suffit d’utiliser le même contexte pour tous les widgets. Le contexte joue un rôle de pivot entre chaque élément de votre page, et c’est pour cette raison que tous les widgets qui ont besoin d’interagir ensemble doivent utiliser le même contexte. En plus de cela, le contexte est le lien entre vos widgets et le jeu de données sous-jacent : il définit le jeu de données sur lequel vos widgets doivent fonctionner, ainsi que les données du jeu de données que vos widgets doivent utiliser.

1 + Partons à la recherche de ce fameux contexte ! Observez le code HTML de votre page. Pour chacun des widgets que nous avons ajoutés, son code contient 2 éléments principaux : un élément ods-dataset-context au début, puis un élément ods-map ou ods-table ou ods-chart en fonction du widget. Dans le code ci-dessous, nous avons ajouté des commentaires pour vous aider à distinguer les différents éléments présents.

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

    <!-- TITLE OF THE PAGE -->
    <h1>UNESCO World Heritage</h1>

    <!-- TABLE WIDGET -->
    <!-- Context of the table -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <!-- Table widget tag -->
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <!-- MAP WIDGET -->
    <!-- Context of the map -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <!-- Map widget tag -->
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <!-- CHART WIDGET -->
    <!-- Context of the chart -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <!-- Chart widget tags -->
      <ods-chart align-month="true">
        <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
          <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
          </ods-chart-serie>
        </ods-chart-query>
      </ods-chart>
    </ods-dataset-context>

  </div>
</div>
../_images/step110.png

Comme vous pouvez le voir, chaque widget a un contexte. Premièrement, il n’est pas si utile dans notre cas, puisque tous nos widgets utilisent les mêmes données issues du même jeu de données. Deuxièmement, il nous empêche de lier nos widgets entre eux. Nous devons avoir un contexte unique.

2 + Au tout début de votre code, au-dessus du tag div avec la classe container-fluid, déclarez le contexte unique de votre page. À l’instar des widgets, utilisez le tag ods-dataset-context (sans oublier le tag fermant !). Observez le code ci-dessous pour comprendre le fonctionnement des tags (une fois de plus, nous avons ajouté des commentaires pour expliquer le code).

<ods-dataset-context context="worldheritagelistpublicus"
                     worldheritagelistpublicus-dataset="world-heritage-list@public-us">

    <!--
        worldheritagelistpublicus: name of your context
        world-heritage-list@public-us: technical identifier of your dataset
    -->

</ods-dataset-context>
../_images/step24.png

3 + Supprimez le contexte de chaque widget. N’oubliez pas que les tags vont par paire : vous devez supprimer le tag ouvrant et le tag fermant de chaque widget. Votre code doit maintenant ressembler à ce qui suit, avec un contexte unique suivi de 3 tags de widgets :

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step31.png

4 + Enregistrez votre page et cliquez sur le bouton Ouvrir la page. Désormais, si vous dessinez une forme sur la carte, la carte sera filtrée en fonction de cette forme, tout comme le tableau et le graphe. Nos widgets sont maintenant liés !

../_images/step41.png

Ajouter d’autres widgets Opendatasoft

5 + Maintenant que nos widgets sont liés, pourquoi ne pas en ajouter d’autres pour avoir un tableau de bord encore plus perfectionné ? Commençons par ajouter une barre de recherche. Elle nous permettra d’effectuer des recherches textuelles sur toutes les visualisations en même temps. Accédez à la documentation sur les widgets Opendatasoft pour en apprendre davantage sur le widget que nous allons utiliser, appelé odsTextSearch.

Dans la documentation sur le widget odsTextSearch, vous avez plusieurs informations :

  • une description, pour connaître l’utilité du widget ;

  • le code du widget, à copier et coller dans le code de votre page ;

  • un tableau avec les attributs du widget, ainsi que les valeurs que vous devez renseigner pour que le widget fonctionne ;

  • un exemple du code final et du résultat final.

../_images/step51.png

6 + Copiez le code du widget odsTextSearch.

<ods-text-search
      placeholder="{string}"
      button="{string}"
      field="{string}"
      suffix="{string}"
      context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}"
      autofocus="{string}">
</ods-text-search>
../_images/step61.png

7 + Collez le code du widget dans le code de votre page, à l’endroit où vous souhaitez qu’il soit affiché. Plaçons-le sous le titre, au-dessus du premier widget de visualisation.

Avertissement

N’enregistrez pas encore votre page ! Puisque les attributs du widget ne sont pas renseignés pour le moment, la plateforme considérera votre widget comme invalide et générera une erreur.

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search
    placeholder="{string}"
    button="{string}"
    field="{string}"
    suffix="{string}"
    context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}"
    autofocus="{string}">
  </ods-text-search>

  <ods-table context="worldheritagelistpublicus"></ods-table>

  <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

  <ods-chart align-month="true">
    <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
      <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
      </ods-chart-serie>
    </ods-chart-query>
  </ods-chart>

</div>
</div>

</ods-dataset-context>
../_images/step71.png

8 + Dans l’état actuel, la barre de recherche ne peut pas fonctionner. Nous devons commencer par déterminer les attributs dont nous avons besoin, et renseigner leurs valeurs. Pour ce widget, seul l’attribut context est obligatoire. Afin de simplifier les choses pour ce tutoriel, supprimons tous les autres attributs.

<ods-text-search context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}">
</ods-text-search>
../_images/step81.png

9 + Au début de ce tutoriel (voir étape 2), nous avons créé un contexte qui peut être utilisé dans l’ensemble de notre page. Le nom de notre contexte est “worldheritagelistpublicus”. Il s’agit du même nom de contexte que celui que nous devons utiliser pour renseigner l’attribut context de notre widget odsTextSearch.

<ods-text-search context="worldheritagelistpublicus">
</ods-text-search>

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step91.png

10 + Enregistrez votre page et cliquez sur Aperçu. Notre tableau de bord est maintenant doté d’une barre de recherche !

../_images/step101.png

11 + Ajoutons un autre élément très utile à notre tableau de bord : des filtres ! Ils vont nous permettre de filtrer nos visualisations, comme lorsque nous parcourons un jeu de données. Accédez à la documentation sur les widgets Opendatasoft pour en apprendre davantage sur le widget que nous allons utiliser, appelé odsFacets.

Important

Le widget odsFacets permet de récupérer les filtres déjà définis pour le jeu de données. Cela signifie que si vous utilisez ce widget pour un tableau de bord, mais que le jeu de données associé n’a pas de filtres définis, votre widget ne pourra rien afficher.

../_images/step111.png

12 + Copiez le code du widget odsFacets.

<ods-facets context="{DatasetContext}">
</ods-facets>
../_images/step121.png

13 + Collez le code du widget dans le code de votre page, à l’endroit où vous souhaitez qu’il soit affiché. Plaçons-le sous notre barre de recherche.

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="{DatasetContext}">
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step131.png

14 + Comme nous l’avons fait pour le widget odsTextSearch, nous devons renseigner les attributs du widget odsFacets. Celui-ci n’en a qu’un : l’attribut context ! Renseignons-le avec le nom du contexte de notre page, de la même façon que nous l’avons fait pour le widget odsTextSearch !

<ods-facets context="worldheritagelistpublicus">
</ods-facets>

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="worldheritagelistpublicus">
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step141.png

15 + Enregistrez votre page et cliquez sur Aperçu. Les filtres de notre jeu de données s’affichent désormais dans notre tableau de bord !

../_images/step151.png

16 + Imaginons maintenant que nous ne souhaitions pas afficher tous les filtres de notre jeu de données. Pour notre exemple UNESCO World Heritage, nous voulons pouvoir appliquer un filtre par catégorie et par pays uniquement. Copiez l’extrait de code suivant (également disponible dans la documentation sur le widget odsFacets) :

<ods-facets context="mycontext">
   <h3>First field</h3>
   <ods-facet name="myfield"></ods-facet>

   <h3>Second field</h3>
   <ods-facet name="mysecondfield"></ods-facet>
</ods-facets>
../_images/step161.png

17 + Collez-le à la place du code du widget odsFacets simple précédent.

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="mycontext">
      <h3>First field</h3>
      <ods-facet name="myfield"></ods-facet>

      <h3>Second field</h3>
      <ods-facet name="mysecondfield"></ods-facet>
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step171.png

18 + Renseignez correctement l’attribut context avec le nom du contexte de votre page.

<ods-facets context="worldheritagelistpublicus">
  <h3>First field</h3>
  <ods-facet name="myfield"></ods-facet>

  <h3>Second field</h3>
  <ods-facet name="mysecondfield"></ods-facet>
</ods-facets>
../_images/step181.png

19 + Observons maintenant le reste du code avancé du widget odsFacets. Les 2 tags h3 indiquent que nous avons ajouté des titres : ces derniers seront utilisés pour écrire le nom des filtres que nous souhaitons afficher, c’est-à-dire “Catégorie” et “Pays”. ods-facet name correspond à l’attribut qui indiquera l’identifiant technique du champ sur lequel le filtre est basé.

Remarque

Pour récupérer l’identifiant technique d’un champ, vous devez connaître le modèle de données. Ce dernier se trouve dans l’onglet Informations du jeu de données. Le modèle de données présente toutes les informations de chaque champ : nom (label), description, identifiant, type et exemple de valeur. Il est souvent pratique de connaître le type et l’identifiant de chaque champ quand vous utilisez des paramètres de widget avancés.

Dans le code ci-dessous, nous avons ajouté des commentaires pour vous aider à distinguer les différents éléments présents.

<!-- CONTEXT NAME -->
<ods-facets context="worldheritagelistpublicus">
   <!-- Name of filter #1 -->
   <h3>First field</h3>
   <!-- Technical identifier of related field -->
   <ods-facet name="myfield"></ods-facet>

   <!-- Name of filter #2 -->
   <h3>Second field</h3>
   <!-- Technical identifier of related field -->
   <ods-facet name="mysecondfield"></ods-facet>
 </ods-facets>
../_images/step191.png

20 + Accédez à la section Modèle de données de l’onglet Informations de votre jeu de données.

../_images/step201.png

21 + Recherchez les identifiants techniques des champs sur lesquels les filtres sont basés et que vous souhaitez ajouter au tableau de bord. Dans notre exemple de jeu de données UNESCO World Heritage, nous souhaitions appliquer des filtres par catégorie et par pays. Les identifiants des champs que nous voulons utiliser comme filtres sont, respectivement, category et states.

../_images/step211.png

22 + Revenez au code de votre tableau de bord pour renseigner les titres et les attributs ods-facet name.

<ods-facets context="worldheritagelistpublicus">
  <h3>Category</h3>
  <ods-facet name="category"></ods-facet>

  <h3>Country</h3>
  <ods-facet name="states"></ods-facet>
</ods-facets>

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="worldheritagelistpublicus">
      <h3>Category</h3>
      <ods-facet name="category"></ods-facet>

      <h3>Country</h3>
      <ods-facet name="states"></ods-facet>
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step221.png

23 + Enregistrez votre page et cliquez sur Aperçu. Les 2 filtres que nous avons choisis s’affichent sur notre tableau de bord !

../_images/step231.png

Mettre en forme votre tableau de bord : organiser vos widgets en lignes et en colonnes

Notre tableau de bord est plutôt esthétique, mais pour l’améliorer davantage, nous devons le personnaliser et l’organiser différemment. Pour le moment, nous avons simplement empilé tous nos éléments (les titres et les widgets). Il est temps de changer tout cela !

Nous allons organiser notre tableau de bord en 2 parties :

  • à gauche, nous allons placer nos éléments de navigation (la barre de recherche et les filtres en dessous) ;

  • à droite, nous allons placer nos visualisations de données (le tableau, et en dessous la carte et le graphe, côte à côte).

../_images/dashboard__css-responsive-layout-1.png

Et maintenant, comment peaufiner le look de notre tableau de bord ? Imaginez que votre page est un conteneur. Dans ce conteneur, vous pouvez avoir autant de lignes que vous souhaitez. Chacune de ces lignes est divisée en 12 colonnes de la même taille.

En code HTML, voici à quoi cela ressemble :

<div class="container">
   <div class="row">
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
   </div>
</div>

Quand vous créez une page et souhaitez organiser les éléments qui la composent, vous devez les placer dans des lignes. Pour chaque élément, vous devez décider du nombre de colonnes à allouer.

24 + Réorganisons notre tableau de bord en lignes et en colonnes. Pour notre exemple, nous allons placer la partie navigation et la partie visualisation de données dans la même ligne. Nous allons utiliser 3 colonnes pour les éléments de navigation, et les 9 colonnes restantes sont destinées à nos éléments de visualisation. Puisque nous voulions placer les visualisations de carte et de graphe côte à côte, nous allons créer une ligne pour chacune d’entre elles, avec 6 colonnes.

../_images/dashboard__css-responsive-layout-2.png

En code HTML, voici à quoi ressemble notre tableau de bord :

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>

      <div class="row">

        <!-- NAVIGATION PART -->
        <div class="col-xs-3">

          <!-- Search bar here -->
          <!-- Filters here -->

        </div>

        <!-- VISUALIZATIONS PART -->
        <div class="col-xs-9">

          <!-- Table widget here -->

          <div class="row">

            <div class="col-xs-6"> <!-- Map widget on the left --> </div>

            <div class="col-xs-6"> <!-- Chart widget on the right --> </div>

          </div>

        </div>

      </div>

  </div>
</div>

</ods-dataset-context>
../_images/step241.png

25 + Enregistrez votre page et cliquez sur Aperçu. Quel magnifique tableau de bord nous avons créé !

../_images/step25.png

26 + Toutefois, nous pourrions peut-être ajouter un peu plus d’espace entre le tableau et les 2 autres visualisations. Ajoutons un tag br sous le widget de tableau, juste avant la ligne qui contient le widget de graphe et le widget de carte. Ce tag signifie que nous souhaitons ajouter une ligne vide supplémentaire à la place du tag. C’est également l’un des tags HTML qui ne fonctionne pas par paire !

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

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

    <h1>UNESCO World Heritage</h1>

    <div class="row">

      <div class="col-xs-3">

        <ods-text-search context="worldheritagelistpublicus">
        </ods-text-search>

        <ods-facets context="worldheritagelistpublicus">
          <h3>Category</h3>
          <ods-facet name="category"></ods-facet>

          <h3>Country</h3>
          <ods-facet name="states"></ods-facet>
        </ods-facets>

      </div>

      <div class="col-xs-9">

        <ods-table context="worldheritagelistpublicus"></ods-table>

        <br>

        <div class="row">

          <div class="col-xs-6">
            <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
          </div>

          <div class="col-xs-6">
            <ods-chart align-month="true">
              <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
                <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
                </ods-chart-serie>
              </ods-chart-query>
            </ods-chart>
          </div>

        </div>

      </div>

    </div>

  </div>
</div>

</ods-dataset-context>
../_images/step26.png

27 + Enregistrez une nouvelle fois, et cliquez sur le bouton Ouvrir la page pour voir le résultat final !


FÉLICITATIONS !

Vous avez terminé ce tutoriel et savez maintenant créer un tableau de bord complet, avec des widgets liés. Vous avez également appris à le mettre en forme avec des classes CSS ! Si vous souhaitez découvrir plus en détail ces classes CSS, notamment leur réactivité, n’hésitez pas à consulter notre documentation dédiée à ces sujets !