Update Umsetzung
parent
15150d4ed8
commit
36cb47bdac
@ -370,7 +370,7 @@ for (const accident of data) {
|
|||||||
}
|
}
|
||||||
const accidentLayer = L.layerGroup(accidents);
|
const accidentLayer = L.layerGroup(accidents);
|
||||||
```
|
```
|
||||||
Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Orange und Rot.
|
Wir iterieren durch den API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Orange und Rot.
|
||||||
|
|
||||||
Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ `Circle`. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben an- und abwählen.
|
Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ `Circle`. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben an- und abwählen.
|
||||||
|
|
||||||
@ -512,7 +512,7 @@ this.interval = setInterval(() => {
|
|||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
Ist der Auto-Refresh aktiv, wird alle 10 Sekunden eine Methode im Map Service aufgerufen, welche das Backend für neue Informationen anspricht und alle Layer neu generiert.
|
Ist der Auto-Refresh aktiv, wird alle 10 Sekunden eine Methode im `MapService` aufgerufen, welche das Backend für neue Informationen anspricht und alle Layer neu generiert.
|
||||||
|
|
||||||
### Dashboard
|
### Dashboard
|
||||||
Das Dashboard selbst ist wieder in einzelne Unterkomponenten gegliedert. Dies sieht folgendermaßen aus:
|
Das Dashboard selbst ist wieder in einzelne Unterkomponenten gegliedert. Dies sieht folgendermaßen aus:
|
||||||
@ -549,7 +549,7 @@ Besonderheit unserer Herangehensweise ist, dass wir alle Visualisierungen aufbau
|
|||||||
### Table
|
### Table
|
||||||
Die zwei Tabellen haben bei der Implementierung die größte Aufmerksamkeit genossen. Da wir die Interaktion mit der Mini-Map als Must-have angesehen haben, ist hier auch sehr viel Fleiß in den Aufbau und die Generierung der Marker auf der Mini-Map geflossen.
|
Die zwei Tabellen haben bei der Implementierung die größte Aufmerksamkeit genossen. Da wir die Interaktion mit der Mini-Map als Must-have angesehen haben, ist hier auch sehr viel Fleiß in den Aufbau und die Generierung der Marker auf der Mini-Map geflossen.
|
||||||
|
|
||||||
Folgender schematischer Ablauf liegt der TableComponent zugrunde:
|
Folgender schematischer Ablauf liegt der `TableComponent` zugrunde:
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<img src="uploads/69a7b928dde0ae76403687209136e0d5/image.png"/>
|
<img src="uploads/69a7b928dde0ae76403687209136e0d5/image.png"/>
|
||||||
@ -588,7 +588,7 @@ Vom Backend erhalten wir folgende Daten:
|
|||||||
<img src="uploads/6c157d203af52da3779bc2a507ca2293/image.png"/>
|
<img src="uploads/6c157d203af52da3779bc2a507ca2293/image.png"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Wir erhalten also ein Array mit der Anzahl der Fahrten für die jeweilige Zeitspanne. Also setzen wir in den ChartOptions diese entsprechend.
|
Wir erhalten also ein Array mit der Anzahl der Fahrten für die jeweilige Zeitspanne. Also setzen wir in den `ChartOptions` diese entsprechend.
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
@ -665,7 +665,7 @@ async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
|
|||||||
Die Variable `isLoading` ist nötig, sodass der Progress Spinner während des Ladens angezeigt wird.
|
Die Variable `isLoading` ist nötig, sodass der Progress Spinner während des Ladens angezeigt wird.
|
||||||
|
|
||||||
### Rent Time
|
### Rent Time
|
||||||
Diese Komponente unterscheidet sich programmatisch nicht von der RentDurationChartComponent. In den ChartOptions werden hier lediglich andere Parameter gesetzt, natürlich entsprechend dem Datenmodell.
|
Diese Komponente unterscheidet sich programmatisch nicht von der `RentDurationChartComponent`. In den `ChartOptions` werden hier lediglich andere Parameter gesetzt, natürlich entsprechend dem Datenmodell.
|
||||||
|
|
||||||
Folgende Daten erhalten wir aus dem Backend:
|
Folgende Daten erhalten wir aus dem Backend:
|
||||||
|
|
||||||
@ -673,7 +673,7 @@ Folgende Daten erhalten wir aus dem Backend:
|
|||||||
<img src="uploads/21650291359283db5274f1307f29008f/image.png"/>
|
<img src="uploads/21650291359283db5274f1307f29008f/image.png"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Diese werden dann wie folgt in den ChartOptions eingebunden:
|
Diese werden dann wie folgt in den `ChartOptions` eingebunden:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
Loading…
Reference in New Issue
Block a user