Dev/graph widget

src/main/kotlin/org/team5499/dashboard/Dashboard.kt

@@ -37,6 +37,7 @@ object Dashboard {
                 field = value
             }
         }
+
     public var variableUpdates: JSONObject = JSONObject()
         get() {
             synchronized(field) {

src/main/kotlin/org/team5499/dashboard/Graph.kt

@@ -0,0 +1,49 @@
+package org.team5499.dashboard
+
+import org.json.JSONObject
+
+class Graph(vararg keys: String) {
+    val values: MutableList<Pair<String, Double>> = mutableListOf()
+    val labels: MutableList<Double> = mutableListOf()
+    var chartData: JSONObject = JSONObject()
+    var mKeys: Array<out String>
+    init { mKeys = keys }
+
+    fun addDataPoint(x: Double, y: Double, key: String) {
+        labels += y
+        values.add(Pair(key, x))
+        // Unit test for values = keys
+    }
+
+    fun clear() {
+        labels.clear()
+        values.clear()
+    }
+
+    fun updateJSON(): JSONObject {
+        // create a MutableList with an emtpy MutableList for each dataset
+        var datasets: MutableList<MutableList<Any>> = mutableListOf()
+        for (i in mKeys) {
+            datasets.add(mutableListOf())
+        }
+        // sorts values into MutableList based on keys
+        for (dataPoint in values) {
+            datasets[mKeys.indexOf(dataPoint.toList()[0])].add(dataPoint.toList()[1])
+        }
+        chartData.put("lables", labels)
+        chartData.put("datasets", datasets)
+        return (chartData)
+    }
+}
+
+// var chartData = {
+//     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+//     datasets: [{
+//         type: 'line',
+//         label: 'Dataset 1',
+//         borderColor: window.chartColors.blue,
+//         borderWidth: 2,
+//         fill: false,
+//         data: []
+//     }
+// }

src/main/resources/page.html

@@ -3,6 +3,9 @@
 {% block title %}{{ pageTitle }}{% endblock %}
 {% block head %}
     <link rel="stylesheet" href="/css/gridstack.min.css">
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/gridheights.css">
 {% endblock %}
 {% block navbarCollapse %}
 <ul class="navbar-nav ml-auto">
@@ -19,6 +22,8 @@
 {% block container %}
     <div class="card-group" id="reactapp">
     </div>
+    <canvas id="canvasTest"></canvas>
+    <div id="settings"></div>
 {% endblock %}
 {% block body %}{% endblock %}
 {% block beforeScripts %}{% endblock %}
@@ -31,9 +36,14 @@
         <script src="/javascript/libs/react.production.min.js"></script>
         <script src="/javascript/libs/react-dom.production.min.js"></script>
     {% endif %}
+    <script src="/javascript/libs/jquery-3.3.1.min.js"></script>
+    <script src="/javascript/libs/jquery-ui.min.js"></script>
     <script src="/javascript/libs/lodash.min.js"></script>
     <script src="/javascript/libs/gridstack.min.js"></script>
     <script src="/javascript/libs/gridstack.jQueryUI.min.js"></script>
+    <script src="/javascript/libs/Chart.bundle.min.js"></script>
+
+    <!--<script src="/javascript/libs/gridstack.jQueryUI.min.js"></script>-->
 {% endblock %}
 {% block afterJS %}
 <script src="/javascript/socket-handler.js" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>
@@ -43,6 +53,7 @@
 <script src="/javascript/widget.jsx" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>
 
 <script src="/javascript/widgets/string-editor.jsx" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>
+<script src="/javascript/widgets/graph.jsx" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>
 <script src="/javascript/widgets/int-editor.jsx" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>
 <script src="/javascript/widgets/double-editor.jsx" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>
 <script src="/javascript/widgets/pidf-widget.jsx" data-plugins="transform-es2015-modules-umd" type="text/babel"></script>