Skip to content
Snippets Groups Projects
Commit c2649019 authored by Benjamin Ledel's avatar Benjamin Ledel
Browse files

* sample data + diagrams

parent 12f8c20b
No related branches found
No related tags found
No related merge requests found
......@@ -32,6 +32,7 @@
"version": "1.0.8",
"license": "ISC",
"dependencies": {
"chart.js": "^4.3.1",
"d3": "^7.7.0"
},
"devDependencies": {
......
......@@ -336,8 +336,8 @@ const data = [
export const gridDef = { "grid-widget" :
new GridWidget(
"A sample grid widget",
"sample description",
"Kursnutzung in Blocks",
"Beispielhafte Kursnutzung mit einer Heatmap",
data,
{
direction: "row"
......
......@@ -106,8 +106,8 @@ const data = [
export const heatMapDef = { "heatmap-widget" :
new HeatMapWidget(
"A sample heat map",
"sample description",
"Kursnutzung mit einer HeatMap",
"Beispielhafte Kursnutzung mit einer Heatmap",
data,
{
showLegend: false,
......
......@@ -15,6 +15,7 @@ import {groupedBarChartDef, simpleGroupedBarChartDef} from "../grouped_bar_chart
import { barChartDef, chartJSBarChartDef } from "../bar_chart_test";
import { heatMapDef } from "../heatmap_test";
import { gridDef } from "../grid_test";
import "./style.css";
/**
* JWT Token - hardcoded for demontrastion
* This jwt token is generated in the backend.
......@@ -122,15 +123,15 @@ const widgets_config = [
{
x: 0,
y: 14,
w: 5,
w: 2,
h: 5,
widgetId: "heatmap-widget",
},
{
x: 0,
y: 15,
w: 8,
h: 8,
w: 2,
h: 4,
widgetId: "grid-widget",
},
];
......
.grid-title {
margin-left: 5px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card > hr {
margin-right: 0;
margin-left: 0;
}
.card > .list-group:first-child .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.card > .list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.card-title {
margin-bottom: 0.75rem;
}
.card-subtitle {
margin-top: -0.375rem;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link:hover {
text-decoration: none;
}
.card-link + .card-link {
margin-left: 1.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header + .list-group .list-group-item:first-child {
border-top: 0;
}
.card-footer {
padding: 0.75rem 1.25rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card-footer:last-child {
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.card-header-tabs {
margin-right: -0.625rem;
margin-bottom: -0.75rem;
margin-left: -0.625rem;
border-bottom: 0;
}
.card-header-pills {
margin-right: -0.625rem;
margin-left: -0.625rem;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.card-img,
.card-img-top,
.card-img-bottom {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}
.card-img,
.card-img-top {
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card-img,
.card-img-bottom {
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
}
.card-deck .card {
margin-bottom: 15px;
}
@media (min-width: 576px) {
.card-deck {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}
.card-deck .card {
-ms-flex: 1 0 0%;
flex: 1 0 0%;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
.card-group > .card {
margin-bottom: 15px;
}
@media (min-width: 576px) {
.card-group {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card-group > .card {
-ms-flex: 1 0 0%;
flex: 1 0 0%;
margin-bottom: 0;
}
.card-group > .card + .card {
margin-left: 0;
border-left: 0;
}
.card-group > .card:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header {
border-top-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer {
border-bottom-right-radius: 0;
}
.card-group > .card:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header {
border-top-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer {
border-bottom-left-radius: 0;
}
}
\ No newline at end of file
Source diff could not be displayed: it is too large. Options to address this: view the blob.
/*!
* @kurkle/color v0.3.2
* https://github.com/kurkle/color#readme
* (c) 2023 Jukka Kurkela
* Released under the MIT License
*/
/*!
* Chart.js v4.3.1
* https://www.chartjs.org
* (c) 2023 Chart.js Contributors
* Released under the MIT License
*/
/*!
* GridStack 7.1.1
* https://gridstackjs.com/
......
......@@ -55,15 +55,21 @@ export class GridWidget extends BaseChartWidget {
}
const title_element = document.createElement("div");
title_element.className = "chart-title";
title_element.className = "chart-title grid-title";
title_element.innerHTML = this.title;
el.appendChild(title_element);
el.style = "background-color: #f5f5f5";
let width = divWidth;
let height = divHeight;
const cardHolder = document.createElement("div");
cardHolder.className = "card";
cardHolder.style = "margin: 5px";
const widget = document.createElement("div");
widget.style.display = "flex";
if (this.options.direction) {
widget.style.flexDirection = this.options.direction; // row, column
}
......@@ -82,13 +88,18 @@ export class GridWidget extends BaseChartWidget {
el.appendChild(temp_subtitle);
height -= title_element.offsetHeight;
height -= temp_subtitle.offsetHeight;
height -= 10; // margin
el.removeChild(temp_subtitle);
el.appendChild(widget);
cardHolder.appendChild(widget)
el.appendChild(cardHolder);
let firstColumn = true;
for(const chart of this.data)
{
let subwidget_div = document.createElement("div");
if(!firstColumn)
subwidget_div.style = "border-left: 1px solid grey";
widget.appendChild(subwidget_div);
let subwidget = null;
......@@ -185,6 +196,7 @@ export class GridWidget extends BaseChartWidget {
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
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment