Hoe ervoor zorgen dat weergaves overeenstemmen met filters (met AngularJS)

★★★ Geavanceerd - tijd: 30 minuten

In deze handleiding leert u hoe u verschillende weergaveopties kunt aanmaken om overeen te stemmen met eraan verbonden filters. Dit kan vooral nuttig zijn met grafieken aangezien deze soms nutteloos kunnen worden eenmaal de eraan verbonden filters worden geactiveerd. Deze handleiding kan volledig worden gepersonaliseerd en opnieuw worden gebruikt in elke dashboard of stuk content dat aangemaakt wordt met HTML/CSS op Opendatasoft.

../_images/module2_final.png

Met deze handleiding leert u:

  • hoe moet de ng-if-richtlijn van AngularJS worden gebruikt

  • wanneer en hoe moet het voorwerp context.parameters in de ng-if-richtlijn worden gebruikt

VOORVEREISTEN

  • Om deze handleiding uit te testen en/of de configuratie van widgets in een reeds bestaande pagina te verbergen of te tonen, moet u toegang hebben tot de back office van een Opendatasoft-portaal en moet u de toelating “Alle pagina’s bewerken” hebben.

  • Aangezien deze handleiding aangemerkt staat als “Geavanceerd” in termen van moeilijkheidsgraad, nemen we aan dat u al voldoende vertrouwd bent met HTML en CSS om de structuren ervan te herkennen en te begrijpen en om te weten hoe ze werken. Andere meer technische elementen zullen echter gedetailleerd worden uitgelegd.

  • We raden sterk aan om de handleiding te volgen met de Shanghai World University Ranking dataset, die in de volledige handleiding wordt gebruikt. Indien u echter kiest om de handleiding met een andere dataset te gebruiken, denk er dan aan dat u elke stap zal moeten aanpassen.

Alle afbeeldingen tonen

Alle afbeeldingen verbergen

De basis aanmaken

In deze handleiding zullen we een pagina aanmaken die bestaat uit een weergave en de eraan verbonden datasetfilter. We gebruiken hierbij de Shanghai World University Ranking dataset die terug te vinden is op ons Opendatasoft datanetwerk.

1 + We beginnen onze pagina met het toevoegen van de widgetcode van de weergave van onze keuze. Hier kiezen we ervoor om een spreidingsgrafiek weer te geven die de top 20 vertegenwoordigt van de beste landen in de rangschikking. Voor elk land toont de grafiek de gemiddelde score.

Opmerking

Afhankelijk van het feit of u deze handleiding uitprobeert op een nieuwe pagina of in een bestaand dashboard, zult u misschien de tags <div class="container"> en <div class="ods-box"> zien: beide zijn standaard tags die het standaard kader van een Opendatasoft-pagina aanmaken. Indien u dit kader wilt behouden, zorg er dan voor dat u de code van de handleiding tussen deze standaard tags toevoegt.

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

    <ods-dataset-context context="shanghaiworlduniversityrankingpublic" shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking@public" shanghaiworlduniversityrankingpublic-parameters="{'sort':'world_rank'}">
    <ods-chart align-month="true">
       <ods-chart-query context="shanghaiworlduniversityrankingpublic" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </ods-dataset-context>

   </div>
</div>
../_images/step114.png

2 + Alvorens verder te gaan, geeft de unieke context van uw pagina aan door gebruik te maken van de odsDatasetContext widget. Deze zal toelaten dat onze widgets met elkaar in interactie treden - en het is altijd de juiste manier om een dashboard op te bouwen.

Belangrijk

Vergeet niet om de tag ods-dataset-context boven de code van de grafiekwidget te verwijderen. Vervang ook de huidige contextnaam (hier shanghaiworlduniversityrankingpublic) door de nieuwe (hier worlduniversityranking).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   </div>
</div>

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

3 + Voeg een filter toe die verband houdt met de gekozen dataset en gebruik daarbij de odsFacets widget. Hier halen we de landfilter op die reeds in een bestaande facet staat op de dataset die gepubliceerd staat op Data.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

4 + Klik op tutorial-keycap:Voorbeeldweergave. Technisch gezien werkt alles prima: de grafiek wordt inderdaad bijgewerkt volgens de gekozen filteroptie. De gefilterde grafiek wordt evenwel volkomen nutteloos omdat slechts één enkel punt wordt weergegeven.

../_images/step43.png

We hebben een andere weergave nodig die enkel zal worden weergegeven wanneer de filter wordt gebruikt. Deze andere weergave zal de standaard weergave, waarbij ongefilterde grafieken nutteloos worden eenmaal ze worden gefilterd, vervangen. Aan het werk!

Voeg met AngularJS een andere weergave toe

5 + Alvorens dieper in te gaan op de AngularJS-richtlijnen en -uitdrukkingen, gaan we eerst de widgetcode van onze andere weergave toevoegen net onder de eerste. Hier kiezen we ervoor om een kolomgrafiek weer te geven die de top 10 van de beste universiteiten in de rangschikking vertegenwoordigt. Voor elke universiteit toont de grafiek de gemiddelde score. Denk eraan dat deze grafiek enkel zal worden weergegeven wanneer de filter wordt gebruikt, met andere woorden de nieuwe alternatieve grafiek toont altijd de 10 beste universiteiten per gekozen land.

Belangrijk

Vergeet niet om de code te zuiveren en om de contextnaam te vervangen door een die we eerder al hebben aangegeven (zie stap 2).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

6 + Het is nu tijd om dieper in te gaan op AngularJS. We moeten een AngularJS-richtlijn toevoegen aan beide weergaves: de standaard (die NIET mag worden weergegeven wanneer de filter wordt gebruikt) en de alternatieve grafiek (die ENKEL mag worden weergegeven wanneer de filter wordt gebruikt). Aangezien een AngularJS-richtlijn moet worden toegevoegd in een HTML-tag en wanneer we onze code bekijken, is de beste manier om te werk te gaan om onze code zuiver te houden div tags toevoegen. Omring elke grafiek tussen div tags.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <div>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

7 + We hebben nu de perfecte plaats om onze AngularJS-richtlijnen te schrijven! We beginnen met de alternatieve grafiek, zijnde diegene die enkel mag worden weergegeven wanneer de filter wordt gebruikt. Hiervoor moeten we de ng-if-richtlijn van AngularJS gebruiken. De ng-if-richtlijn is een voorwaardelijke uitdrukking die bepaalt of een HTML-element al dan niet mag worden weergegeven.

Laten we een kijkje nemen naar de syntax van de uitdrukking die we gaan gebruiken.

ng-if="mycontext.parameters['refine.field_ID']"

ng-if is de AngularJS-richtlijn. Ze wordt altijd gevolgd door een gelijkheidsteken = dat aangeeft dat wat erna komt een uitdrukking is. Deze uitdrukking zal door de richtlijn worden geëvalueerd en moet altijd geschreven worden tussen twee dubbele aanhalingstekens ".

mycontext.parameters kan beschouwd worden als een voorwerp dat een lijst met contextgerelateerde parameters bevat die werken als filters. De lijst met parameters moet tussen haakjes [ ] staan en elke afzonderlijke parameter moet geschreven worden tussen twee enkele aanhalingstekens '. Voor deze handleiding en aangezien het het gebruik van de filter “Land” is die zal bepalen of welke grafiekweergaveoptie moet worden weergegeven, hebben we het voorwerp mycontext.parameters nodig om de filterparameter te gebruiken in onze ng-if-uitdrukking. mycontext moet vervangen worden door de naam van de paginacontext.

  • refine geeft aan dat we een filterparameter gebruiken.

  • .field_ID laat ons toe te verduidelijken welke specifieke filter we gaan gebruiken. field_ID moet vervangen worden door de technische identifier van het veld dat gebruikt wordt als filter.

In essentie zou de ng-if-syntax gelezen kunnen worden als volgt: “Wanneer mycontext wordt gefilterd met field_ID, [de aanverwante HTML-elementen weergeven]”.

8 + Voeg de ng-if-richtlijn toe in de div tag die de alternatieve grafiek omringt. Vergeet niet om mycontext te vervangen door de naam van de paginacontext (zie stap 2) en field_ID door de technische identifier van het datasetveld dat we gebruiken als filter (zie stap 3). In deze handleiding is mycontext vervangen door worlduniversityranking en is field_ID vervangen door country.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <div>
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

