Add Responsive Positioning Support

PMSI-AlignAlytics · Sep 11, 2013 · 213a120 · 213a120
1 parent 04a81a8
commit 213a120
Show file tree

Hide file tree

Showing 24 changed files with 4,490 additions and 159 deletions.
diff --git a/dist/dimple.v1.0.1.js b/dist/dimple.v1.0.1.js
diff --git a/dist/dimple.v1.0.1.min.js b/dist/dimple.v1.0.1.min.js
diff --git a/dist/dimple.v1.js b/dist/dimple.v1.js
diff --git a/dist/dimple.v1.min.js b/dist/dimple.v1.min.js
diff --git a/src/methods/_addGradient.js b/src/methods/_addGradient.js
@@ -22,10 +22,10 @@
             grad = chart._group.append("linearGradient")
                 .attr("id", id)
                 .attr("gradientUnits", "userSpaceOnUse")
-                .attr("x1", (categoryAxis.position === "x" ? categoryAxis._scale(cats[0]) + ((chart.width / cats.length) / 2) : 0))
-                .attr("y1", (categoryAxis.position === "y" ? categoryAxis._scale(cats[0]) - ((chart.height / cats.length) / 2) : 0))
-                .attr("x2", (categoryAxis.position === "x" ? categoryAxis._scale(cats[cats.length - 1]) + ((chart.width / cats.length) / 2) : 0))
-                .attr("y2", (categoryAxis.position === "y" ? categoryAxis._scale(cats[cats.length - 1]) - ((chart.height / cats.length) / 2) : 0));
+                .attr("x1", (categoryAxis.position === "x" ? categoryAxis._scale(cats[0]) + ((chart._widthPixels() / cats.length) / 2) : 0))
+                .attr("y1", (categoryAxis.position === "y" ? categoryAxis._scale(cats[0]) - ((chart._heightPixels() / cats.length) / 2) : 0))
+                .attr("x2", (categoryAxis.position === "x" ? categoryAxis._scale(cats[cats.length - 1]) + ((chart._widthPixels() / cats.length) / 2) : 0))
+                .attr("y2", (categoryAxis.position === "y" ? categoryAxis._scale(cats[cats.length - 1]) - ((chart._heightPixels() / cats.length) / 2) : 0));
         }
 
         cats.forEach(function (cat, j) {

diff --git a/src/methods/_helpers.js b/src/methods/_helpers.js
@@ -9,9 +9,9 @@
             if (series.x.measure !== null && series.x.measure !== undefined) {
                 returnCx = series.x._scale(d.cx);
             } else if (series.x._hasCategories() && series.x.categoryFields.length >= 2) {
-                returnCx = series.x._scale(d.cx) + dimple._helpers.xGap(chart, series) + ((d.xOffset + 0.5) * (((chart.width / series.x._max) - 2 * dimple._helpers.xGap(chart, series)) * d.width));
+                returnCx = series.x._scale(d.cx) + dimple._helpers.xGap(chart, series) + ((d.xOffset + 0.5) * (((chart._widthPixels() / series.x._max) - 2 * dimple._helpers.xGap(chart, series)) * d.width));
             } else {
-                returnCx = series.x._scale(d.cx) + ((chart.width / series.x._max) / 2);
+                returnCx = series.x._scale(d.cx) + ((chart._widthPixels() / series.x._max) / 2);
             }
             return returnCx;
         },
@@ -22,9 +22,9 @@
             if (series.y.measure !== null && series.y.measure !== undefined) {
                 returnCy = series.y._scale(d.cy);
             } else if (series.y.categoryFields !== null && series.y.categoryFields !== undefined && series.y.categoryFields.length >= 2) {
-                returnCy = (series.y._scale(d.cy) - (chart.height / series.y._max)) +  dimple._helpers.yGap(chart, series) + ((d.yOffset + 0.5) * (((chart.height / series.y._max) - 2 * dimple._helpers.yGap(chart, series)) * d.height));
+                returnCy = (series.y._scale(d.cy) - (chart._heightPixels() / series.y._max)) +  dimple._helpers.yGap(chart, series) + ((d.yOffset + 0.5) * (((chart._heightPixels() / series.y._max) - 2 * dimple._helpers.yGap(chart, series)) * d.height));
             } else {
-                returnCy = series.y._scale(d.cy) - ((chart.height / series.y._max) / 2);
+                returnCy = series.y._scale(d.cy) - ((chart._heightPixels() / series.y._max) / 2);
             }
             return returnCy;
         },
@@ -37,7 +37,7 @@
             } else if (series.z._hasMeasure()) {
                 returnR = series.z._scale(d.r);
             } else {
-                returnR = series.z._scale(chart.height / 100);
+                returnR = series.z._scale(chart._heightPixels() / 100);
             }
             return returnR;
         },
