Add plotting functionality

code/app/forms.py

@@ -10,7 +10,7 @@ class LoginForm(FlaskForm):
     submit = SubmitField("Sign In")
 
 
-class YearForm(FlaskForm):
+class AnnualForm(FlaskForm):
     year_list = [
         ("2011", 2011),
         ("2012", 2012),
@@ -26,22 +26,6 @@ class YearForm(FlaskForm):
     submit = SubmitField("Search")
 
 
-class IntervalForm(FlaskForm):
-    year_list = [
-        ("2011", 2011),
-        ("2012", 2012),
-        ("2013", 2013),
-        ("2014", 2014),
-        ("2015", 2015),
-        ("2016", 2016),
-        ("2017", 2017),
-        ("2018", 2018),
-    ]
-    name = StringField("Glacier Name")
-    lower_bound = SelectField(
-        "First year", validators=[DataRequired()], choices=year_list
-    )
-    upper_bound = SelectField(
-        "Second year", validators=[DataRequired()], choices=year_list
-    )
+class PlotForm(FlaskForm):
+    name = StringField("Glacier Name", validators=[DataRequired()])
     submit = SubmitField("Search")

code/app/routes.py

@@ -1,11 +1,10 @@
-from app import app, db
-from app.forms import LoginForm, YearForm, IntervalForm
-from app.models import User, Annual_Data, Glacier
-from flask import flash, redirect, render_template, url_for, request
-from flask_login import current_user, login_user, logout_user, login_required
+from app import app
+from app.forms import AnnualForm, LoginForm, PlotForm
+from database.queries import query_annual_data, query_plot_data, query_user
+from flask import flash, redirect, render_template, request, url_for, send_file
+from flask_login import current_user, login_required, login_user, logout_user
+from processing.dataframe import create_table, create_plot
 from werkzeug.urls import url_parse
-from processing.tabulate import create_table
-from database.queries import query_annual_data, query_user
 
 
 @app.route("/")
@@ -57,7 +56,7 @@ def data():
 
 @app.route("/table_selection", methods=["GET", "POST"])
 def table_selection():
-    form = YearForm()
+    form = AnnualForm()
     if form.validate_on_submit():
         query = query_annual_data(form)
         table = create_table(query.statement)
@@ -70,6 +69,22 @@ def table():
     return render_template("table.html", table=table, title="Table")
 
 
-@app.route("/plots")
-def plots():
-    return render_template("data.html", title="Data")
+@app.route("/plot_selection", methods=["GET", "POST"])
+def plot_selection():
+    form = PlotForm()
+    if form.validate_on_submit():
+        query = query_plot_data(form)
+        plot = create_plot(query.statement)
+        return render_template("plot.html", title="Plot", plot=plot)
+    return render_template("plot_selection.html", title="Data", form=form)
+
+
+@app.route("/plot")
+def plot():
+    return render_template("plot.html", title="Plot", plot=plot)
+
+
+@app.route("/figure")
+def figure(query):
+    fig = create_plot(query)
+    return send_file(fig, mimetype="image/png")

code/app/templates/data.html

@@ -4,12 +4,12 @@
 <h1 class="text-center">What do you want to check out?</h1>
 <li>
     <p class="text-center">
-        <a href="{{ url_for('table_selection') }}">Tables</a>
+        <a href="{{ url_for('table_selection') }}" class="btn btn-success" role="button" aria-pressed="true">Tables</a>
     </p>
 </li>
 <li>
     <p class="text-center">
-        <a href="{{ url_for('plots') }}">Plots</a>
+        <a href="{{ url_for('plot_selection') }}" class="btn btn-success" role="button" aria-pressed="true">Plots</a>
     </p>
 </li>
 {% endblock %}

code/app/templates/index.html

@@ -2,7 +2,8 @@
 
 {% block content %}
 <div class="jumbotron">
-<h1 id="igdb-internation-glacier-database">IGDB: Internation Glacier Database</h1>
-<p>The IGDB is a database, that uses data from the <a href="http://dx.doi.org/10.5904/wgms-fog-2018-11">WGMS</a> to illustrate the consequences of climate change.</p>
+    <h1 id="igdb-internation-glacier-database">IGDB: Internation Glacier Database</h1>
+    <p>The IGDB is a database, that uses data from the <a href="http://dx.doi.org/10.5904/wgms-fog-2018-11">WGMS</a> to illustrate the consequences of climate change.</p>
+    <p>Our system allows you to visualize data with tables and plots, via our intuitive Web UI.</p>
 </div>
 {% endblock %}

code/app/templates/plot.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block app_content %}
+<h1>Plot</h1>
+<img src="data:image/png;base64,{{ plot }}" alt="Image Placeholder">
+<p><a href="{{ url_for('plot_selection') }}">Back</a></p>
+{% endblock %}

code/app/templates/plot_selection.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block app_content %}
+<h1>Plot selection</h1>
+<div class="row">
+    <div class="col-md-4">
+        {{ wtf.quick_form(form) }}
+    </div>
+</div>
+<br>
+{% endblock %}