Aufbau eines dynamischen Dashboards - Schritt für Schritt!

Das Ziel dieses Tutorials ist es, mithilfe von Widgets, AngularJS und den CSS-Tools der OpenDataSoft-Plattform problemlos ein Dashboard zu erstellen.

Grundlagen
  • einen Datensatz erfassen

  • Eine Seite erstellen

  • eine Kartenansicht hinzufügen

  • eine Tabellenansicht hinzufügen

  • ein Diagramm hinzufügen

  • alle miteinander verknüpfen!

  • eine Textsuche hinzufügen

  • einige Filter hinzufügen

  • CSS-Klassen kennenlernen - für einfaches responsives Entwickeln

  • ein tieferer Einblick in den "Kontext"

  • einen Eintragszähler hinzufügen

  • einen Download-Link hinzufügen

  • einige KPIs erstellen

Gehen Sie einen Schritt weiter : AngularJS und die erweiterte Nutzung von Widgets
  • die Richtlinien von AngularJS kennenlernen

  • Probieren Sie sie aus und erzeugen Sie eine dynamische Ansicht - ng-if

  • Verleihen Sie Ihren KPI Farbe - ng-class

  • Verfeinern-per-Klick-Widgets

Grundlagen

Datensätze erfassen

Dieses Tutorial basiert auf dem Firmenregistrierungsdatensatz in Frankreich (Jahr 2016).

Zunächst müssen Sie Ihrer Domain diesen Datensatz hinzufügen:

  • entreprises-immatriculees-en-2016

Dafür können Sie die Schaltfläche "Datensatz aus dem OpenDataSoft-Netzwerk hinzufügen" nutzen, wenn Sie eine neue Datenquelle zu Ihrem Datensatz hinzufügen.

Eine Seite erstellen

Öffnen Sie Back-Office -> Seiten -> Neue Seite
Geben Sie ein Suffix der Seiten-URL, gegebenenfalls einen Titel und eine Beschreibung ein und wählen Sie Speichern
Klicken Sie auf "Im Expertenmodus bearbeiten", um direkt auf den CSS/HTML-Code der Seite zuzugreifen.

Jetzt sollten Sie diesen HTML-Code auf Ihrer Seite sehen:

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

Von nun an wird jeglicher Code in "ods-box div" auf diese Weise hinzugefügt:

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

        CODE HERE

    </div>
</div>

Speichern und öffnen Sie Ihre Seite.

Aktualisieren Sie Ihre Seite, wenn Sie die Schaltfläche Seite öffnen oben rechts nicht sehen können

Sie können auch über die Navigationsleiste zum Menü Seiten zurückkehren, um die Liste der Seiten zu sehen und auf das Auge zu klicken, um direkt dorthin zu gelangen.

Eine Kartenansicht hinzufügen

Am einfachsten beginnen Sie damit, Teilen-Links und Code unter jede Datenvisualisierung zu setzen.

Wechseln Sie zu Ihrem Datensatz, öffnen Sie den Karten-Tab und klicken Sie unter Ihrer Karte auf "Widget". Jetzt können Sie den Code einfach kopieren und in die benutzerdefinierte Seite einfügen.

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

Jeder Block wird später erklärt, sehen Sie sich an dieser Stelle zunächst einmal die Vorschau Ihrer Seite an, indem Sie auf die Schaltfläche Vorschau klicken (rechts in der Mitte in Ihrem Browser).

Damit sie schneller geladen wird, empfehlen wir Ihnen, Ihre Seite in einem neuen Tab Ihres Browsers zu öffnen (und diesen Tab jedes Mal zu aktualisieren, wenn Sie Ihre neueste Version sehen möchten).

Sie sollte so aussehen (die Grundkarte sollte je nach Domain-Einstellungen unterschiedlich sein):

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

Eine Tabellenansicht hinzufügen

Noch immer im Datensatz-Bildschirm wechseln Sie in der Tabellenansicht (Tab Tabelle) zum "Widget"-Teilen-Link, kopieren Sie den Code und fügen Sie ihn unter der Karte ein.

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

Nachdem Sie gespeichert und aktualisiert haben, werden Sie sehen, dass das Dashboard jetzt über zwei Datenvisualisierungen verfügt:

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

Ein Diagramm hinzufügen

Erneut im Datensatz öffnen Sie die Diagramm-Ansicht, wählen Sie eine X- und Y-Achse, kopieren Sie den Widget-Code und fügen Sie ihn ein.

Ein Beispiel für ein interessantes Diagramm in dieser Dokumentation ist die Anzeige der Anzahl der Unternehmen nach Region.

