http://git-wip-us.apache.org/repos/asf/stratos/blob/1ecd7a08/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js ---------------------------------------------------------------------- diff --git a/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js b/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js deleted file mode 100644 index 671358b..0000000 --- a/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js +++ /dev/null @@ -1,3585 +0,0 @@ -/* - * - * 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]]) - - } - - - xScaleConfig = { - "index": chartConfig.xAxis, - "schema": dataTable.metadata, - "name": "x", - "range": "width", - "zero": false, - "clamp": false, - "field": xString, - "round": true - } - - yScaleConfig = { - "index": chartConfig.yAxis[0], - "schema": dataTable.metadata, - "name": "y", - "range": "height", - "nice": true, - "field": yStrings[0] - } - - var yDomain = []; - chartConfig.yAxis.forEach(function (columnIndex, i) { - dataTable.data.forEach(function (row, j) { - yDomain.push(row[columnIndex]); - }); - }); - - yDomain.sort(function (a, b) { - return a - b; - }); - - var yScale = { - name: "y", - type: "linear", - range: "height", - zero: true, - domain: [yDomain[0], yDomain[yDomain.length - 1]] - }; - - var xScale = setScale(xScaleConfig); - var yScale = yScale; - - 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": "Member Count", - "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 - 250, - "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": "Member Count", - "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
<TRUNCATED>
