Een dynamisch dashboard maken - stap voor stap!

Het doel van deze handleiding is om op zeer eenvoudige manier een dashboard te maken met behulp van widgets, AngularJS en CSS-tools die voorzien worden door het OpenDataSoft-platform.

Basiselementen
  • pik een dataset op

  • Maak een pagina aan

  • voeg een kaartweergave toe

  • voeg een tabelweergave toe

  • voeg een grafiek toe

  • koppel alles aan elkaar!

  • voeg een tekstzoekformulier toe

  • voeg enkele filters toe

  • ontdek CSS-klassen voor eenvoudige responsieve ontwikkeling

  • neem een diepere kijk in de "context"

  • voeg een recordteller toe

  • voeg een downloadkoppeling toe

  • maak enkele KPI's aan

Verder gaan : AngularJS en geavanceerd gebruik van Widgets
  • ontdek AngularJS-richtlijnen

  • Speel ermee door dynamische weergave aan te maken - ng-if

  • Geef uw KPI - ng-klasse kleur

  • Refine-on-click widgets

Basiselementen

Pik een dataset op

Deze handleiding is gebaseerd op de dataset bedrijfsregistraties in Frankrijk (jaar 2016).

Eerst moet u deze dataset toevoegen aan uw domein:

  • entreprises-immatriculees-en-2016

U kan gewoon de knop Voeg een dataset uit het OpenDataSet-netwerk toe gebruiken wanneer u een nieuwe databron in uw dataset wil toevoegen.

Maak een pagina aan

Ga naar Back-office > Pagina's > Nieuwe pagina
Voer een suffix pagina URL en optioneel een Titel en Omschrijving in. Sla vervolgens op
Klik op Bewerk in expert modus om rechtstreeks toegang te hebben tot CSS/HTML-code van de pagina.

U zou deze HTML-code nu in uw pagina moeten kunnen zien:

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

Vanaf nu zal alle code toegevoegd worden in het ods-box div, zoals dit:

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

        CODE HERE

    </div>
</div>

Sla uw pagina op en open ze.

Hernieuw uw pagina wanneer u de knop Open pagina bovenaan rechts het scherm niet ziet.

U kan ook terugkeren naar het menu Pagina's in de navigatiebalk om de lijst met pagina's te zien en op het oog te klikken om er rechtstreeks naar toe te gaan.

Voeg een kaartweergave toe

De eenvoudigste manier om te starten is door deel-koppelingen code onder elke dataweergave te gebruiken.

Ga naar uw dataset, ga naar het tabblad kaart. Klik vervolgens onder uw kaart op widget en kopieer en plak de code in de aanpasbare pagina.

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

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <ods-map context="entreprisesimmatriculeesen2016" location="3,18.59479,25.24143" basemap="mapbox.light">
            </ods-map>
        </ods-dataset-context>

    </div>
</div>

Elk blok wordt later uitgelegd. Bekijk voorlopig enkel de voorbeeldweergave van uw pagina door op de knop Voorbeeldweergave rechts in het midden van uw browser te klikken.

We raden u aan om uw pagina in een nieuw tabblad van uw browser te openen zodat u sneller kan laden (en hernieuw dit tabblad wanneer u maar wil om uw nieuwe versie te controleren).

Deze zou er zo moeten uitzien (de basiskaart zou verschillend moeten zijn afhankelijk van uw domeininstellingen):

../../../_images/dashboard__add-a-map-view.png

Voeg een tabelweergave toe

Ga, nog steeds in het datasetexplorescherm, naar de tabelweergave (tabblad Tabel), widget deel-koppeling en kopieer en plak de code onder de kaart.

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

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <ods-map context="entreprisesimmatriculeesen2016" location="3,18.59479,25.24143" basemap="mapbox.light">
            </ods-map>
        </ods-dataset-context>

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <ods-table context="entreprisesimmatriculeesen2016"
                       sort="date_d_immatriculation">
            </ods-table>
        </ods-dataset-context>

    </div>
</div>

Sla op, hernieuw en u zal zien dat het dashboard nu twee dataweergaves heeft:

../../../_images/dashboard__add-a-table-view.png

Voeg een grafiek toe

Ga nog steeds in de dataset naar de grafiekweergave, selecteer een X- en een Y-as, neem de widget-code, kopieer en plak.

Een voorbeeld van een interessante grafiek voor deze documentatie is om het aantal ondernemingen per regio weer te geven.

