finery 3.0.0

data/app/views/blazer/dashboards/show.html.erb

@@ -0,0 +1,53 @@
+<% blazer_title @dashboard.name %>
+
+<div class="topbar">
+  <div class="container">
+    <div class="row" style="padding-top: 13px;">
+      <div class="col-sm-9">
+        <%= render partial: "blazer/nav" %>
+        <h3 style="line-height: 34px; display: inline; margin-left: 5px;">
+          <%= @dashboard.name %>
+        </h3>
+      </div>
+      <div class="col-sm-3 text-right">
+        <%= link_to "Edit", edit_dashboard_path(@dashboard, params: variable_params(@dashboard)), class: "btn btn-info" %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div style="margin-bottom: 60px;"></div>
+
+<% if @data_sources.any? { |ds| ds.cache_mode != "off" } %>
+  <p class="text-muted" style="float: right;">
+    Some queries may be cached
+    <%= link_to "Refresh", refresh_dashboard_path(@dashboard, params: variable_params(@dashboard)), method: :post %>
+  </p>
+<% end %>
+
+<% if @bind_vars.any? %>
+  <%= render partial: "blazer/variables", locals: {action: dashboard_path(@dashboard)} %>
+<% else %>
+  <div style="padding-bottom: 15px;"></div>
+<% end %>
+
+<% @queries.each_with_index do |query, i| %>
+  <div class="chart-container">
+    <h4><%= link_to query.friendly_name, query_path(query, params: variable_params(query)), target: "_blank" %></h4>
+    <div id="chart-<%= i %>" class="chart">
+      <p class="text-muted">Loading...</p>
+    </div>
+  </div>
+  <script>
+    <% data = {statement: query.statement, query_id: query.id, data_source: query.data_source, variables: variable_params(query), only_chart: true} %>
+    <% data.merge!(cohort_period: params[:cohort_period]) if params[:cohort_period] %>
+    <%= blazer_js_var "data", data %>
+
+    runQuery(data, function (data) {
+      $("#chart-<%= i %>").html(data)
+      $("#chart-<%= i %> table").stupidtable(stupidtableCustomSettings)
+    }, function (message) {
+      $("#chart-<%= i %>").addClass("query-error").html(message)
+    });
+  </script>
+<% end %>

data/app/views/blazer/queries/_caching.html.erb

@@ -0,0 +1,16 @@
+<% if @cached_at || @just_cached %>
+  <p class="text-muted" style="float: right;">
+    <% if @cached_at %>
+      Cached <%= time_ago_in_words(@cached_at, include_seconds: true) %> ago
+    <% elsif params[:query_id] %>
+      Cached just now
+      <% if @data_source.cache_mode == "slow" %>
+        (over <%= "%g" % @data_source.cache_slow_threshold %>s)
+      <% end %>
+    <% end %>
+
+    <% if @query && params[:query_id] %>
+      <%= link_to "Refresh", refresh_query_path(@query, params: variable_params(@query, @var_params)), method: :post %>
+    <% end %>
+  </p>
+<% end %>

data/app/views/blazer/queries/_cohorts.html.erb

@@ -0,0 +1,48 @@
+<% unless @only_chart %>
+  <%= render partial: "caching" %>
+  <p class="text-muted" style="margin-bottom: 10px;">
+    <%= pluralize(@rows.size, "cohort") %>
+  </p>
+<% end %>
+<% if @rows.any? %>
+  <div class="results-container">
+    <table class="table results-table">
+      <thead>
+        <tr>
+          <th style="min-width: 100px;">Cohort</th>
+          <% 12.times do |i| %>
+            <th style="width: 7.5%; text-align: right;"><%= @conversion_period.titleize %> <%= i + 1 %></th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% @rows.each do |row| %>
+          <tr>
+            <td>
+              <%= row[0] %>
+              <div style="font-size: 12px; color: #999;"><%= row[1] == 1 ? "1 user" : "#{number_with_delimiter(row[1])} users" %></div>
+            </td>
+            <% 12.times do |i| %>
+              <td style="text-align: right;">
+                <% num = row[i + 2] %>
+                <% if num %>
+                  <% denom = row[1] %>
+                  <% if denom > 0 %>
+                    <%= (100.0 * num / denom).round %>%
+                  <% else %>
+                    -
+                  <% end %>
+                  <div style="font-size: 12px; color: #999;"><%= number_with_delimiter(num) %></div>
+                <% else %>
+                  -
+                <% end %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% elsif @only_chart %>
+  <p class="text-muted">No cohorts</p>
+<% end %>

