De aanpasbare weergave configureren

Standaard weergaves laten uw gebruikers toe dieper te duiken in uw datasets maar het zijn tools. Ze verschaffen geen bijkomende context en beklemtonen niet wat u denkt dat de belangrijkste feiten zijn om weg te nemen. En hoewel de omschrijving metadata een beetje context toevoegen, is dit beperkt tot zuivere tekst.

De gepersonaliseerde weergave is een extra tabblad dat bestaat naast de andere tabbladen op de pagina van een dataset. Het is een eenvoudige ruimte die u kunt gebruiken indien u dit wenst. Een HTML- en CSS-editor laten u toe om een dashboard zo complex of zo eenvoudig als u wenst, te schrijven (voor meer informatie over het schrijven van mooie dashboards, zie de speciaal daaraan gewijde documentatie) en u kunt zelfs de titel en het pictogram van dit extra tabblad personaliseren.

Pictogram en titel van het tabblad

De aanpasbare titel en pictogram zal verschijnen binnen uw cataloguspagina op de kaart van de desbetreffende dataset en u zal kunnen zoeken naar datasets met een aanpasbare weergave die zijn ingesteld met de Weergave filter (selecteer de optie Aanpasbare weergave).

Iconen zijn afkomstig van de Font awesome 4.7 icon set en moeten gespecificeerd worden door middel van hun naam (de fa- prefix weglaten). Bijvoorbeeld: om het icoon van de staafgrafiek te gebruiken, die als naam fa-bar-chart heeft, moet u bar-chart invoeren in het icoonveld. U kunt dit veld ook leeg laten. In dat geval zal het standaard de tachometer icon zijn.

Content van het tabblad

De HTML- en CSS-code die u schrijft voor de content van het tabblad is niet geïsoleerd van de rest van de pagina. Deze wordt geïntegreerd in een reeds rijke interface en kan voordeel halen uit de bestaande datasetcontext om te interageren met de filters.

Om de verschillende mogelijkheden te illustreren, gebruiken we een dataset waarin alle nieuwe elektriciteitsinstallaties in 2015 in Frankrijk zijn opgenomen samen met hun respectieve stroomcapaciteit, onderverdeeld per type (nucleair, wind, zonne-energie, ...) en regio.

Om de relatieve belangrijkheid van de verschillende energiebronnen binnen deze nieuwe installaties te illustreren, bouwen we een treemap-kaart met het analysetabblad en stellen we deze weergave in het aanpasbare tabblad in.

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

De treemap-kaart die we willen zien.

Het deel-paneel onder het analysetabblad geeft ons de volgende widgetcode voor deze treemap-kaart.

<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>

We kunnen natuurlijk deze code kopiëren/plakken in de HTML-code-editor van de aanpasbare weergave en dit zal de gevraagde treemap-kaart als resultaat geven. Maar aangezien we een zelfstandige datasetcontext aanmaken (in dit geval met de naam "registreparcprodrpt"), staat deze treemap los van de rest van de pagina van de dataset en vooral van de actieve filters.

Dit betekent dat we voordeel kunnen halen uit de bestaande filter producent om de treemap te verfijnen en te zien in welke technologie die en die onderneming meer investeert.

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

De treemap in de aanpasbare weergave wordt niet beïnvloed door de actieve filter.

Om met de bestaande datasetcontext te kunnen werken, moeten we gewoon de ods-chart widget pluggen, maar niet op een aanpasbare context die gedefinieerd is in de aanpasbare weergave, maar rechtstreeks op de globale context die is ingesteld voor de pagina en de naam ctx draagt.

<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>

Dit keer zal de treemap geactualiseerd worden afhankelijk van de huidige filters, die een meer grondige exploratie mogelijk maken.

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

De treemap in de aanpasbare weergave houdt nu rekening met actieve filters.

Afhankelijk van uw analyse, kan u zowel statische als dynamische weergaves hebben in uw aanpasbare weergave en niets weerhoudt u ervan om dit te doen. U moet alleen de dynamische weergaves pluggen op de ctx context en nieuwe ods-dataset-context definiëren voor de statische weergaves.