X-as: Région (administratief gebied) Y-as: count

../../../_images/dashboard__add-a-chart-setup.png

Sla op, hernieuw en het zou er zo moeten uitzien:

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

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <ods-map context="entreprisesimmatriculeesen2016" location="2,18.59479,25.24143" basemap="mapbox.light">
            </ods-map>
        </ods-dataset-context>

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <ods-table context="entreprisesimmatriculeesen2016"
                       sort="date_d_immatriculation">
            </ods-table>
        </ods-dataset-context>

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <ods-chart>
                <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="region">
                    <ods-chart-serie expression-y="siren" chart-type="line" function-y="COUNT" color="#66c2a5" scientific-display="true">
                    </ods-chart-serie>
                </ods-chart-query>
            </ods-chart>
        </ods-dataset-context>

    </div>
</div>
../../../_images/dashboard__add-a-chart.png

Voeg een tekstzoekformulier toe

Nu we een unieke context hebben om op te werken en al onze widgets aan elkaar gekoppeld zijn, kunnen we een andere geavanceerde widget toevoegen. Laten we beginnen met een zoekbalk!

Open een nieuw tabblad met de volledige widget-documentatie om de lijst met beschikbare widgets te zien.

De zoekbalk draagt de naam odsTextSearch. Hij heeft verschillende optionele parameters en slechts één verplichte: de context!

Laten we het voorlopig eenvoudig houden en deze als volgt gebruiken:

<ods-text-search context="mycontext"></ods-text-search>
waarbij

mycontext de naam is van mijn context in mijn aanpasbare pagina.

Voeg nu een zoekbalk toe bovenaan het dashboard:

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

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">

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

            <ods-map context="entreprisesimmatriculeesen2016" location="2,18.59479,25.24143" basemap="mapbox.light">
            </ods-map>

            <ods-table context="entreprisesimmatriculeesen2016"
                       sort="date_d_immatriculation">
            </ods-table>

            <ods-chart>
                <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="region">
                    <ods-chart-serie expression-y="siren" chart-type="line" function-y="COUNT" color="#66c2a5" scientific-display="true">
                    </ods-chart-serie>
                </ods-chart-query>
            </ods-chart>

        </ods-dataset-context>

    </div>
</div>

Sla op, hernieuw, zoek!

Bijvoorbeeld: zoek naar "sportclub" in het zuiden van Frankrijk:

../../../_images/dashboard__add-search-bar.png

Voeg enkele filters toe

Net zoals in de exploreweergave is het zeer interessant om datasetfilters te hebben om uw zoekopdracht te vernauwen. De widget voor Ods-filters draagt de naam ods-facets

De eenvoudigste manier is om alle facetten weer te geven:

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

Een slimmere manier is om alleen de facetten te nemen die nodig zijn door het veld-ID te specificeren (niet de naam!):

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

Opmerking

Om het veld-ID te bekomen, moet u zich bewust zijn van het datasetschema. Dit is terug te vinden in het informatietabblad van de dataset. Het datasetschema bevat alle informatie over elk veld: naam, omschrijving, ID, type en een waardevoorbeeld. Het is vaak gemakkelijk om het type en het ID van elk veld te kennen wanneer geavanceerde widgetparameters worden gebruikt.

In het dashboardvoorbeeld zullen we 2 filters gebruiken: de sector waarin de onderneming actief is en de stad! Voeg deze code toe in de buurt van de zoekbalk:

Het is nu veel eenvoudiger om sportclubs in Parijs te zoeken!

../../../_images/dashboard__add-filters.png

Ontdek CSS-klassen voor eenvoudige responsieve ontwikkeling

Dit dashboard begint er goed uit te zien, maar elke widget staat in dezelfde kolom, de ene na de andere zonder enige style tuning.

Opmerking

Op dit punt moet u zich bewust zijn van de mogelijkheden van het platform wat betreft CSS en HTML Style. Gelieve de documentatie responsief beheer van de lay-out van het rooster zorgvuldig te lezen.

We splitsen het scherm op in twee hoofdgebieden: links een navigatiebalk en rechts de hoofdcontent. In de navigatiebalk staan de zoekbalk en de filters, in de content staan de tabel, kaart en grafiek.

Dit ziet er dan zo uit:

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

