Add ability to plot saved queries using plotly, need to check performance in production, also need to improve generate_plot function

This commit is contained in:
Peter Stockings
2024-11-09 16:49:08 +11:00
parent 23def088bb
commit c7013e0eac
5 changed files with 85 additions and 13 deletions

View File

@@ -94,22 +94,36 @@
<tbody>
{% for saved in saved_queries %}
<tr class="hover:bg-gray-100 transition-colors duration-200">
<td class="py-4 px-6 border-b">{{ saved.title }}</td>
<!-- Query Title as Load Action -->
<td class="py-4 px-6 border-b">
<a href="#" hx-get="{{ url_for('load_sql_query', query_id=saved.id) }}"
hx-target="#sql-query"
class="flex items-center text-blue-500 hover:text-blue-700 cursor-pointer">
<!-- Load Icon (Heroicon: Eye) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
{{ saved.title }}
</a>
</td>
<td class="py-4 px-6 border-b">
<div class="flex space-x-4">
<!-- Load Action -->
<a href="#" hx-get="{{ url_for('load_sql_query', query_id=saved.id) }}"
hx-target="#sql-query"
class="flex items-center text-blue-500 hover:text-blue-700 cursor-pointer">
<!-- Load Icon (Heroicon: Eye) -->
<!-- Plot Action -->
<a href="#" hx-get="{{ url_for('plot_query', query_id=saved.id) }}"
hx-target="#sql-plot-results"
class="flex items-center text-green-500 hover:text-green-700 cursor-pointer"
hx-trigger="click">
<!-- Plot Icon (Heroicon: Chart Bar) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m5-9v9m4-9v9m5-9v9" />
</svg>
Load
Plot
</a>
<!-- Delete Action -->
@@ -137,5 +151,10 @@
{% endif %}
</div>
<!-- Plot Results Section -->
<div id="sql-plot-results" class="mt-8">
<!-- Plot will be loaded here via htmx -->
</div>
</div>