@@ -46,7 +46,7 @@
         xGap: function (chart, series) {
             var returnXGap = 0;
             if ((series.x.measure === null || series.x.measure === undefined) && series.barGap > 0) {
-                returnXGap = ((chart.width / series.x._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
+                returnXGap = ((chart._widthPixels() / series.x._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
             }
             return returnXGap;
         },
@@ -55,7 +55,7 @@
         xClusterGap: function (d, chart, series) {
             var returnXClusterGap = 0;
             if (series.x.categoryFields !== null && series.x.categoryFields !== undefined && series.x.categoryFields.length >= 2 && series.clusterBarGap > 0 && !series.x._hasMeasure()) {
-                returnXClusterGap = (d.width * ((chart.width / series.x._max) - (dimple._helpers.xGap(chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
+                returnXClusterGap = (d.width * ((chart._widthPixels() / series.x._max) - (dimple._helpers.xGap(chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
             }
             return returnXClusterGap;
         },
@@ -64,7 +64,7 @@
         yGap: function (chart, series) {
             var returnYGap = 0;
             if ((series.y.measure === null || series.y.measure === undefined) && series.barGap > 0) {
-                returnYGap = ((chart.height / series.y._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
+                returnYGap = ((chart._heightPixels() / series.y._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
             }
             return returnYGap;
         },
@@ -73,7 +73,7 @@
         yClusterGap: function (d, chart, series) {
             var returnYClusterGap = 0;
             if (series.y.categoryFields !== null && series.y.categoryFields !== undefined && series.y.categoryFields.length >= 2 && series.clusterBarGap > 0 && !series.y._hasMeasure()) {
-                returnYClusterGap = (d.height * ((chart.height / series.y._max) - (dimple._helpers.yGap(chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
+                returnYClusterGap = (d.height * ((chart._heightPixels() / series.y._max) - (dimple._helpers.yGap(chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
             }
             return returnYClusterGap;
         },
@@ -99,7 +99,7 @@
             } else if (series.y.measure !== null && series.y.measure !== undefined) {
                 returnY = series.y._scale(d.y);
             } else {
-                returnY = (series.y._scale(d.y) - (chart.height / series.y._max)) + dimple._helpers.yGap(chart, series) + (d.yOffset * (dimple._helpers.height(d, chart, series) + 2 * dimple._helpers.yClusterGap(d, chart, series))) + dimple._helpers.yClusterGap(d, chart, series);
+                returnY = (series.y._scale(d.y) - (chart._heightPixels() / series.y._max)) + dimple._helpers.yGap(chart, series) + (d.yOffset * (dimple._helpers.height(d, chart, series) + 2 * dimple._helpers.yClusterGap(d, chart, series))) + dimple._helpers.yClusterGap(d, chart, series);
             }
             return returnY;
         },
@@ -112,7 +112,7 @@
             } else if (series.x._hasTimeField()) {
                 returnWidth = series.x.floatingBarWidth;
             } else {
-                returnWidth = d.width * ((chart.width / series.x._max) - (dimple._helpers.xGap(chart, series) * 2)) - (dimple._helpers.xClusterGap(d, chart, series) * 2);
+                returnWidth = d.width * ((chart._widthPixels() / series.x._max) - (dimple._helpers.xGap(chart, series) * 2)) - (dimple._helpers.xClusterGap(d, chart, series) * 2);
             }
             return returnWidth;
         },
@@ -125,7 +125,7 @@
             } else if (series.y.measure !== null && series.y.measure !== undefined) {
                 returnHeight = Math.abs(series.y._scale(d.y) - series.y._scale((d.y <= 0 ? d.y + d.height : d.y - d.height)));
             } else {
-                returnHeight = d.height * ((chart.height / series.y._max) - (dimple._helpers.yGap(chart, series) * 2)) - (dimple._helpers.yClusterGap(d, chart, series) * 2);
+                returnHeight = d.height * ((chart._heightPixels() / series.y._max) - (dimple._helpers.yGap(chart, series) * 2)) - (dimple._helpers.yClusterGap(d, chart, series) * 2);
             }
             return returnHeight;
         },

diff --git a/src/objects/axis/methods/_update.js b/src/objects/axis/methods/_update.js
@@ -48,11 +48,11 @@
             if (this.position === "x") {
                 if (this._hasTimeField()) {
                     this._scale = d3.time.scale()
-                        .rangeRound([this.chart.x, this.chart.x + this.chart.width])
+                        .rangeRound([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
                         .domain([this._min, this._max]);
                 } else if (this.useLog) {
                     this._scale = d3.scale.log()
-                        .range([this.chart.x, this.chart.x + this.chart.width])
+                        .range([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
                         .domain([
                             (this._min === 0 ? Math.pow(this.logBase, -1) : this._min),
                             (this._max === 0 ? -1 * Math.pow(this.logBase, -1) : this._max)
@@ -63,11 +63,11 @@
                 } else if (this.measure === null || this.measure === undefined) {
                     distinctCats = getOrderedCategories(this, "x", "y");
                     this._scale = d3.scale.ordinal()
-                        .rangePoints([this.chart.x, this.chart.x + this.chart.width])
+                        .rangePoints([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
                         .domain(distinctCats.concat([""]));
                 } else {
                     this._scale = d3.scale.linear()
-                        .range([this.chart.x, this.chart.x + this.chart.width])
+                        .range([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
                         .domain([this._min, this._max]).nice();
                 }
                 // If it's visible, orient it at the top or bottom if it's first or second respectively
@@ -90,11 +90,11 @@
             } else if (this.position === "y") {
                 if (this._hasTimeField()) {
                     this._scale = d3.time.scale()
-                        .rangeRound([this.chart.y + this.chart.height, this.chart.y])
+                        .rangeRound([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
                         .domain([this._min, this._max]);
                 } else if (this.useLog) {
                     this._scale = d3.scale.log()
-                        .range([this.chart.y + this.chart.height, this.chart.y])
+                        .range([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
                         .domain([
                             (this._min === 0 ? Math.pow(this.logBase, -1) : this._min),
                             (this._max === 0 ? -1 * Math.pow(this.logBase, -1) : this._max)
@@ -105,11 +105,11 @@
                 } else if (this.measure === null || this.measure === undefined) {
                     distinctCats = getOrderedCategories(this, "y", "x");
                     this._scale = d3.scale.ordinal()
-                        .rangePoints([this.chart.y + this.chart.height, this.chart.y])
+                        .rangePoints([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
                         .domain(distinctCats.concat([""]));
                 } else {
                     this._scale = d3.scale.linear()
-                        .range([this.chart.y + this.chart.height, this.chart.y])
+                        .range([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
                         .domain([this._min, this._max])
                         .nice();
                 }
@@ -133,7 +133,7 @@
             } else if (this.position.length > 0 && this.position[0] === "z") {
                 if (this.useLog) {
                     this._scale = d3.scale.log()
-                        .range([this.chart.height / 300, this.chart.height / 10])
+                        .range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
                         .domain([
                             (this._min === 0 ? Math.pow(this.logBase, -1) : this._min),
                             (this._max === 0 ? -1 * Math.pow(this.logBase, -1) : this._max)
@@ -142,7 +142,7 @@
                         .base(this.logBase);
                 } else {
                     this._scale = d3.scale.linear()
-                        .range([this.chart.height / 300, this.chart.height / 10])
+                        .range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
                         .domain([this._min, this._max]);
                 }
             } else if (this.position.length > 0 && this.position[0] === "c") {

diff --git a/src/objects/chart/begin.js b/src/objects/chart/begin.js
@@ -7,13 +7,13 @@
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-svg
         this.svg = svg;
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-x
-        this.x = svg.node().offsetWidth * 0.1;
+        this.x = "10%";
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-y
-        this.y = svg.node().offsetHeight * 0.1;
+        this.y = "10%";
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-width
-        this.width = svg.node().offsetWidth * 0.8;
+        this.width = "80%";
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-height
-        this.height = svg.node().offsetHeight * 0.8;
+        this.height = "80%";
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-data
         this.data = data;
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-noFormats
@@ -41,4 +41,3 @@
         this._assignedColors = {};
         // The next colour index to use, this value is cycled around for all default colours
         this._nextColor = 0;
-
diff --git a/src/objects/chart/methods/_heightPixels.js b/src/objects/chart/methods/_heightPixels.js
@@ -0,0 +1,7 @@
+        // Copyright: 2013 PMSI-AlignAlytics
+        // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
+        // Source: /src/objects/chart/methods/_xPixels.js
+        // Access the pixel value of the height of the plot area
+        this._heightPixels = function () {
+            return dimple._parsePosition(this.height, this.svg.node().offsetHeight);
+        };
diff --git a/src/objects/chart/methods/_widthPixels.js b/src/objects/chart/methods/_widthPixels.js
@@ -0,0 +1,7 @@
+        // Copyright: 2013 PMSI-AlignAlytics
+        // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
+        // Source: /src/objects/chart/methods/_xPixels.js
+        // Access the pixel value of the width of the plot area
+        this._widthPixels = function () {
+            return dimple._parsePosition(this.width, this.svg.node().offsetWidth);
+        };
diff --git a/src/objects/chart/methods/_xPixels.js b/src/objects/chart/methods/_xPixels.js
@@ -0,0 +1,7 @@
+        // Copyright: 2013 PMSI-AlignAlytics
+        // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
+        // Source: /src/objects/chart/methods/_xPixels.js
+        // Access the pixel position of the x co-ordinate of the plot area
+        this._xPixels = function () {
+            return dimple._parsePosition(this.x, this.svg.node().offsetWidth);
+        };
diff --git a/src/objects/chart/methods/_yPixels.js b/src/objects/chart/methods/_yPixels.js
@@ -0,0 +1,7 @@
+        // Copyright: 2013 PMSI-AlignAlytics
+        // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
+        // Source: /src/objects/chart/methods/_yPixels.js
+        // Access the pixel position of the y co-ordinate of the plot area
+        this._yPixels = function () {
+            return dimple._parsePosition(this.y, this.svg.node().offsetHeight);
+        };