explorerhq#480: Add pie chart

eeriksp · Jul 26, 2022 · 6270f59 · 6270f59
1 parent ca31cc9
commit 6270f59
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 1 deletion.
diff --git a/explorer/chart.py b/explorer/chart.py
@@ -0,0 +1,28 @@
+from typing import Optional
+from io import BytesIO
+
+import matplotlib.pyplot as plt
+from matplotlib.figure import Figure
+
+from .models import QueryResult
+
+
+def get_pie_chart(result: QueryResult) -> Optional[str]:
+    if len(result.data) < 1 \
+        or not isinstance(result.data[0][0], str) \
+        or not isinstance(result.data[0][1], (int, float)):
+        return None
+    labels = [row[0] for row in result.data]
+    values = [row[1] for row in result.data]
+    fig, ax = plt.subplots()
+    ax.pie(values, labels=labels)
+    return get_csv_as_hex(fig)
+
+
+def get_csv_as_hex(fig: Figure) -> str:
+    buffer = BytesIO()
+    fig.savefig(buffer, format='svg')
+    buffer.seek(0)
+    graph = buffer.getvalue().decode('utf-8')
+    buffer.close()
+    return graph
diff --git a/explorer/templates/explorer/preview_pane.html b/explorer/templates/explorer/preview_pane.html
@@ -23,6 +23,12 @@
                                 {% trans "Pivot" %}
                             </a>
                         </li>
+                        <li role="presentation">
+                            <a id="pie-chart-tab-label" href="#pie-chart" aria-controls="pie-chart" role="tab" data-toggle="tab">
+                                {% trans "Pie chart" %}
+                            </a>
+                        </li>
+
                     {% endif %}
                 </ul>
                 <div class="tab-content">
@@ -152,6 +158,45 @@
                                 </div>
                             </div>
                         </div>
+                        <div role="tabpanel" class="tab-pane" id="pie-chart">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <span class="panel-title">{% trans "Pie chart" %}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="overflow-wrapper">
+                                     <div style="margin: 4em;">
+                                        {% if pie_chart_svg %}
+                                            {{ pie_chart_svg | safe }}
+                                        {% else %}
+                                            <p>{% blocktrans %}
+                                                To display query results as a pie chart,<br>
+                                                make sure that the first column is of type text<br>
+                                                and the second column is numeric.
+                                            {% endblocktrans %}</p>
+                                            <p>{% blocktrans %}
+                                                Each row represents one sector of the pie:<br>
+                                                the first column will be used as a label<br>
+                                                while the second column is used to determine the size of the sector.
+                                            {% endblocktrans %}</p>
+                                            <p>{% blocktrans %}
+                                                Use this sample query to get started:
+                                            {% endblocktrans %}</p>
+                                            <code>SELECT *<br>
+                                                FROM (VALUES
+                                                ('apple', 7),
+                                                ('orange', 8),
+                                                ('grape', 9),
+                                                ('peppermint', 1))<br>
+                                                AS fruit_salad_proportions;</code>
+                                        {% endif %}
+                                     </div>
+                                </div>
+                            </div>
+                        </div>
                     {% endif %}
                 </div>
             </div>

diff --git a/explorer/views/utils.py b/explorer/views/utils.py
@@ -2,6 +2,7 @@
 from django.db import DatabaseError
 
 from explorer import app_settings
+from explorer.chart import get_pie_chart
 
 
 def query_viewmodel(request, query, title=None, form=None, message=None,
@@ -55,6 +56,7 @@ def query_viewmodel(request, query, title=None, form=None, message=None,
         'snapshots': query.snapshots if query.snapshot else [],
         'ql_id': ql.id if ql else None,
         'unsafe_rendering': app_settings.UNSAFE_RENDERING,
-        'fullscreen_params': fullscreen_params.urlencode()
+        'fullscreen_params': fullscreen_params.urlencode(),
+        'pie_chart_svg': get_pie_chart(res) if has_valid_results else None
     }
     return ret