90 lines
1.9 KiB
JavaScript
90 lines
1.9 KiB
JavaScript
import Ember from 'ember';
|
|
import * as d3 from "d3";
|
|
|
|
/* no-unexpected-multiline: "error" */
|
|
|
|
const {
|
|
get,
|
|
set,
|
|
Mixin,
|
|
isEmpty,
|
|
computed,
|
|
getProperties,
|
|
} = Ember;
|
|
|
|
export default Mixin.create({
|
|
tagName: 'g',
|
|
classNames: 'chart',
|
|
attributeBindings: ['transform'],
|
|
|
|
transform: computed('height', 'padding', 'chartOffset', function() {
|
|
return `translate(0,${get(this, 'chartOffset')})`;
|
|
}),
|
|
|
|
nestedTransform: computed('height', 'startAt', 'data', function() {
|
|
return `translate(${ - parseFloat(get(this, 'xScale')( get(this, 'startAt') ) )}, 5)`;
|
|
}),
|
|
|
|
xDomain: computed('data', function() {
|
|
return d3.extent(get(this, 'data'), d => d.x);
|
|
}),
|
|
|
|
xScale: computed('data', function() {
|
|
return(
|
|
d3
|
|
.time
|
|
.scale()
|
|
.range([0, get(this, 'width')])
|
|
.domain(get(this, 'xDomain'))
|
|
);
|
|
}),
|
|
|
|
lineData: computed('data', function() {
|
|
return get(this, 'data').reject(item => isEmpty(item.y));
|
|
}),
|
|
|
|
/*eslint-disable no-unexpected-multiline*/
|
|
lineFunction: computed('lineData', function() {
|
|
return(
|
|
d3
|
|
.svg
|
|
.line()
|
|
.x(this.getX.bind(this))
|
|
.y(this.getY.bind(this))
|
|
.interpolate('linear')
|
|
(get(this, 'lineData'))
|
|
);
|
|
}),
|
|
/*eslint-enable no-unexpected-multiline*/
|
|
|
|
getX(d) {
|
|
return get(this, 'xScale')(d.x);
|
|
},
|
|
|
|
getY(d) {
|
|
return get(this, 'yScale')(d.y) - 4; // minus radius
|
|
},
|
|
|
|
actions: {
|
|
openPointTooltip(point) {
|
|
set(this, 'openPointTooltip', true);
|
|
set(this, 'currentPoint', point);
|
|
},
|
|
|
|
closePointTooltip() {
|
|
set(this, 'openPointTooltip', false);
|
|
set(this, 'currentPoint', null);
|
|
},
|
|
|
|
hideChart() {
|
|
const {
|
|
name,
|
|
category,
|
|
chartsVisibilityService,
|
|
} = getProperties(this, 'name', 'category', 'chartsVisibilityService');
|
|
|
|
chartsVisibilityService.setVisibility(false, category, name);
|
|
},
|
|
}
|
|
});
|