Skip to content

Instantly share code, notes, and snippets.

@darshit-shah
Last active September 15, 2015 08:56
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save darshit-shah/087180917d33f487253d to your computer and use it in GitHub Desktop.
Smartfilter Generic Example
<!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</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%;">
<div style="padding: 5px;">
<input type="button" value="Add Dimenssion" onclick="smartFilterClient.addDimension()" />
<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="smartFilterClient.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="smartFilterClient.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="smartFilterClient.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="smartFilterClient.okDimension()" />
<input type="button" value="Cancel" onclick="smartFilterClient.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: block">
<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="smartFilterClient.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="smartFilterClient.js"></script>
</html>
$(document).ready(function () {
smartFilterClient.onLoad();
});
smartFilterClient = {
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";
});
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();
});
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="smartFilterClient.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="smartFilterClient.filterSingleValue(\'' + keys[i] + '\',\'' + data[keys[i]][j][keys[i]] + '\')">');
}
else {
stringArr.push('<tr style="color:#CCC" onclick="smartFilterClient.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;
smartFilterClient.dimension[key.toLowerCase()].filters = [];
smartFilterClient.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