src/apps/dbwipes/static/js/summary/queryview.js
define(function(require) {
var Backbone = require('backbone'),
Handlebars = require('handlebars'),
$ = require('jquery'),
d3 = require('d3'),
_ = require('underscore'),
Where = require('summary/where'),
util = require('summary/util'),
DrawingView = require('summary/drawingview'),
Query = require('summary/query');
var QueryView = Backbone.View.extend({
errtemplate: Handlebars.compile($("#q-err-template").html()),
defaults: function() {
return {
xdomain: null,
ydomain: null,
xscales: null,
yscales: null,
cscales: d3.scale.category10(),
xaxis: null,
yaxis: null,
series: null,
w: 500,
h: 300,
lp: 70,
tp: 20,
bp: 15,
ip: 10, // data-container inner padding
marktype: 'circle'
};
},
initialize: function() {
this.state = this.defaults();
this.$el
.css("background", "white")
.attr('id', 'queryview-container');
this.$svg = $("<svg id='viz'></svg>").prependTo(this.$el);
this.svg = this.$svg.get()[0];
this.d3svg = d3.select(this.svg);
this.d3svg
.attr('class', 'viz-container')
.attr('width', this.state.w + this.state.lp)
.attr('height', this.state.h + this.state.tp + this.state.bp);
this.c = this.d3svg.append('g')
.classed("plot-container", true)
.attr('transform', "translate("+this.state.lp+", 0)");
this.c.append('rect')
.attr('width', this.state.w)
.attr('height', this.state.h)
.attr('fill', 'none')
.attr('stroke', 'none')
.style('pointer-events', 'all')
this.listenTo(this.model, 'change:db', this.resetState);
this.listenTo(this.model, 'change:table', this.resetState);
this.listenTo(this.model, 'change:data', this.render);
},
resetState: function() {
this.state = this.defaults();
this.trigger("resetState");
},
onChange: function() {
return;
},
// persistently update scales information
setupScales: function(data) {
var schema = this.model.get('schema'),
xcol = this.model.get('x'),
xalias = xcol.alias,
ycols = this.model.get('ys'),
yaliases = _.pluck(ycols, 'alias'),
type = schema[xcol.col],
_this = this,
ip = this.state.ip,
xs = _.pluck(data, xalias),
prevxdomain = this.state.xdomain,
prevydomain = this.state.ydomain,
getx = function(d) { return d[xalias]; },
xdomain = util.getXDomain(data, type, getx),
ydomain = util.getYDomain(data, ycols),
newCDomain = _.chain(this.state.cscales.domain())
.union(yaliases)
.compact().value();
this.state.cscales.domain(newCDomain);
this.state.xdomain = util.mergeDomain(this.state.xdomain, xdomain, type);
this.state.ydomain = util.mergeDomain(this.state.ydomain, ydomain, 'num');
if (!this.state.yscales)
this.state.ydomain = util.mergeDomain(this.state.ydomain, [0, -Infinity], 'num');
if (this.state.xscales == null) {
var xscales = d3.scale.linear();
if (util.isTime(type)) {
xscales = d3.time.scale();
}
xscales.range([0+ip, this.state.w-ip]);
if (util.isStr(type)) {
xscales = d3.scale.ordinal();
xscales.rangeRoundBands([0+ip, this.state.w-ip], 0.1);
}
this.state.xscales = xscales;
}
if (this.state.yscales == null) {
this.state.yscales = d3.scale.linear()
.range([this.state.h-ip, 0+ip])
}
this.state.xscales.domain(this.state.xdomain);
this.state.yscales.domain(this.state.ydomain);
if (!this.state.xaxis) {
this.state.xaxis = d3.svg.axis()
.scale(this.state.xscales)
.tickSize(0,0)
.orient('bottom')
var nticks = util.estNumXTicks(this.state.xaxis, type, this.state.w);
util.setAxisLabels(this.state.xaxis, type, nticks);
}
if (!this.state.yaxis) {
this.state.yaxis = d3.svg.axis()
.scale(this.state.yscales)
.tickSize(0,0)
.orient('left');
if (this.state.ydomain[1] > 10000000) {
this.state.yaxis.tickFormat(d3.format('.2e'))
};
}
},
renderAxes: function(el) {
if(el.select('.xaxis').size() == 0) {
var xel = el.append('g')
.attr('class', 'axis x xaxis')
.attr('transform', "translate(0,"+this.state.h+")");
xel.append('rect')
.attr('width', this.state.w)
.attr('height', this.state.bp)
//.attr('fill', 'none')
//.attr('stroke', 'none')
.style('pointer-events', 'all')
xel.call(this.state.xaxis)
} else {
el.select('.axis.x').call(this.state.xaxis);
}
if (el.select('.yaxis').size() == 0) {
var yel = el.append('g')
.attr('class', 'axis y yaxis')
yel.append('rect')
.attr('width', this.state.lp)
.attr('height', this.state.h)
.attr('x', -this.state.lp)
//.attr('fill', 'none')
//.attr('stroke', 'none')
.style('pointer-events', 'all')
yel.call(this.state.yaxis)
} else {
el.select('.axis.y').call(this.state.yaxis);
}
if (el.select('.xaxis-label').size() == 0) {
el.append('g')
.classed('xaxis-label', true)
.attr('transform', 'translate('+(this.state.w/2)+','+(this.state.h+25)+')')
.append('text')
.data([1])
.text(this.model.get('x')['expr'])
}
if (el.select('.yaxis-label').size() == 0) {
var txt = _.uniq(_.pluck(this.model.get('ys'), 'expr')).join(', ');
el.append('g')
.classed('yaxis-label', true)
.attr('text-anchor', 'middle')
.attr('transform', 'translate(-'+(this.state.lp-15)+','+(this.state.h/2)+') rotate(-90)')
.append('text')
.data([1])
.text(txt);
}
},
// set base plot to background and render
// result with WHERE clause
renderWhereOverlay: function(where) {
if (!where || !where.length) {
console.log(['qv.renderoverlay', 'canceloverlay']);
this.cancelWhereOverlay();
return;
}
if (_.isEqual(this.model.get('where'), where)) {
console.log(['qv.renderoverlay', 'cached']);
return;
}
this.overlayquery = query = new Query(this.model.toJSON());
query.set('where', where);
console.log(['qv.renderoverlay', JSON.stringify(where), where, query])
query.fetch({
data: {
json: JSON.stringify(query.toJSON()),
db: query.get('db')
},
context: this,
success: (function(model, resp, opts) {
console.log(['qv.fetch', 'success', resp.data]);
this.renderModifiedData(resp.data);
}).bind(this)
});
return this;
},
cancelWhereOverlay: function() {
this.renderModifiedData(null);
this.overlayquery = null;
return this;
},
// renders the actual overlay
renderModifiedData: function(data) {
var _this = this;
this.$(".updated").remove();
this.c.selectAll('g.data-container')
.classed('background', false)
// expand the y-axis domain if necessary
// relying on setupScales/renderAxes is too extreme because
// it computes the union of all domains seen so far
if (this.yzoom) {
if (data) {
var ydomain = this.state.yscales.domain(); //this.state.ydomain;
ydomain = util.getYDomain(data, this.model.get('ys'))
console.log(ydomain);
ydomain = util.mergeDomain(this.state.yscales.domain(), ydomain, 'num')
console.log(ydomain)
} else {
var ydomain = this.state.ydomain;
}
this.yzoom.y(this.state.yscales.domain(ydomain));
this.yzoom.event(this.c);
}
if (this.state.yaxis)
this.c.select('.yaxis').call(this.state.yaxis);
if (!data) {
return;
}
//this.setupScales(data);
//this.render();
this.c.selectAll('g.data-container')
.classed('background', true)
var xalias = this.model.get('x').alias;
var el = this.c.append('g')
.classed('updated', true)
_.each(this.model.get('ys'), function(ycol) {
this.renderData(el, data, xalias, ycol.alias);
}, this);
},
renderData: function(el, data, xalias, yalias) {
var _this = this,
h = this.state.h,
w = this.state.w;
var data = _.map(data, function(d) {
var ret = {
x: d[xalias],
y: d[yalias],
px: _this.state.xscales(d[xalias]),
py: _this.state.yscales(d[yalias]),
yalias: yalias
};
ret[xalias] = d[xalias];
ret[yalias] = d[yalias];
return ret
});
var dc = el.append('g')
.attr('class', 'data-container')
if (this.state.marktype == 'circle') {
var r = 2.5;
if (data.length > 50)
r = 2.25;
if (data.length > 100)
r = 2;
dc.selectAll('circle')
.data(data)
.enter().append('circle')
.classed('mark', true)
.attr({
cx: function(d) { return d.px },
cy: function(d) { return d.py },
r: r,
fill: this.state.cscales(yalias),
stroke: this.state.cscales(yalias),
opacity: function(d) {
if (d.px >= 0 && d.px <= w &&
d.py >= 0 && d.py <= h)
return 1;
return 0;
}
})
}
},
renderBrush: function(el) {
if (el.select('.brush').size() > 0) {
console.log(['qv.renderBrush', 'exists, skip']);
return;
}
var type = this.model.get('schema')[this.model.get('x').col],
_this = this,
xscales = this.state.xscales,
yscales = this.state.yscales,
xr = 5,
yr = Math.abs(yscales.invert(0)-yscales.invert(5));
var brushf = function(p) {
var e = brush.extent()
var selected = {};
el.selectAll('.data-container:not(.background)')
.selectAll('.mark')
.classed('selected', function(d){
if (util.isNum(type) || util.isTime(type)) {
var minx = xscales(e[0][0]),
maxx = xscales(e[1][0]),
x = d.px;
} else {
var minx = e[0][0],
maxx = e[1][0],
x = d.px;
}
var y = d.y,
bx = minx <= x+xr && maxx >= x-xr,
by = e[0][1] <= y+yr && e[1][1] >= y-yr;
if (bx && by) {
var yalias = d.yalias;
if (!selected[yalias]) selected[yalias] = [];
selected[yalias].push(d);
return true;
}
return false;
})
if (d3.event.type == 'brushend') {
_this.trigger('change:selection', selected);
}
}
this.d3brush = brush = d3.svg.brush()
.x(this.state.xscales)
.y(this.state.yscales)
.on('brush', brushf)
.on('brushend', brushf)
.on('brushstart', brushf)
this.gbrush = gbrush = el.append('g')
.attr('class', 'brush')
.call(brush)
gbrush.selectAll('rect')
.attr('height', this.state.h)
},
disableBrush: function() {
if (this.gbrush)
this.gbrush.style("pointer-events", null);
},
enableBrush: function() {
if (this.gbrush)
this.gbrush.style("pointer-events", 'all');
},
brushStatus: function() {
if (this.gbrush)
return this.gbrush.style("pointer-events");
},
renderZoom: function(el) {
var _this = this
yscales = this.state.yscales,
yaxis = this.state.yaxis,
xscales = this.state.xscales,
xaxis = this.state.xaxis;
var yzoomf = function(el) {
var yaxis = this.state.yaxis;
var yscales = this.state.yscales;
el.select('.axis.y').call(yaxis);
el.selectAll('.mark')
.attr('cy', function(d) {
return yscales(d.y);
})
.style('opacity', function(d) {
if (yscales.range()[0] >= yscales(d.y) &&
yscales(d.y) >= yscales.range()[1])
return 1;
return 0;
})
};
yzoomf = _.bind(yzoomf, this, el);
this.yzoom = yzoom = d3.behavior.zoom()
.y(this.state.yscales)
.on('zoom', yzoomf);
el.select('.axis.y').call(yzoom)
.style('cursor', 'ns-resize')
var yshiftf = function(el, yzoomf) {
var yzoom = this.yzoom;
var yStart = d3.event.y;
var curYScale = yzoom.scale();
var yscales = this.state.yscales;
if (d3.event.shiftKey) {
d3.select('body')
.on('mousemove.qvy', function() {
var diff = ((-d3.event.y + yStart) / 100);
if (diff >= 0) {
diff += 1.0;
} else {
diff = 1.0 / (Math.abs(diff)+1);
}
yzoom.scale(diff*curYScale);
})
.on('mouseup.qvy', function() {
d3.select('body')
.on('mousemove.qvy', null)
.on('mouseup.qvy', null);
});
}
}
yshiftf = _.bind(yshiftf, this, el, yzoomf);
el.select('.yaxis')
.on('mousedown.qvy', yshiftf)
var type = this.model.get('schema')[this.model.get('x').col];
if (!util.isStr(type)) {
function xzoomf(el) {
var xaxis = this.state.xaxis;
var xscales = this.state.xscales;
el.select('.axis.x').call(xaxis);
el.selectAll('.mark')
.attr('cx', function(d) {
return xscales(d.x);
})
.style('opacity', function(d) {
if (xscales.range()[0] <= xscales(d.x) &&
xscales(d.x) <= xscales.range()[1])
return 1;
return 0;
})
_this.xscale = d3.event.scale;
};
xzoomf = _.bind(xzoomf, this, el);
this.xzoom = xzoom = d3.behavior.zoom()
.x(this.state.xscales)
.on('zoom', xzoomf);
el.select('.axis.x').call(xzoom)
.style('cursor', 'ew-resize');
var xStart = null;
var curXScale = null;
el.select('.xaxis')
.on('mousedown.qvx', function() {
if (d3.event.shiftKey) {
xStart = d3.event.x;
curXScale = xzoom.scale();
d3.select('body')
.on('mousemove.qvx', function() {
var diff = ((d3.event.x - xStart) / 100);
if (diff >= 0) {
diff += 1.0;
} else if (diff < 0) {
diff = 1.0 / (Math.abs(diff)+1);
}
console.log(diff)
xzoom.scale(diff*curXScale);
})
.on('mouseup.qvx', function() {
d3.select('body')
.on('mousemove.qvx', null)
.on('mouseup.qvx', null);
});
}
})
}
},
renderLabels: function() {
var ys = this.model.get('ys'),
cscales = this.state.cscales;
this.$('.legend').remove();
d3.select(this.el).append("div")
.attr('class', 'legend')
.style("margin-left", this.state.lp)
.selectAll("span")
.data(ys)
.enter().append("span")
.text(function(d) { return d.expr; })
.style("color", function(d) { return cscales(d.alias); })
.style("border-bottom", function(d) { return "5px solid " + cscales(d.alias); })
.style("padding-bottom", function(d) { return "2px"; })
.style("border-radius", function(d) { return "0px"; });
},
toggleBrushDrawing: function() {
if (!this.dv) {
this.enableBrush();
return;
}
if (this.dv.status() == 'all') {
this.dv.disable();
this.enableBrush();
} else {
this.dv.enable();
this.disableBrush();
}
},
render: function() {
if (!this.model.isValid()) {
this.$svg.hide();
return this;
}
this.$svg.show();
if (!this.state.xaxis) {
$(this.c[0]).empty();
} else {
this.$('.data-container').remove()
}
this.setupScales(this.model.get('data'))
this.renderAxes(this.c)
_.each(this.model.get('ys'), function(ycol) {
this.renderData(
this.c,
this.model.get('data'),
this.model.get('x').alias,
ycol.alias
);
}, this);
if (window.enableScorpion) {
this.renderBrush(this.c);
}
this.renderLabels(this.c);
this.renderZoom(this.c);
this.$(".drawing-container").remove()
this.dv = new DrawingView({state: this.state});
this.listenTo(this.dv, "change:drawing", (function() {
this.trigger('change:drawing', this.dv.model);
}).bind(this))
$(this.c[0]).append(this.dv.render().$("g"));
this.dv.disable();
this.enableBrush();
return this;
}
});
return QueryView;
})