Compare commits
12 Commits
master
...
bi_provide
| Author | SHA1 | Date | |
|---|---|---|---|
|
87b93e6f9e | ||
|
|
6dd0251be8 | ||
|
|
19e35ffe2c | ||
|
|
7a1f206d5e | ||
|
|
1ec2324b83 | ||
|
|
e0606ee295 | ||
|
|
695cab290a | ||
|
|
ff4809b08c | ||
|
|
4ad0dba547 | ||
|
|
71fc89a8d8 | ||
|
|
fd5bc0f732 | ||
|
|
130d72c872 |
88
examples/bi.html
Normal file
88
examples/bi.html
Normal file
@ -0,0 +1,88 @@
|
||||
|
||||
<html>
|
||||
<link rel="stylesheet" href="vendor/leaflet.css" />
|
||||
<style>
|
||||
#map, html, body {
|
||||
width: 100%; height: 100%; padding: 0; margin: 0;
|
||||
}
|
||||
#title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
color: white;
|
||||
font-size: 27px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id='graphs'></div>
|
||||
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
||||
<script src="../dist/torque.full.uncompressed.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
// define the torque layer style using cartocss
|
||||
// this creates a kind of density map
|
||||
//color scale from http://colorbrewer2.org/
|
||||
var CARTOCSS = [
|
||||
'Map {',
|
||||
'-torque-time-attribute: "tpep_dropoff_datetime";',
|
||||
'-torque-aggregation-function: "avg(temp::float)";',
|
||||
'-torque-frame-count: 1;',
|
||||
'-torque-animation-duration: 15;',
|
||||
'-torque-resolution: 1',
|
||||
'}',
|
||||
'#layer {',
|
||||
' marker-width: 1;',
|
||||
' marker-fill-opacity: 1.0;',
|
||||
' marker-fill: #fff5eb; ',
|
||||
' marker-type: ellipse;',
|
||||
' [value > 1] { marker-fill: #fee6ce; }',
|
||||
' [value > 2] { marker-fill: #fdd0a2; }',
|
||||
' [value > 4] { marker-fill: #fdae6b; }',
|
||||
' [value > 10] { marker-fill: #fd8d3c; }',
|
||||
' [value > 15] { marker-fill: #f16913; }',
|
||||
' [value > 20] { marker-fill: #d94801; }',
|
||||
' [value > 25] { marker-fill: #8c2d04; }',
|
||||
'}'
|
||||
].join('\n');
|
||||
|
||||
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: true,
|
||||
center: [40.76045572900912, -73.97601127624512],
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
|
||||
attribution: 'CartoDB'
|
||||
}).addTo(map);
|
||||
|
||||
var torqueLayer = new L.TorqueLayer({
|
||||
user : 'stuartlynn',
|
||||
table : 'sampled_taxi_data',
|
||||
cartocss: CARTOCSS,
|
||||
provider: "filterable_sql_api"
|
||||
});
|
||||
torqueLayer.addTo(map);
|
||||
|
||||
var graphs=[]
|
||||
// var ndx = crossfilter({});
|
||||
//
|
||||
// torqueLayer.onNewData(function(){
|
||||
// data = torqueLayer.getValues()
|
||||
// ndx = crossfilter(data)
|
||||
// })
|
||||
|
||||
function addGraph(variable, type){
|
||||
var dataDim = ndx.dimension(function(d){return d[variable]})
|
||||
var graphID = "variable_graph"
|
||||
$("graphs").append("<div id='"+graphID+"'></div>")
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -10,6 +10,7 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
|
||||
providers: {
|
||||
'sql_api': torque.providers.json,
|
||||
'filterable_sql_api': torque.providers.filterableJson,
|
||||
'url_template': torque.providers.JsonArray,
|
||||
'windshaft': torque.providers.windshaft,
|
||||
'tileJSON': torque.providers.tileJSON
|
||||
@ -28,6 +29,7 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
options.tileLoader = true;
|
||||
this.key = 0;
|
||||
this.prevRenderedKey = 0;
|
||||
this._filters = {}
|
||||
if (options.cartocss) {
|
||||
torque.extend(options, torque.common.TorqueLayer.optionsFromCartoCSS(options.cartocss));
|
||||
}
|
||||
@ -69,8 +71,8 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
|
||||
if (this.options.tileJSON) this.options.provider = 'tileJSON';
|
||||
|
||||
this.provider = new this.providers[this.options.provider](options);
|
||||
this.renderer = new this.renderers[this.options.renderer](this.getCanvas(), options);
|
||||
this.provider = new this.providers[this.options.provider](this.options);
|
||||
this.renderer = new this.renderers[this.options.renderer](this.getCanvas(), this.options);
|
||||
|
||||
options.ready = function() {
|
||||
self.fire("change:bounds", {
|
||||
@ -98,11 +100,48 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
self.redraw();
|
||||
}
|
||||
self.fire('tileLoaded');
|
||||
self.fire('dataUpdate')
|
||||
});
|
||||
}, this);
|
||||
|
||||
},
|
||||
|
||||
setFilters: function() {
|
||||
this.provider.setFilters(this._filters);
|
||||
this._reloadTiles();
|
||||
return this;
|
||||
},
|
||||
|
||||
filterByRange: function(variableName, start, end) {
|
||||
this._filters[variableName] = {type: 'range', range: {start: start, end: end} }
|
||||
this._filtersChanged()
|
||||
this.fire('dataUpdate')
|
||||
return this
|
||||
},
|
||||
|
||||
filterByCat: function(variableName, categories, exclusive) {
|
||||
this._filters[variableName] = {type: 'cat', categories: categories, exclusive: !!exclusive };
|
||||
this._filtersChanged()
|
||||
return this
|
||||
},
|
||||
|
||||
clearFilter: function(name){
|
||||
if(name) {
|
||||
delete this._filters[name]
|
||||
}
|
||||
else {
|
||||
this._filters = {}
|
||||
}
|
||||
this._filtersChanged()
|
||||
return this
|
||||
},
|
||||
|
||||
_filtersChanged:function(){
|
||||
this.provider._filters = this._filters;
|
||||
this._clearTileCaches()
|
||||
this._render()
|
||||
},
|
||||
|
||||
_clearTileCaches: function() {
|
||||
var t, tile;
|
||||
for(t in this._tiles) {
|
||||
@ -118,6 +157,96 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
this._clearTileCaches();
|
||||
},
|
||||
|
||||
valuesForRangeVariable:function(variable){
|
||||
var t, tile;
|
||||
|
||||
var variable_id = this.provider.idForRange(variable)
|
||||
var values = [ ]
|
||||
|
||||
|
||||
for(t in this._tiles){
|
||||
tile = this._tiles[t]
|
||||
var noPoints = tile.x.length;
|
||||
for(var i=0; i < tile.x.length; i++){
|
||||
if(tile.renderFlags[i] ){
|
||||
value = tile.renderData[variable_id*noPoints + i]
|
||||
values.push(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
return values;
|
||||
},
|
||||
|
||||
valuesForCatVariable:function(variable){
|
||||
var t, tile;
|
||||
|
||||
var categories = this.provider.idsForCategory(variable)
|
||||
var result = [ ]
|
||||
|
||||
|
||||
for(t in this._tiles){
|
||||
tile = this._tiles[t]
|
||||
var noPoints = tile.x.length;
|
||||
for(var i=0; i < tile.x.length; i++){
|
||||
if(tile.renderFlags[i] ){
|
||||
var vals={}
|
||||
Object.keys(categories).forEach(function(categoryName){
|
||||
var variable_id = categories[categoryName]
|
||||
value = tile.renderData[variable_id*noPoints + i]
|
||||
vals[categoryName] = value
|
||||
}.bind(this))
|
||||
result.push(vals)
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
||||
},
|
||||
getValues:function(variable,callback){
|
||||
var type= this.provider._mapping[variable].type
|
||||
if(type=='float'){
|
||||
callback(this.valuesForRangeVariable(variable))
|
||||
}
|
||||
else{
|
||||
callback(this.valuesForCatVariable(variable))
|
||||
}
|
||||
},
|
||||
getHistogram:function(variable,callback,noBins){
|
||||
var type= this.provider._mapping[variable].type
|
||||
if(type=='float'){
|
||||
callback(this.histogramForRangeVariable(variable,noBins))
|
||||
}
|
||||
else if(type='cat'){
|
||||
callback(this.histogramForCatVariable(variable))
|
||||
}
|
||||
return this
|
||||
},
|
||||
histogramForCatVariable:function(variable){
|
||||
var result = {}
|
||||
this.valuesForCatVariable(variable).forEach(function(point){
|
||||
Object.keys(point).forEach(function(key){
|
||||
result[key] = result[key] || 0
|
||||
result[key] += point[key]
|
||||
})
|
||||
})
|
||||
return result
|
||||
},
|
||||
histogramForRangeVariable:function(variable,noBins){
|
||||
noBins = noBins || 10
|
||||
|
||||
var vals = this.valuesForRangeVariable(variable)
|
||||
|
||||
var min = Math.min.apply(null, vals)
|
||||
var max = Math.max.apply(null, vals)
|
||||
var binSize = (max-min)/noBins
|
||||
var result = []
|
||||
vals.forEach(function(val){
|
||||
var bin = (val -min)/binSize
|
||||
result[bin]= result[bin] || 0
|
||||
result[bin] += val
|
||||
})
|
||||
return result
|
||||
},
|
||||
onAdd: function (map) {
|
||||
map.on({
|
||||
'zoomend': this._clearCaches,
|
||||
@ -208,6 +337,40 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
canvas.width = canvas.width;
|
||||
},
|
||||
|
||||
/*
|
||||
_filterTile:function(tile){
|
||||
var noPoints = tile.x.length
|
||||
|
||||
var renderFlags = []
|
||||
for(var i =0; i < noPoints; i++){
|
||||
var includePoint = true
|
||||
Object.keys(this._filters).forEach(function(key){
|
||||
var filter = this._filters[key]
|
||||
var variableId = this.provider.idForRange(key)
|
||||
|
||||
var value = tile.renderData[variableId*noPoints+i]
|
||||
if(filter.type=='range'){
|
||||
if(value < filter.range.start || value > filter.range.end){
|
||||
includePoint = false;
|
||||
}
|
||||
}
|
||||
else if (filter.type=='cat'){
|
||||
var ids = this.provider.idsForCategory(key);
|
||||
filter.categories.forEach(function(key){
|
||||
var catId = ids[key]
|
||||
var value = tile.renderData[catId*noPoints + i]
|
||||
if(value==0){
|
||||
includePoint= false
|
||||
}
|
||||
}.bind(this))
|
||||
}
|
||||
}.bind(this))
|
||||
renderFlags[i] = includePoint
|
||||
}
|
||||
return renderFlags
|
||||
},
|
||||
*/
|
||||
|
||||
/**
|
||||
* render the selectef key
|
||||
* don't call this function directly, it's called by
|
||||
@ -236,10 +399,13 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
// all the points
|
||||
this.renderer._ctx.drawImage(tile._tileCache, 0, 0);
|
||||
} else {
|
||||
|
||||
//tile.renderFlags = this._filterTile(tile)
|
||||
this.renderer.renderTile(tile, this.key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.renderer.applyFilters();
|
||||
|
||||
// prepare caches if the animation is not running
|
||||
@ -382,7 +548,9 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
var t, tile;
|
||||
for(t in this._tiles) {
|
||||
tile = this._tiles[t];
|
||||
this.renderer.getValues(tile, step, values);
|
||||
if (tile) {
|
||||
this.renderer.getValues(tile, step, values);
|
||||
}
|
||||
}
|
||||
return values;
|
||||
},
|
||||
|
||||
607
lib/torque/provider/filterableJson.js
Normal file
607
lib/torque/provider/filterableJson.js
Normal file
@ -0,0 +1,607 @@
|
||||
var torque = require('../');
|
||||
var _ = require('underscore');
|
||||
var Profiler = require('../profiler');
|
||||
|
||||
var Uint8Array = torque.types.Uint8Array;
|
||||
var Int32Array = torque.types.Int32Array;
|
||||
var Uint32Array = torque.types.Uint32Array;
|
||||
|
||||
// format('hello, {0}', 'rambo') -> "hello, rambo"
|
||||
function format(str) {
|
||||
for(var i = 1; i < arguments.length; ++i) {
|
||||
var attrs = arguments[i];
|
||||
for(var attr in attrs) {
|
||||
str = str.replace(RegExp('\\{' + attr + '\\}', 'g'), attrs[attr]);
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
var filterableJson = function (options) {
|
||||
this._ready = false;
|
||||
this._tileQueue = [];
|
||||
this.options = options;
|
||||
this._filters = {};
|
||||
this._tileProcessingQueue=[]
|
||||
this._workers = [];
|
||||
this._maxWorkerNo = this.options.maxWorkerNo || 4;
|
||||
|
||||
this.setupWorkerPool()
|
||||
// category mapping for each column
|
||||
this.categoryMapping = {}
|
||||
this.categoryMappingSize = {}
|
||||
|
||||
// generate the mapping, global for all the tiles
|
||||
var fields = this.options.fields;
|
||||
for (var i = 0 ; i < fields.length; ++i) {
|
||||
if (fields[i].type === 'cat') {
|
||||
this.categoryMapping[fields[i].name] = {}
|
||||
this.categoryMappingSize[fields[i].name] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
this.options.tiler_protocol = options.tiler_protocol || 'http';
|
||||
this.options.tiler_domain = options.tiler_domain || 'cartodb.com';
|
||||
this.options.tiler_port = options.tiler_port || 80;
|
||||
|
||||
// check options
|
||||
if (options.resolution === undefined ) throw new Error("resolution should be provided");
|
||||
if(options.start === undefined) {
|
||||
this._fetchKeySpan();
|
||||
} else {
|
||||
this._setReady(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
filterableJson.prototype = {
|
||||
|
||||
setupWorkerPool:function(){
|
||||
for(var i=0; i< this._maxWorkerNo; i++){
|
||||
this._workers.push(this.createProccessTileWorker())
|
||||
}
|
||||
},
|
||||
|
||||
getAvalaibleWorker:function(){
|
||||
return this._workers.pop()
|
||||
},
|
||||
|
||||
releaseWorker:function(worker){
|
||||
console.log("releasing worker ", worker)
|
||||
this._workers.push(worker)
|
||||
this.processNextTileRequestInQueue()
|
||||
},
|
||||
|
||||
processNextTileRequestInQueue:function(){
|
||||
console.log("processing next ",this._tileProcessingQueue.length, this._workers.length )
|
||||
if(this._tileProcessingQueue.length>0){
|
||||
job = this._tileProcessingQueue.pop()
|
||||
this.requestWorker(job.rows,job.coord,job.zoom, job.options, job.callback)
|
||||
}
|
||||
},
|
||||
|
||||
requestWorker:function(rows,coord,zoom,options,callback){
|
||||
worker = this.getAvalaibleWorker()
|
||||
self = this
|
||||
if(worker){
|
||||
worker.onmessage = function(e){
|
||||
callback(e.data)
|
||||
self.releaseWorker(this)
|
||||
}
|
||||
worker.postMessage(JSON.stringify({rows: rows, coord: {x:coord.x,y:coord.y}, zoom:zoom, options: options}))
|
||||
}
|
||||
else{
|
||||
this.addToTileProcessingQueue(rows,coord,zoom,options,callback)
|
||||
}
|
||||
},
|
||||
|
||||
addToTileProcessingQueue:function(rows,coord,zoom, options, callback){
|
||||
this._tileProcessingQueue.push({rows:rows, coord:coord, zoom:zoom, options: options, callback:callback})
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a worker to process the tile
|
||||
*/
|
||||
createProccessTileWorker:function(){
|
||||
var workerFunction = "var proccessTile ="+ this.proccessTileSerial.toString()
|
||||
var wrapper = "; self.onmessage = function(e){var data = JSON.parse(e.data); JSON.stringify(self.postMessage(proccessTile(data.rows,data.coord, data.zoom, data.options)))}"
|
||||
var script = workerFunction + wrapper;
|
||||
var blob = new Blob([script], {type: "text/javascript"})
|
||||
var worker = new Worker(window.URL.createObjectURL(blob))
|
||||
return worker
|
||||
},
|
||||
|
||||
proccessTile:function(rows,coord,zoom,callback){
|
||||
if(typeof(Worker) === "undefined"){
|
||||
callback(this.proccessTileSerial(rows,coord,zoom, this.options))
|
||||
}
|
||||
else{
|
||||
|
||||
|
||||
var workerSafeOptions= {
|
||||
x : new Uint8Array(rows.length),
|
||||
y : new Uint8Array(rows.length),
|
||||
resolution: this.options.resolution,
|
||||
fields: this.options.fields
|
||||
}
|
||||
this.requestWorker(rows,coord,zoom,workerSafeOptions,callback)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* return the torque tile encoded in an efficient javascript
|
||||
* structure:
|
||||
* {
|
||||
* x:Uint8Array x coordinates in tile reference system, normally from 0-255
|
||||
* y:Uint8Array y coordinates in tile reference system
|
||||
* Index: Array index to the properties
|
||||
* }
|
||||
*/
|
||||
proccessTileSerial: function(rows, coord, zoom, options) {
|
||||
var r;
|
||||
var x = new Uint8Array(rows.length);
|
||||
var y = new Uint8Array(rows.length);
|
||||
|
||||
if(typeof(Profiler) != 'undefined') {
|
||||
var prof_mem = Profiler.metric('ProviderJSON:mem');
|
||||
var prof_point_count = Profiler.metric('ProviderJSON:point_count');
|
||||
var prof_process_time = Profiler.metric('ProviderJSON:process_time').start()
|
||||
}
|
||||
|
||||
// count number of steps
|
||||
var maxDateSlots = Object.keys(rows[0].d).length;
|
||||
var steps = maxDateSlots;
|
||||
|
||||
|
||||
// reserve memory for all the steps
|
||||
var timeIndex = new Int32Array(maxDateSlots + 1); //index-size
|
||||
var timeCount = new Int32Array(maxDateSlots + 1);
|
||||
var renderData = new Float32Array(rows.length * steps); //(this.options.valueDataType || type)(steps);
|
||||
var renderDataPos = new Uint32Array(rows.length * steps);
|
||||
|
||||
if(typeof(Profiler) !='undefined'){
|
||||
prof_mem.inc(
|
||||
4 * maxDateSlots + // timeIndex
|
||||
4 * maxDateSlots + // timeCount
|
||||
steps + //renderData
|
||||
steps * 4
|
||||
); //renderDataPos
|
||||
|
||||
prof_point_count.inc(rows.length);
|
||||
}
|
||||
|
||||
var rowsPerSlot = {};
|
||||
// var steps = _.range(maxDateSlots);
|
||||
var steps = []
|
||||
|
||||
for(var i=0 ; i< maxDateSlots; i++){
|
||||
steps.push(i)
|
||||
}
|
||||
|
||||
// precache pixel positions
|
||||
for (var r = 0; r < rows.length; ++r) {
|
||||
var row = rows[r];
|
||||
x[r] = row.x * options.resolution;
|
||||
// fix value when it's in the tile EDGE
|
||||
// TODO: this should be fixed in SQL query
|
||||
if (row.y === -1) {
|
||||
y[r] = 0;
|
||||
} else {
|
||||
y[r] = row.y * options.resolution;
|
||||
}
|
||||
|
||||
var vals = row.d;
|
||||
|
||||
for (var j = 0, len = steps.length; j < len; ++j) {
|
||||
var rr = rowsPerSlot[steps[j]] || (rowsPerSlot[steps[j]] = []);
|
||||
var k = 'f' + (j + 1)
|
||||
var v = vals[k];
|
||||
if (options.fields[j].type === 'cat') {
|
||||
var mapping = this.categoryMapping[options.fields[j].name];
|
||||
var m = mapping[v]
|
||||
if (!m) {
|
||||
var count = this.categoryMappingSize[options.fields[j].name];
|
||||
if (count < 100) {
|
||||
++this.categoryMappingSize[options.fields[j].name];
|
||||
v = mapping[v] = count;
|
||||
} else {
|
||||
v = 0;
|
||||
}
|
||||
} else {
|
||||
v = m;
|
||||
}
|
||||
}
|
||||
rr.push([r, v]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// for each timeslot search active buckets
|
||||
var renderDataIndex = 0;
|
||||
var timeSlotIndex = 0;
|
||||
var i = 0;
|
||||
for(var i = 0; i <= maxDateSlots; ++i) {
|
||||
var c = 0;
|
||||
var slotRows = rowsPerSlot[i]
|
||||
if(slotRows) {
|
||||
for (var r = 0; r < slotRows.length; ++r) {
|
||||
var rr = slotRows[r];
|
||||
++c;
|
||||
renderDataPos[renderDataIndex] = rr[0]
|
||||
renderData[renderDataIndex] = rr[1];
|
||||
++renderDataIndex;
|
||||
}
|
||||
}
|
||||
timeIndex[i] = timeSlotIndex;
|
||||
timeCount[i] = c;
|
||||
timeSlotIndex += c;
|
||||
}
|
||||
|
||||
if(typeof(Profiler) !='undefined'){
|
||||
prof_process_time.end();
|
||||
}
|
||||
|
||||
return {
|
||||
x: x,
|
||||
y: y,
|
||||
z: zoom,
|
||||
coord: {
|
||||
x: coord.x,
|
||||
y: coord.y,
|
||||
z: zoom
|
||||
},
|
||||
timeCount: timeCount,
|
||||
timeIndex: timeIndex,
|
||||
renderDataPos: renderDataPos,
|
||||
renderData: renderData,
|
||||
maxDate: maxDateSlots
|
||||
};
|
||||
},
|
||||
|
||||
_generateFilterSQLForCat: function(name, categories, exclusive) {
|
||||
return name + (exclusive ? " not in ": " in") + '(' + categories.map(function(c) {
|
||||
return "''" + c + "''";
|
||||
}).join(',') + ')';
|
||||
},
|
||||
|
||||
_generateFilterSQLForRange: function(name,range) {
|
||||
var result = ""
|
||||
if (range.start) {
|
||||
result += " " + name + " > " + range.start;
|
||||
}
|
||||
if (range.end) {
|
||||
if (range.start) {
|
||||
result += " and "
|
||||
}
|
||||
result += " " + name + " < " + range.end;
|
||||
}
|
||||
return result
|
||||
},
|
||||
|
||||
_setFilters:function(filters){
|
||||
this.filters = filters
|
||||
},
|
||||
|
||||
_generateFiltersSQL: function() {
|
||||
var self = this;
|
||||
return Object.keys(this._filters).map(function(filterName){
|
||||
var filter = self._filters[filterName]
|
||||
if (filter) {
|
||||
if (filter.type == 'range') {
|
||||
return self._generateFilterSQLForRange(filterName, filter.range)
|
||||
}
|
||||
else if (filter.type == 'cat' && filter.categories.length) {
|
||||
return self._generateFilterSQLForCat(filterName, filter.categories, filter.exclusive)
|
||||
}
|
||||
else {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
else{
|
||||
return ""
|
||||
}
|
||||
}).filter(function(f) {
|
||||
return f.length > 0;
|
||||
}).map(function(f) {
|
||||
return "(" + f + ")";
|
||||
}).join(' and ')
|
||||
},
|
||||
|
||||
_host: function() {
|
||||
var opts = this.options;
|
||||
var port = opts.sql_api_port;
|
||||
var domain = ((opts.user_name || opts.user) + '.' + (opts.sql_api_domain || 'cartodb.com')) + (port ? ':' + port: '');
|
||||
var protocol = opts.sql_api_protocol || 'http';
|
||||
return this.options.url || protocol + '://' + domain + '/api/v2/sql';
|
||||
},
|
||||
|
||||
url: function(subhost) {
|
||||
var opts = this.options;
|
||||
var protocol = opts.sql_api_protocol || 'http';
|
||||
if (!this.options.cdn_url) {
|
||||
return this._host();
|
||||
}
|
||||
var h = protocol+ "://";
|
||||
if (subhost) {
|
||||
h += subhost + ".";
|
||||
}
|
||||
var cdn_host = opts.cdn_url;
|
||||
if(!cdn_host.http && !cdn_host.https) {
|
||||
throw new Error("cdn_host should contain http and/or https entries");
|
||||
}
|
||||
h += cdn_host[protocol] + "/" + (opts.user_name || opts.user) + '/api/v2/sql';
|
||||
return h;
|
||||
},
|
||||
|
||||
_hash: function(str) {
|
||||
var hash = 0;
|
||||
if (!str || str.length == 0) return hash;
|
||||
for (var i = 0, l = str.length; i < l; ++i) {
|
||||
hash = (( (hash << 5 ) - hash ) + str.charCodeAt(i)) | 0;
|
||||
}
|
||||
return hash;
|
||||
},
|
||||
|
||||
_extraParams: function() {
|
||||
if (this.options.extra_params) {
|
||||
var p = [];
|
||||
for(var k in this.options.extra_params) {
|
||||
var v = this.options.extra_params[k];
|
||||
if (v) {
|
||||
p.push(k + "=" + encodeURIComponent(v));
|
||||
}
|
||||
}
|
||||
return p.join('&');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
isHttps: function() {
|
||||
return this.options.sql_api_protocol && this.options.sql_api_protocol === 'https';
|
||||
},
|
||||
|
||||
// execute actual query
|
||||
sql: function(sql, callback, options) {
|
||||
options = options || {};
|
||||
var subdomains = this.options.subdomains || '0123';
|
||||
if(this.isHttps()) {
|
||||
subdomains = [null]; // no subdomain
|
||||
}
|
||||
|
||||
|
||||
var url;
|
||||
if (options.no_cdn) {
|
||||
url = this._host();
|
||||
} else {
|
||||
url = this.url(subdomains[Math.abs(this._hash(sql))%subdomains.length]);
|
||||
}
|
||||
var extra = this._extraParams();
|
||||
torque.net.get( url + "?q=" + encodeURIComponent(sql) + (extra ? "&" + extra: ''), function (data) {
|
||||
if(options.parseJSON) {
|
||||
data = JSON.parse(data && data.responseText);
|
||||
}
|
||||
callback && callback(data);
|
||||
});
|
||||
},
|
||||
|
||||
getTileData: function(coord, zoom, callback) {
|
||||
if(!this._ready) {
|
||||
this._tileQueue.push([coord, zoom, callback]);
|
||||
} else {
|
||||
this._getTileData(coord, zoom, callback);
|
||||
}
|
||||
},
|
||||
|
||||
_setReady: function(ready) {
|
||||
this._ready = true;
|
||||
this._processQueue();
|
||||
this.options.ready && this.options.ready();
|
||||
},
|
||||
|
||||
_processQueue: function() {
|
||||
var item;
|
||||
while (item = this._tileQueue.pop()) {
|
||||
this._getTileData.apply(this, item);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `coord` object like {x : tilex, y: tiley }
|
||||
* `zoom` quadtree zoom level
|
||||
*/
|
||||
|
||||
_getTileData: function(coord, zoom, callback) {
|
||||
var prof_fetch_time = Profiler.metric('ProviderJSON:tile_fetch_time').start()
|
||||
this.table = this.options.table;
|
||||
var numTiles = 1 << zoom;
|
||||
|
||||
var column_conv = this.options.column;
|
||||
|
||||
var sql = "select * from torque_tile_json({x}, {y}, {zoom}, ARRAY[{fields}], {table}, '{filters}')";
|
||||
var table_sql = format("(WITH opt as ( SELECT table_name as tt FROM selectivity(x:={x}, y:={y}, z:={z}, tables:=ARRAY['yodlee_1', 'yodlee_2', 'yodlee_4', 'yodlee_16', 'yodlee_64', 'yodlee_128', 'yodlee_256'], where_clause:='{filters}') where nrows > 5000 order by nrows asc limit 1) select (CASE WHEN EXISTS(select 1 from opt) THEN (select tt from opt) else 'yodlee_1' END))", {
|
||||
z: zoom,
|
||||
x: coord.x,
|
||||
y: coord.y,
|
||||
filters: this._generateFiltersSQL()
|
||||
})
|
||||
|
||||
var query = format(sql, {
|
||||
zoom: zoom,
|
||||
x: coord.x,
|
||||
y: coord.y,
|
||||
fields: _.map(this.options.fields, function(f) {
|
||||
if (f.type === 'cat') {
|
||||
return "'mode() within group (order by " + f.name + ")'";
|
||||
}
|
||||
return "'avg(" + f.name + ")'";
|
||||
}).join(','),
|
||||
column: column_conv,
|
||||
table: table_sql,
|
||||
filters: this._generateFiltersSQL()
|
||||
});
|
||||
|
||||
|
||||
var self = this;
|
||||
this.sql(query, function (data) {
|
||||
if (data) {
|
||||
var rows = JSON.parse(data.responseText).rows;
|
||||
if (rows.length !== 0) {
|
||||
self.proccessTile(rows, coord, zoom,callback);
|
||||
} else {
|
||||
callback(null);
|
||||
}
|
||||
} else {
|
||||
callback(null);
|
||||
}
|
||||
prof_fetch_time.end();
|
||||
});
|
||||
},
|
||||
|
||||
getKeySpan: function() {
|
||||
return {
|
||||
start: this.options.start * 1000,
|
||||
end: this.options.end * 1000,
|
||||
step: this.options.step,
|
||||
steps: this.options.steps,
|
||||
columnType: this.options.is_time ? 'date': 'number'
|
||||
};
|
||||
},
|
||||
|
||||
setColumn: function(column, isTime) {
|
||||
this.options.column = column;
|
||||
this.options.is_time = isTime === undefined ? true: false;
|
||||
this.reload();
|
||||
},
|
||||
|
||||
setResolution: function(res) {
|
||||
this.options.resolution = res;
|
||||
},
|
||||
|
||||
// return true if tiles has been changed
|
||||
setOptions: function(opt) {
|
||||
var refresh = false;
|
||||
|
||||
if(opt.resolution !== undefined && opt.resolution !== this.options.resolution) {
|
||||
this.options.resolution = opt.resolution;
|
||||
refresh = true;
|
||||
}
|
||||
|
||||
if(opt.steps !== undefined && opt.steps !== this.options.steps) {
|
||||
this.setSteps(opt.steps, { silent: true });
|
||||
refresh = true;
|
||||
}
|
||||
|
||||
if(opt.column !== undefined && opt.column !== this.options.column) {
|
||||
this.options.column = opt.column;
|
||||
refresh = true;
|
||||
}
|
||||
|
||||
if(opt.countby !== undefined && opt.countby !== this.options.countby) {
|
||||
this.options.countby = opt.countby;
|
||||
refresh = true;
|
||||
}
|
||||
|
||||
if(opt.data_aggregation !== undefined) {
|
||||
var c = opt.data_aggregation === 'cumulative';
|
||||
if (this.options.cumulative !== c) {
|
||||
this.options.cumulative = c;
|
||||
refresh = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (refresh) this.reload();
|
||||
return refresh;
|
||||
|
||||
},
|
||||
|
||||
reload: function() {
|
||||
this._ready = false;
|
||||
this._fetchKeySpan();
|
||||
},
|
||||
|
||||
setSQL: function(sql) {
|
||||
if (this.options.sql != sql) {
|
||||
this.options.sql = sql;
|
||||
this.reload();
|
||||
}
|
||||
},
|
||||
|
||||
getSteps: function() {
|
||||
return Math.min(this.options.steps, this.options.data_steps);
|
||||
},
|
||||
|
||||
setSteps: function(steps, opt) {
|
||||
opt = opt || {};
|
||||
if (this.options.steps !== steps) {
|
||||
this.options.steps = steps;
|
||||
this.options.step = (this.options.end - this.options.start)/this.getSteps();
|
||||
this.options.step = this.options.step || 1;
|
||||
if (!opt.silent) this.reload();
|
||||
}
|
||||
},
|
||||
|
||||
getBounds: function() {
|
||||
return this.options.bounds;
|
||||
},
|
||||
|
||||
getSQL: function() {
|
||||
return this.options.sql || "select * from " + this.options.table;
|
||||
},
|
||||
|
||||
_tilerHost: function() {
|
||||
var opts = this.options;
|
||||
var user = (opts.user_name || opts.user);
|
||||
return opts.tiler_protocol +
|
||||
"://" + (user ? user + "." : "") +
|
||||
opts.tiler_domain +
|
||||
((opts.tiler_port != "") ? (":" + opts.tiler_port) : "");
|
||||
},
|
||||
|
||||
_fetchKeySpan: function() {
|
||||
this._setReady(true);
|
||||
},
|
||||
|
||||
getHistogram: function(varName, callback) {
|
||||
|
||||
var sql = [
|
||||
'with width as (',
|
||||
'select min({column}) as min,',
|
||||
'max({column}) as max,',
|
||||
'20 as buckets',
|
||||
'from {table}',
|
||||
'),',
|
||||
'_bw as ( select (max - min)/buckets as bw from width ),',
|
||||
'histogram as (',
|
||||
'select width_bucket({column}, min, max, buckets) as bucket,',
|
||||
'numrange(min({column})::numeric, max({column})::numeric, \'[]\') as range,',
|
||||
'count(*) as freq',
|
||||
'from {table}, width ',
|
||||
//'where trip_time_in_secs between min and max',
|
||||
'group by bucket',
|
||||
'order by bucket',
|
||||
')',
|
||||
'select bucket*bw as start, (bucket+1)*bw as end, bucket as bin, lower(range) as min, upper(range) as max, freq from histogram, _bw;'
|
||||
]
|
||||
|
||||
|
||||
var query = format(sql.join('\n'), this.options, {
|
||||
column: this.options.column,
|
||||
table: this.options.table,
|
||||
filters: this._generateFiltersSQL()
|
||||
});
|
||||
|
||||
var self = this;
|
||||
this.sql(query, function (data) {
|
||||
if (data) {
|
||||
var rows = JSON.parse(data.responseText).rows;
|
||||
callback(null, rows);
|
||||
} else {
|
||||
callback(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
module.exports = filterableJson;
|
||||
@ -1,5 +1,6 @@
|
||||
module.exports = {
|
||||
json: require('./json'),
|
||||
filterableJson: require('./filterableJson'),
|
||||
JsonArray: require('./jsonarray'),
|
||||
windshaft: require('./windshaft'),
|
||||
tileJSON: require('./tilejson')
|
||||
|
||||
@ -57,7 +57,7 @@ var Filters = require('./torque_filters');
|
||||
this.TILE_SIZE = 256;
|
||||
this._style = null;
|
||||
this._gradients = {};
|
||||
|
||||
|
||||
this._forcePoints = false;
|
||||
}
|
||||
|
||||
@ -165,14 +165,14 @@ var Filters = require('./torque_filters');
|
||||
i.src = canvas.toDataURL();
|
||||
return i;
|
||||
}
|
||||
|
||||
|
||||
return canvas;
|
||||
},
|
||||
|
||||
//
|
||||
// renders all the layers (and frames for each layer) from cartocss
|
||||
//
|
||||
renderTile: function(tile, key, callback) {
|
||||
renderTile: function(tile, key, renderFlags, callback) {
|
||||
if (this._iconsToLoad > 0) {
|
||||
this.on('allIconsLoaded', function() {
|
||||
this.renderTile.apply(this, [tile, key, callback]);
|
||||
@ -193,7 +193,7 @@ var Filters = require('./torque_filters');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
prof.end(true);
|
||||
|
||||
return callback && callback(null);
|
||||
@ -237,12 +237,11 @@ var Filters = require('./torque_filters');
|
||||
},
|
||||
|
||||
//
|
||||
// renders a tile in the canvas for key defined in
|
||||
// renders a tile in the canvas for key defined in
|
||||
// the torque tile
|
||||
//
|
||||
_renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
|
||||
if (!this._canvas) return;
|
||||
|
||||
var prof = Profiler.metric('torque.renderer.point.renderTile').start();
|
||||
var ctx = this._ctx;
|
||||
var blendMode = compop2canvas(shader.eval('comp-op')) || this.options.blendmode;
|
||||
@ -254,27 +253,25 @@ var Filters = require('./torque_filters');
|
||||
key = tile.maxDate;
|
||||
}
|
||||
var tileMax = this.options.resolution * (this.TILE_SIZE/this.options.resolution - 1)
|
||||
var activePixels = tile.timeCount[key];
|
||||
var activePixels = tile.x.length;
|
||||
var anchor = this.options.resolution/2;
|
||||
if (activePixels) {
|
||||
var pixelIndex = tile.timeIndex[key];
|
||||
var pixelIndex = 0;//tile.timeIndex[key];
|
||||
for(var p = 0; p < activePixels; ++p) {
|
||||
var posIdx = tile.renderDataPos[pixelIndex + p];
|
||||
var c = tile.renderData[pixelIndex + p];
|
||||
if (c) {
|
||||
var sp = sprites[c];
|
||||
if (sp === undefined) {
|
||||
sp = sprites[c] = this.generateSprite(shader, c, torque.extend({ zoom: tile.z, 'frame-offset': frame_offset }, shaderVars));
|
||||
}
|
||||
if (sp) {
|
||||
var x = tile.x[posIdx]- (sp.width >> 1) + anchor;
|
||||
var y = tileMax - tile.y[posIdx] + anchor; // flip mercator
|
||||
ctx.drawImage(sp, x, y - (sp.height >> 1));
|
||||
}
|
||||
}
|
||||
var posIdx = tile.renderDataPos[pixelIndex + p];
|
||||
var c = tile.renderData[pixelIndex + p];
|
||||
var sp = sprites[c];
|
||||
if (sp === undefined) {
|
||||
sp = sprites[c] = this.generateSprite(shader, c, torque.extend({ zoom: tile.z, 'frame-offset': frame_offset }, shaderVars));
|
||||
}
|
||||
if (sp) {
|
||||
var x = tile.x[posIdx]- (sp.width >> 1) + anchor;
|
||||
var y = tileMax - tile.y[posIdx] + anchor; // flip mercator
|
||||
ctx.drawImage(sp, x, y - (sp.height >> 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
prof.end(true);
|
||||
},
|
||||
@ -442,7 +439,7 @@ var Filters = require('./torque_filters');
|
||||
}
|
||||
gradient = {};
|
||||
var colorize = this._style['image-filters'].args;
|
||||
|
||||
|
||||
var increment = 1/colorize.length;
|
||||
for (var i = 0; i < colorize.length; i++){
|
||||
var key = increment * i + increment;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user