Metriken/KPI und Datentabellen

Diagramme, Karten, Tabellen und Kalender sind Standardansichten. In der Dokumentation warten zahlreiche weitere Parameter auf Sie. Bis dahin sind mehrere andere Widgets ebenso wichtig wie die Hauptwidgets.

Bitte sehen Sie sich die Widget-List an, wenn Sie weitere Informationen benötigen.

Datensatz aufnehmen

Um Metriken, KPI, fortgeschrittene Karten-Tooltipps uvm. zu illustrieren, nutzen wir einen Datensatz, der sämtliche egelmäßigkeitsberichte der Französischen Bahn seit 2011 erfasst. Dieser Datensatz enthält für jede TGV (Hochgeschwindigkeitszug)-Verbindung (100 Verbindungen) die Anzahl der fahrplanmäßigen Züge pro Monat, die Anzahl der Züge, die den Bahnhof nicht verlassen haben und die Anzahl der verspäteten Züge.

Datensatz-ID: regularite-mensuelle-tgv Sie können danach suchen auf data.opendatasoft.com Fügen Sie dann diesen Datensatz Ihrer Domain hinzu (Neuer Datensatz, Quelle aus dem Opendatasoft Netzwerk hinzufügen, Datensatz aufnehmen, speichern, veröffentlichen)

KPIs erstellen

Zum Erstellen von Metriken/KPIs nutzen wir odsAggregation, um die Summe, den Durchschnitt, das Min. und das Max. eines Datenfelds zu berechnen. Je nach Kontext führt die Metrik für alles entlang der Benutzernavigation (Anfragen, Filter) ein dynamisches Update durch.

Lassen Sie uns ausgehend von einer neuen Seite einen Kontext aus diesem Datensatz holen. Die einfachste Methode besteht darin, auf Durchsuchen/Katalogseite zu gehen, dann auf den Datensatz, danach in die Tabellenansicht und den Widget-Code aus den unten stehenden Teilen-Links zu kopieren und einzufügen:

<ods-dataset-context
        context="regularitemensuelletgv"
        regularitemensuelletgv-dataset="regularite-mensuelle-tgv">

        <ods-table context="regularitemensuelletgv"></ods-table>

</ods-dataset-context>

Oben in der Tabellenansicht fügen wir einen Zähler hinzu, der auf dem Feld nombre_de_trains_programmes basiert (Anzahl der fahrplanmäßigen Züge). Lassen Sie uns beispielsweise die Anzahl der fahrplanmäßigen Züge seit 2011 in Frankreich abfragen.

Mit odsAggregation lauten die Parameter:
  • der Name der Variablen, die das Aggregationsergebnis speichert

  • der Kontext, an dem zu arbeiten ist

  • die Funktion

  • der Ausdruck (der Name des Feldes)

Mit einem "Nummer"-Filter, um es korrekt in einem HTML "Span" anzuzeigen, müssten Sie ungefähr folgendes Ergebnis erhalten:

<div class="container">

    <ods-dataset-context
                         context="regularitemensuelletgv"
                         regularitemensuelletgv-dataset="regularite-mensuelle-tgv">

        <div ods-aggregation="myvar"
             ods-aggregation-context="regularitemensuelletgv"
             ods-aggregation-function="SUM"
             ods-aggregation-expression="nombre_de_trains_programmes">

                <span>Scheduled train : {{ myvar | number }}</span>

        </div>

        <br/>

        <ods-table context="regularitemensuelletgv"></ods-table>

    </ods-dataset-context>

</div>

Es zeigt eine Zahl (circa 1,7 Millionen) am Anfang der Seite an, die bereits etwas CSS benötigt, um hervorgehoben zu werden. Die Metriken sind oft abgerundet in einer Box, mit großer Schriftgröße und gewichtigem Schriftschnitt.

Fügen Sie Ihrer Seite folgenden CSS-Code hinzu:

.kpi {
    padding: 2px 30px; /* Give some air to the digits */
    border: 1.5px solid #010201; /* the border */
    border-radius: 5px; /* rounded corners */
    font-size: 2em; /* bigger font */
    font-weight: 500; /* thicker font */
    margin: 10px 5px; /* give some air around the KPI */
}

Und fügen Sie Ihrem "Span"-Tag die Klasse "KPI" hinzu.

Speichern und aktualisieren Sie, Sie werden sehen, dass es schon ein bisschen besser ist.

Lassen Sie uns 2 weitere Metriken hinzufügen, bevor es mit CSS und insbesondere mit dem responsiven Code weitergeht: Anzahl der gestrichenen Züge (nombre_de_trains_annules) und Anzahl der verspäteten Züge (nombre_de_trains_en_retard_a_l_arrivee)

