Read Me
Last active
September 15, 2015 08:56
-
-
Save darshit-shah/c3e0a53f3f8607d3523e to your computer and use it in GitHub Desktop.
Smartfilter Stock Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title id="pageTitle">Smart Filter Example - Stock</title> | |
| <meta name="fragment" content="!"> | |
| <style> | |
| #tooltip | |
| { | |
| position: absolute; | |
| width: 200px; | |
| height: auto; | |
| padding: 10px; | |
| background-color: white; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| -mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4) pointer-events: none; | |
| } | |
| #tooltip.hidden | |
| { | |
| opacity: 0; | |
| } | |
| #tooltip p | |
| { | |
| margin: 0; | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| #selectDimension table, #divConnect table | |
| { | |
| margin: 10px; | |
| } | |
| #selectDimension td, #divConnect td | |
| { | |
| padding: 3px; | |
| } | |
| #selectDimension input[type=text], select, #divConnect input[type=text] | |
| { | |
| width: 250px; | |
| } | |
| #selectDimension td:nth-child(1), #divConnect td:nth-child(1) | |
| { | |
| width: 110px; | |
| } | |
| #chart td | |
| { | |
| padding: 5px; | |
| } | |
| #chart tr:not(:last-child) | |
| { | |
| border-bottom: 1px solid #EEE; | |
| } | |
| #chart tr td:not(:last-child) | |
| { | |
| border-right: 1px solid #EEE; | |
| } | |
| #chart tr td:last-child | |
| { | |
| text-align: right; | |
| } | |
| #chart .area | |
| { | |
| fill: steelblue; | |
| clip-path: url(#clip); | |
| } | |
| #chart .axis path, #chart .axis line | |
| { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| #chart .brush .extent | |
| { | |
| stroke: #fff; | |
| fill-opacity: .125; | |
| shape-rendering: crispEdges; | |
| } | |
| .page | |
| { | |
| width: 1100px; | |
| } | |
| .header | |
| { | |
| background-color: steelblue; | |
| font-size: 30px; | |
| font-weight: bold; | |
| text-align: center; | |
| color: white; | |
| padding: 10px; | |
| } | |
| .reset | |
| { | |
| color: steelblue; | |
| font-variant: small-caps; | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <div id="divContainer" style="display: none; background-color: #eee; height: 100%;"> | |
| <input type="button" value="Download Data" onclick="smartfilter_StaticExample1.fetchData()" /> | |
| <div style="padding: 5px;"> | |
| <span id="statusMessage"></span> | |
| </div> | |
| <div id="crossFilterContainer"> | |
| <div id="countOfRecords" style="border: 5px solid rgb(238, 238, 238); margin: 10px; | |
| float: left; font-size: 11px; background: rgb(255, 255, 255); display: none;"> | |
| <div style="font-size: 14px; margin-bottom: 5px; background: #EEE; text-align: center; | |
| font-weight: bold; padding: 3px;"> | |
| Count of Records</div> | |
| <div id="chart" style="margin: 5px; text-align: center; font-size: 14px;"> | |
| 0 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="selectDimension" style="display: block; position: absolute; left: 50%; top: 200px; | |
| width: 400px; margin-left: -200px; background-color: rgba(200,200,200,0.8); display: none"> | |
| <table style="width: 100%; padding: 5px;"> | |
| <tr> | |
| <td> | |
| Dimension: | |
| </td> | |
| <td> | |
| <input type="text" id="dimension" /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Measure Type: | |
| </td> | |
| <td> | |
| <select id="measureType" onchange="smartfilter_StaticExample1.measureTypeChanged()"> | |
| <option value="count">Count</option> | |
| <option value="sum">Sum</option> | |
| </select> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Measure: | |
| </td> | |
| <td> | |
| <input type="text" id="measure" disabled /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Chart Type: | |
| </td> | |
| <td> | |
| <select id="chartType" onchange="smartfilter_StaticExample1.chartTypeChanged()"> | |
| <option value="pie">Pie</option> | |
| <option value="range">Range</option> | |
| <option value="pivot">Pivot</option> | |
| </select> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Range Type: | |
| </td> | |
| <td> | |
| <select id="rangeType" disabled onchange="smartfilter_StaticExample1.rangeTypeChanged()"> | |
| <option value="date">Date</option> | |
| <option value="number">Number</option> | |
| </select> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Format: | |
| </td> | |
| <td> | |
| <input type="text" id="formatType" disabled /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Chart Width: | |
| </td> | |
| <td> | |
| <input type="text" id="chartWidth" /> | |
| </td> | |
| </tr> | |
| </table> | |
| <div style="padding: 5px; position: relative; margin-bottom: 5px; float: right; margin-right: 20px;"> | |
| <input type="button" value="Done" onclick="smartfilter_StaticExample1.okDimension()" /> | |
| <input type="button" value="Cancel" onclick="smartfilter_StaticExample1.cancelDimension()" /> | |
| </div> | |
| </div> | |
| <div id="divConnect" style="position: absolute; left: 50%; top: 200px; | |
| width: 400px; margin-left: -200px; background-color: rgba(200,200,200,0.8); display: none"> | |
| <table style="width: 100%; padding: 5px;"> | |
| <tr> | |
| <td> | |
| Database Type: | |
| </td> | |
| <td> | |
| <input type="text" id="databaseType" value="mysql" disabled placeholder="mysql" /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Database Host: | |
| </td> | |
| <td> | |
| <input type="text" id="databaseHost" value="54.251.110.52" placeholder="54.251.110.52"/> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Database Port: | |
| </td> | |
| <td> | |
| <input type="text" id="databasePort" value="3306" placeholder="3306"/> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Database User: | |
| </td> | |
| <td> | |
| <input type="text" id="databaseUser" value="guest" placeholder="guest"/> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Database Password: | |
| </td> | |
| <td> | |
| <input type="password" id="databasePassword" value="guest" placeholder="guest"/> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Database Name: | |
| </td> | |
| <td> | |
| <input type="text" id="databaseName" value="DarshitShah" placeholder="DarshitShah"/> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Table Name: | |
| </td> | |
| <td> | |
| <input type="text" id="databaseTableName" value="flightsHuge" placeholder="Stock"/> | |
| </td> | |
| </tr> | |
| </table> | |
| <div style="padding: 5px; position: relative; margin-bottom: 5px; float: right; margin-right: 20px;"> | |
| <input type="button" value="Done" onclick="smartfilter_StaticExample1.connect()" /> | |
| </div> | |
| </div> | |
| <div id="applyFilterStatus" style="display: none"> | |
| <div style="background: url(https://darshit-shah.github.io/transparent-bg.png); position: fixed; height: 100%; | |
| width: 100%; z-index: 999; left: 0; top: 0;"> | |
| <div style="background: url(https://darshit-shah.github.io/ajax-loader.gif) no-repeat center 20px #fff; | |
| position: fixed; top: 0px; padding: 10px; height: 100px; width: 180px; z-index: 99999; | |
| -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: -45px 0 0 -80px; | |
| left: 50%; top: 50%; border: 1px solid #ccc; -moz-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1); | |
| -webkit-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);"> | |
| <p style="margin: 60px 0 0; color: #555; font: 14px 'Helvetica Neue', Helvetica; | |
| text-align: center;"> | |
| Applying Filter</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="https://darshit-shah.github.io/jquery-1.7.2.min.js"></script> | |
| <script src="https://darshit-shah.github.io/socket.io.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="smartfilter_StaticExample_Stock.js"></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| smartfilter_StaticExample1.onLoad(); | |
| }); | |
| smartfilter_StaticExample1 = { | |
| dimension: {}, | |
| onLoad: function () { | |
| "use strict"; | |
| var self = this; | |
| self.crossFilter_socket = io.connect('http://54.251.110.52:5001' + '/crossFilter', { | |
| 'reconnect': false, | |
| 'reconnection limit': Infinity, | |
| 'max reconnection attempts': Infinity | |
| }); | |
| self.crossFilter_socket.on('connect', function (data) { | |
| document.querySelector("#divContainer").style.display = "block"; | |
| document.querySelector("#divConnect #databaseTableName").value = "Stock"; | |
| self.connect(); | |
| }); | |
| self.crossFilter_socket.on('error', function (data) { | |
| document.querySelector('#statusMessage').innerText = JSON.stringify(data); | |
| self.hideMessage(); | |
| }); | |
| self.crossFilter_socket.on('records', function (data) { | |
| self.hideMessage(); | |
| }); | |
| self.crossFilter_socket.on('count', function (data) { | |
| document.querySelector('#countOfRecords #chart').innerHTML = self.numberWithCommas(data[0].totalCount); | |
| document.querySelector('#countOfRecords').style.display = "block"; | |
| //self.hideMessage(); | |
| }); | |
| self.crossFilter_socket.on('connectSuccess', function (data) { | |
| document.querySelector('#statusMessage').innerText = JSON.stringify(data); | |
| //self.fetchCount(); | |
| document.querySelector("#selectDimension #dimension").value = "Type"; | |
| document.querySelector("#selectDimension #measure").value = ""; | |
| document.querySelector("#selectDimension #measure").disabled = true; | |
| document.querySelector("#selectDimension #measureType").selectedIndex = 0; | |
| document.querySelector("#selectDimension").style.display = "block"; | |
| document.querySelector("#selectDimension #dimension").focus(); | |
| self.okDimension(); | |
| document.querySelector("#selectDimension #dimension").value = "Qtr"; | |
| document.querySelector("#selectDimension #measure").value = "Volume"; | |
| document.querySelector("#selectDimension #measure").disabled = false; | |
| document.querySelector("#selectDimension #measureType").selectedIndex = 1; | |
| document.querySelector("#selectDimension").style.display = "block"; | |
| document.querySelector("#selectDimension #dimension").focus(); | |
| self.okDimension(); | |
| document.querySelector("#selectDimension #dimension").value = "DOW"; | |
| document.querySelector("#selectDimension #measure").value = ""; | |
| document.querySelector("#selectDimension #measure").disabled = true; | |
| document.querySelector("#selectDimension #measureType").selectedIndex = 0; | |
| document.querySelector("#selectDimension").style.display = "block"; | |
| document.querySelector("#selectDimension #dimension").focus(); | |
| document.querySelector("#selectDimension #chartType").selectedIndex = 2; | |
| self.okDimension(); | |
| document.querySelector("#selectDimension #dimension").value = "date"; | |
| document.querySelector("#selectDimension #measure").value = "Volume"; | |
| document.querySelector("#selectDimension #measure").disabled = false; | |
| document.querySelector("#selectDimension #measureType").selectedIndex = 1; | |
| document.querySelector("#selectDimension").style.display = "block"; | |
| document.querySelector("#selectDimension #dimension").focus(); | |
| document.querySelector("#selectDimension #chartType").selectedIndex = 1; | |
| document.querySelector("#selectDimension #rangeType").selectedIndex = 0; | |
| document.querySelector("#selectDimension #chartWidth").value = 800; | |
| self.okDimension(); | |
| }); | |
| self.crossFilter_socket.on('data', function (data) { | |
| var keys = Object.keys(data); | |
| for (var i = 0; i < keys.length; i++) { | |
| self.dimension[keys[i].toLowerCase()].data = data[keys[i]]; | |
| var iDiv = document.querySelector('#crossFilterContainer #' + (keys[i].toLowerCase() === "" ? "noneID" : keys[i].toLowerCase())); | |
| if (iDiv === null) { | |
| iDiv = document.createElement('div'); | |
| iDiv.id = (keys[i].toLowerCase() === "" ? "noneID" : keys[i].toLowerCase()); | |
| document.querySelector('#crossFilterContainer').appendChild(iDiv); | |
| } | |
| iDiv.style.border = '5px solid #EEE'; | |
| iDiv.style.margin = '10px'; | |
| iDiv.style.float = 'left'; | |
| iDiv.style.fontSize = "14px"; | |
| iDiv.style.background = "#FFF"; | |
| iDiv.innerHTML = '<div style="font-size: 14px; margin-bottom: 5px; background: #EEE; text-align: center; font-weight: bold; padding: 3px;">' + keys[i] + '<span class="reset" id="' + (keys[i].toLowerCase() === "" ? "noneID" : keys[i].toLowerCase()) + '" style="float:right; margin-left:10px;" onclick="smartfilter_StaticExample1.reset(this)">Reset</span></div>'; | |
| //iDiv.innerText = JSON.stringify(data[keys[i]], null, 4); | |
| if (self.dimension[keys[i].toLowerCase()].chartType === "pie") { | |
| var childElement = document.createElement('div') | |
| childElement.id = 'chart'; | |
| childElement.style.margin = "5px"; | |
| iDiv.appendChild(childElement); | |
| self.createPieChart(data[keys[i]], keys[i], self.dimension[keys[i].toLowerCase()].measure.name); | |
| } | |
| else if (self.dimension[keys[i].toLowerCase()].chartType === "range") { | |
| var childElement = document.createElement('div') | |
| childElement.id = 'chart'; | |
| childElement.style.margin = "5px"; | |
| iDiv.appendChild(childElement); | |
| self.dimension[keys[i].toLowerCase()].filterType = 'range'; | |
| self.createRangeChart(data[keys[i]], keys[i], self.dimension[keys[i].toLowerCase()].measure.name, self.dimension[keys[i].toLowerCase()].width); | |
| } | |
| else { | |
| //iDiv.innerHTML = '<div id="chart">' + data[keys[i]][0][self.dimension[keys[i].toLowerCase()].measure.name] + ':' + data[keys[i]][0][] + '</div>'; | |
| var stringArr = []; | |
| var childElement = document.createElement('div') | |
| childElement.id = 'chart'; | |
| childElement.style.margin = "5px"; | |
| iDiv.appendChild(childElement); | |
| stringArr.push('<table id="chart">'); | |
| for (var j = -1; j < data[keys[i]].length; j++) { | |
| if (j == -1) { | |
| stringArr.push('<tr>'); | |
| } | |
| else { | |
| var myIndex = self.dimension[keys[i].toLowerCase()].filters.indexOf((data[keys[i]][j][keys[i]] == null ? "" : data[keys[i]][j][keys[i]]).toString()); | |
| if (myIndex !== -1 || self.dimension[keys[i].toLowerCase()].filters.length === 0) { | |
| stringArr.push('<tr onclick="smartfilter_StaticExample1.filterSingleValue(\'' + keys[i] + '\',\'' + data[keys[i]][j][keys[i]] + '\')">'); | |
| } | |
| else { | |
| stringArr.push('<tr style="color:#CCC" onclick="smartfilter_StaticExample1.filterSingleValue(\'' + keys[i] + '\',\'' + data[keys[i]][j][keys[i]] + '\')">'); | |
| } | |
| } | |
| stringArr.push('<td>'); | |
| if (j == -1) { | |
| stringArr.push(keys[i].toLowerCase() === "" ? "noneID" : keys[i].toLowerCase()); | |
| } | |
| else { | |
| stringArr.push(data[keys[i]][j][keys[i]]); | |
| } | |
| stringArr.push('</td>'); | |
| stringArr.push('<td>'); | |
| if (j == -1) { | |
| stringArr.push(self.dimension[keys[i].toLowerCase()].measure.name); | |
| } | |
| else { | |
| stringArr.push(self.numberWithCommas(data[keys[i]][j][self.dimension[keys[i].toLowerCase()].measure.name])); | |
| } | |
| stringArr.push('</td>'); | |
| stringArr.push('</tr>'); | |
| } | |
| stringArr.push('</table>'); | |
| childElement.innerHTML = stringArr.join("\n"); | |
| } | |
| if (self.dimension[keys[i].toLowerCase()].filters.length === 0) { | |
| document.querySelector('.reset#' + (keys[i].toLowerCase() === "" ? "noneID" : keys[i].toLowerCase())).style.display = "none"; | |
| } | |
| else { | |
| document.querySelector('.reset#' + (keys[i].toLowerCase() === "" ? "noneID" : keys[i].toLowerCase())).style.display = "block"; | |
| } | |
| } | |
| data = null; | |
| //self.fetchCount(); | |
| self.hideMessage(); | |
| document.querySelector('#statusMessage').innerText = 'Success!!!'; | |
| }); | |
| self.crossFilter_socket.on('message', function (data) { | |
| document.querySelector('#statusMessage').innerText = JSON.stringify(data); | |
| self.hideMessage(); | |
| }); | |
| }, | |
| createRangeChart: function (data, key, measure, width) { | |
| "use strict"; | |
| var self = this; | |
| var h = 300; | |
| var w = width; | |
| if (w.trim() === '' || isNaN(w)) | |
| w = 500; | |
| data.forEach(function (d) { | |
| d = type(d); | |
| }); | |
| var xDomain = d3.extent(data.map(function (d) { return d[key]; })); | |
| var yDomain = [0, d3.max(data.map(function (d) { return d[measure]; }))]; | |
| d3.select('#crossFilterContainer #' + (key.toLowerCase() === "" ? "noneID" : key.toLowerCase()) + ' #chart').style('width', w + 'px').style('height', h + 'px'); | |
| var margin = { top: 10, right: 10, bottom: 100, left: 60 }, | |
| margin2 = { top: 230, right: 10, bottom: 20, left: 60 }, | |
| width = w - margin.left - margin.right, | |
| height = h - margin.top - margin.bottom, | |
| height2 = h - margin2.top - margin2.bottom; | |
| var x = d3.scale.linear().range([0, width]), | |
| x2 = d3.scale.linear().range([0, width]), | |
| y = d3.scale.linear().range([height, 0]), | |
| y2 = d3.scale.linear().range([height2, 0]); | |
| var parseDate = undefined; | |
| if (self.dimension[key.toLowerCase()].rangeType === 'date') { | |
| if (self.dimension[key.toLowerCase()].formatType !== '') { | |
| d3.time.format(self.dimension[key.toLowerCase()].formatType).parse; | |
| } | |
| x = d3.time.scale().range([0, width]); | |
| x2 = d3.time.scale().range([0, width]); | |
| } | |
| var xAxis = d3.svg.axis().scale(x).orient("bottom"), | |
| xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), | |
| yAxis = d3.svg.axis().scale(y).orient("left"); | |
| var brush = d3.svg.brush() | |
| .x(x2) | |
| .on("brush", brushed) | |
| .on("brushend", brushEnd); | |
| var area = d3.svg.area() | |
| .interpolate("monotone") | |
| .x(function (d) { return x(d[key]); }) | |
| .y0(height) | |
| .y1(function (d) { return y(d[measure]); }); | |
| var area2 = d3.svg.area() | |
| .interpolate("monotone") | |
| .x(function (d) { return x2(d[key]); }) | |
| .y0(height2) | |
| .y1(function (d) { return y2(d[measure]); }); | |
| var svg = d3.select('#crossFilterContainer #' + key.toLowerCase() + ' #chart').append("svg:svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| svg.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var focus = svg.append("g") | |
| .attr("class", "focus") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var context = svg.append("g") | |
| .attr("class", "context") | |
| .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); | |
| x.domain(xDomain); | |
| y.domain(yDomain); | |
| x2.domain(x.domain()); | |
| y2.domain(y.domain()); | |
| focus.append("path") | |
| .datum(data) | |
| .attr("class", "area") | |
| .attr("d", area); | |
| focus.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| focus.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| context.append("path") | |
| .datum(data) | |
| .attr("class", "area") | |
| .attr("d", area2); | |
| context.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height2 + ")") | |
| .call(xAxis2); | |
| context.append("g") | |
| .attr("class", "x brush") | |
| .call(brush) | |
| .selectAll("rect") | |
| .attr("y", -6) | |
| .attr("height", height2 + 7); | |
| if (self.dimension[key.toLowerCase()].filters.length === 2) { | |
| brush.extent([self.dimension[key.toLowerCase()].filters[0], self.dimension[key.toLowerCase()].filters[1]]); | |
| svg.select(".brush").call(brush); | |
| x.domain(brush.empty() ? x2.domain() : brush.extent()); | |
| focus.select(".area").attr("d", area); | |
| focus.select(".x.axis").call(xAxis); | |
| } | |
| function brushed() { | |
| x.domain(brush.empty() ? x2.domain() : brush.extent()); | |
| focus.select(".area").attr("d", area); | |
| focus.select(".x.axis").call(xAxis); | |
| } | |
| function brushEnd() { | |
| if (brush.empty()) { | |
| self.filterRange(key.toLowerCase(), []); | |
| } | |
| else { | |
| self.filterRange(key.toLowerCase(), brush.extent()); | |
| } | |
| } | |
| function type(d) { | |
| if (self.dimension[key.toLowerCase()].rangeType === 'date') { | |
| if (self.dimension[key.toLowerCase()].formatType === '' || parseDate == undefined) { | |
| d[key] = new Date(d[key]); | |
| } | |
| else { | |
| d[key] = new parseDate(d[key]); | |
| } | |
| } | |
| else { | |
| d[key] = +d[key]; | |
| } | |
| d[measure] = +d[measure]; | |
| return d; | |
| } | |
| //setData(data); | |
| }, | |
| createPieChart: function (data, key, measure) { | |
| "use strict"; | |
| var self = this; | |
| var w = 200; | |
| var h = 200; | |
| var r = h / 2; | |
| var color = d3.scale.category20c(); | |
| d3.select('#crossFilterContainer #' + (key.toLowerCase() === "" ? "noneID" : key.toLowerCase()) + ' #chart').style('width', w + 'px').style('height', h + 'px'); | |
| var vis = d3.select('#crossFilterContainer #' + key.toLowerCase() + ' #chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); | |
| var pie = d3.layout.pie().value(function (d) { return d[measure]; }); | |
| // declare an arc generator function | |
| var arc = d3.svg.arc().outerRadius(r); | |
| // select paths, use arc generator to draw | |
| var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice") | |
| .on("click", function (d) { | |
| self.filterSingleValue(key, d.data[key]); | |
| }); | |
| arcs.append("svg:title").text(function (d) { return d.data[key] + ': ' + d.data[measure] }); | |
| arcs.append("svg:path") | |
| .attr("fill", function (d, i) { | |
| if (self.dimension[key.toLowerCase()].filters.length === 0) { | |
| return color(i); | |
| } | |
| else { | |
| var myIndex = self.dimension[key.toLowerCase()].filters.indexOf(d.data[key]); | |
| if (myIndex === -1) { | |
| return "#ccc"; | |
| } | |
| else { | |
| return color(i); | |
| } | |
| } | |
| }) | |
| .attr("d", function (d) { | |
| return arc(d); | |
| }); | |
| // add the text | |
| arcs.append("svg:text").attr("transform", function (d) { | |
| d.innerRadius = 0; | |
| d.outerRadius = r; | |
| return "translate(" + arc.centroid(d) + ")"; | |
| }).attr("text-anchor", "middle") | |
| .text(function (d, i) { | |
| return data[i][key]; | |
| }) | |
| .attr("fill", "#fff"); | |
| }, | |
| createBarChart: function () { | |
| }, | |
| connect: function () { | |
| "use strict"; | |
| var self = this; | |
| var tableName = document.querySelector("#divConnect #databaseTableName").value; | |
| document.querySelector('#statusMessage').innerText = 'Trying to connect to ' + tableName + ' table ....'; | |
| document.querySelector("#divConnect").style.display = "none"; | |
| self.crossFilter_socket.emit('connect', { | |
| tableName: tableName, | |
| dbConfig: { | |
| type: "database", | |
| databaseType: document.querySelector("#divConnect #databaseType").value, | |
| database: document.querySelector("#divConnect #databaseName").value, | |
| host: document.querySelector("#divConnect #databaseHost").value, | |
| port: document.querySelector("#divConnect #databasePort").value, | |
| user: document.querySelector("#divConnect #databaseUser").value, | |
| password: document.querySelector("#divConnect #databasePassword").value, | |
| cacheResponse: false, | |
| multipleStatements: false | |
| } | |
| }); | |
| }, | |
| addDimension: function () { | |
| "use strict"; | |
| document.querySelector("#selectDimension #dimension").value = ""; | |
| document.querySelector("#selectDimension #measure").value = ""; | |
| document.querySelector("#selectDimension #measure").disabled = true; | |
| document.querySelector("#selectDimension #measureType").selectedIndex = 0; | |
| document.querySelector("#selectDimension").style.display = "block"; | |
| document.querySelector("#selectDimension #dimension").focus(); | |
| }, | |
| okDimension: function () { | |
| "use strict"; | |
| var self = this; | |
| var fieldName = document.querySelector("#selectDimension #dimension").value; | |
| fieldName = fieldName.trim().toLowerCase(); | |
| if (false && fieldName === "") { | |
| alert("Dimension can not be blank"); | |
| } | |
| else { | |
| self.dimension[fieldName.toLowerCase()] = { | |
| measure: {}, | |
| filters: [], | |
| data: [], | |
| chartType: document.querySelectorAll("#chartType option")[document.querySelector("#chartType").selectedIndex].value.toLowerCase(), | |
| rangeType: document.querySelectorAll('#rangeType option')[document.querySelector("#rangeType").selectedIndex].value.toLowerCase(), | |
| formatType: document.querySelector("#formatType").value, | |
| width: document.querySelector("#selectDimension #chartWidth").value | |
| }; | |
| document.querySelector("#selectDimension").style.display = "none"; | |
| document.querySelector('#statusMessage').innerText = 'Adding Dimension : ' + fieldName + '....'; | |
| if (document.querySelector("#measureType").selectedIndex === 0) { | |
| var measure = self.dimension[fieldName.toLowerCase()].measure; | |
| measure.key = fieldName; | |
| measure.aggregation = document.querySelectorAll("#measureType option")[document.querySelector("#measureType").selectedIndex].value.toLowerCase(); | |
| measure.name = measure.aggregation + '(' + measure.key + ')'; | |
| self.showMessage("Adding Dimension"); | |
| //self.crossFilter_socket.emit('dimension', { field: fieldName, key: measure.key, aggregation: measure.aggregation }); | |
| self.crossFilter_socket.emit('pivot', { reference: fieldName, dimensions: [fieldName], measures: [{ key: measure.key, aggregation: measure.aggregation}] }); | |
| } | |
| else { | |
| if (measureName === "") { | |
| alert("Measure can not be blank"); | |
| } | |
| else { | |
| var measureName = document.querySelector("#selectDimension #measure").value; | |
| measureName = measureName.trim(); | |
| var measure = self.dimension[fieldName.toLowerCase()].measure; | |
| measure.key = measureName; | |
| measure.aggregation = document.querySelectorAll("#measureType option")[document.querySelector("#measureType").selectedIndex].value.toLowerCase(); | |
| measure.name = measure.aggregation + '(' + measure.key + ')'; | |
| self.showMessage("Adding Dimension"); | |
| //self.crossFilter_socket.emit('dimension', { field: fieldName, key: measure.key, aggregation: measure.aggregation }); | |
| self.crossFilter_socket.emit('pivot', { reference: fieldName, dimensions: [fieldName], measures: [{ key: measure.key, aggregation: measure.aggregation}] }); | |
| } | |
| } | |
| } | |
| }, | |
| cancelDimension: function () { | |
| "use strict"; | |
| var self = this; | |
| document.querySelector("#selectDimension").style.display = "none"; | |
| }, | |
| updateFilter: function (key) { | |
| "use strict"; | |
| var self = this; | |
| self.showMessage("Applying Filter"); | |
| self.crossFilter_socket.emit('filter', { field: key, filters: self.dimension[key.toLowerCase()].filters, filterType: self.dimension[key.toLowerCase()].filterType }); | |
| //self.fetchCount(); | |
| }, | |
| measureTypeChanged: function () { | |
| "use strict"; | |
| var self = this; | |
| if (document.querySelectorAll("#measureType option")[document.querySelector("#measureType").selectedIndex].value.toLowerCase() === 'count') { | |
| document.querySelector("#measure").disabled = true; | |
| } | |
| else { | |
| document.querySelector("#measure").disabled = false; | |
| } | |
| self.chartTypeChanged(); | |
| }, | |
| chartTypeChanged: function () { | |
| "use strict"; | |
| var self = this; | |
| if (document.querySelectorAll("#chartType option")[document.querySelector("#chartType").selectedIndex].value.toLowerCase() === 'range') { | |
| document.querySelector("#rangeType").disabled = false; | |
| document.querySelector("#formatType").disabled = false; | |
| } | |
| else { | |
| document.querySelector("#rangeType").disabled = true; | |
| document.querySelector("#formatType").disabled = true; | |
| } | |
| }, | |
| rangeTypeChanged: function () { | |
| "use strict"; | |
| var self = this; | |
| if (document.querySelectorAll("#rangeType option")[document.querySelector("#rangeType").selectedIndex].value.toLowerCase() === 'date') { | |
| document.querySelector("#formatType").disabled = false; | |
| } | |
| else { | |
| document.querySelector("#formatType").disabled = true; | |
| } | |
| }, | |
| fetchData: function () { | |
| "use strict"; | |
| var self = this; | |
| self.showMessage("Fetching Data"); | |
| self.crossFilter_socket.emit('data', { from: 0, to: 100 }); | |
| }, | |
| fetchCount: function () { | |
| "use strict"; | |
| var self = this; | |
| //self.showMessage("Fetching Count"); | |
| self.crossFilter_socket.emit('count', {}); | |
| }, | |
| showMessage: function (msg) { | |
| "use strict"; | |
| var self = this; | |
| if (msg === undefined) | |
| msg = "please wait"; | |
| document.querySelector("#applyFilterStatus p").innerText = msg; | |
| document.querySelector("#applyFilterStatus").style.display = "block"; | |
| }, | |
| hideMessage: function () { | |
| "use strict"; | |
| var self = this; | |
| document.querySelector("#applyFilterStatus").style.display = "none"; | |
| }, | |
| numberWithCommas: function (x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| }, | |
| getBaseUrlString: function () { | |
| var url = document.URL; | |
| url = url.substr(0, url.indexOf('/', 8)); | |
| jQuery.support.cors = true; | |
| return url; | |
| }, | |
| reset: function (e) { | |
| var key = e.id; | |
| smartfilter_StaticExample1.dimension[key.toLowerCase()].filters = []; | |
| smartfilter_StaticExample1.updateFilter(key); | |
| }, | |
| filterSingleValue: function (key, value) { | |
| var self = this; | |
| var myIndex = self.dimension[key.toLowerCase()].filters.indexOf(value); | |
| if (myIndex === -1) { | |
| self.dimension[key.toLowerCase()].filters.push(value); | |
| } | |
| else { | |
| self.dimension[key.toLowerCase()].filters.splice(myIndex, 1); | |
| } | |
| if (self.dimension[key.toLowerCase()].filters.length === self.dimension[key.toLowerCase()].data.length) | |
| self.dimension[key.toLowerCase()].filters = []; | |
| self.dimension[key.toLowerCase()].filterType = 'in'; | |
| self.updateFilter(key); | |
| }, | |
| filterRange: function (key, values) { | |
| var self = this; | |
| self.dimension[key.toLowerCase()].filterType = 'range'; | |
| self.dimension[key.toLowerCase()].filters = values; | |
| self.updateFilter(key); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment