Skip to content

Commit

Permalink
Made dashboard charts ready for backend configuration
Browse files Browse the repository at this point in the history
Aiky30 committed Oct 29, 2024
1 parent 8f6b13c commit 773865b
Showing 3 changed files with 45 additions and 20 deletions.
49 changes: 33 additions & 16 deletions shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
import {LineChart} from "./modules/chart.js";

let chart = new LineChart()

// TODO: DB Entry that controls this config, the page will then spit them out onto the page via backend,
// we then loop through each class with config embedded
const widgetConfig = {
// "type": "",
"deviceModuleId": "a62408c2-bc89-48e2-8c23-9494bbf33cb7",
"startDate": "2024-01-25",
"endDate": "2024-02-24",
}

const widgetTypeLineChart = "lineChart"

class Widget {
constructor(config) {
this.container = document.getElementById("chartContainer");
this.config = widgetConfig
this.config = config
const container = document.getElementById(this.config.id);

this.chart;
if (this.config.chartType == widgetTypeLineChart) {
this.chart = new LineChart(container)
}
}

async getDeviceData() {
@@ -72,9 +67,31 @@ class Widget {
const deviceData = await this.getDeviceData()
const deviceReadings = await this.getDeviceReadings()

chart.draw(deviceReadings, deviceData.schema)
this.chart.draw(deviceReadings, deviceData.schema)
}
}

const widget = new Widget(widgetConfig)
widget.render()

// TODO: DB Entry that controls this config, the page will then spit them out onto the page via backend,
// we then loop through each class with config embedded
const widgetConfigs = [
{
"id": "chartContainer1",
"chartType": widgetTypeLineChart,
"deviceModuleId": "c2f30e74-4708-4dff-9347-466563e353c8",
"startDate": "2024-01-25",
"endDate": "2024-02-24"
},
{
"id": "chartContainer2",
"chartType": widgetTypeLineChart,
"deviceModuleId": "a62408c2-bc89-48e2-8c23-9494bbf33cb7",
"startDate": "2024-01-25",
"endDate": "2024-02-24"
}
];

widgetConfigs.forEach((widgetConfig) => {
const widget = new Widget(widgetConfig)
widget.render()
});
Original file line number Diff line number Diff line change
@@ -3,8 +3,8 @@ import {getSchemaDataFields} from "./utils.js";
/* Chart visual */

class LineChart {
constructor() {
this.container = document.getElementById("chartContainer");
constructor(container) {
this.container = container;
}

mapDataSet(dataset, schema) {
12 changes: 10 additions & 2 deletions shedpi_hub_dashboard/templates/index.html
Original file line number Diff line number Diff line change
@@ -10,15 +10,23 @@ <h1 class="h2">Dashboard</h1>
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 g-2">
<div class="col">
<div class="card shadow-sm">
<svg id="chartContainer">
<svg id="chartContainer1">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Chart</text>
</svg>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg id="chartContainer2">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Chart</text>
</svg>
</div>
</div>
</div>

{% endblock content %}


0 comments on commit 773865b

Please sign in to comment.