Initial commit

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

@@ -0,0 +1,4 @@
+<div class="Widget-histogramFakeContainer">
+  <p class="Widget-categoryFakeText"></p>
+  <div class="Widget-histogramFake"></div>
+</div>

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

@@ -0,0 +1,40 @@
+var _ = require('underscore');
+var WidgetOptionModel = require('builder/components/modals/add-widgets/widget-option-model');
+var WidgetDefinitionModel = require('builder/data/widget-definition-model');
+
+var HISTOGRAM_TYPE = 'histogram';
+
+module.exports = WidgetOptionModel.extend({
+  defaults: _.defaults({type: HISTOGRAM_TYPE}, WidgetOptionModel.defaults),
+
+  save: function (widgetDefinitionsCollection) {
+    var model = this;
+    var columnName = this.columnName();
+    var styleModel = this.layerDefinitionModel() && this.layerDefinitionModel().styleModel;
+    var isAllowed = styleModel && styleModel.canApplyAutoStyle() || false;
+
+    var attrs = {
+      type: HISTOGRAM_TYPE,
+      layer_id: this.layerDefinitionModel().id,
+      source: {
+        id: this.analysisDefinitionNodeModel().id
+      },
+      options: {
+        column: columnName,
+        title: this.get('title'),
+        bins: this.get('bins')
+      },
+      style: {
+        widget_style: {
+          definition: WidgetDefinitionModel.getDefaultWidgetStyle(HISTOGRAM_TYPE)
+        },
+        auto_style: {
+          allowed: isAllowed,
+          custom: false
+        }
+      }
+    };
+
+    return widgetDefinitionsCollection.addWidget(model, attrs);
+  }
+});

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

@@ -0,0 +1,76 @@
+var CoreView = require('backbone/core-view');
+var LayerSelectorView = require('builder/components/modals/add-widgets/layer-selector-view');
+var template = require('./histogram-option.tpl');
+var histogramFake = require('./histogram-fake.tpl');
+
+/**
+ * View for an individual histogram 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);
+  },
+
+  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.columnName(),
+      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) {
+          self.$('.js-Histogram').append(graph.getHistogram({
+            color: '#9DE0AD',
+            width: 240,
+            height: 20,
+            bins: 20
+          }));
+          var stats = self.$('.js-histstats').children();
+          self.$(stats[0]).text(graph.getNullsPercentage() + '% null');
+          self.$('.js-histstats').css('display', 'flex');
+        } else {
+          self.$('.js-Histogram').append(histogramFake());
+        }
+      }
+    );
+  }
+
+});

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

@@ -0,0 +1,12 @@
+<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>
+  <ul class="js-histstats u-flex CDB-Text CDB-Size-small u-upperCase" style="display: none;">
+    <li class='u-rSpace'></li>
+  </ul>
+  <div class="u-tSpace--m u-bSpace--m js-Histogram"></div>
+</div>

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

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