data/app/views/blazer/queries/_form.html.erb

@@ -0,0 +1,255 @@
+<% if @query.errors.any? %>
+  <div class="alert alert-danger"><%= @query.errors.full_messages.first %></div>
+<% end %>
+
+<% @variable_params = @query.persisted? ? variable_params(@query) : nested_variable_params(@query) %>
+
+<div id="app" v-cloak>
+  <%= form_for @query, url: (@query.persisted? ? query_path(@query, params: @variable_params) : queries_path(params: @variable_params)), html: {autocomplete: "off"} do |f| %>
+    <div class="row">
+      <div id="statement-box" class="col-xs-8">
+        <div class= "form-group">
+          <%= f.hidden_field :statement %>
+          <div id="editor-container">
+            <div id="editor" :style="{ height: editorHeight }"><%= @query.statement %></div>
+          </div>
+        </div>
+        <div class="form-group text-right" style="margin-bottom: 8px;">
+          <div class="pull-left" style="margin-top: 8px;">
+            <%= link_to "Back", :back %>
+            <a :href="docsPath" target="_blank" style="margin-left: 40px;">Docs</a>
+            <a :href="schemaPath" target="_blank" style="margin-left: 40px;">Schema</a>
+          </div>
+
+          <%= f.select :data_source, Blazer.data_sources.map { |_, ds| [ds.name, ds.id] }, {}, class: ("hide" if Blazer.data_sources.size <= 1), style: "width: 140px;" %>
+          <div id="tables" style="display: inline-block; width: 250px; margin-right: 10px;">
+            <select id="table_names" style="width: 240px;" placeholder="Preview table"></select>
+          </div>
+          <a v-on:click="run" v-if="!running" class="btn btn-info" style="vertical-align: top; width: 70px;">Run</a>
+          <a v-on:click="cancel" v-if="running" class="btn btn-danger" style="vertical-align: top; width: 70px;">Cancel</a>
+        </div>
+      </div>
+      <div class="col-xs-4">
+        <div class="form-group">
+          <%= f.label :name %>
+          <%= f.text_field :name, class: "form-control" %>
+        </div>
+        <div class="form-group">
+          <%= f.label :description %>
+          <%= f.text_area :description, placeholder: "Optional", style: "height: 80px;", class: "form-control" %>
+        </div>
+        <div class="form-group text-right">
+          <%= f.submit "For Enter Press", class: "hide" %>
+          <% if @query.persisted? %>
+            <%= link_to "Delete", query_path(@query), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger" %>
+            <%= f.submit "Fork", class: "btn btn-info" %>
+          <% end %>
+          <%= f.submit @query.persisted? ? "Update" : "Create", class: "btn btn-success" %>
+        </div>
+        <% if @query.persisted? %>
+          <% dashboards_count = @query.dashboards.count %>
+          <% checks_count = @query.checks.count %>
+          <% words = [] %>
+          <% words << pluralize(dashboards_count, "dashboard") if dashboards_count > 0 %>
+          <% words << pluralize(checks_count, "check") if checks_count > 0 %>
+          <% if words.any? %>
+            <div class="alert alert-info">
+              Part of <%= words.to_sentence %>. Be careful when editing.
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <div id="results">
+    <p class="text-muted" v-if="running">Loading...</p>
+    <div id="results-html" v-if="!running" :class="{ 'query-error': error }"></div>
+  </div>
+</div>
+
+<script>
+  <%= blazer_js_var "variableParams", @variable_params %>
+  <%= blazer_js_var "previewStatement", Blazer.data_sources.to_h { |k, v| [k, (v.preview_statement rescue "")] } %>
+
+  var app = Vue.createApp({
+    data: function() {
+      return {
+        running: false,
+        results: "",
+        error: false,
+        dataSource: "",
+        selectize: null,
+        editorHeight: "180px"
+      }
+    },
+    computed: {
+      schemaPath: function() {
+        return Routes.schema_queries_path({data_source: this.dataSource})
+      },
+      docsPath: function() {
+        return Routes.docs_queries_path({data_source: this.dataSource})
+      }
+    },
+    methods: {
+      run: function(e) {
+        this.running = true
+        this.results = ""
+        this.error = false
+        cancelAllQueries()
+
+        var data = {statement: this.getSQL(), data_source: $("#query_data_source").val(), variables: variableParams}
+
+        var _this = this
+
+        runQuery(data, function (data) {
+          _this.running = false
+          _this.showResults(data)
+
+          errorLine = _this.getErrorLine()
+          if (errorLine) {
+            editor.getSession().addGutterDecoration(errorLine - 1, "error")
+            editor.scrollToLine(errorLine, true, true, function () {})
+            editor.gotoLine(errorLine, 0, true)
+            editor.focus()
+          }
+        }, function (data) {
+          _this.running = false
+          _this.error = true
+          _this.showResults(data)
+        })
+      },
+      cancel: function(e) {
+        this.running = false
+        cancelAllQueries()
+      },
+      updateDataSource: function(dataSource) {
+        this.dataSource = dataSource
+        var selectize = this.selectize
+        selectize.clearOptions()
+
+        if (this.tablesXhr) {
+          this.tablesXhr.abort()
+        }
+
+        this.tablesXhr = $.getJSON(Routes.tables_queries_path({data_source: this.dataSource}), function(data) {
+          var newOptions = []
+          for (var i = 0; i < data.length; i++) {
+            var table = data[i]
+            if (typeof table === "object") {
+              newOptions.push({text: table.table, value: table.value})
+            } else {
+              newOptions.push({text: table, value: table})
+            }
+          }
+          selectize.clearOptions()
+          selectize.addOption(newOptions)
+          selectize.refreshOptions(false)
+        })
+      },
+      showEditor: function() {
+        var _this = this
+
+        editor = ace.edit("editor")
+        editor.setTheme("ace/theme/twilight")
+        editor.getSession().setMode("ace/mode/sql")
+        editor.setOptions({
+          enableBasicAutocompletion: false,
+          enableSnippets: false,
+          enableLiveAutocompletion: false,
+          highlightActiveLine: false,
+          fontSize: 12,
+          minLines: 10
+        })
+        editor.renderer.setShowGutter(true)
+        editor.renderer.setPrintMarginColumn(false)
+        editor.renderer.setPadding(10)
+        editor.getSession().setUseWrapMode(true)
+        editor.commands.addCommand({
+          name: "run",
+          bindKey: {win: "Ctrl-Enter",  mac: "Command-Enter"},
+          exec: function(editor) {
+            _this.run()
+          },
+          readOnly: false // false if this command should not apply in readOnly mode
+        })
+        // fix command+L
+        editor.commands.removeCommands(["gotoline", "find"])
+
+        this.editor = editor
+
+        editor.getSession().on("change", function () {
+          $("#query_statement").val(editor.getValue())
+          _this.adjustHeight()
+        })
+        this.adjustHeight()
+        editor.focus()
+      },
+      adjustHeight: function() {
+        // https://stackoverflow.com/questions/11584061/
+        var editor = this.editor
+        var lines = editor.getSession().getScreenLength()
+        if (lines < 9) {
+          lines = 9
+        }
+
+        this.editorHeight = ((lines + 1) * 16).toString() + "px"
+
+        Vue.nextTick(function () {
+          editor.resize()
+        })
+      },
+      getSQL: function() {
+        var selectedText = editor.getSelectedText()
+        var text = selectedText.length < 10 ? editor.getValue() : selectedText
+        return text.replace(/\n/g, "\r\n")
+      },
+      getErrorLine: function() {
+        var editor = this.editor
+        var errorLine = this.results.substring(0, 100).includes("alert-danger") && /LINE (\d+)/g.exec(this.results)
+
+        if (errorLine) {
+          errorLine = parseInt(errorLine[1], 10)
+          if (editor.getSelectedText().length >= 10) {
+            errorLine += editor.getSelectionRange().start.row
+          }
+          return errorLine
+        }
+      },
+      showResults(data) {
+        // can't do it the Vue way due to script tags in results
+        // this.results = data
+
+        Vue.nextTick(function () {
+          $("#results-html").html(data)
+        })
+      }
+    },
+    mounted: function() {
+      var _this = this
+
+      var $select = $("#table_names").selectize({})
+      var selectize = $select[0].selectize
+      selectize.on("change", function(val) {
+        editor.setValue(previewStatement[_this.dataSource].replace("{table}", val), 1)
+        _this.run()
+        selectize.clear(true)
+        selectize.blur()
+      })
+      this.selectize = selectize
+
+      this.updateDataSource($("#query_data_source").val())
+
+      var $dsSelect = $("#query_data_source").selectize({})
+      var dsSelectize = $dsSelect[0].selectize
+      dsSelectize.on("change", function(val) {
+        _this.updateDataSource(val)
+        dsSelectize.blur()
+      })
+
+      this.showEditor()
+    }
+  })
+  app.config.compilerOptions.whitespace = "preserve"
+  app.mount("#app")
+</script>

