75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import Ember from 'ember';
|
|
import moment from 'moment';
|
|
import Graphable from 'flaredown/components/chart/graphable';
|
|
import * as d3 from "d3";
|
|
|
|
const {
|
|
$,
|
|
get,
|
|
computed,
|
|
Component,
|
|
isPresent,
|
|
computed: { alias },
|
|
} = Ember;
|
|
|
|
export default Component.extend(Graphable, {
|
|
yRulers: [0, 1, 2, 3, 4],
|
|
|
|
name: alias('model.name'),
|
|
|
|
points: computed('data', function() {
|
|
return get(this, 'data').filter( (item) => {
|
|
return $.isNumeric(item.y);
|
|
}).map( (item) => {
|
|
let x = get(this, 'xScale')(item.x);
|
|
let y = get(this, 'yScale')(item.y) - 4; // minus radius
|
|
|
|
return {
|
|
x,
|
|
y,
|
|
tip: {
|
|
label: item.label,
|
|
x: x - 15,
|
|
y: y - 10
|
|
}
|
|
};
|
|
});
|
|
}),
|
|
|
|
yScale: computed('data', function() {
|
|
return d3.scale.linear().range([get(this, 'height') , 0]).domain([-1, 5]);
|
|
}),
|
|
|
|
data: computed('checkins', function() {
|
|
var trackable = get(this, 'model');
|
|
var type = get(trackable, 'constructor.modelName');
|
|
var key = type.pluralize();
|
|
var timeline = get(this, 'timeline') || [];
|
|
|
|
return timeline.map( (day) => {
|
|
var filteredCheckins = get(this, 'checkins').filter((checkin) => (
|
|
get(checkin, 'formattedDate') === moment(day).format("YYYY-MM-DD")
|
|
))
|
|
var coordinate = { x: day, y: null };
|
|
|
|
if(filteredCheckins.length) {
|
|
var items = filteredCheckins.map(item => (
|
|
get(item, key).findBy(`${type}.id`, get(trackable, 'id'))
|
|
)).filter(Boolean)
|
|
|
|
if (items.length) {
|
|
var allItemValues = items.map(item => (get(item, 'value')))
|
|
var averageItemValue = allItemValues.reduce((acc, val) => (acc + val), 0) / allItemValues.length
|
|
|
|
if (isPresent(averageItemValue) && $.isNumeric(averageItemValue)) {
|
|
coordinate.label = averageItemValue
|
|
coordinate.y = averageItemValue
|
|
}
|
|
}
|
|
}
|
|
|
|
return coordinate;
|
|
}).sortBy('x');
|
|
}),
|
|
});
|