active_frontend 14.0.81 → 14.0.82

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 89561af6ed088ed080187332c73c80be8cb12c91
-  data.tar.gz: 73ae8b120387fee13410c469a07279a41cbbcfff
+  metadata.gz: 20013c44be81d37cbe7d143efa16e805360ad598
+  data.tar.gz: 4076e7c6bac0423fa158d0abda3a76a1e83b5ac3
 SHA512:
-  metadata.gz: a8450019cbeb9a6033074ad449e989e8c0269942b4e58a00167392a84f6a63edda440e04563bef3f03b9eecf90b72752761e25f0c60218d9141444f691ddd3d2
-  data.tar.gz: 629cb40ede38167b660b2db308205c98ed7215d0a8d6667bb206576750cf252aca7567604bb8094a18da97f231cdc6f9cfaa35c699fd5a394f9ebc2de367dcf0
+  metadata.gz: 1e986cf2dcd0f9c5254e9cdd36aba02fe9ec5aa8df655985c9032ddb04bbb0c4e7389d94b0b4c03cbdcb399b144fa14b71bd42c8d32b581049ea8d7774f13d13
+  data.tar.gz: 39214e183f7a88a3d5c0ea20fce94ebc3ff02cd61fd9a1d037860a0b69de3ef2e96b068e5435312ce7b44a0a8538fc16571751ac177a499d901df5ebe0f675a9

data/lib/active_frontend/version.rb

@@ -1,3 +1,3 @@
 module ActiveFrontend
-  VERSION = '14.0.81'.freeze
+  VERSION = '14.0.82'.freeze
 end

data/lib/generators/active_frontend/templates/install.js

@@ -40,6 +40,7 @@
 // ==================================================
 //= require extensions/_calendar
 //= require extensions/_chart
+//= require extensions/_cohort
 //= require extensions/_copy
 //= require extensions/_map
 //= require extensions/_wysiwyg

data/lib/generators/active_frontend/templates/install.scss

@@ -57,6 +57,7 @@
 @import 'components/calendar';
 @import 'components/map';
 @import 'components/wysiwyg';
+@import 'components/cohort';
 @import 'components/chart';
 @import 'blocks/common';
 @import 'blocks/typography';

data/vendor/assets/javascripts/active_frontend.js

@@ -40,6 +40,7 @@
 // ==================================================
 //= require extensions/_calendar
 //= require extensions/_chart
+//= require extensions/_cohort
 //= require extensions/_copy
 //= require extensions/_map
 //= require extensions/_wysiwyg

data/vendor/assets/javascripts/extensions/_cohort.js

