diff --git a/demo/src/deadlines_grid.js b/demo/src/deadlines_grid.js new file mode 100644 index 0000000000000000000000000000000000000000..5a53bfeadc9d6a514cea5b0433512a5699abfc35 --- /dev/null +++ b/demo/src/deadlines_grid.js @@ -0,0 +1,46 @@ +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" + }) +} diff --git a/demo/src/js/app.js b/demo/src/js/app.js index d0b124bc80a26c933ca39ea11dce6d1bdc713960..142457c057d04b7199b97fe9bd9a4726c9f2a249 100644 --- a/demo/src/js/app.js +++ b/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; diff --git a/demo/src/text_element.js b/demo/src/text_element.js new file mode 100644 index 0000000000000000000000000000000000000000..662b8c7850708b40c9962fa8b232c28811f69884 --- /dev/null +++ b/demo/src/text_element.js @@ -0,0 +1,47 @@ +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" + }) +} diff --git a/src/css/widget-theme.scss b/src/css/widget-theme.scss index ea84523ef8d08da82044b8e1c38899b9a95ab5d0..c0111f14d9983715ebf1337426494adfe78f9abe 100644 --- a/src/css/widget-theme.scss +++ b/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; diff --git a/src/js/charts/grid.js b/src/js/charts/grid.js index 55d8b347a09f47bee9f773fb5364123f4ebdaf84..711bc2d6b88a32ec66a8efd706e03064b5258068 100644 --- a/src/js/charts/grid.js +++ b/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 diff --git a/src/js/elements/base_element.js b/src/js/elements/base_element.js new file mode 100644 index 0000000000000000000000000000000000000000..8e2608d2edd41a3ff660a336e5395c828ba008f6 --- /dev/null +++ b/src/js/elements/base_element.js @@ -0,0 +1,12 @@ + + +export class BaseElement { + + constructor(options = {}) { + + } + + plot(divWidth, divHeight, element) { + + } +} \ No newline at end of file diff --git a/src/js/elements/textelement.js b/src/js/elements/textelement.js new file mode 100644 index 0000000000000000000000000000000000000000..9ad01cc890a535267b8effa7bd590272c4681426 --- /dev/null +++ b/src/js/elements/textelement.js @@ -0,0 +1,15 @@ +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