Mutation fix

src/kibana/components/vislib/lib/data.js

@@ -21,6 +21,7 @@ define(function (require) {
         return new Data(data, attr);
       }
 
+      var self = this;
       var offset;
 
       if (attr.mode === 'stacked') {
@@ -220,7 +221,65 @@ define(function (require) {
       var isOverlapping = (this._attr.mode === 'overlap');
 
       // Series should be an array
-      return (isHistogram || isArea && !isOverlapping && series.length > 1);
+      return (isHistogram && series.length > 1 || isArea && !isOverlapping && series.length > 1);
+    };
+
+    /**
+     * Validates that the Y axis min value defined by user input
+     * is a number.
+     *
+     * @param val {Number} Y axis min value
+     * @returns {Number} Y axis min value
+     */
+    Data.prototype.validateUserDefinedYMin = function (val) {
+      if (!_.isNumber(val)) {
+        throw new Error('validateUserDefinedYMin expects a number');
+      }
+      return val;
+    };
+
+    /**
+     * Calculates the min y value from this.dataArray
+     * for each object in the dataArray.
+     *
+     * @method getYMinValue
+     * @returns {Number} Min y axis value
+     */
+    Data.prototype.getYMinValue = function () {
+      // 0 default option
+      // custom min option - where they select the min value
+
+      var self = this;
+      var arr = [];
+      var grouped = (this._attr.mode === 'grouped');
+
+      if (this._attr.mode === 'percentage' || this._attr.mode === 'wiggle' ||
+        this._attr.mode === 'silhouette' || this._attr.defaultYMin) {
+        return 0;
+      }
+
+      // User defined y axis min value
+      if (this._attr.userDefinedYMin) {
+        return this.validateUserDefinedYMin(this._attr.userDefinedYMin);
+      }
+
+      // When there is only one data point,
+      // the yMin should default to zero.
+      if (this.flatten()[0][0].length === 1 && this.flatten()[0][0][0].y > 0) {
+        return 0;
+      }
+
+      // Calculate the min value of the dataArray
+      // for each object in the dataArray,
+      // push the calculated y value to the initialized array (arr)
+      _.forEach(this.flatten(), function (series) {
+        if (self.shouldBeStacked(series) && !grouped) {
+          return arr.push(self.getYStackMin(series));
+        }
+        return arr.push(self.getYMin(series));
+      });
+
+      return _.min(arr);
     };
 
     /**
@@ -241,6 +300,17 @@ define(function (require) {
         return 1;
       }
 
+      // User defined y axis min value
+      if (this._attr.userDefinedYMin) {
+        return this.validateUserDefinedYMin(this._attr.userDefinedYMin);
+      }
+
+      // if there is only one data point and its less than zero,
+      // return 0 as the yMax value.
+      if (this.flatten()[0][0].length === 1 && this.flatten()[0][0][0].y < 0) {
+        return 0;
+      }
+
       // for each object in the dataArray,
       // push the calculated y value to the initialized array (arr)
       _.forEach(this.flatten(), function (series) {
@@ -264,6 +334,29 @@ define(function (require) {
       return this._attr.stack(series);
     };
 
+    /**
+     * Calculates the smallest y stack value among all data objects
+     *
+     * @method getYStackMin
+     * @param series {Array} Array of data objects
+     * @returns {Number} Y stack max value
+     */
+    Data.prototype.getYStackMin = function (series) {
+      var isOrdered = (this.data.ordered && this.data.ordered.date);
+      var minDate = isOrdered ? this.data.ordered.min : undefined;
+      var maxDate = isOrdered ? this.data.ordered.max : undefined;
+
+      return d3.min(this.stackData(series), function (data) {
+        return d3.min(data, function (d) {
+          if (isOrdered) {
+            return (d.x >= minDate && d.x <= maxDate) ? d.y0 + d.y : undefined;
+          }
+
+          return d.y0 + d.y;
+        });
+      });
+    };
+
     /**
      * Calculates the largest y stack value among all data objects
      *
@@ -287,10 +380,33 @@ define(function (require) {
       });
     };
 
+    /**
+     * Calculates the Y domain min value
+     *
+     * @method getYMin
+     * @param series {Array} Array of data objects
+     * @returns {Number} Y domain min value
+     */
+    Data.prototype.getYMin = function (series) {
+      var isOrdered = (this.data.ordered && this.data.ordered.date);
+      var minDate = isOrdered ? this.data.ordered.min : undefined;
+      var maxDate = isOrdered ? this.data.ordered.max : undefined;
+
+      return d3.min(series, function (data) {
+        return d3.min(data, function (d) {
+          if (isOrdered) {
+            return (d.x >= minDate && d.x <= maxDate) ? d.y : undefined;
+          }
+
+          return d.y;
+        });
+      });
+    };
+
     /**
      * Calculates the Y domain max value
      *
-     * @method getMax
+     * @method getYMax
      * @param series {Array} Array of data objects
      * @returns {Number} Y domain max value
      */

src/kibana/components/vislib/lib/handler/types/column.js

@@ -31,6 +31,7 @@ define(function (require) {
         }),
         yAxis: new YAxis({
           el   : vis.el,
+          yMin: data.getYMinValue(),
           yMax : data.getYMaxValue(),
           _attr: vis._attr
         })

src/kibana/components/vislib/lib/handler/types/line.js

@@ -30,6 +30,7 @@ define(function (require) {
         }),
         yAxis: new YAxis({
           el   : vis.el,
+          yMin : data.getYMinValue(),
           yMax : data.getYMaxValue(),
           _attr: vis._attr
         })

src/kibana/components/vislib/lib/y_axis.js

@@ -15,6 +15,7 @@ define(function (require) {
      */
     function YAxis(args) {
       this.el = args.el;
+      this.yMin = args.yMin;
       this.yMax = args.yMax;
       this._attr = _.defaults(args._attr || {}, {});
     }
@@ -39,9 +40,25 @@ define(function (require) {
      * @returns {D3.Scale.QuantitiveScale|*} D3 yScale function
      */
     YAxis.prototype.getYScale = function (height) {
+
+      // yMin and yMax can never be equal for the axis
+      // to render. Defaults yMin to 0 if yMin === yMax
+      // and yMin is greater than or equal to zero, else
+      // defaults yMax to zero.
+      if (this.yMin === this.yMax) {
+        if (this.yMin > 0) {
+          this.yMin = 0;
+        } else if (this.yMin === 0) {
+          this.yMin = -1;
+          this.yMax = 1;
+        } else {
+          this.yMax = 0;
+        }
+      }
+
       // save reference to y scale
       this.yScale = d3.scale.linear()
-      .domain([0, this.yMax])
+      .domain([this.yMin, this.yMax])
       .range([height, 0])
       .nice(this.tickScale(height));
 

src/kibana/components/vislib/vis.js

@@ -25,7 +25,9 @@ define(function (require) {
       Vis.Super.apply(this, arguments);
       this.el = $el.get ? $el.get(0) : $el;
       this.ChartClass = chartTypes[config.type];
-      this._attr = _.defaults(config || {}, {});
+      this._attr = _.defaults({}, config || {}, {
+        defaultYMin: true
+      });
       this.eventTypes = {
         enabled: []
       };

src/kibana/components/vislib/visualizations/area_chart.js

@@ -95,8 +95,12 @@ define(function (require) {
       })
       .y0(function (d) {
         if (isOverlapping) {
+          if (!self._attr.defaultYMin) {
+            return yScale(0);
+          }
           return height;
         }
+
         return yScale(d.y0);
       })
       .y1(function (d) {
@@ -291,6 +295,8 @@ define(function (require) {
       var margin = this._attr.margin;
       var elWidth = this._attr.width = $elem.width();
       var elHeight = this._attr.height = $elem.height();
+      var yMin = this.handler.yAxis.yMin;
+      var yScale = this.handler.yAxis.yScale;
       var minWidth = 20;
       var minHeight = 20;
       var div;
@@ -330,6 +336,18 @@ define(function (require) {
           // add path
           path = self.addPath(svg, layers);
 
+          if (yMin < 0 && self._attr.mode !== 'wiggle' && self._attr.mode !== 'silhouette') {
+
+            // Draw line at yScale 0 value
+            svg.append('line')
+              .attr('x1', 0)
+              .attr('y1', yScale(0))
+              .attr('x2', width)
+              .attr('y2', yScale(0))
+              .style('stroke', '#ddd')
+              .style('stroke-width', 1);
+          }
+
           // add circles
           circles = self.addCircles(svg, layers);
 

src/kibana/components/vislib/visualizations/column_chart.js

@@ -136,6 +136,9 @@ define(function (require) {
       var data = this.chartData;
       var xScale = this.handler.xAxis.xScale;
       var yScale = this.handler.yAxis.yScale;
+      var height = yScale.range()[0];
+      var yMin = this.handler.yAxis.yScale.domain()[0];
+      var self = this;
 
       // update
       bars
@@ -155,9 +158,23 @@ define(function (require) {
         return xScale.rangeBand();
       })
       .attr('y', function (d) {
+        if (d.y < 0 && !self._attr.defaultYMin) {
+          return yScale(d.y0);
+        }
+
         return yScale(d.y0 + d.y);
       })
       .attr('height', function (d) {
+        if (d.y < 0 && !self._attr.defaultYMin) {
+          return Math.abs(yScale(d.y0 + d.y) - yScale(d.y0));
+        }
+
+        // for split bars or for one series,
+        // last series will have d.y0 = 0
+        if (d.y0 === 0 && yMin > 0) {
+          return yScale(yMin) - yScale(d.y);
+        }
+
         return yScale(d.y0) - yScale(d.y0 + d.y);
       });
 
@@ -174,12 +191,14 @@ define(function (require) {
     ColumnChart.prototype.addGroupedBars = function (bars) {
       var xScale = this.handler.xAxis.xScale;
       var yScale = this.handler.yAxis.yScale;
+      var yMin = this.handler.yAxis.yMin;
       var data = this.chartData;
       var n = data.series.length;
       var height = yScale.range()[0];
       var groupSpacingPercentage = 0.15;
       var isTimeScale = (data.ordered && data.ordered.date);
       var minWidth = 1;
+      var self = this;
       var barWidth;
 
       // update
@@ -207,9 +226,22 @@ define(function (require) {
         return xScale.rangeBand() / n;
       })
       .attr('y', function (d) {
+        if (d.y < 0 && !self._attr.defaultYMin) {
+          return yScale(0);
+        }
+
         return yScale(d.y);
       })
       .attr('height', function (d) {
+        if (d.y < 0 && !self._attr.defaultYMin) {
+          return Math.abs(yScale(0) - yScale(d.y));
+        }
+
+        // if there is a negative yMin value, use yScale(0) instead of height
+        if (yMin < 0) {
+          return yScale(0) - yScale(d.y);
+        }
+
         return height - yScale(d.y);
       });
 
@@ -253,6 +285,8 @@ define(function (require) {
       var margin = this._attr.margin;
       var elWidth = this._attr.width = $elem.width();
       var elHeight = this._attr.height = $elem.height();
+      var yMin = this.handler.yAxis.yMin;
+      var yScale = this.handler.yAxis.yScale;
       var minWidth = 20;
       var minHeight = 20;
       var div;
@@ -294,6 +328,18 @@ define(function (require) {
           .style('stroke', '#ddd')
           .style('stroke-width', 1);
 
+          if (yMin < 0) {
+
+            // Draw line at yScale 0 value
+            svg.append('line')
+            .attr('x1', 0)
+            .attr('y1', yScale(0))
+            .attr('x2', width)
+            .attr('y2', yScale(0))
+            .style('stroke', '#ddd')
+            .style('stroke-width', 1);
+          }
+
           return svg;
         });
       };