1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
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();
}
}
});
|