X-Achse: "Region" (Verwaltungsgebiet) Y-Achse: "Zähler"

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

Nachdem Sie gespeichert und aktualisiert haben, sollte das Ganze so aussehen:

<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

Eine Textsuche hinzufügen

Nachdem wir einen einzigen Kontext haben und alle Widgets miteinander verbunden sind, können wir weitere Widgets hinzufügen. Beginnen wir mit einer Suchleiste!

Öffnen Sie einen neuen Tab mit der vollständigen Widget-Dokumentation, um eine Liste mit verfügbaren Widgets zu sehen.

Die Bezeichnung für die Suchleiste lautet odsTextSearch. Sie hat mehrere optionale Parameter und nur eine zwingende Voraussetzung: den Kontext!

Für den Augenblick halten wir die Sache einfach und gehen wie folgt vor:

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

"mycontext" der Name meines Kontext auf meiner Kontextseite ist.

Fügen Sie nun eine Suchleiste im oberen Bereich des Dashboards hinzu:

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

Nachdem Sie gespeichert und aktualisiert haben, können Sie Ihre Suche starten!

Suchen Sie beispielsweise nach einem "Sportverein" in Südfrankreich:

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

Fügen Sie einige Filter hinzu

Ebenso wie in der Explore-Ansicht ist es interessant, die Suche mit Datensatzfiltern einzuschränken. Das Filter-Widget von ODS nennt sich ods-facets

Der einfachste Weg ist es, alle Facets anzuzeigen:

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

Klüger ist es, nur die benötigten Facets auszuwählen, indem die Feld-ID angegeben wird (nicht der Name!):

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

Hinweis

Um die Feld-ID zu erhalten, müssen Sie das Schema des Datensatzes kennen. Sie finden es im Informations-Tab des Datensatzes. Das Schema des Datensatzes bietet alle Informationen zu allen Feldern: Name, Beschreibung, ID, Typ und ein Wertbeispiel. Es ist oft angebracht, den Typ und die ID jedes Feldes zu kennen, wenn Sie mit erweiterten Widget-Parametern arbeiten.

In diesem Dashboard-Beispiel verwenden wir 2 Filter: den Tätigkeitsbereich der Firma und die Stadt! Fügen Sie diesen Code neben der Suchleiste ein:

Jetzt ist es viel einfacher, nach einem Sportverein in Paris zu suchen!

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

Lernen Sie CSS-Klassen für einfaches responsives Entwickeln kennen

Dieses Dashboard nimmt langsam Form an, doch befinden sich alle Widgets in der gleichen Spalte, eines nach dem anderen und ohne Anpassung des Stils.

Hinweis

An dieser Stelle ist es wichtig, die Möglichkeiten der Plattform in Sachen CSS- und HTML-Stil zu kennen. Bitte lesen Sie aufmerksam die Dokumentation Verwaltung der responsiven Rasteranordnung.

Wir werden den Bildschirm in zwei Hauptbereiche aufteilen: links eine Navigationsleiste und rechts der Hauptinhalt. In der Navigationsleiste befinden sich die Suchleiste und Filter, im Inhalt befinden sich die Tabelle, die Karte und das Diagramm.

Das Ganze sieht so aus:

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

Bootsrap (das Grid-Layout-Tool) unterteilt die Seite in 12 Spalten. Wir verbinden 3 Spalten für die Navigationsleiste und 9 Spalten für den Inhalt. Wir teilen den Bildschirm für Geräte ab mittlerer Größe auf. Die CSS-Klasse ist "col-md-3" und "col-md-9".

In Bezug auf das Tabellen- und Diagramm-Widget unterteilen wir die Fläche in zwei Bereiche gleicher Größe, d. h. jeweils 6 Spalten. Die CSS-Klasse ist "col-md-6"

Ein letztes Detail: um die CSS-Klassen "col-xx-yy" nutzen zu können, müssen sie sich stets in einem Zeilenelement befinden! Deshalb müssen Sie die Zeilen zunächst definieren und anschließend aufteilen!

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

Der HTML-Block sollte dann so aussehen:

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

Nun haben wir ein richtiges Dashboard. Jetzt sollten wir jedem Element noch ein wenig Luft verschaffen, sie hängen alle noch zusammen. Hierbei handelt es sich um einen CSS-Aspekt, und mit den Eigenschaften "margin" und "padding" können wir die Sache erledigen.

