OKR Frontend - Suche einer Diagramm Library

[tuxmatta]

• Nachfrage bei UX / Puzzle Ask
• npm Packet
• aktuelles Packet
• Testen der Library
• Wie ist die Testbarkeit?
• Skalierbarkeit der Anzeige
• Dependencies der Lib

Entscheid

Wir verwenden die Linien Diagramme von chart.js. Diese bieten alle Funktionalität, die gewünscht wird. Weiter können die Diagramme stark individuallisiert werden. Die erste implementation ist unter Github zu finden.

Zu Implementieren:

• [x] Finden einer Library
• [x] Test Diagramm mit aller funktionalität implementieren
  • [x] Objekte als Datenpunkte mitgeben --> Problemlos möglich siehe Chart.js
  • [x] Liniendiagramm mit Punkten und bei Hover soll Werte angezeigt werden
  • [x] Skala soll stimmen
• [x] Styling soll nach Figma umgesetzt sein
  • [x] Farbe vom Graphen
  • [x] Hintergrund vom Diagram
  • [x] Grid zum anzeigen

Findings:

• [ ] Responsive nur beim kleiner machen nicht beim vergrössern
• [x] Asynchrone X- Achse --> bleibt der Abstand gleich oder nicht?

[peggimann]

https://canvasjs.com/angular-charts/line-chart-with-date-time-axis/

Bringt schon einige Funktionalität mit, muss jedoch noch getestet werden, ob die Label angepasst werden können, sowie die allgemeine Styling-Optionen aussehen

[peggimann]

https://www.chartjs.org/docs/latest/

Ist zusätzlich zu Canvajs von oben ein NPM package, ist jedoch sehr gross

[peggimann]

https://www.chartjs.org/docs/latest/

Ist zusätzlich zu Canvajs von oben ein NPM package, ist sehr gross

LIzenz: MIT License

[lkleisa]

Das mit dem Hintergrund hat geklappt, jedoch noch nicht ganz die richtigen Koordinaten. Nur horizontale Linien anzeigen ist auch gegangen. Detaillierter Stand im bbt-appdev chat. Gepusht auf branch: https://github.com/puzzle-bbt/demo-angular-webapp/tree/feature/343-Search_Diagram_Library-Lias