docs

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