Die Plattform bietet außerdem eine CSS-Klasse mit dem Namen "ods-box". Sie verschiebt jedes Element in einen Kasten mit einem dünnen, gerundeten Rand. Wir nutzen sie, um die Navigationsleiste, die Karte, die Tabelle und das Diagramm zu umranden.

Der vollständige HTML-Code ist jetzt:

<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

Ein tieferer Einblick in den "Kontext"

Wir wissen jetzt, dass der Kontext der Schlüssel zwischen allen Widgets und die Verbindung zwischen ihnen und den Daten ist. Manche Widgets nutzen/lesen ihn: Das Widget odsTable nutzt ihn, um Einträge zu erfassen und anzuzeigen. Manche Widgets wenden ihn an/verändern ihn: Das Widget odsTextSearch fragt ihn unter Einsatz einer Suchanfrage oder eines Filter ab. Manche machen beides: Das Widget odsFacets erfasst Filter, zeigt sie an und ermöglicht dann, einen Filter in dem Kontext anzuwenden.

Um einen Schritt weiterzugehen, ist es interessant zu verstehen, wie ein Widget den Kontext verändert und welche Art von Informationen wir von ihm erhalten können.

Hinweis

  • Die Widget-Bibliothek von OpenDataSoft stützt sich auf AngularJS, weshalb wir dessen Syntax verwenden, um den Kontext zu lesen.
    • Der Kontext ist eine AngularJS-Variable.

    • Der Kontext kann wie ein einfaches JSON-Objekt betrachtet werden, mit Klammern, Schlüsselwertlisten usw.

    • Um einen AngularJS-Ausdruck zu evaluieren, verwenden wir diese Syntax: "{{ action1 or variable1 }}"

Und schließlich, um den Kontext zu lesen, fügen Sie einfach diese Codes an einer leeren Stelle ein:

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

Nach dem Speichern und Aktualisieren sollten Sie einen unansehnlichen Json oben auf Ihrer Seite sehen. Mit der Ansicht-Optimierung für die bevorzugte Geräteumgebung (oder unter Einsatz eines JSON Pretty Printers, wie derjenige von CuriousConcept) sollte etwas derartiges herauskommen:

{
   "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
}

Da es sich um ein JSON handelt, können wir mit dem AngularJS-Audruck in seiner Struktur navigieren, um den Wert eines Schlüssels zu erhalten. Um beispielsweise den Datensatz-Titel zu erhalten, wechseln wir vom Kontext zur Liste "Datensatz", dann zu der Liste "Metas", wo wir den Titelwert finden. Gekapselt von einem großen Header (h1 HTML tag), sieht das Ganze so aus:

<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

Nachdem wir jetzt festgestellt haben, was ein Kontext ist, sollten wir einen Blick auf seine Erstellung werfen. Das odsDatasetContext wird verwendet, um einen Kontext zu erstellen, basierend auf einer Datensatz-ID und ggf. anderen Parametern.

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

Wie in der Dokumentation erwähnt, sind 2 Parameter obligatorisch: der Kontextname und die Datensatz-ID. In unserem Fall wurde ein weiterer Parameter kopiert. "mycontext-parameters" wird verwendet, um bestimmte Filter zu definieren oder den Kontext abzufragen. Hier wurden mehrere disjunkte Modi auf "TRUE" für 5 Felder gesetzt und der letzte Parameter ist eine Sortierung für date_d_immatriculation.

Hinweis

Ist der disjunkte Modus für ein Facet-Feld auf "TRUE" gesetzt, wird der Multiple-Choice-Filter-Modus aktiviert. Er bietet dem Nutzer die Möglichkeit, einen Filter anzuwenden und noch immer andere Werte sehen und/oder wählen zu können

Wir werden dieses optionale Attribut entfernen und die Änderungen beobachten.

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

Zunächst den Kontext, wenn wir ihn anzeigen, sehen wir, dass der JSON-Parameterblock jetzt viel kleiner ist:

Fügen Sie Ihrem Code Folgendes hinzu:

{{ entreprisesimmatriculeesen2016.parameters }}

Nachdem Sie gespeichert und aktualisiert haben, sehen Sie sich das Ganze an:

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

Es gibt noch immer einen Sortierparameter, selbst wenn wir ihn aus dem Kontext-Erstellungs-Widget (odsDatasetContext) entfernt haben. Dies liegt an der Sortiereinstellung des Datensatzes in der Tabellenansicht.

Letzter Test: Wenden Sie einen Filter für jedes Facet an und beobachten Sie, wie das Objekt "context.parameters" aktualisiert wird.

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

Hinweis

