Add embeddable charts

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)

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;
 }

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;
+}

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>

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