Data Handling Demo
CSV-Import, Datenbearbeitung, Reportgenerierung und CSV-Export
Basierend auf einer Probeaufgabe der Digital-Agentur UDG United Digital Group
Grundlage ist eine CSV-Datei mit ca. 5.200 Artikel-Datensätzen, die zu importieren sind. Zudem sollen Datensätze bearbeitbar sein und neue Datensätze nach gleichem Schema hinzugefügt werden können. Der Datenbestand soll wiederum als CSV-Datei exportiert werden können und damit für andere Anwendungen zugänglich gemacht werden. Eine weitere Teilaufgabe ist die prozentuale Darstellung des Datenbestandes als Chart-Grafiken.
Die Aufgabe ist als Vue 3 App umgesetzt. Vue ist für mich das ideale Werkzeug zum Aufbau datengetriebener Web-Anwendungen. Gerade auch durch die Fähigkeit, HTML/SVG DOM-Attribute an filternde computed properties binden zu können.
Responsive Benutzeroberfläche
Bei der Umsetzung habe ich besonderen Schwerpunkt auf das voll responsive Layout gelegt. Auch wenn eine Bearbeitung von Massendaten auf einem schmalen Smartphonedisplay nicht wirklich Sinn macht, so wäre die Nutzung auf einem größeren Tablet durchaus gängige Praxis. Typischer Anwendungsfall wäre eine Inventursituation, bei der in einem Lager der direkte Zugriff auf den Warenbestand auch mobil möglich sein muss.
Gerade die Auflistung der vielen Datenspalten und zum Teil sehr langen Artikeltexte macht eine "normale" HTML-Tabelle kontraproduktiv. Hier muss der Benutzer ständig horizontal hin- und herscrollen, was ein flüssiges Arbeiten unmöglich macht. Um dieses Problem zu minimieren, bauen deshalb sowohl die zu sehende tabellarische als auch die wahlweise kompakte Auflistung stark auf die Möglichkeiten von CSS sticky Positionierung auf, um Spaltenüberschriften bzw. wichtige Kontrollelemente auch beim Scrollen möglichst lange im Blickfeld des Benutzers zu halten.
Accessibility
Das responsive Layout fällt auch direkt mit dem Thema Barrierefreiheit zusammen, da ein voll funktionsfähig stark vergrößerbares responsives Layout die Mindestvoraussetzung für weitergehende a11y Optimierung darstellt. Dann kommt auch wieder der Viewportbereich ins Spiel, an den man eigentlich zunächst nur für Smartphones denkt. Wird jedoch eine Benutzeroberfläche auf einem Desktopdisplay bis zu 500% gezoomt, so haben wir damit virtuell praktisch schon eine schmale mobile Viewportbreite erreicht. Nicht nur für Menschen mit Sehbehinderung sondern auch bei Nutzung auf einem kleinen Notebook kann eine voll zoomfähige Benutzeroberfläche eine deutliche Arbeitserleichterung darstellen.
Dabei ist diese Demoanwendung aber nur in Teilen barrierefrei. Zumindest sind alle wichtigen Funktionen über TAB-Navigation erreichbar und aria-Attribute für Screenreader möglichst sinnvoll ergänzt. Getestet ist die Anwendung aber nur grundlegend mit dem Google Chrome Screen Reader
Reportgenerierung mit dynamischen Vue / SVG-Chartgrafiken
Eine wichtige Aufgabenstellung war das Aggregieren der Artikeldaten und die Visualisierung z.B. als Balken- oder Tortendiagramm. Im Laufe der Umsetzung hat sich dieser Teil als besonders heikel herausgestellt. Die Zusammenfassung der Daten ist relativ einfach. Aber die Darstellung als auflösungsunabhängige SVG-Chartgrafiken im Zusammenspiel mit dem voll responsiven Layout hat ungeahnte Probleme aufgeworfen. Zum einen wollte ich hierzu keine Drittanbieterbibliotheken einsetzen. Es hätte aber auch nichts genutzt, da die meisten sehr leistungsstarken libraries zwar tolle Charts generieren, diese aber meistens nicht oder nur über eine Javascriptsteuerung mit dem Seitenlayout skalieren oder spätestens beim Ausdruck als PDF versagen.
Das standardmäßige Skalierungsverhalten von SVG-Grafiken ist, dass diese mit abnehmender Viewportbreite proportional immer kleiner werden. Das führt sehr schnell dazu, dass die Grafik jeglichen Informationswert verliert, weil einfach alles viel zu klein wird. Auf einem Smartphone ist solch ein Balken- oder Tortendiagramm dann nur noch in Briefmarkengröße sichtbar. Wünschenswert war für mich aber, dass die achsenbasierten Charts möglichst nur in der Breite skalieren, die Achsenbeschriftung aber gleich hoch und damit durchgängig lesbar bleibt. Was mit HTML und CSS flex bzw. grid eine relativ "einfach" lösbare Aufgabenstellung darstellt, zeigt sich bei SVG als echte Herausforderung.
Lässt sich ein Balkendiagramm noch mit HTML-Elementen substituieren, so benötigt man für ein Liniendiagramm schon SVG-Freiformen. Leider lassen aber polyline und andere Pfade nur absolute Koordinaten zu, was naturgemäß einer relativen Breitenanpassung entgegensteht. Die gefundene Lösung ist eine Kombination aus HTML grid/flex und verschachtelten SVG Elementen, die ohne Javascript-Steuerung nur per CSS arbeitet. Die Charts sind voll responsive und können zudem über @media queries beeinflusst werden.
Ein Zusatznutzen, den SVG-Grafiken gegenüber der Nutzung von canvasbasierten Bitmapgrafiken haben ist, dass SVG für Screen Reader zugänglich ist. In einem SVG enthaltene title Elemente können von einem Reader einzeln bei Focuserhalt vorgelesen werden. Ein Bitmap hingegen benötigt immer einen externen Beschreibungstext für die gesamte Grafik.