http://git-wip-us.apache.org/repos/asf/stratos/blob/19a021ae/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js ---------------------------------------------------------------------- diff --git a/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js b/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js new file mode 100644 index 0000000..1c182d9 --- /dev/null +++ b/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js @@ -0,0 +1,3408 @@ +/* + * + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + * + */ +(function () { + + var igviz = window.igviz || {}; + + igviz.version = '1.0.0'; + + igviz.val = 0; + window.igviz = igviz; + var persistedData = []; + var maxValueForUpdate; + var singleNumSvg; + var singleNumCurveSvg; + var mapChart; + var mapSVG; + var worldMapCodes; + var usaMapCodes; + + /*************************************************** Initializtion functions ***************************************************************************************************/ + + + igviz.draw = function (canvas, config, dataTable) { + var chart = new Chart(canvas, config, dataTable); + + if (config.chartType == "singleNumber") { + this.drawSingleNumberDiagram(chart); + } else if (config.chartType == "map") { + this.drawMap(canvas, config, dataTable); + } else if (config.chartType == "tabular") { + this.drawTable(canvas, config, dataTable); + } else if (config.chartType == "arc") { + this.drawArc(canvas, config, dataTable); + } else if (config.chartType == "drill") { + this.drillDown(0, canvas, config, dataTable, dataTable); + } + return chart; + //return + }; + + igviz.setUp = function (canvas, config, dataTable) { + var chartObject = new Chart(canvas, config, dataTable); + + if (config.chartType == "bar") { + this.drawBarChart(chartObject, canvas, config, dataTable); + } else if (config.chartType == "scatter") { + this.drawScatterPlot(chartObject); + } else if (config.chartType == "line") { + this.drawLineChart(chartObject); + } else if (config.chartType == "area") { + this.drawAreaChart(chartObject); + } + return chartObject; + }; + + + /*************************************************** Line chart ***************************************************************************************************/ + + igviz.drawLineChart=function(chartObj){ + divId=chartObj.canvas; + chartConfig=chartObj.config; + dataTable=chartObj.dataTable; + // table=setData(dataTable,chartConfig) + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings=[]; + for(i=0;i<chartConfig.yAxis.length;i++){ + yStrings[i]="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + //When there are multiple values for Y axis, it cannot started by minimum value + var zeroConfig = false; + if (yStrings.length > 1) { + zeroConfig = true; + } + + xScaleConfig={ + "index":chartConfig.xAxis, + "schema":dataTable.metadata, + "name": "x", + "range": "width", + "zero": false, + "clamp":false, + "field": xString + } + + yScaleConfig= { + "index":chartConfig.yAxis[0], + "schema":dataTable.metadata, + "name": "y", + "range": "height", + "zero": zeroConfig, + "nice": true, + "field": yStrings[0] + } + + var xScale=setScale(xScaleConfig) + var yScale=setScale(yScaleConfig); + + var xAxisConfig= {"type": "x", "scale":"x","angle":-35, "title": dataTable.metadata.names[chartConfig.xAxis] ,"grid":true ,"dx":-10,"dy":10,"align":"right","titleDy":10,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"y","angle":0, "title": "values" ,"grid":true,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + if(chartConfig.interpolationMode==undefined){ + chartConfig.interpolationMode="monotone"; + } + var spec= { + "width": chartConfig.width-160, + "height": chartConfig.height, + // "padding":{"top":40,"bottom":60,'left':90,"right":150}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale,yScale, + { + "name": "color", "type": "ordinal", "range": "category20" + } + ], + "axes": [xAxis,yAxis + ], + "legends": [ + { + + "orient":"right", + "fill": "color", + "title":"Legend", + "values":[], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 1.5} + + } + } + } + ], + + "marks": [ + + ] + } + + for(i=0;i<chartConfig.yAxis.length;i++) { + markObj = { + "type": "line", + "key": xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"value": 400}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y:prev", "field": yStrings[i]}, + "stroke": {"scale":"color","value" :dataTable.metadata.names[chartConfig.yAxis[i]]}, + "strokeWidth": {"value": 1.5} + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]} + }, + "exit": { + "x": {"value": -20}, + "y": {"scale": "y", "field": yStrings[i]} } + } + }; + pointObj={ + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]}, + "fill": {"scale":"color","value" :dataTable.metadata.names[chartConfig.yAxis[i]] + //"fillOpacity": {"value": 0.5} + }, + "update": { + //"size": {"scale":"r","field":rString}, + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 300}, + "stroke": {"value": "white"} + } + } + } + } + + + spec.marks.push(markObj); + spec.marks.push(pointObj); + spec.legends[0].values.push(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + + chartObj.toolTipFunction=[]; + chartObj.toolTipFunction[0]=function(event,item){ + + console.log(tool,event,item); + if(item.mark.marktype=='symbol') { + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr></table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + } + } + + chartObj.toolTipFunction[1]=function(event,item){ + + tool.html("").style({'left':event.pageX+10+'px','top':event.pageY+10+'px','opacity':0}) + + } + + chartObj.spec=spec; + chartObj.toolTip=true; + chartObj.spec = spec; + + } + + + /*************************************************** Bar chart ***************************************************************************************************/ + igviz.drawBarChart = function (mychart, divId, chartConfig, dataTable) { + // console.log(this); + divId=mychart.canvas; + chartConfig=mychart.config; + dataTable=mychart.dataTable; + if(chartConfig.hasOwnProperty("groupedBy")){ + var format="grouped"; + if(chartConfig.hasOwnProperty("format")){ + format=chartConfig.format; + + } + if(format=="grouped"){ + console.log("groupedDFJSDFKSD:JFKDJF"); + if(chartConfig.orientation=='H'){ + console.log('horizontal'); + return this.drawGroupedBarChart(mychart); + + } + return this.drawGroupedBarChartVertical(mychart); + } + else + { + return this.drawStackedBarChart(mychart); + } + } + + var xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]); + var yString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]) + + xScaleConfig={ + "index":chartConfig.xAxis, + "schema":dataTable.metadata, + "name": "x", + "zero": false, + "range": "width", + "round": true, + "field": xString + } + + yScaleConfig= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "y", + "range": "height", + "zero": true, + "nice": true, + "field": yString + } + + var xScale=setScale(xScaleConfig) + var yScale=setScale(yScaleConfig); + + var xAxisConfig= {"type": "x", "scale":"x","angle":-35, "title": dataTable.metadata.names[chartConfig.xAxis] ,"grid":false ,"dx":0,"dy":0,"align":"right","titleDy":30,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"y","angle":0, "title": dataTable.metadata.names[chartConfig.yAxis] ,"grid":true,"dx":0,"dy":0 ,"align":"right","titleDy":-35,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + if(chartConfig.barColor==undefined){ + chartConfig.barColor="steelblue"; + } + +// console.log(table) + var spec = { + + "width": chartConfig.width-150, + //"padding":{'top':30,"left":80,"right":80,'bottom':60}, + "height": chartConfig.height, + "data": [ + { + "name": "table" + } + ], + "scales": [ + xScale, + yScale + ], + "axes": [ + xAxis, + yAxis + + + ], + "marks": [ + { + "key": xString, + "type": "rect", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "width": {"scale": "x", "band": true, "offset":-10}, + "y": {"scale": "y:prev", "field": yString, "duration": 2000}, + "y2": {"scale": "y", "value": 0} + + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yString}, + "y2": {"scale": "y", "value": 0}, + "fill": {"value": chartConfig.barColor} + }, + "exit": { + "x": {"value": 0}, + "y": {"scale": "y:prev", "field": yString}, + "y2": {"scale": "y", "value": 0} + }, + + "hover": { + + "fill": {'value': 'orange'} + } + + } + } + ] + } + + +// var data = {table: table} + + mychart.originalWidth=chartConfig.width; + mychart.originalHeight=chartConfig.height; + + mychart.spec = spec; + //mychart.data = data; + //mychart.table = table; + ////vg.parse.spec(spec, function (chart) { + // mychart.chart = chart({ + // el: divId, + // renderer: 'svg', + // data: data, + // hover: false + // + // }).update(); + // + // // mychart.chart.data(data).update(); + // //self.counter=0; + // //console.log('abc'); + // //setInterval(updateTable,1500); + // + //}); + }; + + igviz.drawStackedBarChart=function(chartObj){ + + var chartConfig=chartObj.config; + var dataTable=chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId=chartObj.canvas; + + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + groupedBy="data."+createAttributeNames(dataTable.metadata.names[chartConfig.groupedBy]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat={ + "index":chartConfig.groupedBy, + "schema":dataTable.metadata, + "name": "cat", + "range": "width", + "field": groupedBy, + "padding":0.2 + } + + + val= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "val", + "range": "height", + "dataFrom":"stats", + "field": "sum", + "nice":true + } + + + var cScale=setScale(cat) + var vScale=setScale(val); + + var xAxisConfig= {"type": "x", "scale":"cat","angle":0, "title": dataTable.metadata.names[chartConfig.groupedBy] ,"grid":false ,"dx":-10,"dy":10,"align":"right","titleDy":10,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"val","angle":0, "title": dataTable.metadata.names[chartConfig.yAxis] ,"grid":false,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + + + + spec={ + "width": chartConfig.width-160, + "height": chartConfig.height-100, + "padding": {"top": 10, "left": 60, "bottom": 60, "right":100}, + "data": [ + { + "name": "table" + }, + { + "name": "stats", + "source": "table", + "transform": [ + {"type": "facet", "keys": [groupedBy]}, + {"type": "stats", "value": yStrings} + ] + } + ], + "scales": [ + cScale, + vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "legends": [ + { + "orient":{"value":"right"}, + "fill": "color", + "title":dataTable.metadata.names[chartConfig.xAxis], + "values":[], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + "axes": [ + xAxis,yAxis + ], + + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [ + {"type": "facet", "keys": [xString]}, + {"type": "stack", "point": groupedBy, "height": yStrings} + ] + }, + "marks": [ + { + "type": "rect", + "properties": { + "enter": { + "x": {"scale": "cat", "field": groupedBy}, + "width": {"scale": "cat", "band": true, "offset": -1}, + "y": {"scale": "val", "field": "y"}, + "y2": {"scale": "val", "field": "y2"}, + "fill": {"scale": "color", "field": xString} + }, + "update": { + "fillOpacity": {"value": 1} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + } + } + ] + } + ] + } + + chartObj.legend=true; + chartObj.legendIndex=chartConfig.xAxis; + chartObj.spec=spec; + + } + + igviz.drawGroupedBarChart=function(chartObj){ + var chartConfig=chartObj.config; + var dataTable=chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId=chartObj.canvas; + + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + groupedBy="data."+createAttributeNames(dataTable.metadata.names[chartConfig.groupedBy]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat={ + "index":chartConfig.groupedBy, + "schema":dataTable.metadata, + "name": "cat", + "range": "height", + "field": groupedBy, + "padding":0.2 + } + + + val= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "val", + "range": "width", + "round":'true', + "field": yStrings, + "nice":true + } + + + var cScale=setScale(cat) + var vScale=setScale(val); + + var xAxisConfig= {"type": "x", "scale":"val","angle":-35, "title": dataTable.metadata.names[chartConfig.yAxis] ,"grid":true ,"dx":-10,"dy":10,"align":"right","titleDy":10,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"cat","angle":0, "tickSize":0,"tickPadding":8,"title": dataTable.metadata.names[chartConfig.groupedBy] ,"grid":false,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + + + + spec={ + "width": chartConfig.width, + "height": chartConfig.height, + + "data": [ + { + "name": "table" + } + ], + "scales": [ + cScale,vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "axes": [ + xAxis,yAxis + ], + "legends": [ + { + "orient":{"value":"right"}, + "fill": "color", + "title":dataTable.metadata.names[chartConfig.xAxis], + "values":[], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + + + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [{"type":"facet", "keys":[groupedBy]}] + }, + "properties": { + "enter": { + "y": {"scale": "cat", "field": "key"}, + "height": {"scale": "cat", "band": true} + } + }, + "scales": [ + { + "name": "pos", + "type": "ordinal", + "range": "height", + "domain": {"field": xString} + } + ], + "marks": [ + { + "type": "rect", + "properties": { + "enter": { + "y": {"scale": "pos", "field":xString}, + "height": {"scale": "pos", "band": true}, + "x": {"scale": "val", "field": yStrings}, + "x2": {"scale": "val", "value": 0}, + "fill": {"scale": "color", "field": xString} + }, + "hover":{ + "fillOpacity":{"value":0.5} + } + , + + "update":{ + "fillOpacity":{"value":1} + } + } + }, + //{ + // "type": "text", + // "properties": { + // "enter": { + // "y": {"scale": "pos", "field": xString}, + // "dy": {"scale": "pos", "band": true, "mult": 0.5}, + // "x": {"scale": "val", "field": yStrings, "offset": -4}, + // "fill": {"value": "white"}, + // "align": {"value": "right"}, + // "baseline": {"value": "middle"}, + // "text": {"field": xString} + // } + // } + //} + ] + } + ] + } + + chartObj.legend=true; + chartObj.legendIndex=chartConfig.xAxis; + chartObj.spec=spec; + + } + + igviz.drawGroupedBarChartVertical=function(chartObj){ + var chartConfig=chartObj.config; + var dataTable=chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId=chartObj.canvas; + + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + groupedBy="data."+createAttributeNames(dataTable.metadata.names[chartConfig.groupedBy]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat={ + "index":chartConfig.groupedBy, + "schema":dataTable.metadata, + "name": "cat", + "range": "width", + "field": groupedBy, + "padding":0.2 + } + + + val= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "val", + "range": "height", + "round":'true', + "field": yStrings, + "nice":true + } + + + var cScale=setScale(cat) + var vScale=setScale(val); + + var yAxisConfig= {"type": "y", "scale":"val","angle":-35, "title": dataTable.metadata.names[chartConfig.yAxis] ,"grid":true ,"dx":-10,"dy":10,"align":"right","titleDy":10,"titleDx":0} + var xAxisConfig= {"type": "x", "scale":"cat","angle":0, "tickSize":0,"tickPadding":8,"title": dataTable.metadata.names[chartConfig.groupedBy] ,"grid":false,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + + + + spec={ + "width": chartConfig.width-150, + "height": chartConfig.height, + "data": [ + { + "name": "table" + } + ], + "scales": [ + cScale,vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "axes": [ + xAxis,yAxis + ], + "legends": [ + { + "orient":{"value":"right"}, + "fill": "color", + "title":dataTable.metadata.names[chartConfig.xAxis], + "values":[], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + + + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [{"type":"facet", "keys":[groupedBy]}] + }, + "properties": { + "enter": { + "x": {"scale": "cat", "field": "key"}, + "width": {"scale": "cat", "band": true} + } + }, + "scales": [ + { + "name": "pos", + "type": "ordinal", + "range": "width", + "domain": {"field": xString} + } + ], + "marks": [ + { + "type": "rect", + "properties": { + "enter": { + "x": {"scale": "pos", "field":xString}, + "width": {"scale": "pos", "band": true}, + "y": {"scale": "val", "field": yStrings}, + "y2": {"scale": "val", "value": 0}, + "fill": {"scale": "color", "field": xString} + }, + "hover":{ + "fillOpacity":{"value":0.5} + } + , + + "update":{ + "fillOpacity":{"value":1} + } + } + }, + //{ + // "type": "text", + // "properties": { + // "enter": { + // "y": {"scale": "pos", "field": xString}, + // "dy": {"scale": "pos", "band": true, "mult": 0.5}, + // "x": {"scale": "val", "field": yStrings, "offset": -4}, + // "fill": {"value": "white"}, + // "align": {"value": "right"}, + // "baseline": {"value": "middle"}, + // "text": {"field": xString} + // } + // } + //} + ] + } + ] + } + + chartObj.legend=true; + chartObj.legendIndex=chartConfig.xAxis; + chartObj.spec=spec; + + } + + + + /*************************************************** Area chart ***************************************************************************************************/ + + igviz.drawAreaChart = function (chartObj) { + // var padding = chartConfig.padding; + var chartConfig=chartObj.config; + var dataTable=chartObj.dataTable; + + if(chartConfig.yAxis.constructor === Array){ + return this.drawMultiAreaChart(chartObj) + } + if(chartConfig.hasOwnProperty("areaVar")){ + return this.drawStackedAreaChart(chartObj); + } + + divId=chartObj.canvas; + + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + // console.log(table,xString,yStrings); + // sortDataSet(table); + + xScaleConfig={ + "index":chartConfig.xAxis, + "schema":dataTable.metadata, + "name": "x", + "zero": false, + "range": "width", + "field": xString + } + + + yScaleConfig= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "y", + "range": "height", + "zero": true, + "field": yStrings + } + + + var xScale=setScale(xScaleConfig) + var yScale=setScale(yScaleConfig); + + var xAxisConfig= {"type": "x", "scale":"x","angle":-35, "title": dataTable.metadata.names[chartConfig.xAxis] ,"grid":true,"dx":-10,"dy":10,"align":"right","titleDy":10,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"y","angle":0, "title": dataTable.metadata.names[chartConfig.yAxis] ,"grid":true,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + if(chartConfig.interpolationMode==undefined) + { + chartConfig.interpolationMode="monotone" + } + + + + + + + + + var spec ={ + "width": chartConfig.width-100, + "height": chartConfig.height, + // "padding":{"top":40,"bottom":60,'left':60,"right":40}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale,yScale, + { + "name": "color", "type": "ordinal", "range": "category10" + } + ], + + "axes": [xAxis,yAxis ] + , + + "marks": [ + { + "type": "area", + "key":xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "interpolate": {"value": chartConfig.interpolationMode}, + + "y": {"scale": "y", "field": yStrings}, + "y2": {"scale": "y", "value": 0}, + "fill": {"scale":"color","value": 2}, + "fillOpacity": {"value": 0.5} + }, + "update":{ + "fillOpacity": {"value": 0.5} + + }, + "hover":{ + "fillOpacity": {"value": 0.2} + + } + + } + }, + { + "type": "line", + "key": xString, + + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"value": 400}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y:prev", "field": yStrings}, + "stroke": {"scale":"color","value" :2 }, + "strokeWidth": {"value": 1.5} + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings} + }, + "exit": { + "x": {"value": -20}, + "y": {"scale": "y", "field": yStrings} + } + } + }, + { + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings}, + "fill": {"scale":"color","value" :2}, + "size":{"value":50} + //"fillOpacity": {"value": 0.5} + }, + "update": { + "size":{"value":50} + + //"size": {"scale":"r","field":rString}, + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 100}, + "stroke": {"value": "white"} + } + } + } + + ] + } + + chartObj.toolTipFunction=[]; + chartObj.toolTipFunction[0]=function(event,item){ + + + console.log(tool,event,item); + if(item.mark.marktype=='symbol') { + + + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr></table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + } + } + + chartObj.toolTipFunction[1]=function(event,item){ + + tool.html("").style({'left':event.pageX+10+'px','top':event.pageY+10+'px','opacity':0}) + + } + + chartObj.spec=spec; + chartObj.toolTip=true; + chartObj.spec = spec; + + + }; + + igviz.drawMultiAreaChart = function (chartObj) { + + divId=chartObj.canvas; + chartConfig=chartObj.config; + dataTable=chartObj.dataTable; + // table=setData(dataTable,chartConfig) + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings=[]; + for(i=0;i<chartConfig.yAxis.length;i++){ + yStrings[i]="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + xScaleConfig={ + "index":chartConfig.xAxis, + "schema":dataTable.metadata, + "name": "x", + "range": "width", + "clamp":false, + "field": xString + } + + yScaleConfig= { + "index":chartConfig.yAxis[0], + "schema":dataTable.metadata, + "name": "y", + "range": "height", + "nice": true, + "field": yStrings[0] + } + + var xScale=setScale(xScaleConfig) + var yScale=setScale(yScaleConfig); + + var xAxisConfig= {"type": "x", "scale":"x","angle":-35, "title": dataTable.metadata.names[chartConfig.xAxis] ,"grid":true ,"dx":-10,"dy":10,"align":"left","titleDy":10,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"y","angle":0, "title": "values" ,"grid":true,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + + if(chartConfig.interpolationMode==undefined){ + chartConfig.interpolationMode="monotone"; + } + + + var spec ={ + "width": chartConfig.width-160, + "height": chartConfig.height, + // "padding":{"top":40,"bottom":60,'left':60,"right":145}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale,yScale, + { + "name": "color", "type": "ordinal", "range": "category20" + } + ], + "legends": [ + { + + "orient":"right", + "fill": "color", + "title":"Area", + "values":[], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 1.5} + + } + } + } + ], + "axes": [xAxis,yAxis ] + , + + "marks": [ + + ] + } + + for(i=0;i<chartConfig.yAxis.length;i++) { + areaObj = { + "type": "area", + "key":xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y", "field": yStrings[i]}, + "y2": {"scale": "y", "value": 0}, + "fill": {"scale":"color","value": dataTable.metadata.names[chartConfig.yAxis[i]]}, + "fillOpacity": {"value": 0.5} + }, + "update":{ + "fillOpacity": {"value": 0.5} + + }, + "hover":{ + "fillOpacity": {"value": 0.2} } + + } + } + + lineObj= { + "type": "line", + "key": xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"value": 400}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y:prev", "field": yStrings[i]}, + "stroke": {"scale":"color","value" :dataTable.metadata.names[chartConfig.yAxis[i]]}, + "strokeWidth": {"value": 1.5} + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]} + }, + "exit": { + "x": {"value": -20}, + "y": {"scale": "y", "field": yStrings[i]} } + } + } + + + pointObj={ + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]}, + "fill": {"scale":"color","value" :dataTable.metadata.names[chartConfig.yAxis[i]]}, + "size":{"value":50} + //"fillOpacity": {"value": 0.5} + }, + "update": { + "size":{"value":50} + //"size": {"scale":"r","field":rString}, + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 100}, + "stroke": {"value": "white"} + } + } + } + + + + + spec.marks.push(areaObj); + + spec.marks.push(pointObj); + spec.marks.push(lineObj); + spec.legends[0].values.push(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + + chartObj.toolTipFunction=[]; + chartObj.toolTipFunction[0]=function(event,item){ + + a=4 + + console.log(tool,event,item); + if(item.mark.marktype=='symbol') { + // window.alert(a); + + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr></table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + } + } + + chartObj.toolTipFunction[1]=function(event,item){ + + tool.html("").style({'left':event.pageX+10+'px','top':event.pageY+10+'px','opacity':0}) + + } + + chartObj.spec=spec; + chartObj.toolTip=true; + chartObj.spec = spec; + + chartObj.spec = spec; + + + }; + + igviz.drawStackedAreaChart=function(chartObj){ + + var chartConfig=chartObj.config; + var dataTable=chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId=chartObj.canvas; + + + areaString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.areaVar]) + yStrings="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat={ + "index":chartConfig.xAxis, + "schema":dataTable.metadata, + "name": "cat", + "range": "width", + "field": xString, + "padding":0.2, + "zero":false, + "nice":true + } + + + val= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "val", + "range": "height", + "dataFrom":"stats", + "zero": true, + "field": "sum", + "nice":true + } + + + var cScale=setScale(cat) + var vScale=setScale(val); + + var xAxisConfig= {"type": "x", "scale":"cat","angle":0, "title": dataTable.metadata.names[chartConfig.xAxis] ,"grid":true ,"dx":-10,"dy":10,"align":"left","titleDy":10,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"val","angle":0, "title": dataTable.metadata.names[chartConfig.yAxis],"grid":true,"dx":0,"dy":0 ,"align":"right","titleDy":-10,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + + + + spec={ + "width": chartConfig.width-160, + "height": chartConfig.height-100, + "padding": {"top": 10, "left": 60, "bottom": 60, "right":100}, + "data": [ + { + "name": "table" + }, + { + "name": "stats", + "source": "table", + "transform": [ + {"type": "facet", "keys": [xString]}, + {"type": "stats", "value": yStrings} + ] + } + ], + "scales": [ + cScale, + vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "legends": [ + { + "orient":{"value":"right"}, + "fill": "color", + "title":dataTable.metadata.names[chartConfig.areaVar + ], + "values":[], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + "axes": [ + xAxis,yAxis + ], + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [ + {"type": "facet", "keys": [areaString]}, + {"type": "stack", "point": xString, "height": yStrings} + ] + }, + "marks": [ + { + "type": "area", + "properties": { + "enter": { + "interpolate": {"value": "monotone"}, + "x": {"scale": "cat", "field": xString}, + "y": {"scale": "val", "field": "y"}, + "y2": {"scale": "val", "field": "y2"}, + "fill": {"scale": "color", "field": areaString}, + "fillOpacity": {"value": 0.8} + + }, + "update": { + "fillOpacity": {"value": 0.8} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + } + }, + { + "type": "line", + "properties": { + "enter": { + "x": {"scale": "cat", "field": xString}, + //"x": {"value": 400}, + "interpolate": {"value": "monotone"}, + "y": {"scale": "val", "field":"y"}, + "stroke": {"scale":"color","field": areaString}, + "strokeWidth": {"value": 3} + } + } + } + ] + } + ] + } + + chartObj.spec=spec; + chartObj.legend=true; + chartObj.legendIndex=chartConfig.areaVar; + + + + } + + + /*************************************************** Arc chart ***************************************************************************************************/ + + + igviz.drawArc = function (divId, chartConfig, dataTable) { + + radialProgress(divId) + .label(dataTable.metadata.names[chartConfig.percentage]) + .diameter(200) + .value(dataTable.data[0][chartConfig.percentage]) + .render(); + + + function radialProgress(parent) { + var _data = null, + _duration = 1000, + _selection, + _margin = { + top: 0, + right: 0, + bottom: 30, + left: 0 + }, + __width = chartConfig.width, + __height = chartConfig.height, + _diameter, + _label = "", + _fontSize = 10; + + + var _mouseClick; + + var _value = 0, + _minValue = 0, + _maxValue = 100; + + var _currentArc = 0, + _currentArc2 = 0, + _currentValue = 0; + + var _arc = d3.svg.arc() + .startAngle(0 * (Math.PI / 180)); //just radians + + var _arc2 = d3.svg.arc() + .startAngle(0 * (Math.PI / 180)) + .endAngle(0); //just radians + + + _selection = d3.select(parent); + + + function component() { + + _selection.each(function (data) { + + // Select the svg element, if it exists. + var svg = d3.select(this).selectAll("svg").data([data]); + + var enter = svg.enter().append("svg").attr("class", "radial-svg").append("g"); + + measure(); + + svg.attr("width", __width) + .attr("height", __height); + + + var background = enter.append("g").attr("class", "component") + .attr("cursor", "pointer") + .on("click", onMouseClick); + + + _arc.endAngle(360 * (Math.PI / 180)) + + background.append("rect") + .attr("class", "background") + .attr("width", _width) + .attr("height", _height); + + background.append("path") + .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")") + .attr("d", _arc); + + background.append("text") + .attr("class", "label") + .attr("transform", "translate(" + _width / 2 + "," + (_width + _fontSize) + ")") + .text(_label); + + //outer g element that wraps all other elements + var gx = chartConfig.width / 2 - _width / 2; + var gy = (chartConfig.height / 2 - _height / 2) - 17; + var g = svg.select("g") + .attr("transform", "translate(" + gx + "," + gy + ")"); + + + _arc.endAngle(_currentArc); + enter.append("g").attr("class", "arcs"); + var path = svg.select(".arcs").selectAll(".arc").data(data); + path.enter().append("path") + .attr("class", "arc") + .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")") + .attr("d", _arc); + + //Another path in case we exceed 100% + var path2 = svg.select(".arcs").selectAll(".arc2").data(data); + path2.enter().append("path") + .attr("class", "arc2") + .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")") + .attr("d", _arc2); + + + enter.append("g").attr("class", "labels"); + var label = svg.select(".labels").selectAll(".labelArc").data(data); + label.enter().append("text") + .attr("class", "labelArc") + .attr("y", _width / 2 + _fontSize / 3) + .attr("x", _width / 2) + .attr("cursor", "pointer") + .attr("width", _width) + // .attr("x",(3*_fontSize/2)) + .text(function (d) { + return Math.round((_value - _minValue) / (_maxValue - _minValue) * 100) + "%" + }) + .style("font-size", _fontSize + "px") + .on("click", onMouseClick); + + path.exit().transition().duration(500).attr("x", 1000).remove(); + + + layout(svg); + + function layout(svg) { + + var ratio = (_value - _minValue) / (_maxValue - _minValue); + var endAngle = Math.min(360 * ratio, 360); + endAngle = endAngle * Math.PI / 180; + + path.datum(endAngle); + path.transition().duration(_duration) + .attrTween("d", arcTween); + + if (ratio > 1) { + path2.datum(Math.min(360 * (ratio - 1), 360) * Math.PI / 180); + path2.transition().delay(_duration).duration(_duration) + .attrTween("d", arcTween2); + } + + label.datum(Math.round(ratio * 100)); + label.transition().duration(_duration) + .tween("text", labelTween); + + } + + }); + + function onMouseClick(d) { + if (typeof _mouseClick == "function") { + _mouseClick.call(); + } + } + } + + function labelTween(a) { + var i = d3.interpolate(_currentValue, a); + _currentValue = i(0); + + return function (t) { + _currentValue = i(t); + this.textContent = Math.round(i(t)) + "%"; + } + } + + function arcTween(a) { + var i = d3.interpolate(_currentArc, a); + + return function (t) { + _currentArc = i(t); + return _arc.endAngle(i(t))(); + }; + } + + function arcTween2(a) { + var i = d3.interpolate(_currentArc2, a); + + return function (t) { + return _arc2.endAngle(i(t))(); + }; + } + + + function measure() { + _width = _diameter - _margin.right - _margin.left - _margin.top - _margin.bottom; + _height = _width; + _fontSize = _width * .2; + _arc.outerRadius(_width / 2); + _arc.innerRadius(_width / 2 * .85); + _arc2.outerRadius(_width / 2 * .85); + _arc2.innerRadius(_width / 2 * .85 - (_width / 2 * .15)); + } + + + component.render = function () { + measure(); + component(); + return component; + } + + component.value = function (_) { + if (!arguments.length) return _value; + _value = [_]; + _selection.datum([_value]); + return component; + } + + + component.margin = function (_) { + if (!arguments.length) return _margin; + _margin = _; + return component; + }; + + component.diameter = function (_) { + if (!arguments.length) return _diameter + _diameter = _; + return component; + }; + + component.minValue = function (_) { + if (!arguments.length) return _minValue; + _minValue = _; + return component; + }; + + component.maxValue = function (_) { + if (!arguments.length) return _maxValue; + _maxValue = _; + return component; + }; + + component.label = function (_) { + if (!arguments.length) return _label; + _label = _; + return component; + }; + + component._duration = function (_) { + if (!arguments.length) return _duration; + _duration = _; + return component; + } + + component.onClick = function (_) { + if (!arguments.length) return _mouseClick; + _mouseClick = _; + return component; + } + + return component; + + }; + + }; + + + /*************************************************** Scatter chart ***************************************************************************************************/ + + igviz.drawScatterPlot=function(chartObj){ + divId=chartObj.canvas; + chartConfig=chartObj.config; + dataTable=chartObj.dataTable; + // table=setData(dataTable,chartConfig) + + xString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]) + rString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.pointSize]) + cString="data."+createAttributeNames(dataTable.metadata.names[chartConfig.pointColor]) + + + xScaleConfig={ + "index":chartConfig.xAxis, + "schema":dataTable.metadata, + "name": "x", + "range": "width", + "zero": false, + "field": xString + + } + + rScaleConfig={ + "index":chartConfig.pointSize, + "range": [0,576], + "schema":dataTable.metadata, + "name": "r", + "field": rString + } + cScaleConfig={ + "index":chartConfig.pointColor , + "schema": dataTable.metadata, + "name": "c", + "range" : [chartConfig.minColor,chartConfig.maxColor], + "field": cString + } + + yScaleConfig= { + "index":chartConfig.yAxis, + "schema":dataTable.metadata, + "name": "y", + "range": "height", + "zero": false, + "nice": true, + "field": yString + } + + var xScale=setScale(xScaleConfig) + var yScale=setScale(yScaleConfig); + var rScale=setScale(rScaleConfig); + var cScale=setScale(cScaleConfig) + + var xAxisConfig= {"type": "x", "scale":"x","angle":-35, "title": dataTable.metadata.names[chartConfig.xAxis] ,"grid":true ,"dx":0,"dy":0,"align":"right","titleDy":25,"titleDx":0} + var yAxisConfig= {"type": "y", "scale":"y","angle":0, "title": "values" ,"grid":true,"dx":0,"dy":0 ,"align":"right","titleDy":-30,"titleDx":0} + var xAxis=setAxis(xAxisConfig); + var yAxis=setAxis(yAxisConfig); + + var spec= { + "width": chartConfig.width-130, + "height": chartConfig.height, + //"padding":{"top":40,"bottom":60,'left':60,"right":60}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale,yScale, + { + "name": "color", "type": "ordinal", "range": "category20" + }, + rScale,cScale + ], + "axes": [xAxis,yAxis + ], + //"legends": [ + // { + // + // "orient": "right", + // "fill": "color", + // "title": "Legend", + // "values": [], + // "properties": { + // "title": { + // "fontSize": {"value": 14} + // }, + // "labels": { + // "fontSize": {"value": 12} + // }, + // "symbols": { + // "stroke": {"value": "transparent"} + // }, + // "legend": { + // "stroke": {"value": "steelblue"}, + // "strokeWidth": {"value": 1.5} + // + // } + // } + // }], + + + + + + + // "scales": [ + // { + // "name": "x", + // "nice": true, + // "range": "width", + // "domain": {"data": "iris", "field": "data.sepalWidth"} + // }, + // { + // "name": "y", + // "nice": true, + // "range": "height", + // "domain": {"data": "iris", "field": "data.petalLength"} + // }, + // { + // "name": "c", + // "type": "ordinal", + // "domain": {"data": "iris", "field": "data.species"}, + // "range": ["#800", "#080", "#008"] + // } + //], + // "axes": [ + // {"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"}, + // {"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"} + //], + // "legends": [ + // { + // "fill": "c", + // "title": "Species", + // "offset": 0, + // "properties": { + // "symbols": { + // "fillOpacity": {"value": 0.5}, + // "stroke": {"value": "transparent"} + // } + // } + // } + //], + "marks": [ + { + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yString}, + "fill": {"scale": "c", "field": cString} + //"fillOpacity": {"value": 0.5} + }, + "update": { + "size": {"scale":"r","field":rString} + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 300}, + "stroke": {"value": "white"} + } + } + } + ] + } + chartObj.toolTipFunction=[]; + chartObj.toolTipFunction[0]=function(event,item){ + console.log(tool,event,item); + xVar=dataTable.metadata.names[chartConfig.xAxis] + yVar=dataTable.metadata.names[chartConfig.yAxis] + pSize=dataTable.metadata.names[chartConfig.pointSize] + pColor=dataTable.metadata.names[chartConfig.pointColor] + + contentString='<table><tr><td> X </td><td> ('+xVar+') </td><td>'+item.datum.data[xVar]+'</td></tr>' +'<tr><td> Y </td><td> ('+yVar+') </td><td>'+item.datum.data[yVar]+'</td></tr>'+'<tr><td> Size </td><td> ('+pSize+') </td><td>'+item.datum.data[pSize]+'</td></tr>'+'<tr><td bgcolor="'+item.fill+'"> </td><td> ('+pColor+') </td><td>'+item.datum.data[pColor]+'</td></tr>'+ + '</table>'; + + + tool.html(contentString).style({'left':event.pageX+10+'px','top':event.pageY+10+'px','opacity':1}) + tool.selectAll('tr td').style('padding',"3px"); + + } + + chartObj.toolTipFunction[1]=function(event,item){ + + tool.html("").style({'left':event.pageX+10+'px','top':event.pageY+10+'px','opacity':0}) + + } + + chartObj.spec=spec; + chartObj.toolTip=true; + } + + + /*************************************************** Single Number chart ***************************************************************************************************/ + + igviz.drawSingleNumberDiagram = function (chartObj) { + + divId = chartObj.canvas; + chartConfig = chartObj.config; + dataTable = chartObj.dataTable; + + //Width and height + var w = chartConfig.width; + var h = chartConfig.height; + var padding = chartConfig.padding; + + var svgID = divId + "_svg"; + //Remove current SVG if it is already there + d3.select(svgID).remove(); + + //Create SVG element + singleNumSvg = d3.select(divId) + .append("svg") + .attr("id", svgID.replace("#", "")) + .attr("width", w) + .attr("height", h); + + + singleNumSvg.append("rect") + .attr("id", "rect") + .attr("width", w) + .attr("height", h); + + /*singleNumCurveSvg = d3.select(divId) + .append("svg") + .attr("id", svgID.replace("#","")) + .attr("width", 207) + .attr("height", 161);*/ + + }; + + + /*************************************************** Table chart ***************************************************************************************************/ + + var cnt = 0; + + igviz.drawTable = function (divId, chartConfig, dataTable) { + + //remove the current table if it is already exist + d3.select(divId).select("table").remove(); + + var rowLabel = dataTable.metadata.names; + + //append the Table to the div + var table = d3.select(divId).append("table").attr('class', 'table table-bordered'); + + //create the table head + thead = table.append("thead"); + tbody = table.append("tbody") + + //Append the header to the table + thead.append("tr") + .selectAll("th") + .data(rowLabel) + .enter() + .append("th") + .text(function (d) { + return d; + }); + }; + + /*************************************************** map ***************************************************************************************************/ + function loadWorldMapCodes() { + var fileName = document.location.protocol+"//"+document.location.host + '/portal/geojson/countryInfo/'; + $.ajaxSetup({async: false}); + $.getJSON(fileName, function(json) { + worldMapCodes = json; + }); + $.ajaxSetup({async: true}); + } + + function loadUSAMapCodes() { + var fileName = document.location.protocol+"//"+document.location.host + '/portal/geojson/usaInfo/'; + $.ajaxSetup({async: false}); + $.getJSON(fileName, function(json) { + usaMapCodes = json; + }); + $.ajaxSetup({async: true}); + } + + function getMapCode(name, region) { + if (region == "usa") { + $.each(usaMapCodes, function (i, location) { + if (usaMapCodes[name] != null && usaMapCodes[name] != "") { + name = "US"+usaMapCodes[name]; + } + }); + + } else { + $.each(worldMapCodes, function (i, location) { + if (name.toUpperCase() == location["name"].toUpperCase()) { + name = location["alpha-3"]; + } + }); + } + return name; + }; + + igviz.drawMap = function (divId, chartConfig,dataTable) { + + var fileName; + var width = chartConfig.width; + var height = chartConfig.height; + var xAxis = chartConfig.xAxis; + var yAxis = chartConfig.yAxis; + + if (chartConfig.region == "usa") { + fileName = document.location.protocol+"//"+document.location.host + '/portal/geojson/usa/'; + loadUSAMapCodes(); + mapChart = d3.geomap.choropleth() + .geofile(fileName) + .projection(d3.geo.albersUsa) + .unitId(xAxis) + .width(width) + .height(height) + .colors(colorbrewer.RdPu[chartConfig.legendGradientLevel]) + .column(yAxis) + .scale([width/1.1]) + .translate([width/2,height/2.2]) + .legend(true); + + + } else { + fileName = document.location.protocol+"//"+document.location.host +'/portal/geojson/world/'; + + var scaleDivision = 5.5; + var widthDivision = 2; + var heightDivision = 2; + + if (chartConfig.region == "europe") { + + scaleDivision = width/height; + widthDivision = 3; + heightDivision = 0.8; + + } + loadWorldMapCodes(); + mapChart = d3.geomap.choropleth() + .geofile(fileName) + .unitId(xAxis) + .width(width) + .height(height) + .colors(colorbrewer.RdPu[chartConfig.legendGradientLevel]) + .column(yAxis) + .scale([width/scaleDivision]) + .translate([width/widthDivision,height/heightDivision]) + .legend(true); + } + }; + + + /*************************************************** Bar chart Drill Dowining Function ***************************************************************************************************/ + + igviz.drillDown = function drillDown(index, divId, chartConfig, dataTable, originaltable) { + // console.log(dataTable,chartConfig,divId); + if (index == 0) { + d3.select(divId).append('div').attr({id: 'links', height: 20, 'bgcolor': 'blue'}) + d3.select(divId).append('div').attr({id: 'chartDiv'}) + chartConfig.height = chartConfig.height - 20; + divId = "#chartDiv"; + } + var currentChartConfig = JSON.parse(JSON.stringify(chartConfig)); + var current_x = 0; + if (index < chartConfig.xAxis.length) + current_x = chartConfig.xAxis[index].index + else + current_x = chartConfig.xAxis[index - 1].child; + + var current_y = chartConfig.yAxis; + var currentData = { + metadata: { + names: [dataTable.metadata.names[current_x], dataTable.metadata.names[current_y]], + types: [dataTable.metadata.types[current_x], dataTable.metadata.types[current_y]] + }, + data: [] + } + + var tempData = []; + for (i = 0; i < dataTable.data.length; i++) { + name = dataTable.data[i][current_x]; + currentYvalue = dataTable.data[i][current_y]; + isFound = false; + var j = 0; + for (; j < tempData.length; j++) { + if (tempData[j][0] === name) { + isFound = true; + break; + } + } + if (isFound) { + tempData[j][1] += currentYvalue; + console.log(name, currentYvalue, tempData[j][1]); + } else { + console.log("create", name, currentYvalue); + tempData.push([name, currentYvalue]) + } + } + + currentData.data = tempData; + currentChartConfig.xAxis = 0; + currentChartConfig.yAxis = 1; + currentChartConfig.chartType = 'bar'; + + + var x = this.setUp(divId, currentChartConfig, currentData); + x.plot(currentData.data,function () { + + var filters = d3.select('#links .root').on('click', function () { + d3.select("#links").html(''); + igviz.drillDown(0, divId, chartConfig, originaltable, originaltable); + + }) + + + var filters = d3.select('#links').selectAll('.filter'); + filters.on('click', function (d, i) { + + filtersList = filters.data(); + + console.log(filtersList) + var filterdDataset = []; + var selectionObj = JSON.parse(JSON.stringify(originaltable)); + itr = 0; + for (l = 0; l < originaltable.data.length; l++) { + isFiltered = true; + for (k = 0; k <= i; k++) { + + if (originaltable.data[l][filtersList[k][0]] !== filtersList[k][1]) { + isFiltered = false; + break; + } + } + if (isFiltered) { + filterdDataset[itr++] = originaltable.data[l]; + } + + } + + d3.selectAll('#links g').each(function (d, indx) { + if (indx > i) { + this.remove(); + } + }) + + + selectionObj.data = filterdDataset; + + igviz.drillDown(i + 1, divId, chartConfig, selectionObj, originaltable, true); + + + }); + + + if (index < chartConfig.xAxis.length) { + console.log(x); + d3.select(x.chart._el).selectAll('g.type-rect rect').on('click', function (d, i) { + // console.log(d, i, this); + console.log(d, i); + var selectedName = d.datum.data[x.dataTable.metadata.names[x.config.xAxis]]; + // console.log(selectedName); + var selectedCurrentData = JSON.parse(JSON.stringify(dataTable)); + var innerText; + + var links = d3.select('#links').append('g').append('text').text(dataTable.metadata.names[current_x] + " : ").attr({ + + "font-size": "10px", + "x": 10, + "y": 20 + + }); + + d3.select('#links:first-child').selectAll('text').attr('class', 'root'); + + d3.select('#links g:last-child').append('span').data([[current_x, selectedName]]).attr('class', 'filter').text(selectedName + " > ") + + var l = selectedCurrentData.data.length; + var newdata = []; + b = 0; + for (a = 0; a < l; a++) { + if (selectedCurrentData.data[a][current_x] === selectedName) { + newdata[b++] = selectedCurrentData.data[a]; + } + } + + + selectedCurrentData.data = newdata; + + + igviz.drillDown(index + 1, divId, chartConfig, selectedCurrentData, originaltable, true); + + + }); + + } + }); + + + } + + + + + /*************************************************** Specification Generation method ***************************************************************************************************/ + + + function setScale(scaleConfig){ + var scale={"name":scaleConfig.name}; + + console.log(scaleConfig.schema,scaleConfig.index); + + dataFrom="table"; + + scale.range=scaleConfig.range; + + + switch (scaleConfig.schema.types[scaleConfig.index]){ + case 'T': + scale["type"]='time' + + break; + + case 'C': + scale["type"]='ordinal' + if(scale.name==="c"){ + scale.range="category20"; + } + + break; + case 'N': + scale["type"]='linear' + + break; + } + if (scaleConfig.hasOwnProperty("dataFrom")) { + dataFrom= scaleConfig.dataFrom; + } + + scale.range=scaleConfig.range; + scale.domain={"data":dataFrom,"field":scaleConfig.field} + + //optional attributes + if (scaleConfig.hasOwnProperty("round")) { + scale["round"] = scaleConfig.round; + } + + if (scaleConfig.hasOwnProperty("nice")) { + scale["nice"] = scaleConfig.nice; + } + + if (scaleConfig.hasOwnProperty("padding")) { + scale["padding"] = scaleConfig.padding; + } + + if (scaleConfig.hasOwnProperty("reverse")) { + scale["reverse"] = scaleConfig.reverse; + } + + if (scaleConfig.hasOwnProperty("sort")) { + scale["sort"] = scaleConfig.sort; + } + + if(scale.name=='x' && scale.type=='linear') + { + scale.sort=true; + } + if (scaleConfig.hasOwnProperty("clamp")) { + scale["clamp"] = scaleConfig.clamp; + } + + + if (scaleConfig.hasOwnProperty("zero")) { + scale["zero"] = scaleConfig.zero; + } + console.log(scale); + return scale; + + } + + function setAxis(axisConfig){ + + console.log("Axis",axisConfig); + + axis= { + "type": axisConfig.type, + "scale": axisConfig.scale, + 'title': axisConfig.title, + "grid":axisConfig.grid, + + "properties": { + "ticks": { + // "stroke": {"value": "steelblue"} + }, + "majorTicks": { + "strokeWidth": {"value": 2} + }, + "labels": { + // "fill": {"value": "steelblue"}, + "angle": {"value": axisConfig.angle}, + // "fontSize": {"value": 14}, + "align": {"value": axisConfig.align}, + "baseline": {"value": "middle"}, + "dx": {"value": axisConfig.dx}, + "dy": {"value": axisConfig.dy} + }, + "title": { + "fontSize": {"value": 16}, + + "dx":{'value':axisConfig.titleDx}, + "dy":{'value':axisConfig.titleDy} + }, + "axis": { + "stroke": {"value": "#333"}, + "strokeWidth": {"value": 1.5} + } + + } + + } + + if (axisConfig.hasOwnProperty("tickSize")) { + axis["tickSize"] = axisConfig.tickSize; + } + + + if (axisConfig.hasOwnProperty("tickPadding")) { + axis["tickPadding"] = axisConfig.tickPadding; + } + + console.log("SpecAxis",axis); + return axis; + } + + function setLegends(chartConfig,schema){ + + } + + function setData(dataTableObj,chartConfig,schema){ + + var table = []; + for (i = 0; i < dataTableObj.length; i++) { + var ptObj = {}; + namesArray=schema.names; + for(j=0;j<namesArray.length;j++){ + if(schema.types[j]=='T'){ + ptObj[createAttributeNames(namesArray[j])] = new Date(dataTableObj[i][j]); + }else if (schema.types[j]=='N'){ + ptObj[createAttributeNames(namesArray[j])] = parseFloat(dataTableObj[i][j]); + } else { + ptObj[createAttributeNames(namesArray[j])] = dataTableObj[i][j]; + } + } + + table[i] = ptObj; + } + + return table; + } + + function createAttributeNames(str){ + return str.replace(' ','_'); + } + + function setGenericAxis(axisConfig,spec){ + MappingObj={}; + MappingObj["tickSize"]="tickSize"; + MappingObj["tickPadding"]="tickPadding"; + MappingObj["title"]="title"; + MappingObj["grid"]="grid"; + MappingObj["offset"]="offset"; + MappingObj["ticks"]="ticks"; + + MappingObj["labelColor"]="fill"; + MappingObj["labelAngle"]="angle"; + MappingObj["labelAlign"]="align"; + MappingObj["labelFontSize"]="fontSize"; + MappingObj["labelDx"]="dx"; + MappingObj["labelDy"]="dy"; + MappingObj["labelBaseLine"]="baseline"; + + MappingObj["titleDx"]="dx"; + MappingObj["titleDy"]="dy"; + MappingObj["titleFontSize"]="fontSize"; + + MappingObj["axisColor"]="stroke"; + MappingObj["axisWidth"]="strokeWidth"; + + MappingObj["tickColor"]="ticks.stroke"; + MappingObj["tickWidth"]="ticks.strokeWidth"; + + + console.log("previous Axis",spec) + for(var propt in axisConfig){ + + if(propt=="tickSize" || propt=="tickPadding") + continue; + + if (axisConfig.hasOwnProperty(propt)) { + + if(propt.indexOf("label")==0) + spec.properties.labels[MappingObj[propt]].value=axisConfig[propt]; + else if(propt.indexOf("ticks")==0) + spec.properties.ticks[MappingObj[propt]].value=axisConfig[propt]; + else if(propt.indexOf("title")==0) + spec.properties.title[MappingObj[propt]].value=axisConfig[propt]; + else if(propt.indexOf("axis")==0) + spec.properties.axis[MappingObj[propt]].value=axisConfig[propt]; + else + spec[MappingObj[propt]]=axisConfig[propt]; + } + } + + console.log("NEW SPEC",spec); + } + + function createScales(dataset, chartConfig, dataTable) { + //Create scale functions + + var xScale; + var yScale; + var colorScale; + if (dataTable.metadata.types[chartConfig.xAxis] == 'N') { + xScale = d3.scale.linear() + .domain([0, d3.max(dataset, function (d) { + return d.data[d.config.xAxis]; + })]) + .range([chartConfig.padding, chartConfig.width - chartConfig.padding]); + } else { + xScale = d3.scale.ordinal() + .domain(dataset.map(function (d) { + return d.data[chartConfig.xAxis]; + })) + .rangeRoundBands([chartConfig.padding, chartConfig.width - chartConfig.padding], .1) + } + + //TODO hanle case r and color are missing + + if (dataTable.metadata.types[chartConfig.yAxis] == 'N') { + yScale = d3.scale.linear() + .domain([0, d3.max(dataset, function (d) { + return d.data[d.config.yAxis]; + })]) + .range([chartConfig.height - chartConfig.padding, chartConfig.padding]); + //var yScale = d3.scale.linear() + // .range([height, 0]) + // .domain([0, d3.max(dataset, function(d) { return d.data[d.config.yAxis]; })]) + } else { + yScale = d3.scale.ordinal() + .rangeRoundBands([0, chartConfig.width], .1) + .domain(dataset.map(function (d) { + return d.data[chartConfig.yAxis]; + })) + } + + + //this is used to scale the size of the point, it will value between 0-20 + var rScale = d3.scale.linear() + .domain([0, d3.max(dataset, function (d) { + return d.config.pointSize ? d.data[d.config.pointSize] : 20; + })]) + .range([0, 20]); + + //TODO have to handle the case color scale is categorical : Done + //http://synthesis.sbecker.net/articles/2012/07/16/learning-d3-part-6-scales-colors + // add color to circles see https://www.dashingd3js.com/svg-basic-shapes-and-d3js + //add legend http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend + if (dataTable.metadata.types[chartConfig.pointColor] == 'N') { + colorScale = d3.scale.linear() + .domain([-1, d3.max(dataset, function (d) { + return d.config.pointColor ? d.data[d.config.pointColor] : 20; + })]) + .range([chartConfig.minColor, chartConfig.maxColor]); + } else { + colorScale = d3.scale.category20c(); + } + + //TODO add legend + + + return { + "xScale": xScale, + "yScale": yScale, + "rScale": rScale, + "colorScale": colorScale + } + } + + + + /*************************************************** Util functions ***************************************************************************************************/ + + + /** + * Get the average of a numeric array + * @param data + * @returns average + */ + function getAvg(data) { + + var sum = 0; + + for (v
<TRUNCATED>