@@ -0,0 +1,342 @@
+;(function(globals) {
+  var TYPE_PERCENTAGE = 'percentage';
+  var TYPE_ABSOLUTE = 'absolute';
+
+  var cohortDefaults = {
+    monthNames: [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ],
+    shortMonthNames: [
+      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ],
+    repeatLevels: {
+      'low': [0, 10],
+      'medium-low': [10, 20],
+      'medium': [20, 30],
+      'medium-high': [30, 40],
+      'high': [40, 60],
+      'hot': [60, 70],
+      'extra-hot': [70, 100]
+    },
+    labels: {
+      time: 'Time',
+      total: 'Total',
+      weekOf: 'Week of'
+    },
+    emptyPlaceholder: '---',
+    timeInterval: 'monthly',
+    drawEmptyCells: true,
+    rawNumberOnHover: true,
+    initialIntervalNumber: 1,
+    percentagePercision: 1,
+    classPrefix: 'cohort-',
+
+    formatHeaderLabel: function(i) {
+      return (this.initialIntervalNumber - 1 + i).toString();
+    },
+    formatDailyLabel: function(date, i) {
+      date.setDate(date.getDate() + i);
+      return this.monthNames[date.getMonth()] + ' ' + date.getDate() + ', ' + getYear(date);
+    },
+    formatWeeklyLabel: function(date, i) {
+      date.setDate(date.getDate() + i * 7);
+      return this.labels.weekOf + ' ' + this.shortMonthNames[date.getMonth()] + ' ' +
+              date.getDate() + ', ' + getYear(date);
+    },
+    formatMonthlyLabel: function(date, i) {
+      date.setMonth(date.getMonth() + i);
+      return this.monthNames[date.getMonth()] + ' ' + getYear(date);
+    },
+    formatYearlyLabel: function(date, i) {
+      return date.getYear() + 1900 + i;
+    }
+  },
+
+  defaults = cohortDefaults;
+
+  function extend() {
+    var target = arguments[0];
+
+    if (arguments.length === 1) return target;
+
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var prop in source) target[prop] = source[prop];
+    }
+
+    return target;
+  }
+
+  function isNumber(val) {
+    return Object.prototype.toString.call(val) === '[object Number]';
+  }
+
+  function isEmpty(val) {
+    return val === null || val === undefined || val === '';
+  }
+
+  function getYear(date) {
+    return date.getFullYear ? date.getFullYear() : date.getYear() + 1900;
+  }
+
+  function formatValue(value, base, valueType) {
+    if (valueType === TYPE_ABSOLUTE) {
+      return value;
+    } else if (isNumber(value) && base > 0) {
+      return (value / base * 100).toFixed(cohortDefaults.percentagePercision);
+    } else if (isNumber(value)) {
+      return '0.00';
+    }
+  }
+
+  function setText(element, text) {
+    if (document.all) {
+      element.innerText = text;
+    } else {
+      element.textContent = text;
+    }
+  }
+
+  function setTitle(element, text, type) {
+    if (type === TYPE_ABSOLUTE) {
+      element.dataset.originalTitle = text;
+    } else {
+      element.dataset.originalTitle = text + '%';
+    }
+  }
+
+  function addClass(element, className) {
+    if (!new RegExp(className).test(element.className)) {
+      element.className += ' ' + className;
+    }
+  }
+
+  function removeClass(element, className) {
+    element.className = element.className.replace(className, '');
+  }
+
+  function prefixClass(className, classPrefix) {
+    var prefixedClass = [],
+        classes = className.split(/\s+/);
+
+    for (var i in classes) {
+      prefixedClass.push(classPrefix + classes[i]);
+    }
+
+    return prefixedClass.join(' ');
+  }
+
+  var draw = function(cohort, values, container) {
+    if (!values)    throw new Error ('Please provide the values data');
+    if (!container) throw new Error ('Please provide the values container');
+
+    var config = cohort.config,
+        initialDate = cohort.initialDate;
+
+    function create(el, options) {
+      options = options || {};
+
+      el = document.createElement(el);
+
+      if ((className = options.className)) {
+        delete options.className;
+        el.className = prefixClass(className, config.classPrefix);
+      }
+
+      if (!isEmpty(options.text)) {
+        var text = options.text.toString();
+        setText(el, text);
+        delete options.text;
+      }
+
+      if (options.tooltip) {
+        el.dataset.hover = 'tooltip';
+        el.dataset.container = 'body';
+        delete options.tooltip;
+      }
+
+      for (var option in options) {
+        if ((opt = options[option])) el[option] = opt;
+      }
+
+      return el;
+    }
+
+    function drawHeader(data) {
+      var th = create('tr'),
+          monthLength = data[0].length;
+
+      th.appendChild(create('th', { text: config.labels.time, className: 'time' }));
+
+      for (var i = 0; i < monthLength; i++) {
+        if (i > config.maxColumns) break;
+        var text = i === 0 ? config.labels.total : config.formatHeaderLabel(i);
+        th.appendChild(create('th', { text: text, className: 'total' }));
+      }
+
+      return th;
+    }
+
+    function formatTimeLabel(initial, timeInterval, i) {
+      var date = new Date(initial.getTime()),
+          formatFn = null;
+
+      if (timeInterval === 'daily') {
+          formatFn = 'formatDailyLabel';
+      } else if (timeInterval === 'weekly') {
+          formatFn = 'formatWeeklyLabel';
+      } else if (timeInterval === 'monthly') {
+          formatFn = 'formatMonthlyLabel';
+      } else if (timeInterval === 'yearly') {
+          formatFn = 'formatYearlyLabel';
+      } else {
+          throw new Error('Interval not supported');
+      }
+
+      return config[formatFn].call(config, date, i);
+    }
+
+    function drawCells(data) {
+      var fragment = document.createDocumentFragment(),
+          startMonth = config.maxRows ? data.length - config.maxRows : 0,
+          classNameFor = function(value) {
+            var levels = config.repeatLevels,
+                floatValue = value && parseFloat(value),
+                highestLevel = null,
+                classNames = ['percentage'];
+
+            for (var level in levels) {
+              if (floatValue >= levels[level][0] && floatValue < levels[level][1]) {
+                classNames.push(level);
+                return classNames.join(' ');
+              }
+
+              highestLevel = level;
+            }
+
+            classNames.push(highestLevel);
+            return classNames.join(' ');
+          };
+
+      for (var i = startMonth; i < data.length; i++) {
+        var tr = create('tr'),
+            row = data[i],
+            baseValue = row[0];
+
+        tr.appendChild(create('td', {
+          className: 'label',
+          text: formatTimeLabel(initialDate, config.timeInterval, i)
+        }));
+
+        for (var j = 0; j < data[0].length; j++) {
+          if (j > config.maxColumns) break;
+
+          var value = row[j],
+              cellValue = j === 0 ? value : formatValue(value, baseValue, TYPE_PERCENTAGE),
+              opts = {};
+
+          if (!isEmpty(cellValue)) {
+            var title = j > 0 && config.rawNumberOnHover ? value : null;
+
+            opts = {
+              text: cellValue,
+              title: title,
+              className: j === 0 ? 'total' : classNameFor(cellValue),
+              tooltip: title !== null
+            };
+          } else if (config.drawEmptyCells) {
+            opts = { text: config.emptyPlaceholder, className: 'empty' };
+          }
+
+          tr.appendChild(create('td', opts));
+        }
+
+        fragment.appendChild(tr);
+      }
+
+      return fragment;
+    }
+
+    var mainContainer = create('div', { className: 'container' }),
+        table = create('table', { className: 'table' });
+
+    table.appendChild(drawHeader(values));
+    table.appendChild(drawCells(values));
+
+    if ((title = config.title)) {
+      mainContainer.appendChild(create('div', { text: title, className: 'title' }));
+    }
+
+    mainContainer.appendChild(table);
+
+    container.innerHTML = '';
+    container.appendChild(mainContainer);
+  };
+
+  var Cohort = function(opts) {
+    if (!(initialDate = opts.initialDate)) throw new Error('The initialDate is a required argument');
+    delete opts.initialDate;
+
+    this.initialDate = initialDate;
+    this.valueType = TYPE_PERCENTAGE;
+    this.config = extend({}, Cohort.getDefaults(), opts || {});
+
+    this.toggleValues = function() {
+      this.valueType = this.valueType === TYPE_PERCENTAGE ? TYPE_ABSOLUTE : TYPE_PERCENTAGE;
+      var table = opts.container.getElementsByTagName('table')[0];
+
+      for (var rowIndex = 0; rowIndex < opts.values.length; rowIndex++) {
+        var tr = table.children[rowIndex + 1];
+
+        for (var cellIndex = 1; cellIndex < opts.values[rowIndex].length; cellIndex++) {
+          var td = tr.children[cellIndex + 1];
+          var absValue = formatValue(opts.values[rowIndex][cellIndex], opts.values[rowIndex][0], TYPE_ABSOLUTE);
+          var perValue = formatValue(opts.values[rowIndex][cellIndex], opts.values[rowIndex][0], TYPE_PERCENTAGE);
+
+          if (this.valueType === TYPE_ABSOLUTE) {
+            setText(td, absValue);
+            setTitle(td, perValue, TYPE_PERCENTAGE);
+            removeClass(td, prefixClass('percentage', this.config.classPrefix));
+          } else {
+            setText(td, perValue);
+            setTitle(td, absValue, TYPE_ABSOLUTE);
+            addClass(td, prefixClass('percentage', this.config.classPrefix));
+          }
+        }
+      }
+    };
+  };
+
+  extend(Cohort, {
+    getDefaults: function() {
+      return defaults;
+    },
+    setDefaults: function(def) {
+      defaults = extend({}, cohortDefaults, def);
+    },
+    resetDefaults: function() {
+      defaults = cohortDefaults;
+    },
+    draw: function(options) {
+      var cohort = new Cohort(options);
+      draw(cohort, options.values, options.container);
+      return cohort;
+    }
+  });
+
+  if (typeof jQuery !== 'undefined' && jQuery !== null) {
+    jQuery.fn.cohort = function(options) {
+      return this.each(function() {
+        options.container = this;
+        return Cohort.draw(options);
+      });
+    };
+  }
+
+  if (globals.exports) {
+    globals.exports = Cohort;
+  } else {
+    globals.Cohort = Cohort;
+  }
+})(typeof module === 'function' ? module : window);

