Started work on index

5 files changed, 251 insertions, 1 deletions

diff --git a/app.py b/app.py
index e2601ac..1d2853c 100644
--- a/app.py
+++ b/app.py
@@ -42,5 +42,10 @@ def api_get_watt_chart():
     with database.PowerDatabase(host = devices.HOST) as db:
         return flask.jsonify(db.get_watt_chart())
 
+@app.route("/api/longterm_chart")
+def api_get_kwh_chart():
+    with database.PowerDatabase(host = devices.HOST) as db:
+        return flask.jsonify(db.get_kwh_chart())
+
 if __name__ == "__main__":
     app.run(host = "0.0.0.0", port = int(os.environ["APP_PORT"]), debug = True)
\ No newline at end of file
diff --git a/database.py b/database.py
index b31f905..60ad520 100644
--- a/database.py
+++ b/database.py
@@ -135,6 +135,21 @@ class PowerDatabase:
 

         return out

 

+    def get_kwh_chart(self):

+        with self.__connection.cursor() as cursor:

+            cursor.execute("SELECT DISTINCT host FROM kwh_readings;")

+            hosts = [i[0] for i in cursor.fetchall()]

+            

+            out = {}

+            for host in hosts:

+                cursor.execute("SELECT datetime, reading FROM kwh_readings WHERE host = %s ORDER BY datetime;", (host, ))

+                out[host] = cursor.fetchall()

+

+        return out

+

+def to_series(timeseriesforeach):

+    print(timeseriesforeach)

+

 if __name__ == "__main__":

     if not os.path.exists(".docker"):

         import dotenv

@@ -144,4 +159,4 @@ if __name__ == "__main__":
         host = None

 

     with PowerDatabase(host = host) as db:

-        print(db.get_watt_chart())

+        print(to_series(db.get_kwh_chart()))

diff --git a/static/scripts.js b/static/scripts.js
new file mode 100644
index 0000000..390c2c3
--- /dev/null
+++ b/static/scripts.js
@@ -0,0 +1,73 @@
+$(document).ready(function() {
+    Highcharts.chart('longterm_chart', {
+        chart: {
+            type: 'area'
+        },
+
+        title: {
+            text: 'Estimated Worldwide Population Growth by Region'
+        },
+
+        subtitle: {
+            text: 'Source: Wikipedia.org'
+        },
+
+        xAxis: {
+            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
+            tickmarkPlacement: 'on',
+            title: {
+                enabled: false
+            }
+
+        },
+
+        yAxis: {
+            title: {
+                text: 'Billions'
+            },
+
+            labels: {
+                    formatter: function() {
+                    return this.value / 1000;
+
+                }
+
+            }
+
+        },
+
+        tooltip: {
+            split: true,
+            valueSuffix: ' millions'
+        },
+
+        plotOptions: {
+            area: {
+                stacking: 'normal',
+                lineColor: '#666666',
+                lineWidth: 1,
+                marker: {
+                    lineWidth: 1,
+                    lineColor: '#666666'
+                }
+            
+        },
+
+        series: [{
+            name: 'Asia',
+            data: [502, 635, 809, 947, 1402, 3634, 5268]
+        }, {
+            name: 'Africa',
+            data: [106, 107, 111, 133, 221, 767, 1766]
+        }, {
+            name: 'Europe',
+            data: [163, 203, 276, 408, 547, 729, 628]
+        }, {
+            name: 'America',
+            data: [18, 31, 54, 156, 339, 818, 1201]
+        }, {
+            name: 'Oceania',
+            data: [2, 2, 2, 6, 13, 30, 46]
+        }]
+    }});
+})
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..2bc7b32
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,96 @@
+body {
+    font-family: Helvetica, sans-serif;
+}
+  
+header {
+    font-size: large;
+    padding-left: 1%;
+}
+
+a {
+    color: black;
+    font-weight: bold;
+    padding-top: 1px;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+header nav {
+    flex-grow: 1;
+    display: inline;
+}
+
+#externallinks {
+    background-color: black;
+    text-align: left;
+}
+
+#externallinks nav ul li a {
+    color: #f1f3f3;
+    font-size: smaller;
+}
+
+header div {
+    padding-left: 20px;
+    /* padding-bottom: 10px; */
+}
+
+nav ul {
+    margin: 0;
+    padding: 0;
+}
+
+nav li {
+    display: inline-block;
+    list-style-type: none;
+}
+
+nav a {
+    text-decoration: none;
+    display: block;
+    padding: 5px 6px 5px 6px;
+    color: black;
+}
+
+footer {
+    padding-top: 100px;
+    font-size: x-small;
+}
+
+#main_content {
+    padding-left: 2.5%;
+    padding-right: 2.5;
+}
+
+  
+#multicharts ul li {
+    list-style-type: none;
+    width: 45%;
+    display: inline-flex;
+    /* background-color: pink; */
+    min-height: 350px;
+    margin-bottom: 7px;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: space-between;
+    /* border-color: black;
+    border-width: 2px;
+    border-radius: 1;
+    border-style: ridge; */
+}
+  
+.chart_container {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+@media screen and (max-width: 1200px) {
+    #multicharts ul li {
+      width: 100%;
+      min-height: 500px;
+      height: 100%;
+    }
+}
\ No newline at end of file
diff --git a/templates/index.html.j2 b/templates/index.html.j2
new file mode 100644
index 0000000..534b1ce
--- /dev/null
+++ b/templates/index.html.j2
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>edaweb power monitor</title>
+	<!-- JQuery and JQurty UI current version -->
+    <script src='https://code.jquery.com/jquery-3.6.0.js'></script>
+	<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
+
+	<!-- Highcharts libraries -->
+	<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
+	<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
+	<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
+	<script type="text/javascript" src="https://code.highcharts.com/modules/export-data.js"></script>
+	<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>	
+	
+	<script type="text/javascript" src="https://code.highcharts.com/maps/modules/map.js"></script>
+	<script type="text/javascript" src="https://code.highcharts.com/mapdata/custom/world-robinson.js"></script>
+
+	<!-- local Javascript files -->
+	<script type="text/javascript" src="{{ url_for('static', filename='scripts.js') }}"></script>
+	<!-- remote and local CSS stylesheet -->
+	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+    <header>
+        <h1>edaweb power monitoring</h1>
+        <div id="externallinks">
+            <nav>
+                <ul>
+                    <li><a href="http://eda.gay">eda.gay</a></li>
+                    <li><a href="http://wiki.eda.gay">wiki.eda.gay</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <div id="main_content">
+        <div id="multicharts">
+            <ul id="charts_ul">
+                <li>
+                    <figure class="chart_container">
+                        <div class="minichart" id="longterm_chart"></div>
+                    </figure>
+                </li>
+                <li>
+                    <figure class="chart_container">
+                        <div class="minichart" id="hourly_chart"></div>
+                    </figure>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <footer>
+        <p><a href="https://github.com/jwansek/power.eda.gay">Source code released under GPLv3</a></p>
+        <p><a href="https://www.fsf.org/campaigns/freejs">Read the Free Software Foundations statements about JavaScript</a></p>
+    </footer>
+</body>
\ No newline at end of file