Beobachten Sie außerdem das "Standardverhalten" der Facets: Wenn Sie einen Wert auswählen, werden alle anderen verborgen.

Fügen Sie einen Eintragszähler und ein Datum der letzten Bearbeitung hinzu

Es ist an der Zeit, weitere interessantere Informationen aus diesem Kontext zu erhalten:

  • die Gesamtanzahl der Einträge

  • die Gesamtzahl der Treffer, die mit der Abfrage und/oder den Filtern übereinstimmen

  • das Datum der letzten Bearbeitung des Datensatzes

{
   "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
}

Anschließend:

  • die Gesamtanzahl der Einträge ist zugänglich über: {{  entreprisesimmatriculeesen2016.dataset.metas.records_count }}

  • die Gesamtanzahl der Treffer: {{  entreprisesimmatriculeesen2016.nhits }}

  • das Datum der letzten Bearbeitung: {{  entreprisesimmatriculeesen2016.dataset.metas.data_processed }}

Abschließend binden wir diese Blöcke in unseren HTML-Code ein, umgeben von HTML- und CSS-Code für ein schönes Rendering.

Einträge und Treffer oben in der Navigationsleiste, das Verarbeitungsdatum unten:

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

Nachdem Sie gespeichert und aktualisiert haben, sehen Sie sich das Ganze an:

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

Das sieht gut aus, aber das Zahlen- und Datumsformat ist etwas zu grell. Um das zu beheben, setzen wir ein reines AngularJS Konzept mit der Bezeichnung Filter ein. Eine vollständige Dokumentation der AngularJS Filter finden Sie hier

Bei einem Filter handelt es sich um eine Funktion oder einen Vorgang, der für eine Variable oder einen Wert in einem AngularJS-Ausdruck angewendet werden kann.

In unserem Fall verwenden wir den Filter "Nummer", um für eine schönere Darstellung numerischer Werte zu sorgen (je nach Land wird alle 3 Ziffern ein Leerzeichen oder ein Komma hinzugefügt) und den Filter "Datum", um das technische ISO-Format in ein lesbares Format zu verwandeln.

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

Hinweis

Um einen Filter "abzurufen", nutzen Sie den senkrechten Strich '|' am Ende des Ausdrucks. Einige Filter akzeptieren spezielle Parameter, Datumsfilter akzeptieren Datumsformate oder -muster. Beispiel: "expr. | date : 'M/d/yy'" "expr. | date : 'medium'"

Nachdem Sie gespeichert und aktualisiert haben, sehen Sie sich das Ganze an:

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

Gehen Sie einen Schritt weiter - AngularJS

Die Richtlinien von AngularJS kennenlernen

Eine AngularJS-Richtlinie kann als HTML-Attribut verstanden werden, das allen HTML-Elementen hinzugefügt werden kann. Viele Richtlinien sind auf der Plattform verfügbar und können verwendet werden, um Dashboards ein dynamisches Verhalten zu verleihen.

Eine Zusammenfassung der am meisten verwendeten Richtlinien:

  • "ng-init": initialisiert eine Variable

  • "ng-click": evaluiert einen Ausdruck, wenn der Benutzer auf das Element klickt

  • "ng-class": wendet eine CSS-Klasse abhängig von einer Variable oder Bedingung an

  • "ng-if": zeigt oder verbirgt ein Element abhängig von einer Bedingung

  • "ng-repeat": iteriert über eine Liste oder einen Array, wiederholt das HTML-Element für jede Iteration

  • "ng-change": evaluiert einen Ausdruck, wenn der Benutzer den Wert in ein HTML Select-Element ändert

ng-if: zeigt oder verbirgt ein Widget abhängig von der Filterauswahl des Benutzers

In unserem Dashboard haben wir das Liniendiagramm für Regionen sowie den Städte-Filter. Wählt der Benutzer eine Stadt für die Filterung aus, wird das Diagramm nutzlos, da es nur einen darzustellenden Wert gibt.

Es könnte interessant sein, das Regionen-Widget zu verbergen, wenn eine Aktivität ausgewählt wurde, und stattdessen ein anderes Diagramm anzuzeigen!

Wechseln wir zurück zur Ansicht zur Untersuchung eines Datensatzes. Öffnen Sie den Analyse-Tab und richten Sie ein neues Diagramm ein, zum Beispiel:

Ein Kreisdiagramm mit der sortierten Anzahl der verzeichneten Unternehmen für jeden Monat des Jahres.
  • X-Achse: Immatrikulationsdatum, Monatsebene

  • Y: Kreisdiagramm, Y-Achse: Zähler

  • Kopieren Sie den Widget-Code und fügen Sie ihn unterhalb des Diagramms ein.

  • Entfernen Sie die eingefügte Kontextdeklaration

  • Ändern Sie den Kontextnamen, der in diesem neuen Diagramm verwendet wird (falls erforderlich).

