cms/tibi-docs
Template
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs

Browse Source
This commit is contained in:
Robin Grenzdörfer 2023-05-28 19:23:56 +00:00
parent 5bfff30e90
commit 8839bd1111
2 changed files with 141 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
docs/md/projektkonfig/dashboard.md
View File

@ -2,13 +2,13 @@
# Übersicht
Die bereitgestellte Konfiguration ist eine Spezifikation für ein Dashboard-Layout und seine Komponenten. Dieses Layout bestimmt die Anzeige und Interaktion von verschiedenen Datenvisualisierungen, vor allem in Form von Diagrammen (Graphen). Die Konfiguration ist in zwei Hauptabschnitte unterteilt: "majorItems" und "minorItems". Die "majorItems" sind größere, prominentere Darstellungen von Daten, während die "minorItems" kleinere, weniger prominente Datenelemente repräsentieren. Jedes Element innerhalb dieser Abschnitte ist ein einzelnes Modul oder eine Komponente auf dem Dashboard und kann verschiedene Arten von Datenvisualisierungen darstellen, einschließlich Linien-, Balken-, Kreis- (donut) und Flächendiagramme.
Die bereitgestellte Konfiguration ist eine Spezifikation für ein Dashboard-Layout und seine Komponenten. Dieses Layout bestimmt die Anzeige und Interaktion von verschiedenen Datenvisualisierungen, vor allem in Form von Diagrammen (Graphen). Die Konfiguration ist in zwei Hauptabschnitte unterteilt: "majorItems" und "minorItems". Die "majorItems" sind größere, prominentere Darstellungen von Daten, während die "minorItems" kleinere, weniger prominente Datenelemente repräsentieren. Jedes Element innerhalb dieser Abschnitte ist ein einzelnes Modul oder eine Komponente auf dem Dashboard und kann verschiedene Arten von Datenvisualisierungen darstellen, einschließlich Linien-, Balken-, Kreis- (donut) und Flächendiagramme. Generell ist zu sagen, dass bei jeder string angabe auch I18n verwendet werden kann und bei nahezu jeder String angabe ist ebenfalls die eval angabe möglich.
# Elementbeschreibungen
## 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. 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
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. Der "sectionTitle" type ist wie der name schon sagt, ein Titel für einen Abschnitt vom dashboard
## title
@ -123,10 +123,94 @@ Dies ist das Feld, das den Zeitstempel in der Datensammlung repräsentiert. Es w
```yaml
dashboard:
majorItems: # Liste der Hauptelemente des Dashboards
- type: sectionTitle
title: "Overview" #i18n or eval
- type: swiper
containerProps:
class: "random-class"
layout:
breakBefore: false # no html elements before
breakAfter: false #no html elmenets after
size: #different classes depending on innerWidth
default: "col-8"
small: "col-12"
large: "col-4"
elements:
- type: comparison
collection: contact_form
timespan: "QTD" #QTD & MTD with last quarter, month or year
value: total
valueType: absolute #oder relative (prozentual)
path: paymentValues
dateTimeField: Date
field: paymentValue
title: toller titel #string or eval
subTitle: { de: "YTD Vergleich zum Vorjahr", en: "YTD comparison with last year" }
- type: comparison
collection: contact_form
timespan: "QTD" #QTD & MTD with last quarter, month or year
value: total
valueType: absolute #oder relative (prozentual)
dateTimeField: Date
field: paymentValue
title: toller titel #i18n or eval
subTitle: { de: "YTD Vergleich zum Vorjahr", en: "YTD comparison with last year" }
- type: swiper
css:
graph:
wrapper:
eval: |
`
background-color: green ;
`
containerProps:
class: "random-class"
layout:
breakBefore: false # no html elements before
breakAfter: true #no html elmenets after
size: #different classes depending on innerWidth
default: "col-8"
small: "col-12"
large: "col-4"
elements:
- type: comparison
collection: contact_form
timespan: "QTD" #QTD & MTD with last quarter, month or year
value: total
valueType: relative #oder relative (prozentual)
path: paymentValues
dateTimeField: Date
field: paymentValue
title: toller titel #string or eval
subTitle: { de: "YTD Vergleich zum Vorjahr", en: "YTD comparison with last year" }
- type: comparison
collection: contact_form
timespan: "QTD" #QTD & MTD with last quarter, month or year
value: total
valueType: relative #oder relative (prozentual)
dateTimeField: Date
field: paymentValue
title: toller titel #string or eval
subTitle: { de: "YTD Vergleich zum Vorjahr", en: "YTD comparison with last year" }
- type: sectionTitle
title: "Details"
- type: graph # Art des Elements, hier ein Graph
css:
graph:
wrapper:
eval: |
`
background-color: yellow ;
`
title: # Titel des Graphen
#eval anstelle von value möglich
value: total # Haupttitel des Graphen
value: total #o. amount Haupttitel des Graphen
contentAfter: "€" # Nach dem Haupttitel hinzugefügte Inhalte
contentBefore: "xyz" # Vor dem Haupttitel hinzugefügte Inhalte
timeInterval: "day" # Zeitintervall der Daten im Graphen
@ -135,7 +219,17 @@ dashboard:
graphBaseColor: "#ff0000" # Basisfarbe des Graphen
subTitle: { de: "Umsatz", en: "sales volume" } # Untertitel des Graphen, mehrsprachig
xAxis: timeline # Art der x-Achse, hier eine Zeitachse
class: col-6 # CSS-Klasse des Elements
class: "random-class" #Class added
containerProps:
#optional class prop
layout:
breakBefore: false
breakAfter: false
size:
default: "col-8"
small: "col-12"
large: "col-4"
graphs: # Liste der Graphen in diesem Element
- yAxis: sum # Art der y-Achse, hier eine Summe
field: paymentValue # Feld der Daten für den Graphen
@ -160,8 +254,17 @@ dashboard:
graphBaseColor: "#ff0000"
subTitle: { de: "Umsatz", en: "sales volume" }
xAxis: timeline
class: col-6
multipleYAxes: true # Option für mehrere y-Achsen
containerProps:
#optional class prop
layout:
breakBefore: false
breakAfter: false
size:
default: "col-8"
small: "col-12"
large: "col-4"
graphs:
- yAxis: sum
yAxisTitle: Summe nr 1
@ -170,6 +273,7 @@ dashboard:
dateTimeField: Date
collection: contact_form
graphName: { de: "Umsatz", en: "sales volume" }
- graphName: { de: "Umsatz anderes feldes", en: "Sum of other values" }
path: paymentValues
yAxisTitle: Summe nr 2
@ -179,7 +283,16 @@ dashboard:
field: paymentValue
collection: contact_form
- type: swiper # Art des Elements, hier ein Swiper
class: col-6
containerProps:
#optional class prop
layout:
breakBefore: false
breakAfter: false
size:
default: "col-8"
small: "col-12"
large: "col-4"
elements: # Liste der Elemente in diesem Swiper
- type: graph
title:
@ -221,7 +334,15 @@ dashboard:
dateTimeField: Date
field: paymentValue
collection: contact_form
- class: col-8
- containerProps:
#optional class prop
layout:
breakBefore: false
breakAfter: false
size:
default: "col-8"
small: "col-12"
large: "col-4"
type: graph
title:
value: total
@ -229,7 +350,7 @@ dashboard:
subTitle: { de: "Umsatz", en: "sales volume" }
xAxis: timeline
timeInterval: "day"
until: "lastMonth"
graphType: "area" # Art des Graphen, hier ein Flächendiagramm
graphs:
- field: paymentValue
@ -239,13 +360,22 @@ dashboard:
path: "this" # Pfad zu den Daten im Feld, hier das aktuelle Objekt, keine Angabe hat den gleichen Wert
graphName: { de: "Umsatz", en: "sales volume" }
- type: swiper
class: col-4
containerProps:
#optional class prop
layout:
breakBefore: false
breakAfter: true
size:
default: "col-8"
small: "col-12"
large: "col-4"
elements:
- class: col-6
type: graph
subTitle: { de: "Produktmenge", en: "Amount of products" }
xAxis: timeline
timeInterval: "day"
filter: false #deaktiviert die Filter möglichkeit für den Nutzer beim diagramm, normalerweise aktiviert. Hierbei sind alle kombinationen x >= until möglich
dateTimeField: Date
until: "lastMonth"
graphType: "bar"
@ -256,6 +386,7 @@ dashboard:
collection: contact_form
- class: col-8
type: graph
filter: false
title:
value: total
contentAfter: "€"
@ -263,6 +394,7 @@ dashboard:
xAxis: timeline
timeInterval: "day"
dateTimeField: Date
graphType: "line"
until: "lastMonth"
graphs:
- field: paymentValue

BIN
docs/md/projektkonfig/dashboard.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 109 KiB