• D3
• Leaflet (und react-leaflet)
• React

graph TB
Leaflet>Leaflet, react-leaflet] -.-> Map
React>React] -.-> Förderband
data{dataProvider} -.-> ChartContainer
d3 -. zum Updaten .-> Chart
d3>D3] -. nur Berechnungen .-> ChartContainer
Förderband --> ChartContainer
Förderband --> Control
Förderband --> Map
ChartContainer --> ChardCard
ChartContainer --> Legende
ChardCard --> Chart
Legende --> LegendColumn
Control --> WstControl
WstControl --> Checkable

Die drei großen Komponenten Contol, Map und ChartContainer kommunizieren über Ihr Parent Förderband miteinander.
Das Herzstück des Programms ist allerdings die ChartContainer Komponente selbst. Hier werden aufgrund von Informationen aus den anderen Komponenten sämtliche Benötigten Daten angefragt, die dann über den DataProvider asynchron geladen werden.
Die Daten werden hier aber nicht nur geladen, sondern auch mithilfe der D3-Funktionen für die Anwendung im Chart aufbereitet und weiterverarbeitet.
Im Anschluss werden die jetzt fertigen Pfad-Strings sowie Daten für die Achsen und Zoom über die jeweilige ChartChart and ein Chart weitergeleitet. Dort werden die Pfade dann mit React gerendered und Achsen über D3 Aktualisiert.

• Dient als Kommunikationsknoten zwischen den Childs
• Gibt grobes Layout der Seite vor

• Visuelle Darstellung aller Sensoren und Messgeräte (im folgenden allgemein als Sensoren)
• alle Sensoren sind als Marker auf der Map und anklickbar, was sie Aktiviert / deaktiviert
• der jeweilige Status wird dann an den ChartContainer weitergegeben
• verschiedene Ansichten in Form von BaseLayern
• Sensoren sind farblich kategorisiert und einzeln zu und wegschaltbar
• Props
  • loadingFlag: Blockiert Interaktionen während Daten geladen werden
  • update: Funktion aus Förderband um Daten an Parent weiterleiten zu können

• Kontrollpanel für Werstückträgereinstellungen
• 3 Views zwischen welchen man wechseln kann
  • Alle (Sensorendaten werden immer mit allen WST angezeigt)
  • Einzelansicht (Auswahl auf genau 1 WST bechränkt)
  • Mehrfachansicht (beliebig viele WST wählbar)
• jeweilige Angaben werden an ChartContainer weitergegeben
• Props
  • loadingFlag: Blockiert Interaktionen während Daten geladen werden
  • update: Funktion aus Förderband um Daten an Parent weiterleiten zu können

• initialisiert Benötigte D3-Handler und Variablen
• bekommt relevante Auswahlen des Nutzers
• Fragt anhand dieser Daten Sensordaten beim DataProvider an
  • Daten werden einzeln geladen
  • Daten werden asychron geladen
  • im Callback werden die Daten für das jeweilige Chart sortiert
  • im Callback werden sämtliche Datenberechungen und Weiterverarbeitungen für und von D3 ausgeführt
  • enhält eine zentrale Funktion für das Zoom-Event, das so synchronisiert auf alle Charts übertragen werden kann
• Props
  • sensors: Array mit String Namen alles in der Map aktiven Sensoren
  • wst: Array mit Int-Werten oder einzelner Int-Wert repränsentativ für die aktiven Wst

• Rendert je nach der in Control gewählten View die dazugehörige Ansicht
• Props
  • loadingFlag: Wird an Checkables weitergegeben um Interkationen zu verhindern
  • updateParent: Funktion aus Förderband um Daten an Parent weiterleiten zu können
  • view: Gibt an, welche View zu rendern ist

• generiert je nach props eine Checkbox oder einen Radio-Button und übernimmt den React Datenfluss und Rendering je nach Status
• Props:
  • loadingFlag: Blockiert Interaktionen während Daten geladen werden
  • type: Gibt an, ob eine Checkbox oder ein RadioButton gerendert werden soll
  • id: gibt eine Id für das id Attribut an
  • name: gibt einen Namen für das name-Attribut an
  • value: gibt einen Value für das value-Attribut an
  • checked: gibt an, ob React die Komponente checked oder unchecked rendern soll
  • handler: gibt einen Handler an die Komponente, um die User-Interaktion ans Parent geben zu können

• Rendert eine auf und zuklappbare Bootstrap Card für jeweils 1 Chart
• gibt Daten vom ChartContainer an das Chart weiter
• Props
  • cardName: gibt den Namen der Card an (intern für id und Bootstrap-Transition)
  • heading: gibt die Überschrift der Card an
  • graphs: enthält alle Path-Strings für das Chart
  • xScale: enhält den neuen Scale für die x-Achse des Charts
  • yScale: enthält den neuen Scale für die y-Achse des Charts
  • zoom: enthält den neuen Zoom für das Chart
  • xAxis: enthält die neuen Daten für die xAchse des Charts
  • yAxis: enthält die neuen Daten für die yAchse des Charts

• Rendert das SVG mit dem Chart über React JSX
• Updated anhand er übergeben Props über d3 die Achsen
• Props
  • cardName: gibt den Namen der Card an (intern für id und Bootstrap-Transition)
  • graphs: enthält alle Path-Strings für das Chart
  • xScale: enhält den neuen Scale für die x-Achse des Charts
  • yScale: enthält den neuen Scale für die y-Achse des Charts
  • zoom: enthält den neuen Zoom für das Chart
  • xAxis: enthält die neuen Daten für die xAchse des Charts
  • yAxis: enthält die neuen Daten für die yAchse des Charts

• Legende für die Charts
• Bekommt Daten vom ChartContainer und visualisiert diese
• Props
  • information: Benötigten Daten für richtige Darstellung

• einzelnes Element der Legende
• Zeigt immer exakt 1 Datensatz
• Props:
  • name: Name des Sensors
  • color: Farbe des Wst
  • Style: Stil des Pfades (wird noch nicht visuell dargestellt)

React bietet viele Vorteile gegenüber herkömmlichen Websitendesign.
Darunter fällt unter anderen die Übersichtlichkeit des HTML codes in den Render Methoden oder JSX und auch der schnelle und einfache Datenfluss zwischen Komponenten. Durch das Nutzen von react-leaflet erreicht man also nicht nur einen übersichtlichen, zum Großteil über JSX Generierten Code für die Map, sondern kann auch noch leichter und besser auf die Map zugreifen und kann diese in den React-Lifecyle mit einbinden.

React und D3 updaten beide über ein Virtuelles DOM. Wenn nun beide Parteien parallel versuchen einzelne Teile zu aktualisieren kommt es zu Komplikationen.
Zu unserem Glück kann React zum Großteil die Aufgaben von D3 übernehmen. Nur für Animationen muss D3 selbst Hand anlegen. Aber auch dann gilt: nicht beide dürfen gleichzeitig am DOM updaten, deswegen werden D3 Operationen auf dem DOM immer im React-Lifecylce nach dem Update also in der componentDidUpdate() Funktion ausgeführt. D3 muss aber trotzdem alle Berechnungen durchführen, die für das Chart nötig sind, nur dass die Daten nicht wie in D3 üblich direkt auf das DOM angewendet werden, sondern stattdessen abgespeichert und durch Übergabe von Props an die richtige Stelle gebracht werden. Da ein SVG auch HTML-Struktur hat, kann React mit JSX genauso Rendern und als Attribute dann die von D3 berechneten Werte nutzen.