9 + Klik op Voorbeeldweergave: standaard is onze alternatieve grafiek verborgen. Maar wanneer de filter wordt gebruikt, verschijnt hij!

../_images/step93.png

10 + Het is nu tijd om ervoor te zorgen dat de standaard grafiek verdwijnt wanneer de filter wordt gebruikt (en dat de alternatieve grafiek wordt weergegeven)! In essentie willen we dat deze uitdrukking precies het omgekeerde doet van wat de vorige deed. Het goede nieuws is: hier is een manier om dit te doen waarbij er niet opnieuw een volledig nieuwe uitdrukking moet worden geschreven. We moeten alleen onze vorige uitdrukking hergebruiken en één enkel karakter toevoegen aan het begin ervan: een uitroepingsteken !.

ng-if="! mycontext.parameters['refine.field_ID']"

Een uitroepingsteken ! dat aan het begin van een uitdrukking wordt geplaatst, keert het gedrag ervan om. In essentie zou deze uitdrukking kunnen gelezen worden als: “Wanneer mycontext wordt gefilterd met field_ID, [geef de aanverwante HTML-elementen NIET weer]”.

11 + Voeg de ng-if-richtlijn toe in de div tag die de eerste, standaard grafiek omringt. Vergeet niet om mycontext en field_ID te vervangen, net zoals in de vorige uitdrukking (zie stap 8).

Opmerking

U kunt ook de vorige ng-if-richtlijn met de uitdrukking ervan kopiëren en een ! aan het begin toevoegen.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <div ng-if="! worlduniversityranking.parameters['refine.country']">
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
     </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

12 + Klik op Voorbeeldweergave: alles werkt perfect!

../_images/step122.png

De finishing touch toevoegen

13 + Het enige wat we nu nog moeten doen is de pagina mooier maken! Laten we onze HTML-elementen organiseren met behulp van Bootstrap. Voor deze handleiding gebruiken we één enkele rij die we in 2 zullen delen: de weergave zal links staan terwijl de filter rechts zal worden weergegeven. Gezien de grootte van een weergave in vergelijking met die van een lijst met filters, gebruiken we 9 kolommen voor de weergave en 3 voor de filters.

Belangrijk

Indien u niet vertrouwd bent met Bootstrap en hoe u hiermee een webpagina kunt organiseren, raadpleeg dan onze handleiding “Hoe een dashboard opbouwen (deel 2)” (deel “Uw dashboard formatteren: uw widgets in rijen en kolommen organiseren”).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

   <div class="row">

     <div class="col-md-9">
       <div ng-if="! worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
           <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
          </ods-chart-query>
        </ods-chart>
      </div>

      <div ng-if="worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
          <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
            <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
            </ods-chart-serie>
          </ods-chart-query>
         </ods-chart>
        </div>
      </div>

     <div class="col-md-3">
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

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

14 + Tot slot gaan we titels en tekstuele indicaties toevoegen om ervoor te zorgen dat iedereen begrijpt hoe de pagina en de content ervan werkt.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

   <div class="row">

     <div class="col-md-9">
    <div ng-if="! worlduniversityranking.parameters['refine.country']">
    <h2>
        Top 20 countries <i class="fa fa-globe" aria-hidden="true"></i>
    </h2>
    <h5>
        by average score
    </h5>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
   <h2>
       Top 10 university <i class="fa fa-university" aria-hidden="true"></i>
   </h2>
   <h5>
       by average score
   </h5>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>
      </div>

     <div class="col-md-3">
     <h3>
         Countries
     </h3>
     <h5>
         Pick a country to see its universities and scores
     </h5>
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

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

GEFELICITEERD!

U heeft deze handleiding volledig doorlopen en weet nu hoe u verschillende weergaveopties moet aanmaken om ervoor te zorgen dat deze overeenstemmen met de filters van de pagina. Hopelijk bent u nu voldoende vertrouwd met combinatie van ng-if en context.parameters om deze later zelfstandig opnieuw te kunnen gebruiken!