Bootsrap (de tool voor het beheren van de rasterlay-out) splitst de pagina op in 12 kolommen. We zullen 3 kolommen gebruiken voor de navigatiebalk en 9 voor de content. We zullen het scherm vullen met toestellen, te beginnen met middelmatige grootte. De CSS-klasse is col-md-3 en col-md-9

Wat betreft de tabel- en grafiekwidget, splitsen we het gebied op in twee gelijke delen, elk 6 kolommen. De CSS-klasse is col-md-6

Eén laatste detail: om CSS-klassen col-xx-yy te gebruiken moeten ze altijd in een rij element staan! Dus definieer eerst rijen en splits vervolgens de rijen op!

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

Het HTML-blok zou er dan als volgt moeten uitzien:

<div class="container-fluid">

    <div class="ods-box">

        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">

            <div class="row">

                <!-- NAVIGATION BAR -->
                <div class="col-md-3">
                        <ods-text-search />
                        <ods-facets />
                </div>

                <!-- MAIN CONTENT -->
                <div class="col-md-9">

                    <!-- ROW 1 : The Map -->
                    <div class="row">
                    <ods-map />
                    </div>

                    <!-- ROW 2 : Chart and table -->
                    <div class="row">
                        <div class="col-md-6">
                        <ods-table />
                        </div>

                        <div class="col-md-6">
                        <ods-chart />
                        </div>
                    </div>

                </div>
            </div>
        </ods-dataset-context>
    </div>
</div>

We hebben nu een echt dashboard. Een laatste detail is nu om elk element een beetje lucht te geven aangezien ze allemaal nog samen kleven. Dit is een zuiver CSS-aspect en door de regels margin en padding te gebruiken zal deze taak veel eenvoudiger worden.

Maar het platform voorziet ook een CSS-klasse met de naam ods-box. Deze omkapselt elk element in een vakje met een dunne afgeronde rand. We gebruiken dit om de navigatiebalk, de kaart, de tabel en de grafiek te omkapselen.

De volledige HTML-code is nu:

<div class="container-fluid">
    <div class="ods-box">
        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
            <div class="row">

                <!-- NAVIGATION BAR -->
                <div class="col-md-3">
                    <div class="ods-box">
                        <ods-text-search context="entreprisesimmatriculeesen2016"></ods-text-search>
                        <ods-facets context="entreprisesimmatriculeesen2016">
                            <h3>Activity</h3>
                            <ods-facet name="libelle"></ods-facet>
                            <h3>City</h3>
                            <ods-facet name="ville"></ods-facet>
                        </ods-facets>
                    </div>
                </div>

                <!-- MAIN CONTENT -->
                <div class="col-md-9">

                    <!-- ROW 1 : The Map -->
                    <div class="row">
                        <div class="ods-box">
                            <ods-map context="entreprisesimmatriculeesen2016" location="2,18.59479,25.24143" basemap="mapbox.light">
                            </ods-map>
                        </div>
                    </div>

                    <!-- ROW 2 : Chart and table -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="ods-box">
                                <ods-table context="entreprisesimmatriculeesen2016"
                                           sort="date_d_immatriculation">
                                </ods-table>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="ods-box">
                                <ods-chart>
                                    <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="region">
                                        <ods-chart-serie expression-y="siren" chart-type="line" function-y="COUNT" color="#66c2a5" scientific-display="true">
                                        </ods-chart-serie>
                                    </ods-chart-query>
                                </ods-chart>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </ods-dataset-context>
    </div>
</div>
../../../_images/dashboard__css-responsive-layout-3.png

Bekijk de "context" van dichterbij

We weten nu dat de context de sleutel is tussen alle widgets en de koppeling tussen hen en de data. Sommige widgets gebruiken/lezen deze: de odsTable widget gebruikt deze om records te krijgen en deze weer te geven. Sommige widgets handelen/wijzigen deze: de odsTextSearch voert een zoekopdracht uit door een zoekopdracht toe te passen of te filteren. Sommige widgets doen beide: de odsFacets geeft filters, geeft deze weer en laat toe om een filter toe te passen op de context.

Om verder te gaan is het nu interessant om te zien hoe widgets de context wijzigen en welk soort informatie we eruit kunnen bekomen.

