documenting new dashboard features
This commit is contained in:
parent
7a4d07fede
commit
8dc74ac26f
@ -121,13 +121,16 @@ Der Javascript-Kontext ist der gleiche wie bei `field.meta.dependsOn.eval`.
|
||||
|
||||
## containerProps
|
||||
|
||||
Um Felder auf breiten Bildschirmen eine schmalere Breite zu geben, wird das containerProps Attribut empfohlen. Es hat ein class Attribut, welches klassen ins HTML injiziert. hier ist col-1 bis col-12 für vorgesehen. Es gibt außerdem noch breakBefore und breakAfter, welche dafür sorgen, dass vorher bzw. nachher keine weiteren HTML Elemente platz finden.
|
||||
Um Felder auf breiten Bildschirmen eine schmalere Breite zu geben, wird das containerProps Attribut empfohlen. Es hat ein class Attribut, welches klassen ins HTML injiziert. Es gibt außerdem noch das Layout attribut mit breakBefore und breakAfter, welche dafür sorgen, dass vorher bzw. nachher keine weiteren HTML Elemente platz finden. Hier ist des weiteren das size Objekt drin, welches 3 attribute hat. Die attribute sollten col-1 bis col-12 beeinhalten, diese klassen werden ins html injiziert, können also dem zufolge auch misbraucht werden. Die klassen bei den attributen werden bei unterschiedlichen Bildschirmbreiten aktiv.
|
||||
|
||||
```yaml
|
||||
containerProps:
|
||||
# 4/12 Breite
|
||||
class: "col-4"
|
||||
# im tibi-admin wird <div class='col-12'"></div> als Breaker eingesetzt
|
||||
breakBefore: true
|
||||
containerProps:
|
||||
#optional class prop
|
||||
layout:
|
||||
breakBefore: false
|
||||
breakAfter: false
|
||||
size:
|
||||
default: "col-8"
|
||||
small: "col-12"
|
||||
large: "col-4"
|
||||
```
|
||||
|
||||
@ -8,7 +8,7 @@ Die bereitgestellte Konfiguration ist eine Spezifikation für ein Dashboard-Layo
|
||||
|
||||
## type
|
||||
|
||||
Der Typ des Dashboard-Elements ist ein entscheidendes Attribut. Wenn der Typ "graph" ist, wird das Element als Diagramm dargestellt. Dies ermöglicht eine Vielzahl von Visualisierungen wie Linien-, Balken-, Kuchen-, Donut- oder Flächendiagramme, abhängig vom graphType. Der Typ "swiper" erstellt ein Karussell-ähnliches Element, das eine Reihe von anderen Elementen enthält, die durchgeblättert werden können. Jedes Element innerhalb des "swiper"-Typs wird genauso konfiguriert wie ein normales Dashboard-Element, was bedeutet, dass sie jeweils ihren eigenen type, title, etc. haben können. Die "reference"-Typ Elemente sind Verweise auf Collections.
|
||||
Der Typ des Dashboard-Elements ist ein entscheidendes Attribut. Wenn der Typ "graph" ist, wird das Element als Diagramm dargestellt. Dies ermöglicht eine Vielzahl von Visualisierungen wie Linien-, Balken-, Kuchen-, Donut- oder Flächendiagramme, abhängig vom graphType. Der Typ "swiper" erstellt ein Karussell-ähnliches Element, das eine Reihe von anderen Elementen enthält, die durchgeblättert werden können. Jedes Element innerhalb des "swiper"-Typs wird genauso konfiguriert wie ein normales Dashboard-Element, was bedeutet, dass sie jeweils ihren eigenen type, title, etc. haben können. Die "reference"-Typ Elemente sind Verweise auf Collections. Außerdem gibt es den type "comparison", wobei man ein timespan auswählt und dieser timespan und der timespan davor mit einander auf einen bestimmten Wert verglichen werden
|
||||
|
||||
## title
|
||||
|
||||
@ -24,11 +24,23 @@ Das Attribut graphType bestimmt die spezifische Art der Datenvisualisierung für
|
||||
|
||||
## xAxis und yAxis
|
||||
|
||||
Diese Attribute definieren die Daten, die auf den Achsen des Diagramms angezeigt werden. xAxis immer "timeline", was bedeutet, dass die Daten über die Zeit dargestellt werden. yAxis kann “sum” oder “amount” sein. Sum summiert die Werte des angegebenen feldes im time interval, wohingegen amount die Menge des angegebenen Feldes im time interval aufsummiert und angibt.
|
||||
Diese Attribute definieren die Daten, die auf den Achsen des Diagramms angezeigt werden. xAxis immer "timeline", was bedeutet, dass die Daten über die Zeit dargestellt werden. yAxis kann “sum” oder “amount” sein. Sum summiert die Werte des angegebenen feldes im time interval, wohingegen amount die Menge des angegebenen Feldes im time interval aufsummiert und angibt. Möchte man die menge von den Kollektionen angeben, so ist kein weiterer schritt nötig. Möchte man angeben, wie oft ein feld in den kollektionen vor kommt, so hat man 2 möglichkeiten. Wenn das feld einmal pro kollektion vor kommt, so gibt man einfach über den field parameter den pfad dorthin an also bspw. wenn im root einfach nur xyz oder xyz.yxz.... Wenn das feld aber in einer object[] struktur ist, so gibt man den pfad dorthin an (über path) und dann ausgehend von dem objekt wird die field angabe genutzt. Bei sum ist das prinzip das selbe.
|
||||
|
||||
## class
|
||||
## containerProps
|
||||
|
||||
Die CSS-Klasse, die dem Dashboard-Element zugewiesen ist. Diese Klasse bestimmt, wie das Element gestylt wird. Vorgesehen ist hier col-1 bis col-12 als breiten angabe, aber auch andere im code definierte Klassen sind nutzbar.
|
||||
Um Felder auf breiten Bildschirmen eine schmalere Breite zu geben, wird das containerProps Attribut empfohlen. Es hat ein class Attribut, welches klassen ins HTML injiziert. Es gibt außerdem noch das Layout attribut mit breakBefore und breakAfter, welche dafür sorgen, dass vorher bzw. nachher keine weiteren HTML Elemente platz finden. Hier ist des weiteren das size Objekt drin, welches 3 attribute hat. Die attribute sollten col-1 bis col-12 beeinhalten, diese klassen werden ins html injiziert, können also dem zufolge auch misbraucht werden. Die klassen bei den attributen werden bei unterschiedlichen Bildschirmbreiten aktiv.
|
||||
|
||||
```yaml
|
||||
containerProps:
|
||||
#optional class prop
|
||||
layout:
|
||||
breakBefore: false
|
||||
breakAfter: false
|
||||
size:
|
||||
default: "col-8"
|
||||
small: "col-12"
|
||||
large: "col-4"
|
||||
```
|
||||
|
||||
## graphs
|
||||
|
||||
@ -44,11 +56,43 @@ Dieses Feld bezieht sich auf die Datenquelle oder Sammlung, auf die das Dashboar
|
||||
|
||||
## timeInterval
|
||||
|
||||
Dieses Feld definiert den Zeitraum, der im Diagramm angezeigt wird. Die möglichen Werte können "day", "month", "year" etc. sein, je nachdem, welche Granularität für die Datenvisualisierung gewünscht wird.
|
||||
Dieses Feld definiert den Zeitraum, der im Diagramm angezeigt wird. Die möglichen Werte können "day", "month", "year" sein, je nachdem, welche Granularität für die Datenvisualisierung gewünscht wird.
|
||||
|
||||
## timespan
|
||||
|
||||
Der Zeitraum für die Vergleichsdaten. Es kann "QTD" für das aktuelle Quartal und das Quartal davor sein, "MTD" für den aktuellen Monat und den Monat davor sein oder YTD für das aktuelle Jahr und das Jahr davor sein. Immer nur bis zum heutigem Tag dieser Zeitspanne, also bspw. vom 1.1.2023 bis zum 28.5.2023 wäre YTD wobei das vergleichs Jahr dann vom 1.1.2022 bis zum 28.5.2022 wäre:
|
||||
|
||||
```js
|
||||
switch (input) {
|
||||
case "YTD": // Year to date
|
||||
begin = new Date(date.getFullYear(), 0, 1)
|
||||
end = currentDate
|
||||
lastBegin = new Date(date.getFullYear() - 1, 0, 1)
|
||||
lastEnd = new Date(date.getFullYear() - 1, date.getMonth(), date.getDate())
|
||||
break
|
||||
case "QTD": // Quarter to date
|
||||
let quarterStartMonth = Math.floor(date.getMonth() / 3) * 3
|
||||
begin = new Date(date.getFullYear(), quarterStartMonth, 1)
|
||||
end = currentDate
|
||||
lastBegin = new Date(date.getFullYear(), quarterStartMonth - 3, 1)
|
||||
lastEnd = new Date(date.getFullYear(), date.getMonth() - 3, date.getDate())
|
||||
break
|
||||
case "MTD": // Month to date
|
||||
begin = new Date(date.getFullYear(), date.getMonth(), 1)
|
||||
end = currentDate
|
||||
lastBegin = new Date(date.getFullYear(), date.getMonth() - 1, 1)
|
||||
lastEnd = new Date(date.getFullYear(), date.getMonth() - 1, date.getDate())
|
||||
break
|
||||
}
|
||||
```
|
||||
|
||||
## until
|
||||
|
||||
Dieses Feld definiert den Endpunkt des Zeitintervalls für die Datenvisualisierung. Mögliche Werte sind “lastMonth”, “lastYear”. Zum Beispiel, wenn until auf "lastMonth" gesetzt ist, wird das Diagramm Daten bis zum letzten Monat anzeigen.
|
||||
Dieses Feld definiert den Endpunkt des Zeitintervalls für die Datenvisualisierung. Mögliche Werte sind "lastWeek", “lastMonth”, “lastYear” und "allTime", welches jedoch default ist. Zum Beispiel, wenn until auf "lastMonth" gesetzt ist, wird das Diagramm Daten bis zum letzten Monat anzeigen. Außerdem sind alle Optionen darunter für den Nutzer auswählbar. Um dies zu unterbinden, muss das filter attribut auf false gesetzt werden.
|
||||
|
||||
## filter
|
||||
|
||||
Wird filter auf false gesetzt, so ist der Filter nicht länger sichtbar.
|
||||
|
||||
## multipleYAxes
|
||||
|
||||
@ -62,9 +106,13 @@ Dies definiert die Basisfarbe des Diagramms. Die Farbe muss in einem gültigen C
|
||||
|
||||
Im Kontext des title-Feldes repräsentiert value den Hauptteil des Titels. In Bezug auf Diagramme, insbesondere bei Donut- und Kuchendiagrammen, repräsentiert value den numerischen Wert, der im Diagramm dargestellt wird. Hier sind mögliche werte: “total”, welches die Summe vom ausgewählten feld bis zu until ausgibt, “amount”, welches das gleiche macht, nur nicht summiert sondern zählt und “count” wobei die Einträge selbst gezählt werden.
|
||||
|
||||
## valueType
|
||||
|
||||
Wird bei "comparison" verwendet, um den vergleich relativ oder absolut vorzunehmen. Valide angaben sind: "relative" und "absolute".
|
||||
|
||||
## path
|
||||
|
||||
Dieses Feld kann verwendet werden, um den genauen Pfad zu dem spezifischen Datenfeld zu definieren, das in der Sammlung für die Datenvisualisierung verwendet wird. Sinvoll wenn das Feld in einem Object[] ist, andernfalls ist bei field die angabe über xyz.yxz.zyx erwünscht.
|
||||
Dieses Feld kann verwendet werden, um den genauen Pfad zu der spezifischen Datenstruktur zu definieren, welches in der Sammlung für die Datenvisualisierung als referenz Array für den field parameter verwendet wird. Dies ist also sinvoll, wenn das Feld in einem Object[] ist, andernfalls ist bei field die angabe über xyz.yxz.zyx erwünscht. Ist das feld im root oder über den field parameter erreichbar, so kann man path leeer lassen oder "this" angeben.
|
||||
|
||||
## dateTimeField
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user