mpld3

arcovid19/web/bp.py

@@ -33,6 +33,8 @@
 
 import matplotlib.pyplot as plt
 
+import mpld3
+
 import flask
 from flask.views import View
 
@@ -74,7 +76,7 @@ class InfectionCurveView(TemplateView):
     def subplots(self):
         return plt.subplots(frameon=False, figsize=(12, 8))
 
-    def get_img(self, fig):
+    def _get_img(self, fig):
         buf = io.StringIO()
 
         fig.tight_layout()
@@ -84,6 +86,10 @@ def get_img(self, fig):
 
         return jinja2.Markup(svg)
 
+    def get_img(self, fig):
+        html = mpld3.fig_to_html(fig)
+        return jinja2.Markup(html)
+
     def make_plots(self, result):
         fig_linear, ax_linear = self.subplots()
         result.plot(ax=ax_linear)

arcovid19/web/templates/InfectionCurve.html

@@ -29,22 +29,9 @@
         width: 100%;
     }
 
-    svg {
-     display: block;
-     border: none;
-     position: absolute;
-     top: 5%;
-     left: 5%;
-     width: 90%;
-     height: 90%;
-     background: #fff;
-   }
-
    #data-container {
       overflow-y: auto;
    }
-
-
 </style>
 {% endblock %}
 
@@ -114,7 +101,7 @@
                     <div id="data-container">
                         <form action="{{ url_for('arcovid19.download_model') }}" class="float-right" method="post">
                             <div class="hide">
-                                {% for field in form %}{{ field() }}{% endfor %}
+                                {% for field in form %}{{ field(id="download_" + field.id) }} }}{% endfor %}
                             </div>
                             <button type="submit" class="btn btn-sm btn-success">
                                 Download <i class="fas fa-download"></i>

setup.py

@@ -42,7 +42,7 @@
 REQUIREMENTS = [
     "numpy", "pandas", "clize", "diskcache",
     "xlrd", "attrs", "deprecated",
-    "flask", "Flask-WTF", "numpydoc", "openpyxl",
+    "flask", "Flask-WTF", "numpydoc", "openpyxl", "mpld3",
     "matplotlib", "seaborn"]