Initial commit

lib/assets/javascripts/builder/components/modals/add-widgets/formula/formula-fake.tpl

@@ -0,0 +1,4 @@
+<div class='Widget-formulaFakeContainer'>
+  <p class='Widget-categoryFakeText'></p>
+  <div class='Widget-formulaFake'></div>
+</div>

lib/assets/javascripts/builder/components/modals/add-widgets/formula/formula-option-model.js

@@ -0,0 +1,28 @@
+var _ = require('underscore');
+var WidgetOptionModel = require('builder/components/modals/add-widgets/widget-option-model');
+
+var FORMULA_TYPE = 'formula';
+
+module.exports = WidgetOptionModel.extend({
+  defaults: _.defaults({type: FORMULA_TYPE}, WidgetOptionModel.defaults),
+
+  save: function (widgetDefinitionsCollection) {
+    var model = this;
+    var columnName = this.columnName();
+
+    var attrs = {
+      type: FORMULA_TYPE,
+      layer_id: this.layerDefinitionModel().id,
+      source: {
+        id: this.analysisDefinitionNodeModel().id
+      },
+      options: {
+        column: columnName,
+        title: this.get('title'),
+        operation: this.get('operation')
+      }
+    };
+
+    return widgetDefinitionsCollection.addWidget(model, attrs);
+  }
+});

lib/assets/javascripts/builder/components/modals/add-widgets/formula/formula-option-view.js

@@ -0,0 +1,90 @@
+var CoreView = require('backbone/core-view');
+var LayerSelectorView = require('builder/components/modals/add-widgets/layer-selector-view');
+var template = require('./formula-option.tpl');
+var formulaFake = require('./formula-fake.tpl');
+var _ = require('underscore');
+
+/**
+ * View for an individual formula option.
+ */
+module.exports = CoreView.extend({
+
+  events: {
+    'click': '_onSelect'
+  },
+
+  initialize: function (opts) {
+    this.listenTo(this.model, 'change:layer_index', this.render);
+    this.listenTo(this.model, 'change:selected', this.render);
+    this.aggregation = this.model.get('operation');
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(this._html());
+    this._renderLayerSelector();
+    var tableStats = this.options.model.stats;
+    if (tableStats) {
+      this._drawGraph();
+    }
+    return this;
+  },
+
+  _html: function () {
+    var isSelected = !!this.model.get('selected');
+
+    this.$el.toggleClass('is-selected', isSelected);
+
+    return template({
+      columnName: this.model.get('title'),
+      isSelected: isSelected
+    });
+  },
+
+  _renderLayerSelector: function () {
+    var view = new LayerSelectorView({
+      model: this.model
+    });
+    this.addView(view);
+    this.$('.js-inner').append(view.render().el);
+  },
+
+  _onSelect: function () {
+    this.model.set('selected', !this.model.get('selected'));
+  },
+
+  _drawGraph: function () {
+    var self = this;
+    this.options.model.stats.graphFor(
+      this.model.analysisDefinitionNodeModel().get('table_name'),
+      this.model.get('name'), function (graph) {
+        if (graph.stats) {
+          var stats = self.$('.js-formulastats').children();
+          var aggregation = graph[{ // eslint-disable-line
+            'avg': 'getAverage',
+            'sum': 'getSum',
+            'min': 'getMin',
+            'max': 'getMax',
+            'count': 'getCount'
+          }[self.aggregation]]();
+          if (_.isNumber(aggregation)) {
+            self.$(stats[0]).text(graph.getNullsPercentage() + '% null');
+            if (self.aggregation === 'count') {
+              self.$(stats[1]).text(aggregation.toFixed().toString());
+            } else {
+              self.$(stats[1]).text(aggregation.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+            }
+            self.$('.js-formulastats').show();
+          } else {
+            self.$('.js-formulastats').append(formulaFake());
+            self.$('.js-formulastats').show();
+          }
+        } else {
+          self.$('.js-formulastats').append(formulaFake());
+          self.$('.js-formulastats').show();
+        }
+      }
+    );
+  }
+
+});

lib/assets/javascripts/builder/components/modals/add-widgets/formula/formula-option.tpl

@@ -0,0 +1,14 @@
+<div class="WidgetList-option">
+  <input class="CDB-Checkbox js-checkbox" type="checkbox" <% if (isSelected) { %>checked="checked"<% } %> />
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+
+<div class="WidgetList-inner js-inner">
+  <h3 class="u-ellipsis CDB-Text CDB-Size-large u-bSpace--m"><%- columnName %></h3>
+  <div class="js-formulastats" style="display: none;">
+    <ul class="u-flex CDB-Text CDB-Size-small u-secondaryTextColor u-upperCase">
+      <li class='u-rSpace'></li>
+    </ul>
+  	<h4 class="CDB-Text CDB-Size-huge u-bSpace--m"></h4>
+  </div>
+</div>

lib/assets/javascripts/builder/components/modals/add-widgets/formula/formula-options-view.js

@@ -0,0 +1,34 @@
+var CoreView = require('backbone/core-view');
+var FormulaOptionView = require('./formula-option-view.js');
+
+/**
+ * View to select formula widget options
+ */
+module.exports = CoreView.extend({
+
+  className: 'WidgetList',
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+    this.collection
+      .chain()
+      .filter(this._isFormula)
+      .each(this._renderOption, this);
+    return this;
+  },
+
+  _renderOption: function (m) {
+    var view = new FormulaOptionView({
+      className: 'WidgetList-item js-WidgetList-item',
+      model: m
+    });
+    this.addView(view);
+    this.$el.append(view.render().el);
+  },
+
+  _isFormula: function (m) {
+    return m.get('type') === 'formula';
+  }
+
+});