From 0c6098a011ba9eb50f9abc5053fa34515f828ed3 Mon Sep 17 00:00:00 2001
From: Nico Melone <nico.a.melone@gmail.com>
Date: Wed, 22 Jan 2025 16:11:17 -0600
Subject: [PATCH] adjusted graph to be svg

---
 app.py                |  36 ++++++++++++++++++++++----------
 requirements.txt      |   3 ++-
 static/css/styles.css |  36 ++++++++++++++++++++++++++++++++
 static/graph.png      | Bin 0 -> 18909 bytes
 static/graph.svg      |   1 +
 templates/base.html   |  12 +++++++++++
 templates/report.html |  47 +++++++++++++++++++++---------------------
 7 files changed, 100 insertions(+), 35 deletions(-)
 create mode 100644 static/css/styles.css
 create mode 100644 static/graph.png
 create mode 100644 static/graph.svg
 create mode 100644 templates/base.html

diff --git a/app.py b/app.py
index 5d0b32a..1ad5c28 100644
--- a/app.py
+++ b/app.py
@@ -1,4 +1,5 @@
-import requests
+import requests, os
+import plotly.graph_objects as go
 from flask import Flask, render_template, jsonify, make_response
 from weasyprint import HTML
 
@@ -6,15 +7,17 @@ app = Flask(__name__)
 
 @app.route('/report')
 def report():
-    # Prepare graph data
-    graph_data = [
-        {
-            'x': [1, 2, 3],
-            'y': [10, 20, 30],
-            'type': 'scatter'
-        }
-    ]
-    return render_template('report.html', graph_data=jsonify(graph_data))
+    # Create Plotly graph
+    fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[10, 20, 30], mode='lines')])
+    # Save the graph as an image
+    image_path = os.path.join('static', 'graph.svg')
+    
+    fig.write_image(image_path)
+    return render_template('report.html', graph_image=image_path)
+
+@app.route('/')
+def home():
+    return render_template('base.html')
 
 def get_data():
     response = requests.get('https://api.example.com/data')
@@ -22,8 +25,19 @@ def get_data():
 
 @app.route('/download-pdf')
 def download_pdf():
-    html = render_template('report.html')
+    # Create Plotly graph
+    fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[10, 20, 30], mode='lines')])
+    
+    # Save the graph as an image
+    this_folder = os.path.dirname(os.path.abspath(__file__))
+    image_path = os.path.join(this_folder, 'static', 'graph.svg')
+    fig.write_image(image_path)
+
+    # Render the HTML template with the graph image
+    html = render_template('report.html', graph_image="file://" + image_path)
+    print(html)
     pdf = HTML(string=html).write_pdf()
+
     response = make_response(pdf)
     response.headers['Content-Type'] = 'application/pdf'
     response.headers['Content-Disposition'] = 'inline; filename=report.pdf'
diff --git a/requirements.txt b/requirements.txt
index 3744fe6..ca2a054 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,5 @@
 flask
 requests
 weasyprint
