Dimension pull out

Chart/CalendarChart.js

@@ -29,14 +29,9 @@
     {
         let percent = d3.format(".1%"),
             format = d3.time.format("%Y-%m-%d"),
-            box = this.chart.chartSelect.node().getBoundingClientRect(),
             svg, self = this;
 
-        this.chart.dimension = {
+        this.chart.calculateDimension();
-            width: box.width,
-            height: box.height
-        };
-
         this.chart.cellSize = Math.min(this.chart.dimension.width / (12*5), this.chart.dimension.height / (8));
 
         document.getElementById(this.chart.chartId).style.height = (this.chart.dimension.height * this.chart.dataset.length) + 'px';

Chart/CandlestickChart.js

@@ -74,54 +74,15 @@
             height: box.height
         };
 
-        x = d3.scale.linear().range([
+        x = this.chart.createXScale('linear');
-            0,
+        y = this.chart.createYScale('linear');
-            this.chart.dimension.width
+        xAxis1 = this.chart.createXAxis(x);
-            - this.chart.margin.right
+        yAxis1 = this.chart.createYAxis(y);
-            - this.chart.margin.left
+        xGrid = this.chart.createXGrid(x);
-        ]);
+        yGrid = this.chart.createYGrid(y);
 
-        y = d3.scale.linear().range([
+        x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
-            this.chart.dimension.height
+        y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
-            - this.chart.margin.top
-            - this.chart.margin.bottom,
-            10
-        ]);
-
-        xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
-        {
-            return self.chart.axis.x.tick.prefix + d;
-        }).orient("bottom").outerTickSize(this.chart.axis.x.tick.size)
-        .innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
-
-        yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
-        {
-            return self.chart.axis.y.tick.prefix + d;
-        }).orient("left").outerTickSize(this.chart.axis.y.tick.size)
-        .innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
-
-        xGrid = d3.svg.axis()
-            .scale(x)
-            .orient("bottom")
-            //.ticks(0)
-            .tickSize(
-                -(this.chart.dimension.height
-                - this.chart.margin.top - 10
-                - this.chart.margin.bottom), 0, 0)
-            .tickFormat("");
-
-        yGrid = d3.svg.axis()
-            .scale(y)
-            .orient("left")
-            //.ticks(0)
-            .tickSize(
-                -this.chart.dimension.width
-                + this.chart.margin.right
-                + this.chart.margin.left, 0, 0)
-            .tickFormat("");
-
-        x.domain(this.chart.dataset[0].points.map(function(d) { return d.name; }));
-        y.domain([0, d3.max(this.chart.dataset[0].points, function(d) { return d.y*1.05; })]);
 
         svg = this.chart.chartSelect.append("svg")
             .attr("width", this.chart.dimension.width)
@@ -165,24 +126,6 @@
             .attr("class", function(d) { return "dataPoint " + (d.y < d.y0 ? 'negative' : 'positive'); })
             .attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
 
-        dataPointEnter.append("rect")
-            .attr("y", function(d) { return y( Math.max(d.y0, d.y) ); })
-            .attr("height", function(d) { return Math.abs( y(d.y0) - y(d.y) ); })
-            .attr("width", x.rangeBand());
-
-        dataPointEnter.append("text")
-            .attr("x", x.rangeBand() / 2)
-            .attr("y", function(d) { return y(d.y) + 5; })
-            .attr("dy", function(d) { return ((d.y < d.y0) ? '-' : '') + ".75em" })
-            .text(function(d) { return d.y - d.y0; });
-
-        dataPointEnter.filter(function(d) { return d.class != "total" }).append("line")
-            .attr("class", "connector")
-            .attr("x1", x.rangeBand() + 5 )
-            .attr("y1", function(d) { return y(d.y) } )
-            .attr("x2", x.rangeBand() / ( 1 - 5) - 5 )
-            .attr("y2", function(d) { return y(d.y) } );
-
         return [dataPointEnter, dataPoint];
     };
 }(window.jsOMS = window.jsOMS || {}));

