Working chart ... kind of

shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js

@@ -7,6 +7,133 @@ let deviceModuleEndpoint = ""
 let storeDeviceModules = []
 let deviceModuleSchemaMap = {}
 
+/* Shared utils */
+function getSchemaDataFields(deviceModuleId) {
+  schema = deviceModuleSchemaMap[deviceModuleId]
+  let dataFields = []
+  if (schema) {
+    extra_fields = Object.keys(schema.properties)
+    dataFields = [...dataFields, ...extra_fields];
+    dataFields = [...new Set(dataFields)]
+  }
+  return dataFields
+}
+
+/* Chart visual */
+
+class LineChart {
+  constructor() {
+    this.container = document.getElementById("chartContainer");
+  }
+
+  mapDataSet(dataset, deviceModuleId) {
+    let data = []
+    const dataFields = getSchemaDataFields(deviceModuleId)
+
+    for (let rowIndex in dataset) {
+      const row = dataset[rowIndex]
+
+      let chartRow = {}
+
+      for (let rowHeading in row) {
+        const fieldValue = row[rowHeading]
+
+        if (typeof fieldValue == "object") {
+          for (let dataFieldIndex in dataFields) {
+            const dataField = dataFields[dataFieldIndex]
+
+            if (fieldValue != null) {
+              if (fieldValue.hasOwnProperty(dataField)) {
+                // FIXME: Should be rowHeading
+                chartRow["value"] = fieldValue[dataField]
+              }
+            }
+
+          }
+        } else if (rowHeading == "created_at") {
+          // Created at date column
+          chartRow["date"] = new Date(fieldValue)
+        }
+      }
+
+      data.push(chartRow)
+    }
+
+    return data
+  }
+
+  draw(dataset, deviceModuleId) {
+    this.destroy()
+
+    let data = this.mapDataSet(dataset, deviceModuleId);
+
+    // Declare the chart dimensions and margins.
+    const width = 928;
+    const height = 500;
+    const marginTop = 20;
+    const marginRight = 30;
+    const marginBottom = 30;
+    const marginLeft = 40;
+
+    // Declare the x (horizontal position) scale.
+    const x = d3.scaleUtc(d3.extent(data, d => d.date), [marginLeft, width - marginRight]);
+
+    // Declare the y (vertical position) scale.
+    const y = d3.scaleLinear([0, d3.max(data, d => d.value)], [height - marginBottom, marginTop]);
+
+    // Declare the line generator.
+    const line = d3.line()
+      .x(d => x(d.date))
+      .y(d => y(d.value));
+
+    // Create the SVG container.
+    const svg = d3.create("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("viewBox", [0, 0, width, height])
+      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");
+
+    // Add the x-axis.
+    svg.append("g")
+      .attr("transform", `translate(0,${height - marginBottom})`)
+      .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
+
+    // Add the y-axis, remove the domain line, add grid lines and a label.
+    svg.append("g")
+      .attr("transform", `translate(${marginLeft},0)`)
+      .call(d3.axisLeft(y).ticks(height / 40))
+      .call(g => g.select(".domain").remove())
+      .call(g => g.selectAll(".tick line").clone()
+        .attr("x2", width - marginLeft - marginRight)
+        .attr("stroke-opacity", 0.1))
+      .call(g => g.append("text")
+        .attr("x", -marginLeft)
+        .attr("y", 10)
+        .attr("fill", "currentColor")
+        .attr("text-anchor", "start")
+        .text("↑ Value"));
+
+    // Append a path for the line.
+    svg.append("path")
+      .attr("fill", "none")
+      .attr("stroke", "steelblue")
+      .attr("stroke-width", 1.5)
+      .attr("d", line(data));
+
+    let container = document.getElementById("chartContainer");
+    // Append the SVG element.
+    this.container.append(svg.node());
+
+  }
+
+  destroy() {
+    this.container.replaceChildren();
+  }
+}
+
+let chart = new LineChart()
+
+
 /* Drop down selection */
 // Create dropdown container
 const deviceModuleSelectorContainer = document.createElement("div");
@@ -78,6 +205,7 @@ let bindFormSubmision = function () {
   });
 };
 
+
 /* Table visual */
 
 // TOOD: Get a line chart working: https://visjs.github.io/vis-timeline/docs/graph2d/
@@ -111,6 +239,8 @@ let loadTableData = function (deviceModuleId, startDate, endDate) {
     })
     .then((response) => {
       drawTable(response, deviceModuleId)
+
+      chart.draw(response, deviceModuleId)
     });
 }
 

shedpi_hub_dashboard/templates/shedpi_hub_dashboard/index.html

@@ -40,9 +40,16 @@ <h1>Shed Pi data</h1>
     </div>
 
   </form>
+  <div class="row">
+    <div class="col">
+      <div id="chartContainer"></div>
+    </div>
+  </div>
+
 </div>
 <footer>
 </footer>
+<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
 <script src="{% static 'shedpi_hub_dashboard/js/index.js' %}"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"