From 0278942e29c6209370d9ef9d4e052b6a707271b3 Mon Sep 17 00:00:00 2001
From: Andrew Ridgway <ar17787@gmail.com>
Date: Fri, 12 Jul 2024 23:14:40 +1000
Subject: [PATCH] class function to build graphs

---
 src/flask/chart_test.html      | 10 +++---
 src/flask/chart_test.py        | 13 +++++++-
 src/flask/charts/PoolCharts.py | 33 +++++++++---------
 src/flask/data_plot.html       | 61 ++++++++++++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 22 deletions(-)
 create mode 100644 src/flask/data_plot.html
diff --git a/src/flask/chart_test.html b/src/flask/chart_test.html
index 72e5f09..0ce9862 100644
--- a/src/flask/chart_test.html
+++ b/src/flask/chart_test.html
@@ -18,10 +18,10 @@
     </script>
   </head>
   <body>
-    <div id="a2129a8b-778e-490c-ba6b-d8dbb5956510" data-root-id="p1001" style="display: contents;"></div>
+    <div id="bb5c0e1d-dc95-4d96-9cbc-a29ed2eade5c" data-root-id="p1001" style="display: contents;"></div>
   
-    <script type="application/json" id="f9173064-b3c3-4120-bd9c-e9094743f5a6">
-      {"665fa898-b488-4b51-a790-cd13b33e7a78":{"version":"3.5.0","title":"Bokeh Application","roots":[{"type":"object","name":"Figure","id":"p1001","attributes":{"height":350,"x_range":{"type":"object","name":"FactorRange","id":"p1011","attributes":{"factors":["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1003","attributes":{"start":0}},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1012"},"y_scale":{"type":"object","name":"LinearScale","id":"p1013"},"title":{"type":"object","name":"Title","id":"p1004","attributes":{"text":"Pool Ph"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1030","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1024","attributes":{"selected":{"type":"object","name":"Selection","id":"p1025","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1026"},"data":{"type":"map","entries":[["x",["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]],["top",[7.25,7.5,7.6,7.0]]]}}},"view":{"type":"object","name":"CDSView","id":"p1031","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1032"}}},"glyph":{"type":"object","name":"VBar","id":"p1027","attributes":{"x":{"type":"field","field":"x"},"width":{"type":"value","value":0.9},"top":{"type":"field","field":"top"},"line_color":{"type":"value","value":"#1f77b4"},"fill_color":{"type":"value","value":"#1f77b4"}}},"nonselection_glyph":{"type":"object","name":"VBar","id":"p1028","attributes":{"x":{"type":"field","field":"x"},"width":{"type":"value","value":0.9},"top":{"type":"field","field":"top"},"line_color":{"type":"value","value":"#1f77b4"},"line_alpha":{"type":"value","value":0.1},"fill_color":{"type":"value","value":"#1f77b4"},"fill_alpha":{"type":"value","value":0.1},"hatch_alpha":{"type":"value","value":0.1}}},"muted_glyph":{"type":"object","name":"VBar","id":"p1029","attributes":{"x":{"type":"field","field":"x"},"width":{"type":"value","value":0.9},"top":{"type":"field","field":"top"},"line_color":{"type":"value","value":"#1f77b4"},"line_alpha":{"type":"value","value":0.2},"fill_color":{"type":"value","value":"#1f77b4"},"fill_alpha":{"type":"value","value":0.2},"hatch_alpha":{"type":"value","value":0.2}}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1010"},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1019","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1020","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1021"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1022"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1014","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1015"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1016"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1017"}}}],"center":[{"type":"object","name":"Grid","id":"p1018","attributes":{"axis":{"id":"p1014"},"grid_line_color":null}},{"type":"object","name":"Grid","id":"p1023","attributes":{"dimension":1,"axis":{"id":"p1019"}}}]}}]}}
+    <script type="application/json" id="af8187ed-c6d3-40c3-84a3-bbe58799b466">
+      {"00bec54e-f52e-4b7f-b2b6-8e6e4eb73c82":{"version":"3.5.0","title":"Bokeh Application","roots":[{"type":"object","name":"Figure","id":"p1001","attributes":{"height":250,"x_range":{"type":"object","name":"FactorRange","id":"p1011","attributes":{"factors":["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1003","attributes":{"start":6}},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1012"},"y_scale":{"type":"object","name":"LinearScale","id":"p1013"},"title":{"type":"object","name":"Title","id":"p1004","attributes":{"text":"Pool data"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1030","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1024","attributes":{"selected":{"type":"object","name":"Selection","id":"p1025","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1026"},"data":{"type":"map","entries":[["x",["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]],["y",[7.25,7.5,7.6,7.0]]]}}},"view":{"type":"object","name":"CDSView","id":"p1031","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1032"}}},"glyph":{"type":"object","name":"Line","id":"p1027","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4"}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1028","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.1}},"muted_glyph":{"type":"object","name":"Line","id":"p1029","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.2}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1010"},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1019","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1020","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1021"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1022"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1014","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1015"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1016"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1017"}}}],"center":[{"type":"object","name":"Grid","id":"p1018","attributes":{"axis":{"id":"p1014"},"grid_line_color":null}},{"type":"object","name":"Grid","id":"p1023","attributes":{"dimension":1,"axis":{"id":"p1019"}}}]}}]}}
     </script>
     <script type="text/javascript">
       (function() {
@@ -29,8 +29,8 @@
           Bokeh.safely(function() {
             (function(root) {
               function embed_document(root) {
-              const docs_json = document.getElementById('f9173064-b3c3-4120-bd9c-e9094743f5a6').textContent;
-              const render_items = [{"docid":"665fa898-b488-4b51-a790-cd13b33e7a78","roots":{"p1001":"a2129a8b-778e-490c-ba6b-d8dbb5956510"},"root_ids":["p1001"]}];
+              const docs_json = document.getElementById('af8187ed-c6d3-40c3-84a3-bbe58799b466').textContent;
+              const render_items = [{"docid":"00bec54e-f52e-4b7f-b2b6-8e6e4eb73c82","roots":{"p1001":"bb5c0e1d-dc95-4d96-9cbc-a29ed2eade5c"},"root_ids":["p1001"]}];
               root.Bokeh.embed.embed_items(docs_json, render_items);
               }
               if (root.Bokeh !== undefined) {
diff --git a/src/flask/chart_test.py b/src/flask/chart_test.py
index 4039c81..6fe0b95 100644
--- a/src/flask/chart_test.py
+++ b/src/flask/chart_test.py
@@ -1,5 +1,16 @@
+from bokeh.models.layouts import HBox
 from charts import PoolCharts
+from bokeh.io import output_file, show
+from bokeh.layouts import row
+
+output_file("data_plot.html")
 
 chart = PoolCharts.PoolCharts()
 
-chart.ph_line_chart()
+ph = chart.line_chart("Pool PH", "ph", 50)
+
+total_chlorine = chart.line_chart("Pool Total Chlorine", "total_chlorine", 50)
+
+free_chlorine = chart.line_chart("Pool Free Chlorine", "free_chlorine", 50)
+
+show(row(ph, total_chlorine, free_chlorine))
diff --git a/src/flask/charts/PoolCharts.py b/src/flask/charts/PoolCharts.py
index ccaf398..a193907 100644
--- a/src/flask/charts/PoolCharts.py
+++ b/src/flask/charts/PoolCharts.py
@@ -1,6 +1,7 @@
 import sys
 
-from bokeh.plotting import figure, show
+from bokeh.models.widgets import DataCube
+from bokeh.plotting import figure
 
 from mongo.get_conn import db_conn
 
@@ -9,38 +10,38 @@ class PoolCharts():
         self.db = db_conn()
 
 
-    def ph_line_chart(self):
-        ph = self.db.pool_db
-        data = ph.find({}).sort("date", -1).limit(50)
+    def line_chart(self, title, field, limit):
+        data = self.db.pool_db
+        data = data.find({}).sort("date", -1).limit(limit)
         dates = []
-        ph_list = []
+        data_list = []
         date_count = {}
         for record in data:
-            if record["ph"] != "None":
+            if record[field] != "None":
                 if record["date"] not in dates:
                     print("new date record")
                     dates.append(record["date"])
-                    ph_list.append(float(record["ph"]))
+                    data_list.append(float(record[field]))
                     print (dates)
-                    print (ph_list)
+                    print (data_list)
                 else:
                     if record["date"] in date_count:
                         date_count[record["date"]] += 1
                     else:
                         date_count[record["date"]] = 2
-                    print(len(ph_list))
-                    current_ph = ph_list[len(ph_list) - 1]
-                    ph_list[len(ph_list) - 1] = (float(record["ph"]) + current_ph) / date_count[record["date"]]
+                    print(len(data_list))
+                    current_data = data_list[len(data_list) - 1]
+                    data_list[len(data_list) - 1] = (float(record[field]) + current_data) / date_count[record["date"]]
 
         print(dates)
-        print(ph_list)
+        print(data_list)
 
-        p = figure(x_range=dates, height=350, title="Pool Ph",
+        p = figure(x_range=dates, height=250, title=title,
             toolbar_location=None, tools="")
 
-        p.vbar(x=dates, top=ph_list, width=0.9)
+        p.line(x=dates, y=data_list)
 
         p.xgrid.grid_line_color = None
-        p.y_range.start = 0
+        p.y_range.start = round(min(data_list) - 1)
 
-        show(p)
+        return p
diff --git a/src/flask/data_plot.html b/src/flask/data_plot.html
new file mode 100644
index 0000000..4cf5177
--- /dev/null
+++ b/src/flask/data_plot.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bokeh Plot</title>
+    <style>
+      html, body {
+        box-sizing: border-box;
+        display: flow-root;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.5.0.min.js"></script>
+    <script type="text/javascript">
+        Bokeh.set_log_level("info");
+    </script>
+  </head>
+  <body>
+    <div id="d0b201d4-1058-4206-a3d2-e90533aae209" data-root-id="p1097" style="display: contents;"></div>
+  
+    <script type="application/json" id="b53a02e8-eec3-4b25-8e93-b14f6e1db624">
+      {"8d4d82be-5561-49df-bc90-e536630dff8f":{"version":"3.5.0","title":"Bokeh Application","roots":[{"type":"object","name":"Row","id":"p1097","attributes":{"children":[{"type":"object","name":"Figure","id":"p1001","attributes":{"height":250,"x_range":{"type":"object","name":"FactorRange","id":"p1011","attributes":{"factors":["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1003","attributes":{"start":6}},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1012"},"y_scale":{"type":"object","name":"LinearScale","id":"p1013"},"title":{"type":"object","name":"Title","id":"p1004","attributes":{"text":"Pool PH"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1030","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1024","attributes":{"selected":{"type":"object","name":"Selection","id":"p1025","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1026"},"data":{"type":"map","entries":[["x",["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]],["y",[7.25,7.5,7.6,7.0]]]}}},"view":{"type":"object","name":"CDSView","id":"p1031","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1032"}}},"glyph":{"type":"object","name":"Line","id":"p1027","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4"}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1028","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.1}},"muted_glyph":{"type":"object","name":"Line","id":"p1029","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.2}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1010"},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1019","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1020","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1021"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1022"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1014","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1015"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1016"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1017"}}}],"center":[{"type":"object","name":"Grid","id":"p1018","attributes":{"axis":{"id":"p1014"},"grid_line_color":null}},{"type":"object","name":"Grid","id":"p1023","attributes":{"dimension":1,"axis":{"id":"p1019"}}}]}},{"type":"object","name":"Figure","id":"p1033","attributes":{"height":250,"x_range":{"type":"object","name":"FactorRange","id":"p1043","attributes":{"factors":["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1035","attributes":{"start":2}},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1044"},"y_scale":{"type":"object","name":"LinearScale","id":"p1045"},"title":{"type":"object","name":"Title","id":"p1036","attributes":{"text":"Pool Total Chlorine"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1062","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1056","attributes":{"selected":{"type":"object","name":"Selection","id":"p1057","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1058"},"data":{"type":"map","entries":[["x",["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]],["y",[3.0,3.0,4.0,3.0]]]}}},"view":{"type":"object","name":"CDSView","id":"p1063","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1064"}}},"glyph":{"type":"object","name":"Line","id":"p1059","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4"}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1060","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.1}},"muted_glyph":{"type":"object","name":"Line","id":"p1061","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.2}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1042"},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1051","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1052","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1053"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1054"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1046","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1047"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1048"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1049"}}}],"center":[{"type":"object","name":"Grid","id":"p1050","attributes":{"axis":{"id":"p1046"},"grid_line_color":null}},{"type":"object","name":"Grid","id":"p1055","attributes":{"dimension":1,"axis":{"id":"p1051"}}}]}},{"type":"object","name":"Figure","id":"p1065","attributes":{"height":250,"x_range":{"type":"object","name":"FactorRange","id":"p1075","attributes":{"factors":["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1067","attributes":{"start":1}},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1076"},"y_scale":{"type":"object","name":"LinearScale","id":"p1077"},"title":{"type":"object","name":"Title","id":"p1068","attributes":{"text":"Pool Free Chlorine"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1094","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1088","attributes":{"selected":{"type":"object","name":"Selection","id":"p1089","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1090"},"data":{"type":"map","entries":[["x",["2024-03-27","2024-03-25","2024-03-15","2024-03-13"]],["y",[5.0,5.0,3.0,2.0]]]}}},"view":{"type":"object","name":"CDSView","id":"p1095","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1096"}}},"glyph":{"type":"object","name":"Line","id":"p1091","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4"}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1092","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.1}},"muted_glyph":{"type":"object","name":"Line","id":"p1093","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#1f77b4","line_alpha":0.2}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1074"},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1083","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1084","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1085"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1086"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1078","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1079"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1080"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1081"}}}],"center":[{"type":"object","name":"Grid","id":"p1082","attributes":{"axis":{"id":"p1078"},"grid_line_color":null}},{"type":"object","name":"Grid","id":"p1087","attributes":{"dimension":1,"axis":{"id":"p1083"}}}]}}]}}]}}
+    </script>
+    <script type="text/javascript">
+      (function() {
+        const fn = function() {
+          Bokeh.safely(function() {
+            (function(root) {
+              function embed_document(root) {
+              const docs_json = document.getElementById('b53a02e8-eec3-4b25-8e93-b14f6e1db624').textContent;
+              const render_items = [{"docid":"8d4d82be-5561-49df-bc90-e536630dff8f","roots":{"p1097":"d0b201d4-1058-4206-a3d2-e90533aae209"},"root_ids":["p1097"]}];
+              root.Bokeh.embed.embed_items(docs_json, render_items);
+              }
+              if (root.Bokeh !== undefined) {
+                embed_document(root);
+              } else {
+                let attempts = 0;
+                const timer = setInterval(function(root) {
+                  if (root.Bokeh !== undefined) {
+                    clearInterval(timer);
+                    embed_document(root);
+                  } else {
+                    attempts++;
+                    if (attempts > 100) {
+                      clearInterval(timer);
+                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
+                    }
+                  }
+                }, 10, root)
+              }
+            })(window);
+          });
+        };
+        if (document.readyState != "loading") fn();
+        else document.addEventListener("DOMContentLoaded", fn);
+      })();
+    </script>
+  </body>
+</html>
\ No newline at end of file