<div ods-aggregation="myvar"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_programmes">
        <span class="kpi">Scheduled train : {{ myvar | number }}</span>
</div>

<br/>

<div ods-aggregation="myvar"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_annules">
        <span class="kpi">Canceled train : {{ myvar | number }}</span>
</div>

<br/>

<div ods-aggregation="myvar"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">
        <span class="kpi">Delayed train : {{ myvar | number }}</span>
</div>

<br/>

<ods-table context="regularitemensuelletgv"></ods-table>

Ergebnis:

../../../_images/advanced__kpi-1.png

Es funktioniert, alle Metriken sind jedoch unabhängig. Wir können Filter hinzufügen, damit sie dynamisch werden, je nach Benutzerfiltern etc. Wir können jedoch nichts mit ihnen berechnen. Es wäre z. B. interessant, den Prozentsatz der gestrichenen oder verspäteten Züge im Vergleich zur Gesamtzahl zu erhalten.

Dazu müssen Sie ods-aggregation mit verschiedenen Variablennamen verketten.

Das muss so aussehen:

    <div ods-aggregation="total"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_programmes">
    <div ods-aggregation="canceled"
         ods-aggregation-context="regularitemensuelletgv"
         ods-aggregation-function="SUM"
         ods-aggregation-expression="nombre_de_trains_annules">
        <div ods-aggregation="delayed"
             ods-aggregation-context="regularitemensuelletgv"
             ods-aggregation-function="SUM"
             ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">

                <span class="kpi">Scheduled : {{ total | number }}</span>
                <span class="kpi">Canceled : {{ canceled | number }}</span>
                <span class="kpi">Delayed : {{ delayed | number }}</span>
        </div>
    </div>
</div>

Jetzt können mit dem AngularJS Ausdruck Prozentsätze zwischen allen Werten berechnet werden:

<span class="kpi">Scheduled : {{ total | number }}</span>
<span class="kpi">Canceled : {{ canceled | number }}</span>
<span class="kpi">Delayed : {{ delayed | number }}</span>
<span class="kpi">% Canceled : {{ canceled / total * 100 | number : 2 }}%</span>
<span class="kpi">% Delayed : {{ delayed / total * 100 | number : 2 }}%</span>

Hinweis

| Anzahl: 2 ist der AngularJS Filter für eine schönere Darstellung numerischer Werte. Der optionale Parameter 2 dient zur Begrenzung auf 2 Dezimalstellen.

Lassen Sie uns, bevor wir weitergehen, den HTML-Code aufräumen, um CSS für die responsive Anzeige, unterschiedliche Schriftgrößen zwischen dem Titel und dem Wert etc. anzuwenden:

<div class="row">
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                Scheduled
            </div>
            <div class="kpi-value">
                {{ total | number }}
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                Canceled
            </div>
            <div class="kpi-value">
                {{ canceled | number }}
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                Delayed
            </div>
            <div class="kpi-value">
                {{ delayed | number }}
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                % Canceled
            </div>
            <div class="kpi-value">
                {{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                % Delayed

            </div>
            <div class="kpi-value">
                {{ delayed / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">

            <div class="kpi-title">
                On time
            </div>
            <div class="kpi-value">
                {{ total - delayed - canceled | number }}
            </div>
        </div>
    </div>
</div>

Und den CSS ersetzen:

.kpis {
    display: inline-flex;
}

.kpi {
    text-align: center;

    padding: 5px 0px;
    margin-bottom: 10px;
    height: 70px;

    border: 1.5px solid #010201; /* the border */
    border-radius: 5px; /* rounded corners */
}

.kpi-title {
    font-size: 1em; /* bigger font */
    font-weight: 400; /* thicker font */
}

.kpi-value {
    font-size: 2em; /* bigger font */
    font-weight: 500; /* thicker font */
}

.kpi-value-unit {
    font-size: 1.5rem; /* bigger font */
    font-weight: 400; /* thicker font */
}

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

../../../_images/advanced__kpi-2.png

Verleihen Sie Ihren KPI Farbe - ng-class

Die ng-class Richtlinie ist sehr praktisch, wenn ein HTML-Element entworfen werden muss, das von einem Wert, dem Kontext, einem Ausdruck oder allen anderen dynamischen Dingen, die im AngularJS Ausdruck verwendet werden, abhängt.

Um beispielsweise einen Schwellenwert in unserer Metrik zu definieren, grün, wenn der Prozentsatz der gestrichenen Züge unter 0,20 liegt, und rot, wenn er darüber liegt, können Sie Ihrem Element Folgendes hinzufügen:

<div class="col-md-2 col-sm-3 col-xs-4">
    <div class="kpi" ng-class="{'good' : canceled / total * 100 < 0.2, 'bad' : canceled / total * 100 >= 0.2}">
        <div class="kpi-title">
            % Canceled
        </div>
        <div class="kpi-value">
            {{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
        </div>
    </div>
</div>

Und diesen CSS:

.good {
    color: #55cd61;
    border-color: #55cd61;
}

.medium {
    color: #ff9c22;
    border-color: #ff9c22;
}

.bad {
    color: #e50000;
    border-color: #e50000;
}

Nachdem Sie gespeichert und aktualisiert haben, sehen Sie, dass unsere Metrik nun rot ist (die 'falsche' CSS-Klasse wird verwendet)

Lassen Sie uns, um das dynamische Verhalten klar zu erkennen, ein paar Filter auf der linken Tabellenseite (in der zweiten Zeile) hinzufügen. Dazu:
  • ein div` der row Klasse hinzufügen, um die Tabelle zu umgeben

  • ein div dem col-md-9 rund um die Tabelle hinzufügen

  • ein ods-facets Widget mit 2 ods-facet für die Filter date und depart hinzufügen

  • ods-facets mit einem div, gestaltet mit col-md-3, hinzufügen

  • optional ein paar ods-box hinzufügen, gestaltet mit div, um die Blöcke mit einem weißen Hintergrund zu umranden

Das sollte so aussehen:

<div class="row">
    <div class="col-md-3">
        <div class="ods-box">
            <ods-facets context="regularitemensuelletgv">
                <h2>
                    Date
                </h2>
                <ods-facet name="date"></ods-facet>
                <h2>
                    Origin station
                </h2>
                <ods-facet name="depart"></ods-facet>
            </ods-facets>
        </div>
    </div>
    <div class="col-md-9">
        <div class="ods-box">
            <ods-table context="regularitemensuelletgv"></ods-table>
        </div>
    </div>
</div>

Nachdem Sie gespeichert und aktualisiert haben, sehen Sie, wie es sich verhält, wenn Filter ausgesucht werden. 2013 wurden im Pariser Ostbahnhof weniger als 0,20% Züge gestrichen. Sehen Sie sich das an.

../../../_images/advanced__kpi-ngclass-1.png ../../../_images/advanced__kpi-ngclass-2.png

Hinweis

Die `ng-class` Syntax ist in Klammern eingeschlossen, die CSS-Klasse in Anführungszeichen, gefolgt von : und dem AngularJS Ausdruck:
{ 'CSS class' : AngularJS expression, ... }

Es können mehrere Klassen und Ausdrücke angegeben werden. Sämtliche Ausdrücke werden von links nach rechts getestet.

Vergleich mit Filtern: Hervorhebung von Unterschieden mit Farben

Es ist interessant, den gesamten Datensatz mit einer gefilterten Ansicht durch den Benutzer zu vergleichen und zu sehen, ob die Metriken (insbesondere die Prozentsätze) anders, größer oder kleiner sind.

Zu dem Plan gehört es, 2 Kontexte zu haben, einen, der den gesamten Datensatz darstellt, und einen, der vom Benutzer gefiltert werden kann. Nach dem Anwenden des Filters wird die Metrik, je nachdem, ob sie größer oder kleiner als die Metrik des Gesamtdatensatzes ist, durch eine bestimmte Farbe hervorgehoben.

Dazu brauchen Sie:
  • einen zweiten Kontext

  • Die Plugs ods-facets und ods-table in diesem sekundären Kontext

  • berechnen Sie dieselben Metriken für beide Kontexte

  • fügen Sie die zweite Metrik hinzu, WENN und NUR WENN ein Filter ausgewählt wurde

  • Konfigurieren Sie die ng-class, um die gesamte mit der gefilterten Metrik zu vergleichen

Los geht's.

Zwei Kontexte, ein Datensatz:

<ods-dataset-context
                     context="regularitemensuelletgv,regularitemensuelletgvfiltered"
                     regularitemensuelletgv-dataset="regularite-mensuelle-tgv"
                     regularitemensuelletgvfiltered-dataset="regularite-mensuelle-tgv">

Metriken in ganzen Blöcken sollten jetzt so aussehen:

<div ods-aggregation="total"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_programmes">
    <div ods-aggregation="canceled"
         ods-aggregation-context="regularitemensuelletgv"
         ods-aggregation-function="SUM"
         ods-aggregation-expression="nombre_de_trains_annules">
        <div ods-aggregation="delayed"
             ods-aggregation-context="regularitemensuelletgv"
             ods-aggregation-function="SUM"
             ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">

            <div ods-aggregation="totalfiltered"
                 ods-aggregation-context="regularitemensuelletgvfiltered"
                 ods-aggregation-function="SUM"
                 ods-aggregation-expression="nombre_de_trains_programmes">
                <div ods-aggregation="canceledfiltered"
                     ods-aggregation-context="regularitemensuelletgvfiltered"
                     ods-aggregation-function="SUM"
                     ods-aggregation-expression="nombre_de_trains_annules">
                    <div ods-aggregation="delayedfiltered"
                         ods-aggregation-context="regularitemensuelletgvfiltered"
                         ods-aggregation-function="SUM"
                         ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">

                        <div class="row">
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        Scheduled
                                    </div>
                                    <div class="kpi-value">
                                        {{ totalfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ total | number }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        Canceled
                                    </div>
                                    <div class="kpi-value">
                                        {{ canceledfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ canceled | number }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        Delayed
                                    </div>
                                    <div class="kpi-value">
                                        {{ delayedfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ delayed | number }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        % Canceled
                                    </div>
                                    <div class="kpi-value">
                                        {{ canceledfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        % Delayed

                                    </div>
                                    <div class="kpi-value">
                                        {{ delayedfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ delayed / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        On time
                                    </div>
                                    <div class="kpi-value">
                                        {{ totalfiltered - delayedfiltered - canceledfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ total - delayed - canceled | number }})
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS anpassen durch Updaten oder Hinzufügen folgender Klassen:

.kpi {
    height: 90px;
    /* ... */
}

.kpi-value-reference {
    font-size: 1em; /* bigger font */
    font-weight: 400; /* thicker font */
}

.kpi-value-unit {
    font-size: 0.7em; /* bigger font */
    /* ... */
}

Lassen Sie uns abschließend % verspätete und % gestrichene Metriken farblich absetzen. Wenn das gefilterte Ergebnis größer als der Gesamtdurchschnitt ist, zeigen Sie es in rot an, wenn es kleiner (besser) ist, zeigen Sie es in grün an.

<div class="col-md-2 col-sm-3 col-xs-4">
    <div class="kpi" ng-class="{
                               'good': (canceledfiltered / totalfiltered * 100) < (canceled / total * 100),
                               'bad': (canceledfiltered / totalfiltered * 100) > (canceled / total * 100),
                               }">
        <div class="kpi-title">
            % Canceled
        </div>
        <div class="kpi-value">
            {{ canceledfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
        </div>
        <div class="kpi-value-reference">
            ({{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
        </div>
    </div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
    <div class="kpi" ng-class="{
                               'good': (delayedfiltered / totalfiltered * 100) < (delayed / total * 100),
                               'bad': (delayedfiltered / totalfiltered * 100) > (delayed / total * 100),
                               }">
        <div class="kpi-title">
            % Delayed

        </div>
        <div class="kpi-value">
            {{ delayedfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
        </div>
        <div class="kpi-value-reference">
            ({{ delayed / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
        </div>
    </div>
</div>

Nachdem Sie gespeichert und aktualisiert haben, testen Sie das Jahr 2015:

../../../_images/advanced__kpi-ngclass-3.png

Erstellen einer Datentabelle

odsAnalysis holt sich die Analyse einer oder mehrerer Aggregationen für jeden Wert eines Feldes. Sie kann genau wie ein Diagramm angesehen werden, doch anstatt Kurven, Spalten oder Torten anzuzeigen, gibt odsAnalysis alle Werte zurück, und Sie können sie in einer Tabelle oder einem anderen Ausdruck anzeigen.

Zunächst testen wir das Ergebnis durch Einrichten der korrekten Analyse im Analyse-Register des Datensatzes. Es könnte beispielsweise interessant sein, eine Tabelle der Top 10 der regelmäßigsten Bahnhöfe anzuzeigen. Dafür:

  • X-Achse : "départ" (Abfahrtsbahnhof)
    • 4 Serien: - AVG Regelmäßigkeit (Régularité) - AVG Anzahl der fahrplanmäßigen Züge (nombre_de_trains_programmes) - AVG Anzahl der gestrichenen Züge (nombre_de_trains_annules) - AVG Anzahl der verspäteten Züge (nombre_de_trains_en_retard_a_l_arrivee)

  • Nach der Regelmäßigkeitsserie sortieren

  • Punktanzahl: max. 10

../../../_images/advanced__data-table-1.png

Ziel ist es, diese genaue Analyse mit odsAnalysis wiederzugeben. Bitte lesen Sie zur Erinnerung folgende Dokumentation hier

odsAnalysis Parameter:
  • ods-analysis: der Name der Variablen

  • ods-analysis-context : der Kontext, an dem zu arbeiten ist

  • ods-analysis-max : max. 10 Elemente

  • ods-analysis-x : das Feld, an dem zu arbeiten ist (jede Aggregation wird für jeden Wert dieses Feldes berechnet)

  • ods-analysis-serie-xxx : definieren Sie eine Serie mit dem Namen xxx, die auf einem Ausdruck (dem Feld) und einer Funktion basiert (AVG, MAX, MIN, SUM etc.)

  • ods-analysis-sort : Sortieren Sie eine Serie, indem Sie den Namen angeben bzw. den Namen für eine umgekehrte Sortierung angeben

Bevor Sie mit dem Code (HTML) fortfahren, sehen Sie sich das in die Variable gespeicherte Ergebnis an:

<div class="row">
    <div ods-analysis="results"
         ods-analysis-context="regularitemensuelletgvfiltered"
         ods-analysis-max="10"
         ods-analysis-x="depart"
         ods-analysis-serie-regularity="AVG(regularite)"
         ods-analysis-serie-scheduled="AVG(nombre_de_trains_programmes)"
         ods-analysis-serie-canceled="AVG(nombre_de_trains_annules)"
         ods-analysis-serie-delayed="AVG(nombre_de_trains_en_retard_a_l_arrivee)"
         ods-analysis-sort="regularity"
         >
        {{ results }}
    </div>
</div>

Pretty Print des JSON-Blocks:

{
   "results":[
      {
         "scheduled":97.37288135593221,
         "canceled":0.2033898305084746,
         "regularity":94.60508474576272,
         "delayed":5.288135593220339,
         "x":"ST MALO"
      },
      {
         "scheduled":283.728813559322,
         "canceled":1.2203389830508475,
         "regularity":94.28813559322033,
         "delayed":16.135593220338983,
         "x":"NANCY"
      },
      {
         "scheduled":160.64406779661016,
         "canceled":0.559322033898305,
         "regularity":92.61186440677963,
         "delayed":11.677966101694915,
         "x":"QUIMPER"
      }
   ]
}

Wir haben nun eine Ergebnis-JSON-Liste, jeder Block hat einen x-Wert, den Abfahrtsbahnhof und 4 Aggregationen/Werte, die zu unseren Serien passen. Mit der AngularJS-Richtlinie ng-repeat kann die "Ergebnis"-Liste abgelaufen werden. Für jedes Element drucken wir eine neue Zeile in der Tabelle.

<div ods-analysis="tgvanalysis"
     ods-analysis-context="regularitemensuelletgvfiltered"
     ods-analysis-max="10"
     ods-analysis-x="depart"
     ods-analysis-serie-regularity="AVG(regularite)"
     ods-analysis-serie-scheduled="AVG(nombre_de_trains_programmes)"
     ods-analysis-serie-canceled="AVG(nombre_de_trains_annules)"
     ods-analysis-serie-delayed="AVG(nombre_de_trains_en_retard_a_l_arrivee)"
     ods-analysis-sort="regularity"
     >
    <table id="top10">
        <thead>
            <tr>
                <td>Position</td>
                <td>Train station</td>
                <td>Regularity</td>
                <td>Scheduled</td>
                <td>Canceled</td>
                <td>Delayed</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(i, result) in tgvanalysis.results">
                <td>
                    {{ i + 1 }}
                </td>
                <td>
                    {{ result.x }}
                </td>
                <td>
                    {{ result.regularity | number : 2 }}
                </td>
                <td>
                    {{ result.scheduled | number : 2 }}
                </td>
                <td>
                    {{ result.canceled | number : 2 }}
                </td>
                <td>
                    {{ result.delayed | number : 2 }}
                </td>
            </tr>
        </tbody>
    </table>
</div>

Ein bisschen CSS, um die HTML-Tabelle schön zu gestalten:

#top10 {
    margin: 20px auto;
}

#top10 thead > tr {
    background-color: #007396;
    color: white;
}

#top10 td {
    min-width: 100px;
    padding: 3px 10px;
    text-align: center;
}

#top10 tr:nth-child(even) {
    background-color: #ededed;
}

#top10 tr:hover{
    background-color:#ccc;
}

Nachdem Sie gespeichert und aktualisiert haben, lassen Sie die Filter durchlaufen:

../../../_images/advanced__data-table-2.png