update chartConfig, fix viewer chart test

Author: Francesca-Bit

lib/viewer/chartConfig.js

@@ -13,15 +13,45 @@ WOQLChartConfig.prototype.constructor = Config.ViewConfig;
 
 WOQLChartConfig.prototype.prettyPrint = function(){
     var str = "view = View.chart();\n";
-    str += this.getBasicPrettyPrint();
-	for(var i = 0; i<this.rules.length ; i++){
+    for(var i = 0; i<this.rules.length ; i++){
 		str += "view." + this.rules[i].prettyPrint() + "\n";
 	}
+	if(typeof this.margin() != "undefined"){
+		str += "view.margin(" + this.margin() + ")\n";
+	}
+	if(typeof this.title() != "undefined"){
+		str += "view.title('" + this.title() + "')\n";
+	}
+	if(typeof this.description() != "undefined"){
+		str += "view.description('" + this.description() + "')\n";
+	}
+	if(typeof this.layout() != "undefined"){
+		str += "view.layout('" + this.layout() + "')\n";
+	}
+	
+    str += this.getBasicPrettyPrint();
 	return str;
 }
 
 WOQLChartConfig.prototype.json = function(){
-	let mj = {"chart" :this.getBasicJSON(), "rules": this.getRulesJSON()};
+	/*
+	*general properties 
+	*/
+	var conf = {};
+	if(typeof this.margin() != "undefined"){
+		conf['margin'] = this.margin();
+	}
+	if(typeof this.title() != "undefined"){
+		conf['title'] = this.title();
+	}
+	if(typeof this.description() != "undefined"){
+		conf['description'] = this.description();
+	}
+	if(typeof this.layout() != "undefined"){
+		conf['layout'] = this.layout();
+	}
+
+	let mj = {"chart" :conf, "rules": this.getRulesJSON()};
 	return mj;
 }
 
@@ -34,8 +64,57 @@ WOQLChartConfig.prototype.loadJSON = function(config, rules){
 		jr.push(nr);
 	}
 	this.rules = jr;
+	if(typeof config.margin != "undefined"){
+		this.margin(config.margin);
+	}
+	if(typeof config.title != "undefined"){
+		this.title(config.title);
+	}
+	if(typeof config.description != "undefined"){
+		this.description(config.description);
+	}
+	if(typeof config.layout != "undefined"){
+		this.layout(config.layout);
+	}
+}
+
+WOQLChartConfig.prototype.title = function(title){
+	if(typeof title == "undefined"){
+		return this._title;
+	}
+	this._title = title;
+	return this;
+}
+
+WOQLChartConfig.prototype.description=function(description){
+	if(description){
+		this._description=description;
+		return this
+	}
+	return this._description;
+}
+
+//layout "vertical" | "horizontal"
+WOQLChartConfig.prototype.layout=function(layout){
+	if(layout){
+		this._layout=layout;
+		return this
+	}
+	return this._layout;
+}
+
+
+//default is { top: 10, right: 30, left: 0, bottom: 0 }
+WOQLChartConfig.prototype.margin=function(marginObj){
+	if(marginObj){
+		this._margin=marginObj;
+		return this
+	}
+
+	return this._margin;
 }
 
+
 WOQLChartConfig.prototype.create = function(client){
 	var wqt = new WOQLChartConfig(client, this);
 	return wqt;
@@ -122,6 +201,19 @@ WOQLChartRule.prototype.label = function(label){
 	return this.rule.label;
 }
 
+/*
+*line is the default value
+* 'line' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'
+*/
+
+WOQLChartRule.prototype.legendType = function(legendType){
+	if(legendType){
+		this.rule.legendType = legendType;
+		return this;
+	}
+	return this.rule.legendType;
+}
+
 
 WOQLChartRule.prototype.fill=function(color){
 	if(color){

test/viewer.spec.js

@@ -191,30 +191,54 @@ describe('Viewer rules', function () {
     it('check the View Chart Rules',function(){
         const config=View.chart();
         var rend = function(){alert("r")};
-        config.bar("a", "b").literal(true).type("xdd:coordinatePolygon").value(32).size(43).icon({}).color([0,0,0]).text("hello").border({}).renderer("world").render(rend).click(rend).hover(rend).args({}).hidden(true).
-        fill([1,2,3]).stroke(["a", "b", "c"]).strokeWidth(34).dot(false).labelRotate(32.1).axisType("Bar").axisDomain([]);
+        
+        /*config.bar("a", "b").literal(true).type("xdd:coordinatePolygon").value(32).size(43).icon({}).color([0,0,0]).text("hello").border({}).renderer("world").render(rend).click(rend).hover(rend).args({}).hidden(true).
+        fill([1,2,3]).stroke(["a", "b", "c"]).strokeWidth(34).dot(false).labelRotate(32.1).type("Bar").axisDomain([]);*/
+        config.title("MY CHART TEST").layout("vertical");
+        config.bar("a").legendType('square').label('my bar').fill("#00ff00").stroke("#ff0000").strokeWidth(34);
 
-        const jsonObj= {chart: {}, rules: [{pattern: {literal : true, scope: "Bar", type: ["xdd:coordinatePolygon"], value: [32], variables: ['v:a', "v:b"]}, 
-            rule: {
-                args: {},
-                border: {},
-                click: rend,
-                color: [0,0,0],
-                domain: [],
-                dot: false,
-                fill: [1,2,3],
-                hidden: true,
-                hover: rend,
-                icon: {},
-                labelRotate: 32.1,
-                render: rend,
-                renderer:"world",
-                size: 43,
-                stroke: ["a", "b", "c"],
-                strokeWidth: 34,
-                text: "hello",
-            }
-        }]};
+        config.xAxis("b").labelRotate(32.1).type('number').axisDomain(['dataMin - 1', 'dataMax  + 1'])
+
+        const jsonObj= {"chart":{
+                              "title":"MY CHART TEST",
+                              "layout":"vertical"
+                           },
+                           "rules":[
+                              {
+                                 "pattern":{
+                                    "scope":"Bar",
+                                    "variables":[
+                                       "v:a"
+                                    ]
+                                 },
+                                 "rule":{
+                                    "legendType":"square",
+                                    "label":"my bar",
+                                    "fill":"#00ff00",
+                                    "stroke":"#ff0000",
+                                    "strokeWidth":34
+                                 }
+                              },
+                              {
+                                 "pattern":{
+                                    "scope":"XAxis",
+                                    "variables":[
+                                       "v:b"
+                                    ]
+                                 },
+                                 "rule":{
+                                    "labelRotate":32.1,
+                                    "type":"number",
+                                    "domain":[
+                                       "dataMin - 1",
+                                       "dataMax  + 1"
+                                    ]
+                                 }
+                              }
+                           ]
+                        }
+
+        //console.log(JSON.stringify(config.json()));
         const serial = config.json();
         expect(serial).to.eql(jsonObj);
         const nt = View.loadConfig(serial);

test/woqlChart.spec.js

@@ -18,6 +18,7 @@ describe('woqlChart config', function () {
 										,"rule":{"label":"Day","type":"number"}}]}
 
 
+		
 		console.log(JSON.stringify(woqlChart.json()));
 
 	})