From 1e79704331ad3133a12b4f722c74d5fd98e7f700 Mon Sep 17 00:00:00 2001
From: Julian Nadeau <jules2689@github.com>
Date: Thu, 7 Nov 2019 00:20:14 -0500
Subject: [PATCH] Add embeddable charts

This adds the option to embed a chart outside of the blazer engine.
<%= render "blazer/queries/query", query: query %> will render the chart and all relevant pieces.

Params can be provided, just like in a dashboard, to allow variables to be passed in. The API is the same
---
 README.md                                     | 14 ++++++++
 app/assets/stylesheets/blazer/application.css | 36 +------------------
 app/assets/stylesheets/blazer/chart.css       | 35 ++++++++++++++++++
 app/views/blazer/queries/_query.html.erb      | 24 +++++++++++++
 lib/blazer/engine.rb                          |  6 ++++
 5 files changed, 80 insertions(+), 35 deletions(-)
 create mode 100644 app/assets/stylesheets/blazer/chart.css
 create mode 100644 app/views/blazer/queries/_query.html.erb

diff --git a/README.md b/README.md
index 7ada9973c..16c237f16 100644
--- a/README.md
+++ b/README.md
@@ -363,6 +363,20 @@ Use the column name `target` to draw a line for goals. [Example](https://blazer.
 SELECT date_trunc('week', created_at), COUNT(*) AS new_users, 100000 AS target FROM users GROUP BY 1
 ```
 
+### Embedding a Chart outside of the Blazer Rails Engine
+
+Queries can be found using the ActiveRecord API. E.g. `Blazer::Query.find(5)`
+
+Once you have a query, you can render a chart in any view:
+```erb
+<%= render "blazer/queries/query", query: query %>
+```
+
+If your chart has options for variables, you can pass those in using the `params` keyword:
+```erb
+<%= render "blazer/queries/query", query: query, params: { ... } %>
+```
+
 ## Dashboards
 
 Create a dashboard with multiple queries. [Example](https://blazer.dokkuapp.com/dashboards/1-dashboard-demo)
diff --git a/app/assets/stylesheets/blazer/application.css b/app/assets/stylesheets/blazer/application.css
index 4cb57fe82..15e72ddb7 100644
--- a/app/assets/stylesheets/blazer/application.css
+++ b/app/assets/stylesheets/blazer/application.css
@@ -3,6 +3,7 @@
  *= require ./selectize
  *= require ./github
  *= require ./daterangepicker
+ *= require ./chart
  *= require_self
  */
 
@@ -81,21 +82,6 @@ input.search:focus {
   background-color: red;
 }
 
-.chart {
-  height: 300px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.chart > .results-container {
-  height: 300px;
-  border: solid 1px #ddd;
-  overflow: scroll;
-  text-align: left;
-}
-
 .dashboard {
   font-weight: bold;
 }
@@ -185,22 +171,6 @@ input.search:focus {
   display: none;
 }
 
-.chart-container {
-  clear: both;
-}
-
-.chart-container h4 {
-  text-align: center;
-}
-
-.chart-container h4 a {
-  color: inherit;
-}
-
-.query-error {
-  color: red;
-}
-
 .small-form {
   margin-right: auto;
   margin-left: auto;
@@ -217,10 +187,6 @@ h1, h2, h3, h4, p, hr, .table, .navbar, #header, .alert, .form-group {
   margin-bottom: 15px;
 }
 
-.double-margin, .chart-container {
-  margin-bottom: 30px;
-}
-
 h1 {
   font-size: 24px;
 }
diff --git a/app/assets/stylesheets/blazer/chart.css b/app/assets/stylesheets/blazer/chart.css
new file mode 100644
index 000000000..e0a085b88
--- /dev/null
+++ b/app/assets/stylesheets/blazer/chart.css
@@ -0,0 +1,35 @@
+
+.chart-container {
+  clear: both;
+}
+
+.chart-container h4 {
+  text-align: center;
+}
+
+.chart-container h4 a {
+  color: inherit;
+}
+
+.query-error {
+  color: red;
+}
+
+.chart-container {
+  margin-bottom: 30px;
+}
+
+.chart {
+  height: 300px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.chart > .results-container {
+  height: 300px;
+  border: solid 1px #ddd;
+  overflow: scroll;
+  text-align: left;
+}
diff --git a/app/views/blazer/queries/_query.html.erb b/app/views/blazer/queries/_query.html.erb
new file mode 100644
index 000000000..dce29223f
--- /dev/null
+++ b/app/views/blazer/queries/_query.html.erb
@@ -0,0 +1,24 @@
+<% unless defined?(@blazer_query_assets_loaded) && @blazer_query_assets_loaded %>
+  <%= stylesheet_link_tag "blazer/chart" %>
+  <%= javascript_include_tag "blazer/application" %>
+  <% @blazer_query_assets_loaded = true %>
+<% end %>
+
+<div class="chart-container">
+  <h4><%= link_to query.friendly_name, blazer.query_path(query, local_assigns[:params] || {}), target: "_blank" %></h4>
+  <div id="chart-<%= query.id %>" class="chart">
+    <p class="text-muted">Loading...</p>
+  </div>
+</div>
+
+<script>
+  <%= blazer_js_var "rootPath", blazer.root_path %>
+  <%= blazer_js_var "data", {statement: query.statement, query_id: query.id, data_source: query.data_source, only_chart: true} %>
+
+  runQuery(data, function (data) {
+    $("#chart-<%= query.id %>").html(data)
+    $("#chart-<%= query.id %> table").stupidtable(stupidtableCustomSettings)
+  }, function (message) {
+    $("#chart-<%= query.id %>").addClass("query-error").html(message)
+  });
+</script>
diff --git a/lib/blazer/engine.rb b/lib/blazer/engine.rb
index b01d24068..4b9bba727 100644
--- a/lib/blazer/engine.rb
+++ b/lib/blazer/engine.rb
@@ -3,9 +3,14 @@ class Engine < ::Rails::Engine
     isolate_namespace Blazer
 
     initializer "blazer" do |app|
+      ActiveSupport.on_load :action_view do
+        include Blazer::BaseHelper
+      end
+
       if defined?(Sprockets) && Sprockets::VERSION >= "4"
         app.config.assets.precompile << "blazer/application.js"
         app.config.assets.precompile << "blazer/application.css"
+        app.config.assets.precompile << "blazer/chart.css"
         app.config.assets.precompile << "blazer/glyphicons-halflings-regular.eot"
         app.config.assets.precompile << "blazer/glyphicons-halflings-regular.svg"
         app.config.assets.precompile << "blazer/glyphicons-halflings-regular.ttf"
@@ -15,6 +20,7 @@ class Engine < ::Rails::Engine
       else
         # use a proc instead of a string
         app.config.assets.precompile << proc { |path| path =~ /\Ablazer\/application\.(js|css)\z/ }
+        app.config.assets.precompile << proc { |path| path =~ /\Ablazer\/chart\.css\z/ }
         app.config.assets.precompile << proc { |path| path =~ /\Ablazer\/.+\.(eot|svg|ttf|woff|woff2)\z/ }
         app.config.assets.precompile << proc { |path| path == "blazer/favicon.png" }
       end