* sample data + text elements begonnenn

demo/src/deadlines_grid.js

+import { GridWidget } from "@polaris/dashboard-sdk";
+import {TextElement} from "../../src/js/elements/textelement";
+
+const data = [
+    {
+        type: "textElement",
+        name: "Block 1",
+        options: {
+            showLegend: false,
+        },
+        data: {
+            text: "00.00.00 - noch ... Tage"
+        }
+    },
+    {
+        type: "textElement",
+        name: "Block 2",
+        options: {
+            showLegend: false,
+        },
+        data: {
+            text: "00.00.00 - noch ... Tage"
+        }
+    },
+    {
+        type: "textElement",
+        name: "Block 3",
+        options: {
+            showLegend: false,
+        },
+        data: {
+            text: "00.00.00 - noch ... Tage"
+        }
+    },
+]
+
+
+export const deadlinesGridDef = { "deadlines-grid-widget" :
+        new GridWidget(
+            "Kursvergleich",
+            "Vergleich mit anderen Studierenden",
+            data,
+            {
+                direction: "column"
+            })
+}

demo/src/js/app.js

@@ -19,6 +19,8 @@ import { scatterGridDef } from "../scatter_grid_test";
 import "./style.css";
 import {mcTestGridDef} from "../mc_test_grid_test";
 import {feedbackGridDef} from "../feedback_grid_test";
+import {textGridDef} from "../text_element";
+import {deadlinesGridDef} from "../deadlines_grid";
 /**
  * JWT Token - hardcoded for demontrastion
  * This jwt token is generated in the backend.
@@ -158,6 +160,20 @@ const widgets_config = [
     h: 5,
     widgetId: "feedback-grid-widget",
   },
+  {
+    x: 2,
+    y: 15,
+    w: 2,
+    h: 5,
+    widgetId: "deadlines-grid-widget",
+  },
+  {
+    x: 8,
+    y: 0,
+    w: 2,
+    h: 5,
+    widgetId: "text-grid-widget",
+  },
 ];
 
 /**
@@ -301,7 +317,9 @@ const buildWidgets = (data) => {
     ...simpleGroupedBarChartDef,
     ...scatterGridDef,
     ...mcTestGridDef,
-    ...feedbackGridDef
+    ...feedbackGridDef,
+    ...textGridDef,
+    ...deadlinesGridDef
   };
 
   return widgets;

demo/src/text_element.js

+import { GridWidget } from "@polaris/dashboard-sdk";
+import {TextElement} from "../../src/js/elements/textelement";
+
+const data = [
+    {
+        type: "heatmap",
+        name: "Block 1",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "Block 2",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "Block 3",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    }
+]
+
+
+export const textGridDef = { "text-grid-widget" :
+    new TextElement(
+        "00.00.00 - noch ... Tage",
+        {
+            direction: "row"
+        })
+}

src/css/widget-theme.scss

@@ -11,6 +11,12 @@
   text-align: center;
 }
 
+.chart-subtitle.column
+{
+  width: 100%;
+  text-align:left !important;
+}
+
 .chart-error-message {
   font-size: 15px;
   font-style: italic;

src/js/charts/grid.js

@@ -10,6 +10,7 @@ import { LineChartWidget } from "./linechart";
 import { PieChartWidget } from "./piechart";
 import { SimpleGroupedBarChartWidget } from "./simple_grouped_barchart";
 import { StackedBarChartWidget } from "./stacked_barchart";
+import {TextElement} from "../elements/textelement";
 
 const chart_types = [
   "areachart",
@@ -98,13 +99,19 @@ export class GridWidget extends BaseChartWidget {
     for(const chart of this.data)
     {
       let subwidget_div = document.createElement("div");
-      if(!firstColumn)
+      if(!firstColumn && this.options.direction !== "column")
         subwidget_div.style = "border-left: 1px solid grey";
       widget.appendChild(subwidget_div);
 
       let subwidget = null;
       switch(chart.type)
       {
+        case "textElement":
+          subwidget = new TextElement(
+              chart.data.text,
+              chart.options
+          );
+          break;
         case "areachart":
           subwidget = new AreaChartWidget(
             "",
@@ -182,20 +189,36 @@ export class GridWidget extends BaseChartWidget {
           continue;
       }
 
-      const generated = subwidget.plot(width, height, subwidget_div);
-      if(generated != null)
-      {
-        subwidget_div.innerHTML = generated;
+      if(this.options.direction === "column") {
+
+        subwidget_div.querySelector('.chart-title')?.parentElement.remove();
+        subwidget_div.querySelector('.question-mark')?.parentElement.remove();
+        // TODO paint axes yes / no ?
+
+        const subwidget_title = document.createElement("div");
+        subwidget_title.className = "chart-subtitle column";
+        subwidget_title.innerHTML = chart.name;
+        subwidget_div.appendChild(subwidget_title);
+
+        const generated = subwidget.plot(width, height, subwidget_div);
+        if (generated != null) {
+          subwidget_div.innerHTML = subwidget_div.innerHTML + generated;
+        }
+      } else {
+        const generated = subwidget.plot(width, height, subwidget_div);
+        if (generated != null) {
+          subwidget_div.innerHTML = generated;
+        }
+
+        subwidget_div.querySelector('.chart-title')?.parentElement.remove();
+        subwidget_div.querySelector('.question-mark')?.parentElement.remove();
+        // TODO paint axes yes / no ?
+
+        const subwidget_title = document.createElement("div");
+        subwidget_title.className = "chart-subtitle";
+        subwidget_title.innerHTML = chart.name;
+        subwidget_div.appendChild(subwidget_title);
       }
-
-      subwidget_div.querySelector('.chart-title')?.parentElement.remove();
-      subwidget_div.querySelector('.question-mark')?.parentElement.remove();
-      // TODO paint axes yes / no ?
-
-      const subwidget_title = document.createElement("div");
-      subwidget_title.className = "chart-subtitle";
-      subwidget_title.innerHTML = chart.name;
-      subwidget_div.appendChild(subwidget_title);
       firstColumn = false;
     }
     return null; // we write directly to the DOM, thus return null

src/js/elements/base_element.js

+
+
+export class BaseElement {
+
+    constructor(options = {}) {
+
+    }
+
+    plot(divWidth, divHeight, element) {
+
+    }
+}
\ No newline at end of file

src/js/elements/textelement.js

+import {BaseElement} from "./base_element";
+
+export class TextElement extends BaseElement {
+
+    constructor(text, options = {}) {
+        super(options);
+        this.text = text;
+    }
+
+    plot(divWidth, divHeight, element) {
+        const title_element = document.createElement("div");
+        title_element.innerHTML = this.text;
+        element.appendChild(title_element);
+    }
+}
\ No newline at end of file