Jetzt können wir die Richtlinie "ng-if" für jedes Widget verwenden, um das eine oder das andere anzuzeigen.

Die Bedingung lautet "wird eine Verfeinerung im Kontext angewendet" anzeigen oder verbergen. Die Verfeinerungsliste ist unter "context.parameters" verfügbar. Da es sich bei den Parametern um ein Schlüsselwert-Wörterbuch handelt, versuchen wir es mit folgendem Zugriff, um den Verfeinerungsparameter "myfield" zu erhalten: "mycontext.parameters['refine.myfield']"

Angewendet auf unseren Datensatz sieht das Ganze dann so aus:

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

Hinweis

  • Die ng-if-Bedingung (Regionen-Diagramm) kann übersetzt werden in "Diagramm anzeigen, wenn eine Verfeinerung für das Facet ville vorliegt"
    • Mit dem Zeichen "!" kann das Gegenteil erreicht werden, die Bedingung kann übersetzt werden in "Diagramm anzeigen, wenn KEINE Verfeinerung für das Facet ville vorliegt"

    • Um zu verstehen, wie das Ganze funktioniert, können Sie den Wert context.parameters jedes Mal in ihrem Dashboard anzeigen lassen, wenn Sie ihn verwenden!

ng-init / ng-click / ng-if /ng-class: Erstellen Sie Tabs, um Ansichten zu wechseln

Für dieses Beispiel verwenden wir 4 unterschiedliche Richtlinien.

  • ng-init zur Deklaration einer Variable, um nachzuverfolgen, welcher Tab angezeigt wird!

  • ng-if zur Anzeige eines einzigen Tabs zur gleichen Zeit, je nach Wert der Variable

  • ng-click, um den Wert der Variable zu ändern und von einem Tab zum nächsten zu wechseln

  • ng-class, um die Farbe des Tabs zu ändern und anzuzeigen, welcher Tab ausgewählt wurde

Zunächst die HTML-Struktur:

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

Initialisieren Sie eine Variable mit der Bezeichnung "Tab" mit "ng-init":

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

Fügen Sie jeder Tab-Schaltfläche "ng-click" hinzu, um den Wert "Tab" einzurichten:

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

Fügen Sie anschließend in jedem Inhaltsblock eine "ng-if" Bedingung zur Anzeige hinzu:

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

Nachdem Sie gespeichert und aktualisiert haben, sehen Sie sich das Ganze an: Bei einem Klick auf die Tab-Schaltfläche sollte sich der Inhalt jetzt ändern!

Mit ein wenig CSS wird der Stil der Schaltfläche jetzt angepasst: "ods-button ods-button--primary". Außerdem fügen wir eine "items"- sowie eine "item"-Klasse hinzu.

Das Ganze sieht so aus:

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

Fügen Sie Folgendes im CSS-Block hinzu:

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

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

Abschließend möchten wir - immer noch mit CSS - den ausgewählten Tab farblich hervorheben. Wir nutzen ebenfalls eine vordefinierte Schaltfläche: "ods-button--danger" (rot). Diese CSS-Klasse darf nur für eine bestimmte Bedingung mit "ng-class" gesetzt werden. Das Muster ist: "ng-class="{'css-class': variable == value}""

Die HTML sieht dann letztendlich so aus:

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

Nachdem Sie gespeichert und aktualisiert haben, können Sie zwischen den Tabs wechseln!

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

Dann können wir es in unser Dashboard einbinden, um eine zusätzliche Datenvisualisierung zu erzeugen, ohne das Dashboard damit zu überladen (und somit Lade- und Lesezugriffe zu erschweren). Um der Tabelle und dem Diagramm (die zu klein sind) Platz zu verschaffen, werden wir sie in einen Tab aufnehmen. Außerdem fügen wir ein drittes Diagramm auf Grundlage einer anderen Achse (z. B. Datum) hinzu. Die zweite Zeile wird zur tabellierten Zeile und jedes Widget (Tabelle, Diagramme) wird zum Inhalt der einzelnen Tabs.

Der Hauptinhalt sieht dann so aus:

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

um die Tab-Schaltfläche zu zentrieren, bearbeiten Sie den CSS-Code mit:

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

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

Anschließend brauchen Sie nur noch zu speichern und zu aktualisieren:

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