Die Entwicklung der Übe-Session-Statistik hat mir besonders Spass gemacht, auch wenn einige grosse Herausforderungen bezwungen werden mussten. Soviel vorweg: Ich will ein Diagramm darstellen, obwohl Nativescript diese Funktion nicht unterstützt. Plugins? Ja, habe eines gefunden, war aber leider nur für iOS verfügbar. Daher dieser Blogpost, der aufklärt, wie ich trotz schlechter Vorraussetzungen Diagramme in meiner App darstellen kann.

Im letzen Blogpost habe ich den Übezeit-Tracker vorgestellt. Dieser speichert Übesessionen (Übezeit, geübte Stücke, Bewertungswerte von User) in Firebase ab. Nun kommt die Übe-Session-Statistik ins Spiel, welche die gespeicherten Daten auswertet und in einem Diagramm für den User darstellt.

Die Komponente besteht zum einen aus einer ListView, welche die einzelnen Übesessionen in einer Liste anzeigt. Ausserdem beinhaltet die Komponente ein Balken-Diagramm, welches die Übezeit der Sessionen als Wochenübersicht anzeigt. Das besondere an dem Diagramm ist, dass ich jedes einzelne Bestandteil selbst programmiert habe, da Nativescript keine Unterstützung für Diagramme bietet und (derzeit) auch keine Plugins für Android angeboten werden.

Wie bei jeder Komponente, bzw. Funktion habe ich erst ein Konzept ausgearbeitet, welches ich dann durch die Programmierung umzusetzen versuche. Mein Ziel: Ein dynamisches Wochen Diagramm, welches die tägliche Übezeit in angemessener Skalierung darstellt.

Diagramm-Engine

Das Diagramm basiert auf dem GridLayout, welches Nativescript anbietet. Es erlaubt mir einen Raster aus Containern zu erstellen: 8 Spalten (7 Tage + 1 Legende) und 2 Zeilen (1 Woche & 1 Legende).

Mit Angulars *ngFor generiere ich 7 StackLayout Container, welche die Höhe der prozentualen Übezeit des jeweiligen Tages einnehmen. Hinter der Berechnung der Höhe steckt ein relativ komplexer Abgleichungs- und Rundungsprozess (Github-Code: Zeile 110 – 223). Vereinfacht gesagt lade ich alle Übesessions der anzuzeigenden Woche in einen Array. Beim Laden dieser Werte ermittle ich den höchsten Übezeit-Wert. Dieser wird ausschlaggebend für die maximale Höhe sein. Die Legende wird durch mehrfaches Runden der Werte ermittelt. Ausserdem prüft der Code, ob es sinnvoll ist eine Skalierung in Stunden zu anzuzeigen, falls nicht werden Minuten verwendet. Danach werden die Übezeit-Werte des Arrays (der Woche) skaliert, gerundet und an die finale Maximal-Höhe angepasst.

Klingt das noch zu simpel? 😉

Dann stelle ich eine Frage: Was, wenn an einem Tag mehrmals geübt wurde? Da den Übesessionen ein Key als Bezeichnung in Firebase zugewiesen wird, kann ich beim Laden der Firebasedaten nicht direkt wissen, zu welchem Datum die Übesession gehört.  Glücklicherweise erfolgt das Laden der einzelnen Übesessionen chronologisch. Bei der Identifizierung und Zuweisung der Übesession-Datumsangaben prüfe ich daher ob die vorhergegangene Session das selbe Datum besitzt wie die jetzige. Ist dem so, wird die Übezeit beider Sessionen für den Graphen addiert.

Des Weiteren kann man per Swipe (Wischen) nach links und rechts die Wochenauswahl ändern und so in die vergangenen Wochen blicken. Bei jedem Wischen werden die Balken neu gerendert. Ausserdem erhält der User eine Angabe über die aktuelle Woche (z.B. „10.04.17 – 17.04.17“) zur Orientierung.

Ich bin äusserst zufrieden und stolz auf diese „Diagramm-Engine“. Die Session-Liste werde ich in einem zukünftigen Update wohl noch minimal verbessern (Layout-Anpassungen, besseres Sortieren und Darstellen der Listeneinträge).

Die Maturaarbeit neigt sich langsam aber sicher dem Ende zu. Als nächstes werde ich den Audio-Rekorder und Analyzer vorstellen. Ausserdem gibt es Neuigkeiten zum Design (wie man bereits aus einigen Screenshots entnehmen konnte) und App-Release.