Opmerking

  • Aangezien de widgetsbibliotheek van OpenDataSoft gebaseerd is op AngularJS zullen we de syntax ervan gebruiken om de context te lezen.
    • De context is een AngularJS variabele.

    • De context kan gezien worden als een gewoon JSON-voorwerp met haakjes, lijsten met sleutelwaarden, enz.

    • Om een uitdrukking in AngularJS te evalueren, gebruiken we de syntax: {{ action1 or variable1 }}

Om deze toelichting af te sluiten, om de context te lezen, voeg deze bundel code gewoon toe in een lege ruimte:

<div class="container-fluid">
    <div class="ods-box">
        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">

            {{ entreprisesimmatriculeesen2016 }}

            <div class="row">

                <!-- NAVIGATION BAR -->
                        . . . .

Sla op, hernieuw: u zou een lelijke json bovenaan uw pagina moeten zien, door middel van pretty printing in uw favoriete dev. omgeving (of met een online json pretty printing zoals diegene uit CuriousConcept ) zou u iets moeten zien zoals dit:

{
   "name":"entreprisesimmatriculeesen2016",
   "type":"dataset",
   "domainUrl":"",
   "dataset":{
      "datasetid":"entreprises-immatriculees-en-2016",
      "has_records":true,
      "metas":{
         "publisher":"Infogreffe",
         "domain":"fpassaniti",
         "license":"Licence ouverte / Open Licence",
         "description":"<p><strong>RCS - Liste des entreprises immatriculées en 2016</strong></p><hr/>\n<p>Liste des sociétés commerciales immatriculées au registre du commerce et des sociétés en 2016.</p>",
         "language":"fr",
         "records_count":114129,
         "title":"Entreprises immatriculées en 2016",
         "attributions":"Infogreffe",
         "modified":"2016-09-14T15:16:33+02:00",
         "theme":"Immatriculations",
         "references":"Création, Immatriculation, Registre du commerce et des sociétés",
         "visibility":"restricted",
         "data_processed":"2016-09-14T10:30:30+02:00",
         "metadata_processed":"2016-09-14T15:16:47+02:00",
         "keyword":[
            "création",
            "immatriculation",
            "sociétés",
            "entreprises"
         ]
      },
      "features":[
         "geo",
         "analyze",
         "timeserie"
      ],
      . . .
      "fields":         . . .,
      "extra_metas":{
         "visualization":{
            "map_tooltip_fields": . . .
            "calendar_enabled":false,
            "map_tooltip_html_enabled":false,
            "image_tooltip_html_enabled":false,
            "map_tooltip_title":"denomination",
            "table_default_sort_field":"date_d_immatriculation",
            "table_fields": . . .
            "map_marker_hidemarkershape":false,
            "analyze_default":". . .",
            "calendar_tooltip_html_enabled":false
         },
         "explore":{
            "download_count":0,
            "feedback_enabled":false
         },
         "processing":{
            "processing_modified":"2016-06-14T12:25:59+02:00",
            "records_size":0,
            "security_last_modified":"2016-09-14T15:16:44+02:00"
         },
         "publishing":{
            "status":"processing_all_dataset_data",
            "extractors":[
               "csvfile"
            ],
            "properties":[
               "scheduled"
            ],
            "last_modified_user":"olivier.ishacian",
            "published":true
         }
      },
      "billing_plans":[

      ]
   },
   "parameters":{
      "disjunctive.libelle":true,
      "disjunctive.code_postal":true,
      "disjunctive.ville":true,
      "disjunctive.region":true,
      "disjunctive.greffe":true,
      "sort":"date_d_immatriculation"
   },
   "nhits":114559
}

Aangezien het een jason is, kunnen we met de AngularJS uitdrukking navigeren in de structuur ervan om de waarde van elke sleutel te krijgen. Bijvoorbeeld: om de datasettitel te bekomen, gaan we vanuit de context naar de "dataset" lijst, vervolgens naar de "metas" lijst. Zo komen we terecht op de waarde van de titel. Ingekapseld in een grote header (h1 HTML tag), ziet dit er zo uit:

<div class="container-fluid">
    <div class="ods-box">
        <ods-dataset-context
                             context="entreprisesimmatriculeesen2016"
                             entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
                             entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">

            <h1>
                {{ entreprisesimmatriculeesen2016.dataset.metas.title }}
            </h1>

            <div class="row">

                <!-- NAVIGATION BAR -->
../../../_images/dashboard__context-1.png

Nu we gezien hebben wat de context is, moeten we bekijken hoe deze wordt aangemaakt. De odsDatasetContext wordt gebruikt om een context aan te maken op basis van een dataset-ID en optioneel andere parameters.

