diff --git a/docs/md/projektkonfig/dashboard.md b/docs/md/projektkonfig/dashboard.md index 926c3ae..b29f6da 100644 --- a/docs/md/projektkonfig/dashboard.md +++ b/docs/md/projektkonfig/dashboard.md @@ -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 diff --git a/docs/md/projektkonfig/dashboard.png b/docs/md/projektkonfig/dashboard.png index ae06fcf..64a2b6b 100644 Binary files a/docs/md/projektkonfig/dashboard.png and b/docs/md/projektkonfig/dashboard.png differ