adjusted graph to be svg

This commit is contained in:
Nico Melone
2025-01-22 16:11:17 -06:00
parent 9645bb4170
commit 0c6098a011
7 changed files with 100 additions and 35 deletions

36
app.py
View File

@@ -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 flask import Flask, render_template, jsonify, make_response
from weasyprint import HTML from weasyprint import HTML
@@ -6,15 +7,17 @@ app = Flask(__name__)
@app.route('/report') @app.route('/report')
def report(): def report():
# Prepare graph data # Create Plotly graph
graph_data = [ fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[10, 20, 30], mode='lines')])
{ # Save the graph as an image
'x': [1, 2, 3], image_path = os.path.join('static', 'graph.svg')
'y': [10, 20, 30],
'type': 'scatter' fig.write_image(image_path)
} return render_template('report.html', graph_image=image_path)
]
return render_template('report.html', graph_data=jsonify(graph_data)) @app.route('/')
def home():
return render_template('base.html')
def get_data(): def get_data():
response = requests.get('https://api.example.com/data') response = requests.get('https://api.example.com/data')
@@ -22,8 +25,19 @@ def get_data():
@app.route('/download-pdf') @app.route('/download-pdf')
def 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() pdf = HTML(string=html).write_pdf()
response = make_response(pdf) response = make_response(pdf)
response.headers['Content-Type'] = 'application/pdf' response.headers['Content-Type'] = 'application/pdf'
response.headers['Content-Disposition'] = 'inline; filename=report.pdf' response.headers['Content-Disposition'] = 'inline; filename=report.pdf'

View File

@@ -1,4 +1,5 @@
flask flask
requests requests
weasyprint weasyprint
plotly plotly
kaleido

36
static/css/styles.css Normal file
View File

@@ -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;
}

BIN
static/graph.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

1
static/graph.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.2 KiB

12
templates/base.html Normal file
View File

@@ -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>

View File

@@ -1,29 +1,30 @@
<div id="graph"></div> {% extends "base.html" %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> {% block content %}
<script> <h1>Report</h1>
const data = {{ graph_data | safe }}; <img src="{{ graph_image }}" alt="{{ graph_image }}">
Plotly.newPlot('graph', data);
</script>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Header 1</th> <th>Header 1</th>
<th>Header 2</th> <th>Header 2</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for row in table_data %} {% for row in table_data %}
<tr> <tr>
<td>{{ row[0] }}</td> <td>{{ row[0] }}</td>
<td>{{ row[1] }}</td> <td>{{ row[1] }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<form method="POST" action="/submit"> <form method="POST" action="/submit">
<label for="data">Enter Data:</label> <label for="data">Enter Data:</label>
<input type="text" id="data" name="data"> <input type="text" id="data" name="data" />
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
{% endblock %}