aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app.py5
-rw-r--r--database.py17
-rw-r--r--static/scripts.js73
-rw-r--r--static/style.css96
-rw-r--r--templates/index.html.j261
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
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 21:12:59 +0000