static/style.css

@@ -1,8 +1,8 @@
-main {
+.container {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
-    gap: 1em;
+    gap: 15px;
     align-items: flex-start;
 }
 
@@ -15,13 +15,16 @@ a {
     color: black;
 }
 
+img {
+    max-width: 600px;
+}
+
 .dataframe {
     border-collapse: collapse;
     font-size: 0.9em;
     font-family: sans-serif;
     min-width: 400px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-    flex-grow: 1;
 }
 
 .dataframe thead tr {

templates/base.html

@@ -6,14 +6,11 @@
 <title>Digitale Beschäftigtenbefragung</title>
 
 
-<article>
-<header>
 <p>Daten abgerufen: {{ timestamp }}</p>
-<p><i>Hinweis:</i> Die Daten entstammen der <a href="https://zusammen-geht-mehr.verdi.de/beschaeftigtenbefragung">Karte der digitalen Beschäftigtenbefragung</a> und sind dort nur für die ver.di-Bezirke auf Bezirksebene aufgelöst, bei denen TVStud auch als Schwerpunkt angegeben ist.</p>
-</header>
 
-<main>
-    {{ image|safe }}
+<p><i>Hinweis:</i> Die Daten entstammen der <a href="https://zusammen-geht-mehr.verdi.de/beschaeftigtenbefragung">Karte der digitalen Beschäftigtenbefragung</a> und sind dort nur für die ver.di-Bezirke auf Bezirksebene aufgelöst, bei denen TVStud auch als Schwerpunkt angegeben ist.</p>
+
+<div class="container">
+    <img src="{{ image }}"/>
     {{ tables|safe }}
-</main>
-</article>
+</div>

wsgi.py

@@ -1,3 +1,4 @@
+import base64
 import datetime
 import io
 from itertools import chain
@@ -10,6 +11,7 @@ import numpy as np
 import pandas as pd
 from flask import Flask, render_template, request
 from flask_caching import Cache
+from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
 
 from download_digital import construct_dataframe, get_bez_data
 
@@ -82,7 +84,7 @@ def plot(
         sum_val = current_df[["Digitale Befragung"]].sum().iloc[0]
         df.loc[datetime.datetime.now()] = sum_val
 
-    fig = plt.figure(dpi=300)
+    plt.figure(dpi=300)
 
     # fill weekends
     max_date = max(data_dict.keys())
@@ -153,12 +155,15 @@ def plot(
     plt.axhline(y=total_target, color="#48a9be", linestyle="--")
     plt.tight_layout()
 
-    # Convert plot to SVG image
-    imgdata = io.StringIO()
-    fig.savefig(imgdata, format="svg")
-    svgImage.seek(0)  # rewind the data
+    # Convert plot to PNG image
+    pngImage = io.BytesIO()
+    FigureCanvas(plt.gcf()).print_png(pngImage)
 
-    return svgImage.read()
+    # Encode PNG image to base64 string
+    pngImageB64String = "data:image/png;base64,"
+    pngImageB64String += base64.b64encode(pngImage.getvalue()).decode("utf8")
+
+    return pngImageB64String
 
 
 @app.route("/")