From 773865b315fd0b6b2a70b21f0f3a275f36ce0f18 Mon Sep 17 00:00:00 2001
From: Andrew Aikman <aiky30@yahoo.com>
Date: Tue, 29 Oct 2024 12:54:08 +0000
Subject: [PATCH] Made dashboard charts ready for backend configuration

---
 .../shedpi_hub_dashboard/js/chart_widget.js   | 49 +++++++++++++------
 .../shedpi_hub_dashboard/js/modules/chart.js  |  4 +-
 shedpi_hub_dashboard/templates/index.html     | 12 ++++-
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js
index fa606fe..d165c54 100644
--- a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js
+++ b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/chart_widget.js
@@ -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()
+});
diff --git a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/modules/chart.js b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/modules/chart.js
index b67b245..2f945c2 100644
--- a/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/modules/chart.js
+++ b/shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/modules/chart.js
@@ -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) {
diff --git a/shedpi_hub_dashboard/templates/index.html b/shedpi_hub_dashboard/templates/index.html
index f95d1c2..9abdf7c 100644
--- a/shedpi_hub_dashboard/templates/index.html
+++ b/shedpi_hub_dashboard/templates/index.html
@@ -10,7 +10,16 @@ <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>
@@ -18,7 +27,6 @@ <h1 class="h2">Dashboard</h1>
       </div>
     </div>
   </div>
-
 {% endblock content %}