67 lines
1.6 KiB
JavaScript
67 lines
1.6 KiB
JavaScript
var AmpersandView = require('ampersand-view'),
|
|
VizView = require('./viz'),
|
|
EmptyView = require('./empty'),
|
|
d3 = require('d3'),
|
|
$ = require('jquery'),
|
|
debug = require('debug')('view:chart');
|
|
|
|
var ChartView = module.exports = AmpersandView.extend({
|
|
props: {
|
|
vizView: {
|
|
type: 'any',
|
|
default: null
|
|
},
|
|
emptyView: {
|
|
type: 'any',
|
|
default: null
|
|
},
|
|
activeView: {
|
|
type: 'string',
|
|
default: 'empty',
|
|
values: ['empty', 'viz']
|
|
}
|
|
},
|
|
template: require('./templates/chart.jade'),
|
|
bindings: {
|
|
'activeView': {
|
|
type: 'switch',
|
|
cases: {
|
|
'empty': '[data-hook=empty]',
|
|
'viz' : '[data-hook=graph]'
|
|
}
|
|
}
|
|
},
|
|
render: function () {
|
|
|
|
this.activeView = this.model.empty ? 'empty' : 'viz';
|
|
|
|
// first time, render view and create both subviews
|
|
if (!this.vizView) {
|
|
this.renderWithTemplate(this.model);
|
|
|
|
this.vizView = new VizView({
|
|
width: 'auto',
|
|
height: 600,
|
|
renderMode: 'svg',
|
|
className: 'multiline',
|
|
debounceRender: false,
|
|
vizFn: require('./viz/d3-multiline'),
|
|
data: {
|
|
series: this.model.series.filter(function (s) { return s.selected; }),
|
|
model: this.model
|
|
}
|
|
});
|
|
this.emptyView = new EmptyView();
|
|
|
|
this.renderSubview(this.emptyView, '[data-hook=empty]');
|
|
this.renderSubview(this.vizView, '[data-hook=graph]');
|
|
} else {
|
|
this.vizView.data = {
|
|
series: this.model.series.filter(function (s) { return s.selected; }),
|
|
model: this.model
|
|
};
|
|
this.vizView.redraw();
|
|
}
|
|
}
|
|
});
|