Chart/ChartAbstract.js

@@ -546,7 +546,7 @@
             return self.axis.x.tick.prefix + d;
         }).orient("bottom").outerTickSize(self.axis.x.tick.size)
         .innerTickSize(self.axis.x.tick.size).tickPadding(7);
-    }
+    };
 
     jsOMS.Chart.ChartAbstract.prototype.createYAxis = function (y) {
         let self = this;
@@ -556,7 +556,7 @@
             return self.axis.y.tick.prefix + d;
         }).orient("left").outerTickSize(this.axis.y.tick.size)
         .innerTickSize(this.axis.y.tick.size).tickPadding(7);
-    }
+    };
 
     jsOMS.Chart.ChartAbstract.prototype.createXGrid = function (x) {
         return d3.svg.axis()
@@ -568,7 +568,7 @@
                 - this.margin.top - 10
                 - this.margin.bottom), 0, 0)
             .tickFormat("");
-    }
+    };
 
     jsOMS.Chart.ChartAbstract.prototype.createYGrid = function (y) {
         return d3.svg.axis()
@@ -580,7 +580,17 @@
                 + this.margin.right
                 + this.margin.left, 0, 0)
             .tickFormat("");
-    }
+    };
+
+    jsOMS.Chart.ChartAbstract.prototype.calculateDimension = function ()
+    {
+        let box = this.chartSelect.node().getBoundingClientRect()
+
+        this.dimension = {
+            width: box.width,
+            height: box.height
+        };
+    };
 
     jsOMS.Chart.ChartAbstract.prototype.clean = function ()
     {

Chart/ColumnChart.js

@@ -69,7 +69,7 @@
 
     jsOMS.Chart.ColumnChart.prototype.draw = function ()
     {
-        let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
+        let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
 
         if (this.chart.subtype === 'grouped') {
             this.chart.axis.y.max = d3.max(this.chart.dataset, function (layer)
@@ -89,10 +89,7 @@
             });
         }
 
-        this.chart.dimension = {
+        this.chart.calculateDimension();
-            width: box.width,
-            height: box.height
-        };
 
         x = this.chart.createXScale('ordinal');
         y = this.chart.createYScale('linear');

Chart/LineChart.js

@@ -68,12 +68,9 @@
 
     jsOMS.Chart.LineChart.prototype.draw = function ()
     {
-        let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
+        let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
 
-        this.chart.dimension = {
+        this.chart.calculateDimension('linear');
-            width: box.width,
-            height: box.height
-        };
 
         x = this.chart.createXScale('linear');
         y = this.chart.createYScale('linear');

Chart/PieChart.js

@@ -21,12 +21,9 @@
 
     jsOMS.Chart.PieChart.prototype.draw = function ()
     {
-        let svg, arc, box = this.chart.chartSelect.node().getBoundingClientRect();
+        let svg, arc;
 
-        this.chart.dimension = {
+        this.chart.calculateDimension();
-            width: box.width,
-            height: box.height
-        };
 
         let radius = (
             Math.min(this.chart.dimension.width, this.chart.dimension.height) / 2

Chart/ScatterplotChart.js

@@ -67,12 +67,9 @@
 
     jsOMS.Chart.ScatterplotChart.prototype.draw = function ()
     {
-        let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
+        let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
 
-        this.chart.dimension = {
+        this.chart.calculateDimension('linear');
-            width: box.width,
-            height: box.height
-        };
 
         x = this.chart.createXScale('linear');
         y = this.chart.createYScale('linear');

Chart/WaterfallChart.js

@@ -79,12 +79,9 @@
 
     jsOMS.Chart.WaterfallChart.prototype.draw = function ()
     {
-        let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
+        let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
 
-        this.chart.dimension = {
+        this.chart.calculateDimension();
-            width: box.width,
-            height: box.height
-        };
 
         x = this.chart.createXScale('ordinal');
         y = this.chart.createYScale('linear');