<ods-dataset-context
    context="entreprisesimmatriculeesen2016"
    entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016"
    entreprisesimmatriculeesen2016-parameters="{'disjunctive.libelle':true,'disjunctive.code_postal':true,'disjunctive.ville':true,'disjunctive.region':true,'disjunctive.greffe':true,'sort':'date_d_immatriculation'}">
</ods-dataset-context>

Zoals in de documentatie vermeld staat, zijn er 2 parameters verplicht: de naam van de context en het dataset-ID. In onze geval kan 1 extra parameter worden gekopieerd. mycontext-parameters wordt gebruikt om specifieke filters of zoekopdracht op de context te definiëren. Hier worden verschillende disjunctieve wijzen ingesteld als waar voor 5 velden en is de laatste parameter een sortering op date_d_immatriculation.

Opmerking

Door het instellen van de disjunctieve wijze op "waar" voor een facetveld activeert de meervoudige keuzefiltermodus. Deze laat de gebruiker toe om een filter toe te passen en nog steeds andere waarden te kunnen zien en/of selecteren.

We zullen dit optionele attribuut verwijderen en wijzigingen waarnemen.

<ods-dataset-context
     context="entreprisesimmatriculeesen2016"
     entreprisesimmatriculeesen2016-dataset="entreprises-immatriculees-en-2016">
</ods-dataset-context>

Allereerst de context. Wanneer we deze weergeven, is het json-parameterblok nu veel kleiner:

Voeg in uw code het volgende toe:

{{ entreprisesimmatriculeesen2016.parameters }}

Sla op, hernieuw en zie:

    "parameters":{
            "sort":"date_d_immatriculation"
}

We hebben nog steeds een sorteerparameter, zelfs wanneer we deze verwijderen uit de widget voor het aanmaken van context (odsDatasetContext). Dit is te danken aan het feit dat de datasetsortering wordt ingesteld in de tabelweergave.

Laatste test: pas een filter toe op elke facet en neem waar hoe het context.parameters-voorwerp up-to-date wordt gebracht.

../../../_images/dashboard__context-2.png

Opmerking

Neem ook het 'standaard' gedrag van facetten waar: wanneer een waarde wordt geselecteerd, worden alle andere verborgen.

Voeg een recordteller en laatste verwerkingsdatum toe

Het is nu tijd om meer interessante informatie-elementen uit deze context te halen:

  • het totale aantal records

  • het totale aantal hits dat overeenstemt met de zoekopdracht en/of filters van de gebruiker

  • de laatste verwerkingsdatum van de dataset

{
   "name":"entreprisesimmatriculeesen2016",
   . . .
   "dataset":{
      "datasetid":"entreprises-immatriculees-en-2016",
      "has_records":true,
      "metas":{
         . . .
         "records_count":114129,
         . . .
         "data_processed":"2016-09-14T10:30:30+02:00",
         . . .
      },
      . . .
   },
   "nhits":115055
}

Vervolgens:

  • zal het totale aantal records geraadpleegd kunnen worden via: {{  entreprisesimmatriculeesen2016.dataset.metas.records_count }}

  • het totale aantal hits: {{  entreprisesimmatriculeesen2016.nhits }}

  • de laatste verwerkingsdatum: {{  entreprisesimmatriculeesen2016.dataset.metas.data_processed }}

Om te eindigen nemen we deze blokken op in onze HTML-code, omringd door HTML en CSS-code om een mooi resultaat te krijgen.

Records en aantal hits bovenaan de navigatiebalk, verwerkingsdatum onderaan:

<!-- NAVIGATION BAR -->
<div class="col-md-3">
    <div class="ods-box">

        <h3>
            {{  entreprisesimmatriculeesen2016.nhits }} records
        </h3>
        <h5>
            <i>
                out of a total of {{  entreprisesimmatriculeesen2016.dataset.metas.records_count }} records in the dataset
            </i>
        </h5>

        <ods-text-search context="entreprisesimmatriculeesen2016"></ods-text-search>
        <ods-facets context="entreprisesimmatriculeesen2016">
            <h3>Activity</h3>
            <ods-facet name="libelle"></ods-facet>
            <h3>City</h3>
            <ods-facet name="ville"></ods-facet>
        </ods-facets>

        <h5>
            <i>
                Last modified date : {{  entreprisesimmatriculeesen2016.dataset.metas.data_processed }}
            </i>
        </h5>

    </div>