data/vendor/assets/stylesheets/active_frontend.scss

@@ -57,6 +57,7 @@
 @import 'components/calendar';
 @import 'components/map';
 @import 'components/wysiwyg';
+@import 'components/cohort';
 @import 'components/chart';
 @import 'blocks/common';
 @import 'blocks/typography';

data/vendor/assets/stylesheets/components/_cohort.scss

@@ -0,0 +1,87 @@
+// Table of Contents
+// ==================================================
+// Cohort
+
+// scss-lint:disable ImportantRule
+// scss-lint:disable NestingDepth
+
+// Cohort
+// ==================================================
+.cohort-title {
+  font-size: text-size(b);
+  font-weight: text-weight(semibold);
+  padding-bottom: 20px;
+  text-align: center;
+}
+.cohort-table {
+  background: light-color(light-haze);
+  border: 1px solid color(dark-haze);
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-size: text-size(b);
+  margin: auto;
+  max-width: 100%;
+  width: 100%;
+
+  tr:first-child {
+    th {
+      border-bottom-width: 3px;
+
+      &:last-child { border-right: 0; }
+    }
+  }
+
+  td,
+  th {
+    text-align: center;
+    padding: 8px;
+  }
+
+  th {
+    border-bottom: 1px solid color(dark-haze);
+    border-right: 1px solid color(dark-haze);
+    font-weight: text-weight(semibold);
+  }
+}
+.cohort-percentage {
+  &::after {
+    content: '%';
+    margin-left: 2px;
+  }
+}
+.cohort-label,
+.cohort-total {
+  border-bottom: 1px solid color(dark-haze);
+  border-right: 1px solid color(dark-haze);
+  font-weight: text-weight(semibold);
+}
+.cohort-label {
+  text-align: left !important;
+  width: 140px;
+}
+.cohort-total {
+  border-right-width: 3px;
+  font-weight: text-weight(normal);
+  width: 80px;
+}
+.cohort-empty {
+  background: color(white);
+  border-bottom: 1px solid color(dark-haze);
+  border-right: 1px solid color(dark-haze);
+}
+.cohort-low,
+.cohort-medium-low,
+.cohort-medium,
+.cohort-medium-high,
+.cohort-high,
+.cohort-hot,
+.cohort-extra-hot { color: color(white); }
+@each $name, $multiplier in (low: 3, medium-low: 2, medium: 1) {
+  .cohort-#{$name} { background: lighten(color(primary), percentage((7.5 * $multiplier) / 100)); }
+}
+.cohort-medium-high {
+  background: color(primary);
+}
+@each $name, $multiplier in (high: 1, hot: 2, extra-hot: 3) {
+  .cohort-#{$name} { background: darken(color(primary), percentage((7.5 * $multiplier) / 100)); }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_frontend
 version: !ruby/object:Gem::Version
-  version: 14.0.81
+  version: 14.0.82
 platform: ruby
 authors:
 - Juan Gomez
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-07 00:00:00.000000000 Z
+date: 2017-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -247,6 +247,7 @@ files:
 - vendor/assets/javascripts/base/_typeahead.js
 - vendor/assets/javascripts/extensions/_calendar.js
 - vendor/assets/javascripts/extensions/_chart.js
+- vendor/assets/javascripts/extensions/_cohort.js
 - vendor/assets/javascripts/extensions/_copy.js
 - vendor/assets/javascripts/extensions/_map.js
 - vendor/assets/javascripts/extensions/_wysiwyg.js
@@ -277,6 +278,7 @@ files:
 - vendor/assets/stylesheets/components/_carousel.scss
 - vendor/assets/stylesheets/components/_chart.scss
 - vendor/assets/stylesheets/components/_choicepicker.scss
+- vendor/assets/stylesheets/components/_cohort.scss
 - vendor/assets/stylesheets/components/_collapse.scss
 - vendor/assets/stylesheets/components/_colorpicker.scss
 - vendor/assets/stylesheets/components/_datepicker.scss