-plotly
\ No newline at end of file
+plotly
+kaleido
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..a36931d
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,36 @@
+@page {
+    size: Letter;
+    margin: 1in;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+th {
+    background-color: #f4f4f4;
+}
+
+.graph-container {
+    width: 100%;
+    max-height: 400px;
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+
+.page-break {
+    page-break-before: always;
+}
\ No newline at end of file
diff --git a/static/graph.png b/static/graph.png
new file mode 100644
index 0000000000000000000000000000000000000000..a032588f86ec189c3c86cf90f0fb3086b4920628
GIT binary patch
literal 18909
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
KGUddj>;Dg=Rj>{K

literal 0
HcmV?d00001

diff --git a/static/graph.svg b/static/graph.svg
new file mode 100644
index 0000000..6114cf6
--- /dev/null
+++ b/static/graph.svg
@@ -0,0 +1 @@
+<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="500" style="" viewBox="0 0 700 500"><rect x="0" y="0" width="700" height="500" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-5c2f3b"><g class="clips"><clipPath id="clip5c2f3bxyplot" class="plotclip"><rect width="540" height="320"/></clipPath><clipPath class="axesclip" id="clip5c2f3bx"><rect x="80" y="0" width="540" height="500"/></clipPath><clipPath class="axesclip" id="clip5c2f3by"><rect x="0" y="100" width="700" height="320"/></clipPath><clipPath class="axesclip" id="clip5c2f3bxy"><rect x="80" y="100" width="540" height="320"/></clipPath></g><g class="gradients"/><g class="patterns"/></defs><g class="bglayer"><rect class="bg" x="80" y="100" width="540" height="320" style="fill: rgb(229, 236, 246); fill-opacity: 1; stroke-width: 0;"/></g><g class="layer-below"><g class="imagelayer"/><g class="shapelayer"/></g><g class="cartesianlayer"><g class="subplot xy"><g class="layer-subplot"><g class="shapelayer"/><g class="imagelayer"/></g><g class="minor-gridlayer"><g class="x"/><g class="y"/></g><g class="gridlayer"><g class="x"><path class="xgrid crisp" transform="translate(215,0)" d="M0,100v320" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(350,0)" d="M0,100v320" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(485,0)" d="M0,100v320" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/></g><g class="y"><path class="ygrid crisp" transform="translate(0,404)" d="M80,0h540" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,332)" d="M80,0h540" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,260)" d="M80,0h540" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,188)" d="M80,0h540" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,116)" d="M80,0h540" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"/></g></g><g class="zerolinelayer"/><g class="layer-between"><g class="shapelayer"/><g class="imagelayer"/></g><path class="xlines-below"/><path class="ylines-below"/><g class="overlines-below"/><g class="xaxislayer-below"/><g class="yaxislayer-below"/><g class="overaxes-below"/><g class="overplot"><g class="xy" transform="translate(80,100)" clip-path="url(#clip5c2f3bxyplot)"><g class="scatterlayer mlayer"><g class="trace scatter traceda3310" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"/><g class="errorbars"/><g class="lines"><path class="js-line" d="M0,304L540,16" style="vector-effect: none; fill: none; stroke: rgb(99, 110, 250); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"/></g><g class="points"/><g class="text"/></g></g></g></g><path class="xlines-above crisp" d="M0,0" style="fill: none;"/><path class="ylines-above crisp" d="M0,0" style="fill: none;"/><g class="overlines-above"/><g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="433" transform="translate(80,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;">1</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(215,0)">1.5</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(350,0)">2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(485,0)">2.5</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(620,0)">3</text></g></g><g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,404)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;">10</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,332)">15</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,260)">20</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,188)">25</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,116)">30</text></g></g><g class="overaxes-above"/></g></g><g class="polarlayer"/><g class="smithlayer"/><g class="ternarylayer"/><g class="geolayer"/><g class="funnelarealayer"/><g class="pielayer"/><g class="iciclelayer"/><g class="treemaplayer"/><g class="sunburstlayer"/><g class="glimages"/><defs id="topdefs-5c2f3b"><g class="clips"/></defs><g class="layer-above"><g class="imagelayer"/><g class="shapelayer"/></g><g class="infolayer"><g class="g-gtitle"/><g class="g-xtitle"/><g class="g-ytitle"/></g></svg>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..c6a2238
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Report</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+  </head>
+  <body>
+    {% block content %}{% endblock %}
+  </body>
+</html>
diff --git a/templates/report.html b/templates/report.html
index 6ceaf04..aec79fc 100644
--- a/templates/report.html
+++ b/templates/report.html
@@ -1,29 +1,30 @@
-<div id="graph"></div>
-<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-<script>
-    const data = {{ graph_data | safe }};
-    Plotly.newPlot('graph', data);
-</script>
+{% extends "base.html" %}
+{% block content %}
+    <h1>Report</h1>
+    <img src="{{ graph_image }}" alt="{{ graph_image }}">
+    
+    
 
-<table>
-    <thead>
+    <table>
+      <thead>
         <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
+          <th>Header 1</th>
+          <th>Header 2</th>
         </tr>
-    </thead>
-    <tbody>
+      </thead>
+      <tbody>
         {% for row in table_data %}
-            <tr>
-                <td>{{ row[0] }}</td>
-                <td>{{ row[1] }}</td>
-            </tr>
+        <tr>
+          <td>{{ row[0] }}</td>
+          <td>{{ row[1] }}</td>
+        </tr>
         {% endfor %}
-    </tbody>
-</table>
+      </tbody>
+    </table>
 
-<form method="POST" action="/submit">
-    <label for="data">Enter Data:</label>
-    <input type="text" id="data" name="data">
-    <button type="submit">Submit</button>
-</form>
\ No newline at end of file
+    <form method="POST" action="/submit">
+      <label for="data">Enter Data:</label>
+      <input type="text" id="data" name="data" />
+      <button type="submit">Submit</button>
+    </form>
+    {% endblock %}