From bbeeebb51fc9eb84cb976cb49ab2935f332f94ed Mon Sep 17 00:00:00 2001 From: jwansek Date: Sun, 8 Oct 2023 20:52:46 +0100 Subject: Started work on index --- app.py | 5 +++ database.py | 17 ++++++++- static/scripts.js | 73 +++++++++++++++++++++++++++++++++++++ static/style.css | 96 +++++++++++++++++++++++++++++++++++++++++++++++++ templates/index.html.j2 | 61 +++++++++++++++++++++++++++++++ 5 files changed, 251 insertions(+), 1 deletion(-) create mode 100644 static/scripts.js create mode 100644 static/style.css create mode 100644 templates/index.html.j2 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 @@ + + + + + + edaweb power monitor + + + + + + + + + + + + + + + + + + + + + +
+

edaweb power monitoring

+ +
+ +
+
+
    +
  • +
    +
    +
    +
    • +
  • +
    +
    +
    +
    • +
+
+
+ + + \ No newline at end of file -- cgit v1.2.3