adding _attr to vis class to pass around to other classes

src/kibana/components/vislib/modules/ColumnChart.js

@@ -12,13 +12,14 @@ define(function (require) {
     _(ColumnChart).inherits(Chart);
     function ColumnChart(vis, chartEl, chartData) {
       ColumnChart.Super.apply(this, arguments);
-      this._attr = _.defaults(vis.config || {}, {
-        'margin' : { top: 0, right: 0, bottom: 0, left: 0 },
-        'offset' : 'zero'
+      this._attr = _.defaults(vis._attr || {}, {
+//        'margin' : { top: 0, right: 0, bottom: 0, left: 0 },
+//        'offset' : 'zero'
       });
     }
 
     ColumnChart.prototype.draw = function () {
+      console.log(this);
       // Attributes
       var $elem = $(this.chartEl);
       var margin = this._attr.margin;

src/kibana/components/vislib/modules/Xaxis.js

@@ -3,11 +3,12 @@ define(function (require) {
     var _ = require('lodash');
     var $ = require('jquery');
 
-    function XAxis(el, values, formatter, width) {
+    function XAxis(el, values, formatter, width, margin) {
       this.el = el;
       this.xValues = values;
       this.xAxisFormatter = formatter;
-      this.width = width;
+      this.margin = margin;
+      this.width = width - margin.left - margin.right;
     }
 
     XAxis.prototype.render = function () {
@@ -46,16 +47,16 @@ define(function (require) {
       return function (selection) {
         selection.each(function () {
           div = d3.select(this);
-          width = $(this).width();
+          width = $(this).width() - self.margin.left - self.margin.right;
           height = $(this).height();
 
           svg = div.append('svg')
-            .attr('width', width)
+            .attr('width', width + self.margin.left + self.margin.right)
             .attr('height', height);
 
           svg.append('g')
             .attr('class', 'x axis')
-            .attr('transform', 'translate(0,0)')
+            .attr('transform', 'translate(' + self.margin.left + ',0)')
             .call(self.xAxis);
 
           // check widths to apply rotate

src/kibana/components/vislib/modules/YAxis.js

@@ -5,10 +5,11 @@ define(function (require) {
 
     var split = Private(require('components/vislib/components/YAxis/_split'));
 
-    function YAxis(el, yMax, height) {
+    function YAxis(el, yMax, height, margin) {
       this.el = el;
       this.yMax = yMax;
-      this.height = height;
+      this.margin = margin;
+      this.height = height - margin.top - margin.bottom;
     }
 
     YAxis.prototype.render = function () {
@@ -44,15 +45,15 @@ define(function (require) {
         selection.each(function () {
           div = d3.select(this);
           width = $(this).width();
-          height = $(this).height();
+          height = $(this).height() - self.margin.top - self.margin.bottom;
 
           svg = div.append('svg')
             .attr('width', width)
-            .attr('height', height);
+            .attr('height', height + self.margin.top + self.margin.bottom);
 
           svg.append('g')
             .attr('class', 'y axis')
-            .attr('transform', 'translate(' + width + ', 0)')
+            .attr('transform', 'translate(' + width + ',' + self.margin.top + ')')
             .call(self.yAxis);
         });
       };

src/kibana/components/vislib/modules/_functions.js

@@ -34,13 +34,13 @@ define(function (require) {
       this.chartTitle.render();
     };
 
-    VisFunctions.prototype.renderXAxis = function (xValues, formatter, width) {
-      this.xAxis = new XAxis(this.el, xValues, formatter, width);
+    VisFunctions.prototype.renderXAxis = function (xValues, formatter, width, margin) {
+      this.xAxis = new XAxis(this.el, xValues, formatter, width, margin);
       this.xAxis.render();
     };
 
-    VisFunctions.prototype.renderYAxis = function (yMax, height) {
-      this.yAxis = new YAxis(this.el, yMax, height);
+    VisFunctions.prototype.renderYAxis = function (yMax, height, margin) {
+      this.yAxis = new YAxis(this.el, yMax, height, margin);
       this.yAxis.render();
     };
 

src/kibana/components/vislib/vis.js

@@ -12,8 +12,12 @@ define(function (require) {
 
     function Vis($el, config) {
       this.el = $el.get ? $el.get(0) : $el;
-      this.config = config;
+//      this.config = config;
       this.ChartClass = chartTypes[config.type];
+      this._attr = _.defaults(config || {}, {
+        'margin' : { top: 6, right: 0, bottom: 0, left: 0 },
+        'offset' : 'zero'
+      });
     }
 
     _(Vis.prototype).extend(VisFunctions.prototype);
@@ -45,16 +49,16 @@ define(function (require) {
       this.renderLayout(zeroInjectedData);
 
       // LEGEND CLASS
-      if (this.config.addLegend) {
+      if (this._attr.addLegend) {
         legend = {
           color: this.data.getColorFunc(),
           labels: this.data.getLabels()
         };
-        this.renderLegend(legend, this.config);
+        this.renderLegend(legend, this._attr);
       }
 
       // TOOLTIP CLASS
-      if (this.config.addTooltip) {
+      if (this._attr.addTooltip) {
         tooltipFormatter = this.data.get('tooltipFormatter');
         this.renderTooltip('k4tip', tooltipFormatter);
       }
@@ -67,12 +71,12 @@ define(function (require) {
       xValues = this.data.xValues();
       formatter = this.data.get('xAxisFormatter');
       width = $('.x-axis-div').width();
-      this.renderXAxis(xValues, formatter, width);
+      this.renderXAxis(xValues, formatter, width, this._attr.margin);
 
       // YAXIS CLASS
       yMax = this.data.getYMaxValue();
       height = $('.y-axis-div').height();
-      this.renderYAxis(yMax, height);
+      this.renderYAxis(yMax, height, this._attr.margin);
 
       // AXIS TITLE CLASS
       xTitle = this.data.get('xAxisLabel');