data/app/views/blazer/queries/docs.html.erb

@@ -0,0 +1,147 @@
+<% blazer_title "Docs: #{@data_source.name}" %>
+
+<h1>Docs: <%= @data_source.name %></h1>
+
+<hr />
+
+<h2>Smart Variables</h2>
+
+<% if @smart_variables.any? %>
+  <p>Use these variable names to get a dropdown of values.</p>
+
+  <table class="table" style="max-width: 500px;">
+    <thead>
+      <tr>
+        <th>Variable</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @smart_variables.each do |k, _| %>
+        <tr>
+          <td><code>{<%= k %>}</code></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <p>Use <code>{start_time}</code> and <code>{end_time}</code> for a date range selector. End a variable name with <code>_at</code> for a date selector.</p>
+<% else %>
+  <p>None set - add them in <code>config/blazer.yml</code>.</p>
+<% end %>
+
+<h2>Linked Columns</h2>
+
+<% if @linked_columns.any? %>
+  <p>Use these column names to link results to other pages.</p>
+
+  <table class="table" style="max-width: 500px;">
+    <thead>
+      <tr>
+        <th style="width: 20%;">Name</th>
+        <th>URL</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @linked_columns.each do |k, v| %>
+        <tr>
+          <td><%= k %></td>
+          <td><%= v %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <p>Values that match the format of a URL will be linked automatically.</p>
+<% else %>
+  <p>None set - add them in <code>config/blazer.yml</code>.</p>
+<% end %>
+
+<h2>Smart Columns</h2>
+
+<% if @smart_columns.any? %>
+  <p>Use these column names to show additional data.</p>
+
+  <table class="table" style="max-width: 500px;">
+    <thead>
+      <tr>
+        <th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @smart_columns.each do |k, _| %>
+        <tr>
+          <td><%= k %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <p>None set - add them in <code>config/blazer.yml</code>.</p>
+<% end %>
+
+<h2>Charts</h2>
+
+<p>Use specific combinations of column types to generate charts.</p>
+
+<table class="table" style="max-width: 500px;">
+  <thead>
+    <tr>
+      <th style="width: 20%;">Chart</th>
+      <th>Column Types</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Line</td>
+      <td>2+ columns - timestamp, numeric(s)</td>
+    </tr>
+    <tr>
+      <td>Line</td>
+      <td>3 columns - timestamp, string, numeric</td>
+    </tr>
+    <tr>
+      <td>Column</td>
+      <td>2+ columns - string, numeric(s)</td>
+    </tr>
+    <tr>
+      <td>Column</td>
+      <td>3 columns - string, string, numeric</td>
+    </tr>
+    <tr>
+      <td>Scatter</td>
+      <td>2 columns - both numeric</td>
+    </tr>
+    <tr>
+      <td>Pie</td>
+      <td>2 columns - string, numeric - and last column named <code>pie</code></td>
+    </tr>
+    <tr>
+      <td>Map</td>
+      <td>
+        Named <code>latitude</code> and <code>longitude</code>, or <code>lat</code> and <code>lon</code>, or <code>lat</code> and <code>lng</code>
+        <% if !Blazer.maps? %>
+          <br />
+          <strong>Needs configured</strong>
+        <% end %>
+      </td>
+    </tr>
+    <tr>
+      <td>Area Map</td>
+      <td>
+        Named <code>geojson</code>
+        <% if !Blazer.maps? %>
+          <br />
+          <strong>Needs configured</strong>
+        <% end %>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<p>Use the column name <code>target</code> to draw a line for goals.</p>
+
+<% if @data_source.supports_cohort_analysis? %>
+  <h2>Cohort Analysis</h2>
+
+  <p>Create a query with the comment <code>/* cohort analysis */</code>. The result should have columns named <code>user_id</code> and <code>conversion_time</code> and optionally <code>cohort_time</code>.</p>
+<% end %>