</div>

Sla op, hernieuw en zie:

../../../_images/dashboard__add-counters.png

Het is mooi, maar het numerieke en datumformaat is een beetje hard. Om dat op te lossen zullen we een zuiver AngularJS concept introduceren met de naam filters. Volledige documentatie over AngularJS Filters hier

Een filter is een functie of operatie die toegepast kan worden op een variabele of waarde in een AngularJS-uitdrukking.

In ons geval gebruiken we de filter aantal om numerieke waarde te pretty printen (een spatie of komma toevoegen om de 3 karakters afhankelijk van het land), en een datum om het technische ISO-formaat om te zetten in een formaat dat door mensen kan worden gelezen.

<h3>
    {{  entreprisesimmatriculeesen2016.nhits | number }} records
</h3>
<h5>
    <i>
        out of a total of {{  entreprisesimmatriculeesen2016.dataset.metas.records_count | number }} records in the dataset
    </i>
</h5>

. . .

<h5>
    <i>
        Last modified date : {{  entreprisesimmatriculeesen2016.dataset.metas.data_processed | date : 'medium' }}
    </i>
</h5>

Opmerking

Om een filter te "callen", gebruik '|' op het einde van de uitdrukking. Sommige filters aanvaarden specifieke parameters. Een datumfilter aanvaardt een datumformaat of -patroon. Voorbeeld: expr. | date : 'M/d/yy' expr. | date : 'medium'

Sla op, hernieuw, zie:

../../../_images/dashboard__add-counters-ng-filter.png

Verder gaan - AngularJS

Ontdek AngularJS-richtlijnen

En AngularJS-richtlijn kan beschouwd worden als elk HTML-element. Vele ervan zijn beschikbaar in het platform en kunnen gebruikt worden om dynamisch gedrag aan dashboards toe te voegen.

Hier volgt een subreeks van de meest gebruikte richtlijnen:

  • ng-init: initialiseert een variabele

  • ng-click: evalueert een uitdrukking wanneer de gebruiker op het element klikt

  • ng-class: past een CSS-klasse toe afhankelijk van een variabele of voorwaarde

  • ng-if: toont of verbergt een element afhankelijk van een voorwaarde

  • ng-repeat: herhaalt over een lijst of een array, herhaalt het HTML-element voor elke herhaling

  • ng-change: evalueert een uitdrukking wanneer de gebruiker de waarden in een HTML Select-element wijzigt

ng-if : toont of verbergt een widget afhankelijk van de filterkeuze van de gebruiker

In ons dashboard hebben we de regiolijngrafiek en ook de stadsfilter! Wanneer de gebruiker een stad selecteert om op te filteren, wordt de grafiek nutteloos aangezien deze slechts één waarde kan weergeven.

Wat interessant zou kunnen zijn is om de regiowidget te verbergen wanneer een activiteit wordt geselecteerd en in plaats daarvan een andere grafiek te tonen!

Laten we terugkeren naar de exploredatasetweergave, ga naar het analysetabblad en maak een nieuwe grafiek, bijvoorbeeld:

Een taartgrafiek met het aantal geregistreerde ondernemingen voor elke maand van het jaar gesorteerd.
  • X-as: inschrijvingsdatum, maandniveau

  • Y: taartgrafiek, Y-as: telling

  • Kopieer en plak de widgetcode onder de grafiek.

  • Verwijder de geplakte contextverklaring

  • Wijzig (indien nodig) de naam van de context die gebruikt wordt in deze nieuwe grafiek.

Nu kunnen we de ng-if-richtlijn voor elke widget gebruiken om één of de andere weer te geven.

De voorwaarde zal zijn, wanneer een verfijning wordt toegepast op de context, toon of verberg. We hebben gezien dat de verfijningslijst beschikbaar is in context.parameters. Aangezien parameters een belangrijke waardewoordenboek is, om de myfield verfijningsparameter te krijgen, proberen we toegang te krijgen tot : mycontext.parameters['refine.myfield']

Toegepast op onze dataset ziet dit er zo uit:

<div class="col-md-6">
    <div class="ods-box">
        <ods-chart ng-if="! entreprisesimmatriculeesen2016.parameters['refine.ville']">
            <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="region">
                <ods-chart-serie expression-y="siren" chart-type="line" function-y="COUNT" color="#66c2a5" scientific-display="true">
                </ods-chart-serie>
            </ods-chart-query>
        </ods-chart>

        <ods-chart ng-if="entreprisesimmatriculeesen2016.parameters['refine.ville']">
            <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="date_d_immatriculation" maxpoints="20" timescale="month" sort="serie1-1">
                <ods-chart-serie expression-y="siren" chart-type="pie" function-y="COUNT" color="range-custom" scientific-display="true">
                </ods-chart-serie>
            </ods-chart-query>
        </ods-chart>
    </div>
</div>

Opmerking

  • De regiografiek ng-if voorwaarde kan vertaald worden naar Toon de grafiek wanneer er een verfijning is op het facet **ville**
    • Het ! karakter wordt gebruikt om het tegenovergestelde te krijgen. De voorwaarde kan vertaald worden naar Toon de grafiek wanneer er GEEN verfijning is op het facet **ville**

    • Om gemakkelijk te begrijpen hoe dit werkt, aarzel niet om de waarde context.parameters weer te geven in uw dashboard telkens wanneer u dit gebruikt!

ng-init / ng-click / ng-if /ng-class : Maakt tabbladen aan om weergaves te switchen

In dit voorbeeld zullen 4 verschillende richtlijnen worden gebruikt.

  • ng-init om een variabele aan te geven om bij te houden welk tabblad moet worden weergegeven!

  • ng-if om slechts één tabblad tegelijkertijd weer te geven, afhankelijk van de waarde van de variabele

  • ng-click om de waarde van de variabele te wijzigen om over te schakelen van een tabblad naar een ander

  • ng-class om de kleur van het tabblad te wijzigen om te tonen welk tabblad wordt geselecteerd

Dus eerst, de HTML-structuur:

    <div class="row">
    <ul>
        <li>
            FIRST TAB BUTTON
        </li>
        <li>
            SECOND TAB BUTTON
        </li>
        <li>
            THIRD TAB BUTTON
        </li>
    </ul>
</div>

<div class="row">
    <div>
        FIRST CONTENT
    </div>
    <div>
        SECOND CONTENT
    </div>
    <div>
        THIRD CONTENT
    </div>
</div>

Initialiseer een variabele met de naam tab met ng-init:

<ul ng-init="tab='first'">

Op elke knop in het tabblad, voeg een ng-click toe om de tab-waarde in te stellen:

    <li ng-click="tab='first'">
    FIRST TAB BUTTON
</li>
<li ng-click="tab='second'">
    SECOND TAB BUTTON
</li>
<li ng-click="tab='third'">
    THIRD TAB BUTTON
</li>

Voeg vervolgens op elke contentblok een ng-if-voorwaarde toe om deze weer te geven:

<div class="row">
    <div ng-if="tab=='first'">
        FIRST CONTENT
    </div>
    <div ng-if="tab=='second'">
        SECOND CONTENT
    </div>
    <div ng-if="tab=='third'">
        THIRD CONTENT
    </div>
</div>

Sla op, hernieuw en test. u zou nu moeten kunnen zien dat, door op de tabknop te drukken, de content wijzigt!

Nu is er een beetje CSS nodig om een echte knopstijl te krijgen. We hebben deze al gebruikt: ods-button ods-button--primary. Laten we ook een klasse items en item toevoegen.

Dit ziet er als volgt uit:

<ul class="items" ng-init="tab='first'">
    <li class="item ods-button ods-button--primary" ng-click="tab='first'">
        FIRST TAB BUTTON
    </li>
    <li class="item ods-button ods-button--primary" ng-click="tab='second'">
        SECOND TAB BUTTON
    </li>
    <li class="item ods-button ods-button--primary" ng-click="tab='third'">
        THIRD TAB BUTTON
    </li>
</ul>

Voeg in het CSS-blok dit toe:

.items {
    display: flex; /* Display in line */
    list-style-type: none; /* Remove the list bullet */
}

.item {
    margin: 0 20px; /* give some space left and right */
}

Nog een laatste ding: nog steeds met CSS willen we met een andere kleur beklemtonen welk tabblad is geselecteerd. We gebruiken ook een vooraf gedefinieerde knop: ods-button--danger (in het rood). Deze CSS-klasse moet voor een specifieke voorwaarde enkel ingesteld worden met ng-class. Het patroon is: ng-class="{'css-class': variable == value}"

