add panel, table, overlap custom grid

Gruntfile.js

@@ -74,6 +74,9 @@ module.exports = function(grunt) {
                     "js/chart/grid/radar.js",
                     "js/chart/grid/range.js",
                     "js/chart/grid/rule.js",
+                    "js/chart/grid/panel.js",
+                    "js/chart/grid/table.js",
+                    "js/chart/grid/overlap.js",
 
                     // chart.brush
                     "js/chart/brush/core.js",
@@ -154,6 +157,10 @@ module.exports = function(grunt) {
                     "js/chart/grid/date.js",
                     "js/chart/grid/radar.js",
                     "js/chart/grid/range.js",
+                    "js/chart/grid/rule.js",
+                    "js/chart/grid/panel.js",
+                    "js/chart/grid/table.js",
+                    "js/chart/grid/overlap.js",
 
                     // chart.brush
                     "js/chart/brush/core.js",

js/chart/brush/pie.js

@@ -35,51 +35,78 @@ jui.define("chart.brush.pie", [ "util.math" ], function(math) {
 		}
 
         this.drawBefore = function() {
-            var width = chart.width(),
-				height = chart.height();
-            var min = width;
-
-            if (height < min) {
-                min = height;
-            }
-
-            // center
-            w = min / 2;
-            centerX = width / 2;
-            centerY = height / 2;
-            outerRadius = w;
+
+			if (!brush.c) {
+				brush.c = function(i) {
+					return {
+						x : 0,
+						y : 0,
+						width : chart.width(),
+						height : chart.height()
+					};
+				}
+			}
+
         }
 
-		this.draw = function() {
-			var group = chart.svg.group({
-				"class" : "brush donut"
-			});
+		this.drawUnit = function(index, data, group) {
+
+			var obj = brush.c(index);
+
+			var width = obj.width, height = obj.height;
+			var x = obj.x, y = obj.y;
+			var min = width;
+
+			if (height < min) {
+				min = height;
+			}
+
+			// center
+			w = min / 2;
+			centerX = width / 2 + x;
+			centerY = height / 2 + y;
+			outerRadius = w;
 
 			var target = brush.target,
 				all = 360,
-                startAngle = 0,
+				startAngle = 0,
 				max = 0;
 
 			for (var i = 0; i < target.length; i++) {
-				max += chart.data(0)[target[i]];
+				max += data[target[i]];
 			}
 
 			for (var i = 0; i < target.length; i++) {
-				var value = chart.data(0)[target[i]],
-                    endAngle = all * (value / max);
+				var value = data[target[i]],
+					endAngle = all * (value / max);
 
 				var g = this.drawPie(chart, centerX, centerY, outerRadius, startAngle, endAngle, {
 					fill : chart.color(i, brush),
 					stroke : chart.theme("pieBorderColor"),
 					"stroke-width" : chart.theme("pieBorderWidth")
 				});
 
-                this.addEvent(g, i, 0);
+				this.addEvent(g, i, index);
 				group.append(g);
 
 				startAngle += endAngle;
 			}
 
+		}
+
+		this.draw = function() {
+			var group = chart.svg.group({
+				"class" : "brush donut"
+			});
+
+
+			var data = chart.data();
+
+			for(var i = 0; i < data.length; i++) {
+				this.drawUnit(i, data[i], group);
+			}
+
+
             return group;
 		}
 

js/chart/grid/overlap.js

@@ -0,0 +1,58 @@
+jui.define("chart.grid.overlap", [  ], function() {
+
+
+    var OverlapGrid = function(orient, chart, grid) {
+
+        var size, widthUnit, heightUnit, width, height ;
+
+        function getXY ( i ) {
+            var x = width/2  - i * widthUnit;
+            var y = height/2 - i * heightUnit;
+
+            return { x : x , y : y }
+        }
+
+
+
+        this.drawBefore = function() {
+
+            size = grid.size || chart.data().length ||  1;
+
+            widthUnit = (chart.width() / 2) / size;
+            heightUnit = (chart.height() / 2) / size;
+
+            width = chart.width();
+            height = chart.height();
+        }
+
+        this.scale = function(chart) {
+            return function(i) {
+
+                var obj = getXY(size - i);
+
+                return {
+                    x : obj.x,
+                    y : obj.y,
+                    width : Math.abs(width/2 - obj.x)*2,
+                    height : Math.abs(height/2 - obj.y)*2
+                }
+            }
+        }
+
+        this.draw = function() {
+
+            return {
+                scale : this.scale(chart)
+            };
+        }
+
+        this.drawSetup = function() {
+            return $.extend(this.parent.drawSetup(), {
+
+            });
+        }
+
+    }
+
+    return OverlapGrid;
+}, "chart.grid.core");

js/chart/grid/panel.js

@@ -0,0 +1,85 @@
+jui.define("chart.grid.panel", [  ], function() {
+
+    var PanelGrid = function(orient, chart, grid) {
+
+        var start, size ;
+
+
+        function getValue(value, max) {
+            if (typeof value == 'string' && value.indexOf("%") > -1) {
+                return max * (parseFloat(value.replace("%", "")) /100);
+            }
+
+            return value;
+        }
+
+        function getArrayValue (value, chart) {
+            var start;
+
+            if (typeof value == 'number') {
+                start = [value, value];
+            } else if (typeof value == 'string') {
+
+                if (value.indexOf("%") > -1) {
+                    start = [getValue(value, chart.width()), getValue(value,  chart.height())]
+                } else {
+                    start = [parseFloat(value), parseFloat(value)]
+                }
+
+            } else if (value instanceof Array) {
+
+                for(var i = 0; i < value.length; i++) {
+                    if (i == 0) {
+                        value[i] = getValue(value[i], chart.width());
+                    } else if (i == 1) {
+                        value[i] = getValue(value[i], chart.height());
+                    }
+                }
+
+                start = value;
+            }
+
+            return start;
+        }
+
+        this.drawBefore = function() {
+            start = [0, 0];
+            if (grid.start !== null) {
+                start = getArrayValue(grid.start, chart);
+            }
+
+            size = [chart.width(), chart.height()];
+            if (grid.size != null) {
+                size = getArrayValue(grid.size, chart);
+            }
+
+            console.log(size, start);
+
+        }
+
+        this.scale = function() {
+
+            console.log(start, size);
+
+
+            return function() {
+                return {
+                    x : start[0],
+                    y : start[1],
+                    width : size[0],
+                    height : size[1]
+                }
+            }
+        }
+
+        this.draw = function() {
+
+            return {
+                scale : this.scale(chart)
+            };
+        }
+
+    }
+
+    return PanelGrid;
+}, "chart.grid.core");

js/chart/grid/table.js

@@ -0,0 +1,105 @@
+jui.define("chart.grid.table", [  ], function() {
+
+
+    var TableGrid = function(orient, chart, grid) {
+
+        var start, size, rowUnit, columnUnit, outerPadding ;
+
+        function getValue(value, max) {
+            if (typeof value == 'string' && value.indexOf("%") > -1) {
+                return max * (parseFloat(value.replace("%", "")) /100);
+            }
+
+            return value;
+        }
+
+        function getArrayValue (value, chart) {
+            var start;
+
+            if (typeof value == 'number') {
+                start = [value, value];
+            } else if (typeof value == 'string') {
+
+                if (value.indexOf("%") > -1) {
+                    start = [getValue(value, chart.width()), getValue(value,  chart.height())]
+                } else {
+                    start = [parseFloat(value), parseFloat(value)]
+                }
+
+            } else if (value instanceof Array) {
+
+                for(var i = 0; i < value.length; i++) {
+                    if (i == 0) {
+                        value[i] = getValue(value[i], chart.width());
+                    } else if (i == 1) {
+                        value[i] = getValue(value[i], chart.height());
+                    }
+                }
+
+                start = value;
+            }
+
+            return start;
+        }
+
+
+
+        this.drawBefore = function() {
+            start = [0, 0];
+            if (grid.start !== null) {
+                start = getArrayValue(grid.start, chart);
+            }
+
+            size = [chart.width(), chart.height()];
+            if (grid.size != null) {
+                size = getArrayValue(grid.size, chart);
+            }
+
+            row = grid.row;
+            column = grid.column;
+
+
+            columnUnit = size[0] / column;
+            rowUnit = size[1] / row;
+
+            outerPadding = grid.outerPadding;
+
+        }
+
+        this.scale = function(chart) {
+            return function(i) {
+
+                var r = Math.floor(i  / column) ;
+                var c = i % column;
+
+                var x = c * columnUnit;
+                var y = r * rowUnit;
+
+                return {
+                    x : x - outerPadding,
+                    y : y - outerPadding,
+                    width : columnUnit - outerPadding*2,
+                    height : rowUnit - outerPadding*2
+                }
+            }
+        }
+
+        this.draw = function() {
+
+            return {
+                scale : this.scale(chart)
+            };
+        }
+
+        this.drawSetup = function() {
+            return $.extend(this.parent.drawSetup(), {
+                row : 1,
+                column : 1,
+                outerPadding : 1
+            });
+        }
+
+    }
+
+    return TableGrid;
+}, "chart.grid.core");