active_frontend 14.0.82 → 14.0.83

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 20013c44be81d37cbe7d143efa16e805360ad598
-  data.tar.gz: 4076e7c6bac0423fa158d0abda3a76a1e83b5ac3
+  metadata.gz: 06e57bf5f0a65eca6a04935173203b88114d3e9a
+  data.tar.gz: 2b778e54ed2bf292032e1c833edd6823d61c73ff
 SHA512:
-  metadata.gz: 1e986cf2dcd0f9c5254e9cdd36aba02fe9ec5aa8df655985c9032ddb04bbb0c4e7389d94b0b4c03cbdcb399b144fa14b71bd42c8d32b581049ea8d7774f13d13
-  data.tar.gz: 39214e183f7a88a3d5c0ea20fce94ebc3ff02cd61fd9a1d037860a0b69de3ef2e96b068e5435312ce7b44a0a8538fc16571751ac177a499d901df5ebe0f675a9
+  metadata.gz: 68443d8397f48053339a0ce8acee41d76df4fec77220d2f538d12479a429db11c0818065c2dd967c6e0aff5f91257ae509e3e91fb08a9f3e341b864a63be1fac
+  data.tar.gz: d4b8b1f1b2684b6c95e72a40f09a2858b7332ccdd866d7d7493118df274fd09e463f8514e561522875ca50b88d4958c61480719418960ba572265f0ea5a56445

data/lib/active_frontend/version.rb

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

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

@@ -42,6 +42,7 @@
 //= require extensions/_chart
 //= require extensions/_cohort
 //= require extensions/_copy
+//= require extensions/_funnel
 //= require extensions/_map
 //= require extensions/_wysiwyg
 //

data/vendor/assets/javascripts/active_frontend.js

@@ -42,6 +42,7 @@
 //= require extensions/_chart
 //= require extensions/_cohort
 //= require extensions/_copy
+//= require extensions/_funnel
 //= require extensions/_map
 //= require extensions/_wysiwyg
 //

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

