diff --git a/Projektarbeit-3/Umsetzung.md b/Projektarbeit-3/Umsetzung.md index e55687f..e7c2dbb 100644 --- a/Projektarbeit-3/Umsetzung.md +++ b/Projektarbeit-3/Umsetzung.md @@ -582,7 +582,68 @@ selectRow(selection: MatCheckboxChange, row): void { ``` Es wird, egal in welcher Tabelle eine Checkbox gedrückt wird, überprüft ob in der anderen Tabelle auch eine Station mit gleicher ID vorhanden ist. Ist dies der Fall, wird diese auch ausgewählt. Aus dem `SelectionModel` werden alle ausgewählten Stationen gefiltert und an die Map für die Marker Generierung weitergereicht. Davor wird allerdings noch mit `changePolyLineColorForDuplicateBikePoints` geprüft, ob Duplikate in der Liste vorhanden sind. Ist dem so, so wird die Polyline Farbe auf Blau gesetzt um Station, die in beiden Tabellen vorkommen noch einmal extra zu visualisieren. +### Rent Duration +In dieser Komponente wird das Chart für die durchschnittliche Ausleihdauer angezeigt. Dabei ist es wichtig, die richtigen Optionen von ApexCharts zu verwenden. Wenn das Dashboard geladen wird, wird jede Visualisierung mit den letztmöglichen Datum geladen. Beim ersten Aufruf des Charts müssen die Chartoptionen vollends angegeben werden. Wird dann vom User eine neue Zeitspanne angegeben, wird lediglich der Datensatz aktualisiert. +Vom Backend erhalten wir folgende Daten: + +
+ +
+ +Wir erhalten also ein Array mit der Anzahl der Fahrten für die jeweilige Zeitspanne. Also setzen wir in den ChartOptions diese entsprechend. + + + + + + + + + + +
HTMLTS
+ +```html + +``` + + + +```typescript +this.chartOptions = { + series: [ + { + name: 'amount of drives', + data: source.map(value => value.number) + } + ], + ... + xaxis: { + title: { + text: 'average rental duration' + }, + categories: source.map(value => value.minutesGroup), + labels: { + formatter: value => { + return value + ' min'; + } + } + }, +``` + +
# Deployment Da es sich um ein Web-Projekt handelt, lag die Idee nahe, es auf einem Server in der Cloud zu deployen. Wir haben uns hierbei für den Anbieter [Hetzner](https://hetzner.cloud) entschieden. Dort läuft ein Ubuntu 20.04 Server mit zwei CPU Kernen und 2 Gigabyte Arbeitsspeicher. Dies ist vollkommen ausreichend für dieses Projekt. In der Serverkonsole kann man CPU, Festplatte und Netzwerk beobachten.