From f44f5f515ff0c3d99a8aae2b49e7e06daf10e2f2 Mon Sep 17 00:00:00 2001
From: Omar BENHAMID <contact@obenhamid.me>
Date: Wed, 11 Apr 2018 20:33:23 +0100
Subject: [PATCH] Added support for Jinja2 template engine

---
 jchart/jinja2/charting/async/chart.html | 2 ++
 jchart/jinja2/charting/async/html.html  | 3 +++
 jchart/jinja2/charting/async/js.html    | 9 +++++++++
 jchart/jinja2/charting/chart.html       | 2 ++
 jchart/jinja2/charting/html.html        | 3 +++
 jchart/jinja2/charting/js.html          | 7 +++++++
 6 files changed, 26 insertions(+)
 create mode 100644 jchart/jinja2/charting/async/chart.html
 create mode 100644 jchart/jinja2/charting/async/html.html
 create mode 100644 jchart/jinja2/charting/async/js.html
 create mode 100644 jchart/jinja2/charting/chart.html
 create mode 100644 jchart/jinja2/charting/html.html
 create mode 100644 jchart/jinja2/charting/js.html

diff --git a/jchart/jinja2/charting/async/chart.html b/jchart/jinja2/charting/async/chart.html
new file mode 100644
index 0000000..0717a80
--- /dev/null
+++ b/jchart/jinja2/charting/async/chart.html
@@ -0,0 +1,2 @@
+{{ html }}
+{{ js }}
\ No newline at end of file
diff --git a/jchart/jinja2/charting/async/html.html b/jchart/jinja2/charting/async/html.html
new file mode 100644
index 0000000..e79fca4
--- /dev/null
+++ b/jchart/jinja2/charting/async/html.html
@@ -0,0 +1,3 @@
+<div class="chart-container" style="position: relative; {% if chart.height %}height: {{ chart.height }}px;{% endif %} {% if chart.width %}width: {{ chart.width }}px{% endif %}">
+  <canvas class="chart" id="{{ html_id }}"></canvas>
+</div>
diff --git a/jchart/jinja2/charting/async/js.html b/jchart/jinja2/charting/async/js.html
new file mode 100644
index 0000000..cc37287
--- /dev/null
+++ b/jchart/jinja2/charting/async/js.html
@@ -0,0 +1,9 @@
+<script type="text/javascript">
+window.addEventListener("DOMContentLoaded", function() {
+    $.get('{{ url }}', function(configuration) {
+        var ctx = document.getElementById("{{ html_id }}").getContext("2d");    
+
+        new Chart(ctx, configuration);
+    });
+});
+</script>
\ No newline at end of file
diff --git a/jchart/jinja2/charting/chart.html b/jchart/jinja2/charting/chart.html
new file mode 100644
index 0000000..0c6cb4e
--- /dev/null
+++ b/jchart/jinja2/charting/chart.html
@@ -0,0 +1,2 @@
+{{ html|safe }}
+{{ js|safe }}
\ No newline at end of file
diff --git a/jchart/jinja2/charting/html.html b/jchart/jinja2/charting/html.html
new file mode 100644
index 0000000..e79fca4
--- /dev/null
+++ b/jchart/jinja2/charting/html.html
@@ -0,0 +1,3 @@
+<div class="chart-container" style="position: relative; {% if chart.height %}height: {{ chart.height }}px;{% endif %} {% if chart.width %}width: {{ chart.width }}px{% endif %}">
+  <canvas class="chart" id="{{ html_id }}"></canvas>
+</div>
diff --git a/jchart/jinja2/charting/js.html b/jchart/jinja2/charting/js.html
new file mode 100644
index 0000000..c733732
--- /dev/null
+++ b/jchart/jinja2/charting/js.html
@@ -0,0 +1,7 @@
+<script type="text/javascript">
+window.addEventListener("DOMContentLoaded", function() {
+    var ctx = document.getElementById("{{ html_id }}").getContext("2d");
+
+    new Chart(ctx, {{ chart_configuration|safe }});
+});
+</script>
\ No newline at end of file