Custom widgets now share a base template, closes #78

simonw · May 8, 2021 · fd7da19 · fd7da19
1 parent 09262d3
commit fd7da19
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 126 deletions.
diff --git a/django_sql_dashboard/templates/django_sql_dashboard/widgets/_base_widget.html b/django_sql_dashboard/templates/django_sql_dashboard/widgets/_base_widget.html
@@ -0,0 +1,15 @@
+<div class="query-results">
+  {% block widget_results %}{% endblock %}
+  <details><summary style="font-size: 0.7em; margin-bottom: 0.5em; cursor: pointer;">SQL query</summary>
+  {% if saved_dashboard %}<pre class="sql">{{ result.sql }}</pre>{% else %}<textarea
+  name="sql"
+>{{ result.sql|default:"" }}</textarea>{% endif %}
+{% if not saved_dashboard %}<p>
+  <input
+    class="btn"
+    type="submit"
+    value="Run quer{% if query_results|length > 1 %}ies{% else %}y{% endif %}"
+  />
+</p>{% endif %}
+</details>
+</div>
diff --git a/django_sql_dashboard/templates/django_sql_dashboard/widgets/bar_label-bar_quantity.html b/django_sql_dashboard/templates/django_sql_dashboard/widgets/bar_label-bar_quantity.html
@@ -1,61 +1,44 @@
-<div class="query-results">
-  <script
-    src="https://cdn.jsdelivr.net/npm/[email protected]"
-    integrity="sha384-dhyUMwHr1RzDslJIbzN+8UMRMobmqrmABSU3vFSBBnARl6XwbW37TVDCTQs+yEc5"
-    crossorigin="anonymous"
-  ></script>
-  <script
-    src="https://cdn.jsdelivr.net/npm/[email protected]"
-    integrity="sha384-nAwfbn/eKhGkpj7MbyqVuoGEyL/iSeZq4XJ1NNOxA9nT7eXfJuUQgpxYd27m1tAO"
-    crossorigin="anonymous"
-  ></script>
-  <script
-    src="https://cdn.jsdelivr.net/npm/[email protected]"
-    integrity="sha384-RvXMbul/5q2mGE4PXcky3u5+A/K3lk/jv+oizUX/InRPD9wELInOy6YwUxdk/tEu"
-    crossorigin="anonymous"
-  ></script>
-  <div id="vis{{ result.index }}"></div>
-  {% with "vis-data-"|add:result.index as script_name %}
-  {{ result.rows|json_script:script_name }}
-  <script>
-    vegaEmbed("#vis{{ result.index }}", {
-      $schema: "https://vega.github.io/schema/vega-lite/v5.json",
-      description: "A simple bar chart with embedded data.",
-      data: {
-        values: JSON.parse(
-          document.getElementById("{{ script_name }}").textContent
-        ),
-      },
-      mark: "bar",
-      encoding: {
-        x: {
-          field: "bar_label",
-          title: "Label",
-          type: "nominal",
-          axis: { labelAngle: 90 },
-        },
-        y: { field: "bar_quantity", title: "Quantity", type: "quantitative" },
-      },
-    });
-  </script>
-  {% endwith %}
-  <details>
-    <summary style="font-size: 0.7em; margin-bottom: 0.5em; cursor: pointer">
-      SQL query
-    </summary>
-    {% if saved_dashboard %}
-    <pre class="sql">{{ result.sql }}</pre>
-    {% else %}
-      <textarea name="sql">{{ result.sql|default:"" }}</textarea>
-    {% endif %}
-    {% if not saved_dashboard %}
-    <p>
-      <input
-        class="btn"
-        type="submit"
-        value="Run quer{% if query_results|length > 1 %}ies{% else %}y{% endif %}"
-      />
-    </p>
-    {% endif %}
-  </details>
-</div>
+{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
+
+{% block widget_results %}
+<script
+  src="https://cdn.jsdelivr.net/npm/[email protected]"
+  integrity="sha384-dhyUMwHr1RzDslJIbzN+8UMRMobmqrmABSU3vFSBBnARl6XwbW37TVDCTQs+yEc5"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://cdn.jsdelivr.net/npm/[email protected]"
+  integrity="sha384-nAwfbn/eKhGkpj7MbyqVuoGEyL/iSeZq4XJ1NNOxA9nT7eXfJuUQgpxYd27m1tAO"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://cdn.jsdelivr.net/npm/[email protected]"
+  integrity="sha384-RvXMbul/5q2mGE4PXcky3u5+A/K3lk/jv+oizUX/InRPD9wELInOy6YwUxdk/tEu"
+  crossorigin="anonymous"
+></script>
+<div id="vis{{ result.index }}"></div>
+{% with "vis-data-"|add:result.index as script_name %}
+{{ result.rows|json_script:script_name }}
+<script>
+vegaEmbed("#vis{{ result.index }}", {
+  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+  description: "A simple bar chart with embedded data.",
+  data: {
+    values: JSON.parse(
+      document.getElementById("{{ script_name }}").textContent
+    ),
+  },
+  mark: "bar",
+  encoding: {
+    x: {
+      field: "bar_label",
+      title: "Label",
+      type: "nominal",
+      axis: { labelAngle: 90 },
+    },
+    y: { field: "bar_quantity", title: "Quantity", type: "quantitative" },
+  },
+});
+</script>
+{% endwith %}
+{% endblock %}
diff --git a/django_sql_dashboard/templates/django_sql_dashboard/widgets/big_number-label.html b/django_sql_dashboard/templates/django_sql_dashboard/widgets/big_number-label.html
@@ -1,18 +1,10 @@
-<div class="query-results">
+{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
+
+{% block widget_results %}
   {% for row in result.rows %}
-  <p>{{ row.label }}</p>
-  <h1>{{ row.big_number }}</h1>
+    <div class="big-number">
+      <p><strong>{{ row.label }}</strong></p>
+      <h1>{{ row.big_number }}</h1>
+    </div>
   {% endfor %}
-  <details><summary style="font-size: 0.7em; margin-bottom: 0.5em; cursor: pointer;">SQL query</summary>
-  {% if saved_dashboard %}<pre class="sql">{{ result.sql }}</pre>{% else %}<textarea
-  name="sql"
->{{ result.sql|default:"" }}</textarea>{% endif %}
-{% if not saved_dashboard %}<p>
-  <input
-    class="btn"
-    type="submit"
-    value="Run quer{% if query_results|length > 1 %}ies{% else %}y{% endif %}"
-  />
-</p>{% endif %}
-</details>
-</div>
+{% endblock %}
diff --git a/django_sql_dashboard/templates/django_sql_dashboard/widgets/completed_count-total_count.html b/django_sql_dashboard/templates/django_sql_dashboard/widgets/completed_count-total_count.html
@@ -1,20 +1,10 @@
-<div class="query-results">
+{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
+
+{% block widget_results %}
   {% for row in result.rows %}
-  <div class="completed-count-total-count">
-    <div class="completed-count-total-count-bar" style="width: {% widthratio row.completed_count row.total_count 100 %}%">&nbsp;</div>
-  </div>
-  <h2>{{ row.completed_count }} / {{ row.total_count }}: {% widthratio row.completed_count row.total_count 100 %}%</h2>
+    <div class="completed-count-total-count">
+      <div class="completed-count-total-count-bar" style="width: {% widthratio row.completed_count row.total_count 100 %}%">&nbsp;</div>
+    </div>
+    <h2>{{ row.completed_count }} / {{ row.total_count }}: {% widthratio row.completed_count row.total_count 100 %}%</h2>
   {% endfor %}
-  <details><summary style="font-size: 0.7em; margin-bottom: 0.5em; cursor: pointer;">SQL query</summary>
-  {% if saved_dashboard %}<pre class="sql">{{ result.sql }}</pre>{% else %}<textarea
-  name="sql"
->{{ result.sql|default:"" }}</textarea>{% endif %}
-{% if not saved_dashboard %}<p>
-  <input
-    class="btn"
-    type="submit"
-    value="Run quer{% if query_results|length > 1 %}ies{% else %}y{% endif %}"
-  />
-</p>{% endif %}
-</details>
-</div>
+{% endblock %}
diff --git a/django_sql_dashboard/templates/django_sql_dashboard/widgets/html.html b/django_sql_dashboard/templates/django_sql_dashboard/widgets/html.html
@@ -1,17 +1,9 @@
-{% load django_sql_dashboard %}<div class="query-results">
+{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
+
+{% load django_sql_dashboard %}
+
+{% block widget_results %}
   {% for row in result.rows %}
-  {{ row.html|sql_dashboard_bleach }}
+    {{ row.html|sql_dashboard_bleach }}
   {% endfor %}
-  <details><summary style="font-size: 0.7em; margin-bottom: 0.5em; cursor: pointer;">SQL query</summary>
-  {% if saved_dashboard %}<pre class="sql">{{ result.sql }}</pre>{% else %}<textarea
-  name="sql" style="height: 10em;"
->{{ result.sql|default:"" }}</textarea>{% endif %}
-{% if not saved_dashboard %}<p>
-  <input
-    class="btn"
-    type="submit"
-    value="Run quer{% if query_results|length > 1 %}ies{% else %}y{% endif %}"
-  />
-</p>{% endif %}
-</details>
-</div>
+{% endblock %}
diff --git a/django_sql_dashboard/templates/django_sql_dashboard/widgets/markdown.html b/django_sql_dashboard/templates/django_sql_dashboard/widgets/markdown.html
@@ -1,17 +1,9 @@
-{% load django_sql_dashboard %}<div class="query-results">
+{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
+
+{% load django_sql_dashboard %}
+
+{% block widget_results %}
   {% for row in result.rows %}
-  {{ row.markdown|sql_dashboard_markdown }}
+    {{ row.markdown|sql_dashboard_markdown }}
   {% endfor %}
-  <details><summary style="font-size: 0.7em; margin-bottom: 0.5em; cursor: pointer;">SQL query</summary>
-  {% if saved_dashboard %}<pre class="sql">{{ result.sql }}</pre>{% else %}<textarea
-  name="sql" style="height: 10em;"
->{{ result.sql|default:"" }}</textarea>{% endif %}
-{% if not saved_dashboard %}<p>
-  <input
-    class="btn"
-    type="submit"
-    value="Run quer{% if query_results|length > 1 %}ies{% else %}y{% endif %}"
-  />
-</p>{% endif %}
-</details>
-</div>
+{% endblock %}
diff --git a/docs/widgets.md b/docs/widgets.md
@@ -83,4 +83,21 @@ Within your custom template you will have access to a template variable called `
 - `duration_ms` - how long the query took, in floating point milliseconds
 - `templates` - a list of templates that were considered for rendering this widget
 
-You can find examples of widget templates in the [templates/django_sql_dashboard/widgets](https://github.com/simonw/django-sql-dashboard/tree/main/django_sql_dashboard/templates/django_sql_dashboard/widgets) directory.
+The easiest way to define your custom widget template is to extend the `django_sql_dashboard/widgets/_base_widget.html` base template.
+
+Here is the full implementation of the `big_number`, `label` widget that is included with Django SQL Dashboard, in the `django_sql_dashboard/widgets/big_number-label.html` template file:
+
+```html+django
+{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
+
+{% block widget_results %}
+  {% for row in result.rows %}
+    <div class="big-number">
+      <p><strong>{{ row.label }}</strong></p>
+      <h1>{{ row.big_number }}</h1>
+    </div>
+  {% endfor %}
+{% endblock %}
+```
+
+You can find more examples of widget templates in the [templates/django_sql_dashboard/widgets](https://github.com/simonw/django-sql-dashboard/tree/main/django_sql_dashboard/templates/django_sql_dashboard/widgets) directory.