data/app/views/blazer/queries/edit.html.erb

@@ -0,0 +1,2 @@
+<% blazer_title "Edit - #{@query.name}" %>
+<%= render partial: "form" %>

data/app/views/blazer/queries/home.html.erb

@@ -0,0 +1,169 @@
+<div id="queries">
+  <div id="header">
+    <div class="pull-right" style="line-height: 34px;">
+      <% if blazer_user %>
+        <%= link_to "All", root_path, class: !params[:filter] ? "active" : nil, style: "margin-right: 40px;" %>
+
+        <% if Blazer.audit %>
+          <%= link_to "Viewed", root_path(filter: "viewed"), class: params[:filter] == "viewed" ? "active" : nil, style: "margin-right: 40px;" %>
+        <% end %>
+
+        <%= link_to "Mine", root_path(filter: "mine"), class: params[:filter] == "mine" ? "active" : nil, style: "margin-right: 40px;" %>
+      <% end %>
+
+      <div class="btn-group">
+        <%= link_to "New Query", new_query_path, class: "btn btn-info" %>
+        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <span class="caret"></span>
+          <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <ul class="dropdown-menu">
+          <li><%= link_to "Checks", checks_path %></li>
+          <% if Blazer.uploads? %>
+            <li><%= link_to "Uploads", uploads_path %></li>
+          <% end %>
+          <li role="separator" class="divider"></li>
+          <li><%= link_to "New Dashboard", new_dashboard_path %></li>
+          <li><%= link_to "New Check", new_check_path %></li>
+        </ul>
+      </div>
+    </div>
+    <input type="text" v-model="searchTerm" placeholder="Start typing a query, dashboard, or person" style="width: 300px; display: inline-block;" v-focus class="search form-control" />
+  </div>
+
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <% if Blazer.user_class %>
+          <th style="width: 20%; text-align: right;">Mastermind</th>
+        <% end%>
+      </tr>
+    </thead>
+    <tbody class="list" v-cloak>
+      <tr v-for="query in visibleItems">
+        <td>
+          <a :href="itemPath(query)" :class="{ dashboard: query.dashboard }">{{ query.name }}</a>
+          <span class="vars">{{ query.vars }}</span>
+        </td>
+        <% if Blazer.user_class %>
+          <td class="creator">{{ query.creator }}</td>
+        <% end %>
+      </tr>
+    </tbody>
+  </table>
+
+  <p v-if="more" class="text-muted">Loading...</p>
+</div>
+
+<script>
+  <%= blazer_js_var "dashboards", @dashboards %>
+  <%= blazer_js_var "queries", @queries %>
+  <%= blazer_js_var "more", @more %>
+
+  var prepareSearch = function (list) {
+    var i, q, searchStr
+    for (i = 0; i < list.length; i++) {
+      q = list[i]
+      searchStr = q.name + q.creator
+      if (q.creator === "You") {
+        searchStr += "mine me"
+      }
+      q.searchStr = prepareQuery(searchStr)
+    }
+  }
+
+  var prepareQuery = function (str) {
+    return str.toLowerCase()
+  }
+
+  var app = Vue.createApp({
+    data: function() {
+      return {
+        searchTerm: "",
+        more: more,
+        updateCounter: 0
+      }
+    },
+    created: function() {
+      this.listItems = dashboards.concat(queries)
+
+      prepareSearch(this.listItems)
+
+      this.queryIds = {}
+      for (i = 0; i < queries.length; i++) {
+        this.queryIds[queries[i].id] = true
+      }
+
+      if (this.more) {
+        var _this = this
+
+        $.getJSON(Routes.queries_path(), function (data) {
+          var i, j, newValues, val, size = 500;
+
+          var newValues = []
+          for (j = 0; j < data.length; j++) {
+            val = data[j]
+            if (val && !_this.queryIds[val.id]) {
+              newValues.push(val)
+            }
+          }
+
+          prepareSearch(newValues)
+
+          _this.listItems = _this.listItems.concat(newValues)
+          _this.more = false
+          // hack to get to update
+          _this.updateCounter++
+        })
+      }
+    },
+    computed: {
+      visibleItems: function () {
+        // hack to get to update
+        this.updateCounter
+
+        var pageSize = 200
+        var q, i
+
+        if (this.searchTerm.length > 0) {
+          var term = prepareQuery(this.searchTerm)
+          var items = []
+          var fuzzyItems = []
+          for (i = 0; i < this.listItems.length; i++) {
+            q = this.listItems[i]
+            if (q.searchStr.indexOf(term) !== -1) {
+              items.push(q)
+              if (items.length == pageSize) {
+                break
+              }
+            } else if (fuzzysearch(term, q.searchStr)) {
+              fuzzyItems.push(q)
+            }
+          }
+          return items.concat(fuzzyItems).slice(0, pageSize)
+        } else {
+          return this.listItems.slice(0, pageSize)
+        }
+      }
+    },
+    methods: {
+      itemPath: function (item) {
+        if (item.dashboard) {
+          return Routes.dashboard_path(item.to_param)
+        } else {
+          return Routes.query_path(item.to_param)
+        }
+      }
+    },
+    directives: {
+      focus: {
+        inserted: function (el) {
+          el.focus()
+        }
+      }
+    }
+  })
+  app.config.compilerOptions.whitespace = "preserve"
+  app.mount("#queries")
+</script>