@@ -0,0 +1,252 @@
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(factory);
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.FunnelChart = factory();
+  }
+}(this, function() {
+  function extend(out) {
+    out = out || {};
+
+    for (var i = 1; i < arguments.length; i++) {
+      if (!arguments[i]) continue;
+
+      for (var key in arguments[i]) {
+        if (arguments[i].hasOwnProperty(key)) {
+          out[key] = arguments[i][key];
+        }
+      }
+    }
+
+    return out;
+  }
+
+  function FunnelChart(canvas, settings) {
+    if (!(this instanceof FunnelChart)) {
+      return new FunnelChart(canvas, settings);
+    }
+
+    this.canvas = (typeof canvas === 'string') ? document.getElementById(canvas) : canvas;
+
+    if (!settings.values || !settings.values.length) {
+      throw('A values setting must be provided');
+    }
+
+    this.settings = extend(this.settings, settings);
+    this.initialize();
+  }
+
+  FunnelChart.prototype = extend(FunnelChart.prototype, {
+    settings: {
+      displayPercentageChange: false,
+      pPrecision: 1,
+      labelLineColor: '#E5E8F1',
+      labelFontColor: '#2C3A49',
+      sectionColor: ['#054B8B', '#075FB0', '#0872D5', '#0D86F6', '#3298F7', '#57ABF9', '#7CDDFA'],
+      pSectionColor: '#F9FAFC',
+      font: 'Verdana',
+      maxFontSize: 12,
+      fontWeight: '600',
+      sectionFontColor: '#FFFFFF',
+      pSectionFontColor: '#FFFFFF',
+      pSectionHeightPercent: 50,
+      labelWidthPercent: 30,
+      funnelReductionPercent: 50,
+      labelOffset: 0,
+      lineHeight: 0
+    },
+    initialize: function() {
+      this.calculateDimensions();
+      this.draw();
+    },
+    calculateDimensions: function() {
+      var settings = this.settings;
+      var labelWidth, sectionTotalHeight, multiplier;
+
+      this.width = this.canvas.offsetWidth;
+      this.height = this.canvas.offsetHeight;
+
+      this.createHiDPICanvas();
+
+      labelWidth = this.hasLabels() ? this.width * (settings.labelWidthPercent / 100) : 0;
+      this.labelMaxWidth = labelWidth - settings.labelOffset;
+      this.startWidth = this.width - labelWidth;
+      this.endWidth = this.startWidth * (settings.funnelReductionPercent / 100);
+
+      sectionTotalHeight = (this.height / (settings.values.length));
+
+      if (settings.displayPercentageChange) {
+        multiplier = this.height / (this.height - (sectionTotalHeight / (100 + settings.pSectionHeightPercent)) * settings.pSectionHeightPercent);
+        this.sectionHeight = (multiplier * ((sectionTotalHeight / (100 + settings.pSectionHeightPercent)) * 100));
+        this.pSectionHeight = (multiplier * ((sectionTotalHeight / (100 + settings.pSectionHeightPercent)) * settings.pSectionHeightPercent));
+      } else {
+        this.sectionHeight = sectionTotalHeight;
+        this.pSectionHeight = 0;
+      }
+    },
+    pixelRatio: function(){
+      var ctx = this.canvas.getContext('2d');
+      var dpr = window.devicePixelRatio || 1;
+      var bsr = ctx.webkitBackingStorePixelRatio ||
+                ctx.mozBackingStorePixelRatio ||
+                ctx.msBackingStorePixelRatio ||
+                ctx.oBackingStorePixelRatio ||
+                ctx.backingStorePixelRatio || 1;
+
+      return dpr / bsr;
+    },
+    createHiDPICanvas: function() {
+      var canvas = this.canvas;
+      var ratio = this.pixelRatio();
+      var w = this.width;
+      var h = this.height;
+
+      canvas.width = w * ratio;
+      canvas.height = h * ratio;
+      canvas.style.width = w + 'px';
+      canvas.style.height = h + 'px';
+      canvas.getContext('2d').setTransform(ratio, 0, 0, ratio, 0, 0);
+    },
+    draw: function() {
+      var canvas = this.canvas;
+      var settings = this.settings;
+
+      if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+        var maxAvailFontSize = ((settings.displayPercentageChange) ? this.pSectionHeight : this.sectionHeight) - 2;
+
+        if (settings.maxFontSize >= maxAvailFontSize) {
+          settings.maxFontSize = maxAvailFontSize;
+        }
+
+        ctx.font = settings.fontWeight + ' ' + settings.maxFontSize + 'px ' + settings.font;
+
+        if (this.hasLabels()) this.drawLabels(ctx);
+
+        this.drawClippingArea(ctx, settings);
+
+        ctx.fillStyle = '#E5E8F1';
+        ctx.fill();
+        ctx.clip();
+
+        this.drawSections(ctx);
+        this.drawClippingArea(ctx, settings, true);
+
+        ctx.lineWidth = 0;
+        ctx.strokeStyle = '#E5E8F1';
+        ctx.stroke();
+      }
+    },
+    drawLabels: function(ctx) {
+      var i;
+      var yPos;
+      var settings = this.settings;
+
+      ctx.textAlign = 'left';
+      ctx.strokeStyle = settings.labelLineColor;
+      ctx.lineWidth = settings.lineHeight;
+
+      for (i = 0; i < settings.values.length; i++) {
+        yPos = this.calculateYPos(i) - 1;
+
+        ctx.fillStyle = this.sequentialValue(settings.labelFontColor, i);
+        ctx.fillText(
+          settings.labels[i] || '',
+          this.startWidth + settings.labelOffset,
+          yPos + (this.sectionHeight / 2) + (settings.maxFontSize / 2) - 2,
+          this.labelMaxWidth
+        );
+
+        if (i > 0) {
+          ctx.beginPath();
+          ctx.moveTo(i, yPos);
+          ctx.lineTo(this.width, yPos);
+          ctx.stroke();
+        }
+
+        if (i < (settings.values.length - 1) && settings.displayPercentageChange) {
+          ctx.beginPath();
+          ctx.moveTo(i, yPos + this.sectionHeight);
+          ctx.lineTo(this.width, yPos + this.sectionHeight);
+          ctx.stroke();
+        }
+      }
+    },
+    drawClippingArea: function(ctx, settings, curvesOnly) {
+      var inset = (this.startWidth - this.endWidth) / 2;
+      var height = (settings.values.length * this.sectionHeight) +
+                     ((settings.values.length - 1) * this.pSectionHeight) +
+                     (settings.values.length + 1);
+      var lineOrMove = curvesOnly ? 'moveTo' : 'lineTo';
+
+      ctx.beginPath();
+      ctx.moveTo(0,0);
+      ctx[lineOrMove](this.startWidth,0);
+      ctx.quadraticCurveTo(
+        (this.startWidth - inset),
+        (height / 3),
+        (this.startWidth - inset),
+        height
+      );
+      ctx[lineOrMove](inset,height);
+      ctx.quadraticCurveTo(inset, (height / 3), 0, 0);
+    },
+    drawSections: function(ctx) {
+      var i;
+      var yPos;
+      var settings = this.settings;
+
+      ctx.textAlign = 'center';
+
+      for (i = 0; i < settings.values.length; i++) {
+        yPos = this.calculateYPos(i);
+
+        ctx.fillStyle = this.sequentialValue(settings.sectionColor, i);
+        ctx.fillRect(0, yPos, this.startWidth, this.sectionHeight - settings.lineHeight);
+        ctx.fillStyle = this.sequentialValue(settings.sectionFontColor, i);
+        ctx.fillText(
+          settings.values[i],
+          this.startWidth / 2,
+          yPos + ((this.sectionHeight - settings.lineHeight) / 2) + (settings.maxFontSize / 2) - 2
+        );
+
+        if (i < (settings.values.length - 1) && settings.displayPercentageChange) {
+          ctx.fillStyle = this.sequentialValue(settings.pSectionColor, i);
+          ctx.fillRect(
+            0,
+            (yPos + this.sectionHeight),
+            this.startWidth,
+            this.pSectionHeight - settings.lineHeight
+          );
+          ctx.fillStyle = this.sequentialValue(settings.pSectionFontColor, i);
+          ctx.fillText(
+            (settings.values[i] === 0) ? '' : ((settings.values[i + 1] / settings.values[i]) * 100).toFixed(settings.pPrecision) + '%',
+            this.startWidth / 2,
+            yPos + this.sectionHeight + ((this.pSectionHeight - settings.lineHeight) / 2) + (settings.maxFontSize / 2) - 1
+          );
+        }
+      }
+    },
+    hasLabels: function() {
+      var labels = this.settings.labels;
+      return labels && !!labels.length;
+    },
+    calculateYPos: function(i) {
+      var sectionHeight = this.sectionHeight;
+
+      if(this.settings.displayPercentageChange) {
+        sectionHeight += this.pSectionHeight;
+      }
+
+      return sectionHeight * i;
+    },
+    sequentialValue: function(arr, i) {
+      if (typeof arr === 'string') return arr;
+      return arr[i % arr.length];
+    }
+  });
+
+  return FunnelChart;
+}));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_frontend
 version: !ruby/object:Gem::Version
-  version: 14.0.82
+  version: 14.0.83
 platform: ruby
 authors:
 - Juan Gomez
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-12 00:00:00.000000000 Z
+date: 2017-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -249,6 +249,7 @@ files:
 - vendor/assets/javascripts/extensions/_chart.js
 - vendor/assets/javascripts/extensions/_cohort.js
 - vendor/assets/javascripts/extensions/_copy.js
+- vendor/assets/javascripts/extensions/_funnel.js
 - vendor/assets/javascripts/extensions/_map.js
 - vendor/assets/javascripts/extensions/_wysiwyg.js
 - vendor/assets/stylesheets/.DS_Store