* sample data + text elements begonnenn

demo/src/feedback_grid_test.js

@@ -2,15 +2,14 @@ import { GridWidget } from "@polaris/dashboard-sdk";
 
 const data = [
     {
-        type: "heatmap",
+        type: "textAreaElement",
         name: "",
         options: {
             showLegend: false,
         },
-        data:
-        [
-
-        ]
+        data: {
+            text: "Gib hier dein Feedback ein",
+        }
     }
 ]
 
@@ -21,6 +20,6 @@ export const feedbackGridDef = { "feedback-grid-widget" :
         "Feedback Element",
         data,
         {
-            direction: "row"
+            direction: "column"
         })
 }

demo/src/js/app.js

@@ -154,7 +154,7 @@ const widgets_config = [
     widgetId: "mc-test-grid-widget",
   },
   {
-    x: 2,
+    x: 8,
     y: 15,
     w: 2,
     h: 5,

demo/src/js/style.css

@@ -199,4 +199,88 @@
     .card-group > .card:not(:first-child) .card-footer {
         border-bottom-left-radius: 0;
     }
-}
\ No newline at end of file
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-control {
+        transition: none;
+    }
+}
+
+.form-control::-ms-expand {
+    background-color: transparent;
+    border: 0;
+}
+
+.form-control:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #495057;
+}
+
+.form-control:focus {
+    color: #495057;
+    background-color: #fff;
+    border-color: #80bdff;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-control::-webkit-input-placeholder {
+    color: #6c757d;
+    opacity: 1;
+}
+
+.form-control::-moz-placeholder {
+    color: #6c757d;
+    opacity: 1;
+}
+
+.form-control:-ms-input-placeholder {
+    color: #6c757d;
+    opacity: 1;
+}
+
+.form-control::-ms-input-placeholder {
+    color: #6c757d;
+    opacity: 1;
+}
+
+.form-control::placeholder {
+    color: #6c757d;
+    opacity: 1;
+}
+
+.form-control:disabled, .form-control[readonly] {
+    background-color: #e9ecef;
+    opacity: 1;
+}
+
+select.form-control:focus::-ms-value {
+    color: #495057;
+    background-color: #fff;
+}
+
+.form-control-file,
+.form-control-range {
+    display: block;
+    width: 100%;
+}
+textarea.form-control {
+    height: auto;
+}

src/js/charts/grid.js

@@ -11,6 +11,7 @@ import { PieChartWidget } from "./piechart";
 import { SimpleGroupedBarChartWidget } from "./simple_grouped_barchart";
 import { StackedBarChartWidget } from "./stacked_barchart";
 import {TextElement} from "../elements/textelement";
+import {TextAreaElement} from "../elements/textareaelement";
 
 const chart_types = [
   "areachart",
@@ -106,6 +107,12 @@ export class GridWidget extends BaseChartWidget {
       let subwidget = null;
       switch(chart.type)
       {
+        case "textAreaElement":
+          subwidget = new TextAreaElement(
+              chart.data.text,
+              chart.options
+          );
+          break;
         case "textElement":
           subwidget = new TextElement(
               chart.data.text,

src/js/elements/textareaelement.js

+import {BaseElement} from "./base_element";
+
+export class TextAreaElement extends BaseElement {
+
+    constructor(text, options = {}) {
+        super(options);
+        this.text = text;
+    }
+
+    plot(divWidth, divHeight, element) {
+        const title_element = document.createElement("textarea");
+        title_element.placeholder = this.text;
+        title_element.rows = 5;
+        title_element.height = divHeight;
+        title_element.className = "form-control";
+        element.appendChild(title_element);
+    }
+}
\ No newline at end of file