mirror of https://github.com/rancher/ui.git
83 lines
2.0 KiB
JavaScript
83 lines
2.0 KiB
JavaScript
import Ember from 'ember';
|
|
import ThrottledResize from 'ui/mixins/throttled-resize';
|
|
|
|
const { get, set, computed } = Ember;
|
|
const SHIFT_DIFF = 3;
|
|
const PLOT_HEIGHT = 7;
|
|
|
|
export default Ember.Component.extend(ThrottledResize, {
|
|
tagName: 'div',
|
|
classNames: ['timeline-container'],
|
|
startDate: null,
|
|
endDate: null,
|
|
range: null,
|
|
|
|
init: function() {
|
|
this._super(...arguments);
|
|
|
|
if (!get(this, 'model')) {
|
|
set(this, 'classNames', []);
|
|
}
|
|
|
|
},
|
|
|
|
onResize: function() {
|
|
if (get(this, 'model')) {
|
|
this.plotSnapshots();
|
|
}
|
|
},
|
|
|
|
snapshots: computed('model', function() {
|
|
return this.plotSnapshots();
|
|
}),
|
|
|
|
plotSnapshots() {
|
|
let prevPlot = null;
|
|
let snapshots = get(this, 'model').sortBy('created');
|
|
let model = get(this, 'model');
|
|
let start = model[0].created;
|
|
let end = model[model.length - 1].created;
|
|
let range = moment(end).diff(start, 'seconds');
|
|
|
|
snapshots.forEach((snapshot) => {
|
|
let myDate = snapshot.created;
|
|
let fromStart = moment(myDate).diff(start, 'seconds');
|
|
let shift = (fromStart/range) * 100;
|
|
|
|
if (prevPlot !== null && prevPlot >= 0 && shift !== 100) {
|
|
if ((shift - prevPlot) <= SHIFT_DIFF) {
|
|
shift = prevPlot + SHIFT_DIFF;
|
|
}
|
|
}
|
|
|
|
prevPlot = shift;
|
|
|
|
set(snapshot, 'position', Ember.String.htmlSafe(`left: calc(${shift}% - ${PLOT_HEIGHT});`));
|
|
return snapshot;
|
|
});
|
|
|
|
prevPlot = null;
|
|
|
|
snapshots.reverse().forEach((snapshot) => {
|
|
|
|
let myDate = snapshot.created;
|
|
let fromStart = moment(myDate).diff(start, 'seconds');
|
|
let shift = (fromStart/range) * 100;
|
|
|
|
if (prevPlot !== null && shift >= 0) {
|
|
if (Math.abs(shift - prevPlot) <= SHIFT_DIFF) {
|
|
shift = Math.max(0, prevPlot - SHIFT_DIFF);
|
|
}
|
|
}
|
|
|
|
prevPlot = shift;
|
|
|
|
set(snapshot, 'position', Ember.String.htmlSafe(`left: calc(${shift}% - ${PLOT_HEIGHT}px);`));
|
|
return snapshot;
|
|
});
|
|
|
|
|
|
return snapshots.reverse();
|
|
},
|
|
});
|