You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@stratos.apache.org by ga...@apache.org on 2015/10/14 12:54:35 UTC
[05/39] stratos git commit: Deleting old artifacts in
stratos-metering-service
http://git-wip-us.apache.org/repos/asf/stratos/blob/1ecd7a08/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberStatus_1.0.0/Member_Status/js/igviz.js
----------------------------------------------------------------------
diff --git a/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberStatus_1.0.0/Member_Status/js/igviz.js b/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberStatus_1.0.0/Member_Status/js/igviz.js
deleted file mode 100644
index 8d31b36..0000000
--- a/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberStatus_1.0.0/Member_Status/js/igviz.js
+++ /dev/null
@@ -1,3565 +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
- }
-
- 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);
-
<TRUNCATED>