Configurer la vue personnalisée

Les vues standards permettent à vos utilisateurs d’explorer en profondeur vos jeux de données mais ce ne sont que des outils. Ils ne fournissent pas de contexte à cette exploration de données et ne mettent pas en valeur ce que vous considérez comme les éléments clés à retenir de tel ou tel jeu de données. La métadonnée description permet de définir le contexte général mais est limitée à du texte.

La vue personnalisée est un onglet supplémentaire s’insérant au milieu des autres sur la page d’un jeu de données. Il s’agit d’un espace vide que vous pouvez utiliser comme bon vous semble. Un éditeur HTML et CSS vous permet d’écrire un tableau de bord aussi simple ou complexe que vous le voulez (pour plus d’informations sur comment écrire un tableau de bord, voir la documentation dédiée). Vous pouvez même personnaliser le titre et l’icône de cet onglet.

../../../_images/custom__view--fr.png

L’éditeur de vue personnalisée

Icône et titre de l’onglet

Le titre et l’icône personnalisée apparaitront dans la page de catalogue, sur la carte du jeu de données concerné. Vous pourrez par ailleurs rechercher les jeux de données présentant une vue personnalisée grâce au filtre Vue (en sélectionnant l’option Vue personnalisée).

Les icônes sont tirées de l’ensemble Font Awesome 4.7 et doivent être appelées par leur nom (sans le préfixe fa-). Par exemple, pour utiliser l’icône graphique en barre, dont le nom est fa-bar-chart, vous devez indiquer bar-chart dans le champ d’icône. Si vous laissez ce champ vide, la valeur par défaut utilisée sera l’icône tachymètre.

Contenu de l’onglet

Le code HTML et CSS que vous rédigerez pour le contenu de l’onglet n’est pas isolé du reste de la page. Il est intégré à une interface riche et peut tirer parti du contexte des jeux de données existants pour interagir avec les filtres.

Afin d’illustrer les différentes possibilités, nous utiliserons un jeu de données qui répertorie toutes les nouvelles installations de production électrique en 2015 en France , ainsi que leur capacité de production respective, et qui les trie par nature (nucléaire, éolien, solaire, etc.) et par région.

Pour illustrer la part représentée par chacune de ces différentes sources d’énergie dans ces nouvelles installations, nous allons élaborer une treemap avec l’onglet analyse et définir cette visualisation dans l’onglet personnalisé.

../../../_images/custom__treemap.png

La treemap que nous souhaitons afficher.

Le panneau partager situé en bas de l’onglet analyse fournit le bout de code de widget suivant pour cette treemap.

<ods-dataset-context context="registreparcprodrpt"
                     registreparcprodrpt-dataset="registre_parc_prod_rpt">
    <ods-chart>
        <ods-chart-query context="registreparcprodrpt" field-x="filiere">
            <ods-chart-serie expression-y="puissance_maximale_mw"
                             chart-type="treemap"
                             function-y="SUM"
                             color="range-Accent"
                             scientific-display="true">
            </ods-chart-serie>
        </ods-chart-query>
    </ods-chart>
</ods-dataset-context>

Nous pouvons bien entendu copier/coller ce code dans l’éditeur de code HTML de la vue personnalisée pour obtenir la treemap souhaitée. Toutefois, étant donné que nous créons un contexte de jeu de données indépendant (nommé registreparcprodrpt dans le cas présent), cette treemap sera indépendante du reste de la page du jeu de données, et notamment indépendante des filtres actifs.

Cela signifie que nous ne pouvons pas tirer parti du filtre producteur existant pour affiner la treemap et voir dans quelle technologie telle ou telle entreprise investit davantage.

../../../_images/custom__static-treemap.png

La treemap de la vue personnalisée n’est pas affectée par le filtre actif

Afin de travailler avec le contexte du jeu de données existant, il nous suffit d’injecter le widget ods-chart non pas dans un contexte personnalisé défini dans la vue personnalisée, mais directement dans le contexte général défini pour la page, nommé ctx, en tant que tel.

<ods-chart>
    <ods-chart-query context="ctx" field-x="filiere">
        <ods-chart-serie expression-y="puissance_maximale_mw"
                         chart-type="treemap"
                         function-y="SUM"
                         color="range-Accent"
                         scientific-display="true">
        </ods-chart-serie>
    </ods-chart-query>
</ods-chart>

Cette fois, la treemap sera actualisée en fonction des filtres actuels, ce qui permet une exploration plus en profondeur.

../../../_images/custom__dynamic-treemap.png

La treemap dans la vue personnalisée tient désormais compte des filtres actifs.

En fonction de votre analyse, il peut être souhaitable de disposer de visualisations statiques et dynamiques dans votre vue personnalisée, et rien ne vous empêche de le faire. Il vous suffit d’injecter les visualisations dynamiques sur le contexte ctx et de définir un nouveau contexte ods-dataset-context pour les visualisations statiques.