De definitieve HTML ziet er als volgt uit:

<div class="row">
    <ul class="items" ng-init="tab='first'">
        <li class="item ods-button ods-button--primary" ng-class="{'ods-button--danger': tab == 'first'}" ng-click="tab='first'">
            FIRST TAB BUTTON
        </li>
        <li class="item ods-button ods-button--primary" ng-class="{'ods-button--danger': tab == 'second'}" ng-click="tab='second'">
            SECOND TAB BUTTON
        </li>
        <li class="item ods-button ods-button--primary" ng-class="{'ods-button--danger': tab == 'third'}" ng-click="tab='third'">
            THIRD TAB BUTTON
        </li>
    </ul>
</div>

<div class="row">
    <div ng-if="tab=='first'" class="block">
        FIRST CONTENT
    </div>
    <div ng-if="tab=='second'" class="block">
        SECOND CONTENT
    </div>
    <div ng-if="tab=='third'" class="block">
        THIRD CONTENT
    </div>
</div>

Sla op, hernieuw en probeer tussen tabs over te schakelen!

../../../_images/dashboard__tab-view.png

Vervolgens kunnen we deze opnemen in ons dashboard om extra dataweergaves toe te voegen zonder een al te zwaar dashboard te krijgen (te zwaar om te laden of te lezen). Om de tabel en de grafiek, die ook te klein zijn, te geven, zullen we deze opnemen in het tabblad. We zullen ook een derde grafiek toevoegen, gebaseerd op een andere as (bijvoorbeeld de datum). De tweede rij zal de getabuleerde rij worden en elke widget (tabel, grafieken) zal de content van elk tabblad zijn.

De hoofdcontent ziet er als volgt uit:

<!-- MAIN CONTENT -->
<div class="col-md-9">

    <!-- ROW 1 : The Map -->
    <div class="row">
        <div class="ods-box">
            <ods-map context="entreprisesimmatriculeesen2016" location="2,18.59479,25.24143" basemap="mapbox.light">
            </ods-map>
        </div>
    </div>

    <!-- ROW 2 : Chart and table -->
    <div class="row items-row">
        <ul class="items" ng-init="tab='first'">
            <li class="item ods-button ods-button--primary" ng-class="{'ods-button--danger': tab == 'first'}" ng-click="tab='first'">
                Table
            </li>
            <li class="item ods-button ods-button--primary" ng-class="{'ods-button--danger': tab == 'second'}" ng-click="tab='second'">
                Region chart
            </li>
            <li class="item ods-button ods-button--primary" ng-class="{'ods-button--danger': tab == 'third'}" ng-click="tab='third'">
                Time serie
            </li>
        </ul>
    </div>

    <div class="row">
        <div ng-if="tab=='first'" class="block">
            <div class="ods-box">
                <ods-table context="entreprisesimmatriculeesen2016">
                </ods-table>
            </div>
        </div>
        <div ng-if="tab=='second'" class="block">
            <div class="ods-box" ng-if="! entreprisesimmatriculeesen2016.parameters['refine.ville']">
                <ods-chart>
                    <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="region">
                        <ods-chart-serie expression-y="siren" chart-type="line" function-y="COUNT" color="#66c2a5" scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
            <div class="ods-box" ng-if="entreprisesimmatriculeesen2016.parameters['refine.ville']">
                <ods-chart>
                    <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="date_d_immatriculation" maxpoints="20" timescale="month" sort="serie1-1">
                        <ods-chart-serie expression-y="siren" chart-type="pie" function-y="COUNT" color="range-custom" scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div ng-if="tab=='third'" class="block">
            <ods-chart timescale="year">
                <ods-chart-query context="entreprisesimmatriculeesen2016" field-x="date_d_immatriculation" timescale="day">
                    <ods-chart-serie expression-y="siren" chart-type="spline" function-y="COUNT" color="#ff0000" scientific-display="true">
                    </ods-chart-serie>
                </ods-chart-query>
            </ods-chart>

        </div>
    </div>
</div>

om tabknoppen te centreren, bewerk de CSS-code met:

.items-row {
    text-align: center; /* center all buttons */
}

.items {
    display: inline-flex; /* Display in line */
    list-style-type: none; /* Remove the list bullet */
}

En tot slot, sla op, hernieuw:

../../../_images/dashboard__with-tab.png