Skip to content

Commit

Permalink
remove pie charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisclark
chrisclark committed Jul 10, 2024
1 parent a827c27 commit 045871b
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 83 deletions.
6 changes: 3 additions & 3 deletions docs/features.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,10 @@ Pivot Table
exact pivot setup to share with colleagues.
- Download the pivot view as a CSV.

Displaying query results as charts
Displaying query results as line chart
----------------------------------

If the results table adheres to a certain format, the results can be displayed as a pie chart or a line chart.
If the results table adheres to a certain format, the results can be displayed as a line chart.

To enable this feature, set ``EXPLORER_CHARTS_ENABLED`` setting to ``True`` and install the plotting library
``matplotlib`` with:
Expand All @@ -126,7 +126,7 @@ To enable this feature, set ``EXPLORER_CHARTS_ENABLED`` setting to ``True`` and
pip install "django-sql-explorer[charts]"
This will add the "Pie chart" and the "Line chart" tabs alongside the "Preview" and the "Pivot" tabs in the query results view.
This will add the "Line chart" tab alongside the "Preview" and the "Pivot" tabs in the query results view.

The tabs show the respective charts if the query result table adheres to a format which the chart widget can read. Otherwise a message explaining the required format together with an example query is displayed.

Expand Down
24 changes: 11 additions & 13 deletions explorer/charts.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,17 @@
from .models import QueryResult


def get_pie_chart(result: QueryResult) -> Optional[str]:
if len(result.data) < 1 or len(result.data[0]) < 2:
return None
not_none_rows = [row for row in result.data if row[0] is not None and row[1] is not None]
labels = [row[0] for row in not_none_rows]
values = [row[1] for row in not_none_rows]
if not is_numeric(values):
return None
fig, ax = plt.subplots(figsize=(4.5, 4.5))
ax.pie(values, labels=labels)
return get_svg(fig)


def get_line_chart(result: QueryResult) -> Optional[str]:
"""
Return a line chart in SVG format if the result table adheres to the expected format.
A line chart is rendered if
* there is at least on row of in the result table
* there is at least one numeric column (the first column (with index 0) does not count)
The first column is used as x-axis labels.
All other numeric columns represent a line on the chart.
The name of the column is used as the name of the line in the legend.
Not numeric columns (except the first on) are ignored.
"""
if len(result.data) < 1:
return None
numeric_columns = [
Expand All @@ -45,6 +42,7 @@ def get_line_chart(result: QueryResult) -> Optional[str]:
ax.plot(labels, [row[col_num] for row in result.data], label=result.headers[col_num])
ax.set_xlabel(result.headers[0])
ax.legend()
# Rotate x-axis labels by 20 degrees to reduce overlap
for label in ax.get_xticklabels():
label.set_rotation(20)
label.set_ha("right")
Expand Down
70 changes: 5 additions & 65 deletions explorer/templates/explorer/preview_pane.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@
{% endif %}
{% if data %}
<button class="nav-link" id="nav-pivot-tab" data-bs-toggle="tab" data-bs-target="#nav-pivot" type="button" role="tab" area-controls="nav-pivot" aria-selected="false">{% translate "Pivot" %}</button>
{% if charts_enabled %}
<button class="nav-link" id="nav-piechart-tab" data-bs-toggle="tab" data-bs-target="#nav-piechart" type="button" role="tab" area-controls="nav-piechart" aria-selected="false">{% translate "Pie Chart" %}</button>
{% if charts_enabled and line_chart_svg %}
<button class="nav-link" id="nav-linechart-tab" data-bs-toggle="tab" data-bs-target="#nav-linechart" type="button" role="tab" area-controls="nav-linechart" aria-selected="false">{% translate "Line Chart" %}</button>
{% endif %}
{% endif %}
Expand Down Expand Up @@ -147,71 +146,12 @@ <h3>{{ snapshots|length }} Snapshots <small>(oldest first)</small></h3>
</div>
</div>
</div>
{% if charts_enabled %}
<div class="tab-pane" id="nav-piechart" role="tabpanel" area-labelledby="nav-piechart-tab">
<div class="overflow-wrapper">
{% if pie_chart_svg %}
<div style="margin: 2em;">
{{ pie_chart_svg | safe }}
</div>
{% else %}
<div style="margin: 6em;">
<p>{% blocktranslate trimmed %}
This query result table is not formatted in a way
which could be displayed as a pie chart.
{% endblocktranslate %}</p>
<p>{% blocktranslate trimmed %}
Query results can be displayed as a pie chart as follows:
each row represents one sector of the pie;
the first column will be used as a label
while the second column is used to determine the size of the sector.
Thus the second column must be of a numeric type.
Rows which contain <code>NULL</code>s will be ignored.
{% endblocktranslate %}</p>
<p>{% blocktranslate trimmed %}
Use this sample query to see it in action:
{% endblocktranslate %}</p>
<pre>
SELECT *
FROM (VALUES ('apple', 7),
('orange', 8),
('grape', 9),
('peppermint', 1))
AS fruit_salad_proportions;</pre>
</div>
{% endif %}
</div>
</div>
{% if charts_enabled and line_chart_svg %}
<div class="tab-pane" id="nav-linechart" role="tabpanel" area-labelledby="nav-linechart-tab">
<div class="overflow-wrapper">
{% if line_chart_svg %}
<div style="margin: 2em;">
{{ line_chart_svg | safe }}
</div>
{% else %}
<div style="margin: 6em;">
<p>{% blocktranslate trimmed %}
This query result table is not formatted in a way
which could be displayed as a line chart.
{% endblocktranslate %}</p>
<p>{% blocktranslate trimmed %}
Query results can be displayed as a line chart as follows:
the first column represents the values on the x-axis (e.g. dates).
All other numeric columns represent one line on the chart.
Other columns will be ignored.
{% endblocktranslate %}</p>
<p>{% blocktranslate trimmed %}
Use this sample query to see it in action:
{% endblocktranslate %}</p>
<pre>
SELECT *
FROM (VALUES ('2019-01-01'::date, 500,550,530),
('2020-01-01'::date, 530, 580, 570),
('2021-01-01'::date, 580, 590, 670),
('2022-01-01'::date, 700, 620, 780))
AS fruit_salad_proportions(date, generosity, joy, happiness);</pre>
</div>
{% endif %}
<div style="margin: 2em;">
{{ line_chart_svg | safe }}
</div>
</div>
</div>
{% endif %}
Expand Down
3 changes: 1 addition & 2 deletions explorer/views/utils.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
from django.db import DatabaseError

from explorer import app_settings
from explorer.charts import get_line_chart, get_pie_chart
from explorer.charts import get_line_chart
from explorer.models import QueryFavorite
from explorer.schema import schema_json_info

Expand Down Expand Up @@ -65,7 +65,6 @@ def query_viewmodel(request, query, title=None, form=None, message=None,
"unsafe_rendering": app_settings.UNSAFE_RENDERING,
"fullscreen_params": fullscreen_params.urlencode(),
"charts_enabled": app_settings.EXPLORER_CHARTS_ENABLED,
"pie_chart_svg": get_pie_chart(res) if app_settings.EXPLORER_CHARTS_ENABLED and has_valid_results else None,
"line_chart_svg": get_line_chart(res) if app_settings.EXPLORER_CHARTS_ENABLED and has_valid_results else None,
"is_favorite": is_favorite,
"show_sql_by_default": app_settings.EXPLORER_SHOW_SQL_BY_DEFAULT,
Expand Down

0 comments on commit 045871b

Please sign in to comment.