#29 many small fixes to support upcoming release.

Gruntfile.js

@@ -52,7 +52,7 @@ module.exports = function (grunt) {
       },
       css: {
         files: ['./src/**/*.css'],
-        tasks: ['cssmin'],
+        tasks: ['css'],
         options: {
           spawn: false
         }
@@ -62,18 +62,11 @@ module.exports = function (grunt) {
       options: {
         keepalive: true,
         verbose: true,
-        debug: true,
-
-        callback: function (b) {
-          // configure the browserify instance here
-          b.add('./build/temp/vendor.js', {expose: 'Highcharts'});
-          b.require('./build/temp/vendor.js', {expose: 'Highcharts'});
-          // return it
-          return b;
-        }
+        debug: true
       },
       all: {
-        src: ['./src/lib/index.js'],
+        src: ['./build/temp/vendor.js', './src/lib/index.js'],
+
         dest: 'build/release/joola.js'
       }
     },

build/release/joola.css

@@ -317,7 +317,7 @@
 
 [jio-type="datepicker"] .jcontainer {
   background-color: white;
-  border: 1px solid #CCC;
+  border: 1px solid #f5f5f5;
   cursor: pointer;
   position: relative;
   z-index: 19;

build/temp/joola.css

@@ -317,7 +317,7 @@
 
 [jio-type="datepicker"] .jcontainer {
   background-color: white;
-  border: 1px solid #CCC;
+  border: 1px solid #f5f5f5;
   cursor: pointer;
   position: relative;
   z-index: 19;

src/css/themes/datepicker.css

@@ -11,7 +11,7 @@
 
 [jio-type="datepicker"] .jcontainer {
   background-color: white;
-  border: 1px solid #CCC;
+  border: 1px solid #f5f5f5;
   cursor: pointer;
   position: relative;
   z-index: 19;

src/lib/viz/BarTable.js

@@ -291,16 +291,28 @@ var BarTable = module.exports = function (options, callback) {
           else
             title = d.name || d.key;
           var $td = $$('<td class="jio bartable value dimension">' +
-            '<div class="caption" title="' + title + '"></div>' +
+            '<div class="caption" title="' + title + '"><span class="percentage"></span><span class="caption_value"></span></div>' +
             '<div class="subcaption"></div>' +
             '</td>');
 
-          var text;
-          if (joola.common.isNumeric(percentage))
-            text = joola.common.ensureLength(percentage.toFixed(2) + '% ' + (!base.missing ? base.dimensions[dimensionkey] : (compare.dimensions[dimensionkey] || '(not set)')), 23);
-          else
+          var cssClass, text;
+          if (joola.common.isNumeric(percentage)){
+            text = joola.common.ensureLength( (!base.missing ? base.dimensions[dimensionkey] : (compare.dimensions[dimensionkey] || '(not set)')), 23);
+            if (percentage < 0)
+              cssClass = 'negative';
+            else if (percentage > 0)
+              cssClass = 'positive';
+            else
+              cssClass = 'neutral';
+            $td.find('.caption .percentage').text(percentage.toFixed(2) + '% ');
+            $td.find('.caption .percentage').addClass(cssClass);
+            $td.find('.caption .caption_value').text(text);
+          }
+          else{
             text = joola.common.ensureLength('N/A ' + (!base.missing ? base.dimensions[dimensionkey] : (compare.dimensions[dimensionkey] || '(not set)')), 23);
-          $td.find('.caption').text(text);
+            $td.find('.caption .percentage').remove();
+            $td.find('.caption .caption_value').text(text);
+          }
           if (!base.missing && !compare.missing)
             $td.find('.subcaption').text(joola.common.formatMetric(base.metrics[metrickey], base.meta[metrickey]) + ' vs. ' + joola.common.formatMetric(compare.metrics[metrickey], compare.meta[metrickey]));
           else if (base.missing)

src/lib/viz/Canvas.js

@@ -34,7 +34,16 @@ var Canvas = module.exports = function (options, callback) {
     filters: [],
     state: {},
     overlay: null,
-    $overlay: null
+    $overlay: null,
+    onscreen: {
+      timeline: [],
+      metric: [],
+      table: [],
+      bartable: [],
+      pie: [],
+      minitable: [],
+      geo: []
+    }
   };
 
   this.verify = function (options) {
@@ -162,7 +171,7 @@ var Canvas = module.exports = function (options, callback) {
     }
 
     if (self.options.overlay)
-      self.options.overlay = $(self.options.overlay.container);
+      self.options.overlay.$container = $(self.options.overlay.container);
 
     if (self.options.datepicker && self.options.datepicker.container) {
       self.options.datepicker.canvas = self;
@@ -192,7 +201,11 @@ var Canvas = module.exports = function (options, callback) {
             viz.canvas = self;
             switch (viz.type.toLowerCase()) {
               case 'timeline':
-                new joola.viz.Timeline(viz);
+                new joola.viz.Timeline(viz, function (err, ref) {
+                  if (err)
+                    throw err;
+                  self.options.onscreen.timeline.push(ref)
+                });
                 break;
               case 'metric':
                 new joola.viz.Metric(viz);
@@ -347,30 +360,29 @@ var Canvas = module.exports = function (options, callback) {
     this.options.visualizations[viz.uuid] = viz;
   };
 
-  //here we go
-  joola.viz.initialize(self, options || {});
-
   //handle loading overlay
   joola.events.on('rpc:event', function () {
-    if (joola.options.overlay && joola.options.isBrowser) {
+    if (self.options.overlay) {
       if (joola.usage.currentCalls > 0) {
-        joola.logger.trace('show overlay');
         if (self.options.overlay.timer)
-          window.clearTimeout(self.options.overlay.timer);
+          return;
         self.options.overlay.timer = setTimeout(function () {
-          $$(self.options.overlay.container).fadeIn('fast');
-        }, self.options.overlay.delay || 0);
+          self.options.overlay.$container.fadeIn('fast');
+        }, parseInt(self.options.overlay.delay, 10) || 0);
       }
       else {
-        joola.logger.trace('hide overlay');
-        if (self.options.overlay.timer)
+        if (self.options.overlay.timer) {
+          self.options.overlay.timer = 0;
           window.clearTimeout(self.options.overlay.timer);
-
-        $$(self.options.overlay.container).fadeOut('fast');
+        }
+        self.options.overlay.$container.fadeOut('fast');
       }
     }
   });
 
+  //here we go
+  joola.viz.initialize(self, options || {});
+
   self.draw(null, function (err, ref) {
     if (err)
       return callback(err);

src/lib/viz/DatePicker.js

@@ -27,7 +27,7 @@ var DatePicker = module.exports = function (options, callback) {
   var self = this;
 
   this.addDays = function (o, days) {
-   // keep in mind, months in javascript are 0-11
+    // keep in mind, months in javascript are 0-11
     return new Date(o.getFullYear(), o.getMonth(), o.getDate() + days);
   };
 
@@ -116,7 +116,7 @@ var DatePicker = module.exports = function (options, callback) {
   if (options.fromdate)
     this.base_fromdate = new Date(options.fromdate);
   else
-    this.base_fromdate = self.addDays(this.base_todate, options.daysback|| -90);
+    this.base_fromdate = self.addDays(this.base_todate, options.daysback || -90);
 
   if (this.base_fromdate < this.min_date) {
     this.base_fromdate = new Date();//this.min_date.fixDate(true, false);
@@ -751,10 +751,17 @@ var DatePicker = module.exports = function (options, callback) {
     }
 
     var $fromdate = $$(self.options.$container.find('.dates .datelabel.fromdate')[0]);
-    var todate = $$(self.options.$container.find('.dates .datelabel.todate')[0]);
+    var $todate = $$(self.options.$container.find('.dates .datelabel.todate')[0]);
 
     $fromdate.text(joola.common.formatDate(_this.applied_base_fromdate));
-    todate.text(joola.common.formatDate(_this.applied_base_todate));
+    $todate.text(joola.common.formatDate(_this.applied_base_todate));
+
+    var $compare_fromdate = $$(self.options.$container.find('.dates .datelabel.compare.fromdate')[0]);
+    var $compare_todate = $$(self.options.$container.find('.dates .datelabel.compare.todate')[0]);
+
+    $compare_fromdate.text(joola.common.formatDate(_this.applied_compare_fromdate));
+    $compare_todate.text(joola.common.formatDate(_this.applied_compare_todate));
+
 
     $$(this.callbacks).each(function (index, item) {
       _this.callbacks[index].callback(_this, options);
@@ -825,6 +832,16 @@ var DatePicker = module.exports = function (options, callback) {
     return [true, 'daycell'];
   };
 
+  this.getDate = function () {
+    return {
+      base_fromdate: this.base_fromdate,
+      base_todate: this.base_todate,
+      comparePeriod: this.comparePeriod,
+      compare_fromdate: this.compare_fromdate,
+      compare_todate: this.compare_todate
+    };
+  };
+
   this.handleChange = function (options) {
     var self = this;
 

src/lib/viz/Metric.js

@@ -239,6 +239,10 @@ var Metric = module.exports = function (options, callback) {
       }
     }
 
+    if (self.options.onSelect)
+      $html.on('click', function () {
+        window[self.options.onSelect](self.options.container, self);
+      });
     if (self.options.onDraw)
       window[self.options.onDraw](self.options.container, self);
   };

src/lib/viz/Table.js

@@ -268,7 +268,8 @@ var Table = module.exports = function (options, callback) {
             if (di === self.sortIndex)
               $td.addClass('sorted');
             $td.find('.filter').on('click', function () {
-              self.emit('select', point, dimensionkey);
+              self.emit('s' +
+              'elect', point, dimensionkey);
             });
             $tr.append($td);
           });

src/lib/viz/Timeline.js

@@ -32,6 +32,7 @@ var Timeline = module.exports = function (options, callback) {
   this.options = {
     legend: true,
     colors: joola.colors,
+    offcolors: joola.offcolors,
     canvas: null,
     template: '<div class="caption"></div>' +
     '<div class="chartwrapper">' +
@@ -182,7 +183,7 @@ var Timeline = module.exports = function (options, callback) {
     var series = [];
     var seriesIndex = -1;
     var interval = Array.isArray(self.options.query) ? self.options.query[0].interval : self.options.query.interval;
-
+    var colorMapping = {};
     var checkExists = function (timestampDimension, documents, date) {
       return _.find(documents, function (document) {
         if (!document[timestampDimension.key])
@@ -234,12 +235,15 @@ var Timeline = module.exports = function (options, callback) {
           //result.documents[0].fvalues[m.name] = null;
         });
       }
+      //console.log(result);
 
       var dimensions = result.dimensions;
       var metrics = result.metrics;
       var documents = ce.clone(result.documents);
       //should we fill the date range
       var query = ce.clone(result.query);
+      var type = query.type;
+      var compare = type === 'compare';
 
       var timestampDimension = _.find(result.dimensions, function (item) {
         return item.datatype === 'date';
@@ -291,6 +295,8 @@ var Timeline = module.exports = function (options, callback) {
 
       if (!metrics)
         return series;
+
+
       metrics.forEach(function (metric, index) {
         var _yaxis = 0;
         yAxis[index % 2] = yAxis [index % 2] || metric.dependsOn || metric.key;
@@ -310,8 +316,11 @@ var Timeline = module.exports = function (options, callback) {
           name: metric_name,
           data: [],
           yAxis: _yaxis,
-          color: self.options.colors[seriesIndex]
+          color: compare ? self.options.offcolors[colorMapping[metric.key]] : self.options.colors[seriesIndex],
+          compare: compare
         };
+        if (!compare)
+          colorMapping[metric.key] = seriesIndex;
         documents.forEach(function (document, docIndex) {
           var x = document[dimensions[0].key];
           var nameBased = true;
@@ -609,7 +618,7 @@ var Timeline = module.exports = function (options, callback) {
       window[self.options.onDraw](self.options.container, self);
 
     if (typeof callback === 'function')
-      return callback(null);
+      return callback(null,self);
   };
 
   //here we go

src/lib/viz/index.js

@@ -162,8 +162,10 @@ viz.fetch = function (context, query, callback) {
       args.push(_query.authContext);
     args.push(_query);
     args.push(function (err, messages) {
-      if (err)
+      if (err){
+        throw err;
         return callback(err);
+      }
       if (!Array.isArray(messages))
         messages = [messages];