You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@stratos.apache.org by im...@apache.org on 2015/09/28 15:14:52 UTC
[20/69] [abbrv] stratos git commit: Removed tenantId from queries and
refactore jaggery files
http://git-wip-us.apache.org/repos/asf/stratos/blob/9c1fdc75/extensions/das/metering-service/capps/stratos-metering-service/Gadget_Member_Information/Member_Information/js/igviz.js
----------------------------------------------------------------------
diff --git a/extensions/das/metering-service/capps/stratos-metering-service/Gadget_Member_Information/Member_Information/js/igviz.js b/extensions/das/metering-service/capps/stratos-metering-service/Gadget_Member_Information/Member_Information/js/igviz.js
new file mode 100644
index 0000000..d30d7a6
--- /dev/null
+++ b/extensions/das/metering-service/capps/stratos-metering-service/Gadget_Member_Information/Member_Information/js/igviz.js
@@ -0,0 +1,3545 @@
+(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]])
+
+ }
+
+
+ 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",
+ "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",
+ "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",
+ "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",
+ "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",
+ "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
+ 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
<TRUNCATED>