Convert ScaleEventsChart into a glimmer component
This commit is contained in:
parent
2fff2ac3e4
commit
9277ecd2b7
|
@ -1,19 +1,17 @@
|
|||
import Component from '@ember/component';
|
||||
import Component from '@glimmer/component';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import { get } from '@ember/object';
|
||||
import { copy } from 'ember-copy';
|
||||
import { computed, get } from '@ember/object';
|
||||
import { tagName } from '@ember-decorators/component';
|
||||
import classic from 'ember-classic-decorator';
|
||||
|
||||
@classic
|
||||
@tagName('')
|
||||
export default class ScaleEventsChart extends Component {
|
||||
events = [];
|
||||
/** Args
|
||||
events = []
|
||||
*/
|
||||
|
||||
activeEvent = null;
|
||||
@tracked activeEvent = null;
|
||||
|
||||
@computed('annotations', 'events.[]')
|
||||
get data() {
|
||||
const data = this.events.filterBy('hasCount').sortBy('time');
|
||||
const data = this.args.events.filterBy('hasCount').sortBy('time');
|
||||
|
||||
// Extend the domain of the chart to the current time
|
||||
data.push({
|
||||
|
@ -33,9 +31,8 @@ export default class ScaleEventsChart extends Component {
|
|||
return data;
|
||||
}
|
||||
|
||||
@computed('events.[]')
|
||||
get annotations() {
|
||||
return this.events.rejectBy('hasCount').map(ev => ({
|
||||
return this.args.events.rejectBy('hasCount').map(ev => ({
|
||||
type: ev.error ? 'error' : 'info',
|
||||
time: ev.time,
|
||||
event: copy(ev),
|
||||
|
@ -46,11 +43,11 @@ export default class ScaleEventsChart extends Component {
|
|||
if (this.activeEvent && get(this.activeEvent, 'event.uid') === get(ev, 'event.uid')) {
|
||||
this.closeEventDetails();
|
||||
} else {
|
||||
this.set('activeEvent', ev);
|
||||
this.activeEvent = ev;
|
||||
}
|
||||
}
|
||||
|
||||
closeEventDetails() {
|
||||
this.set('activeEvent', null);
|
||||
this.activeEvent = null;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupTest } from 'ember-qunit';
|
||||
import sinon from 'sinon';
|
||||
import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory';
|
||||
|
||||
module('Unit | Component | scale-events-chart', function(hooks) {
|
||||
setupTest(hooks);
|
||||
setupGlimmerComponentFactory(hooks, 'scale-events-chart');
|
||||
|
||||
hooks.beforeEach(function() {
|
||||
this.refTime = new Date();
|
||||
|
@ -16,13 +18,12 @@ module('Unit | Component | scale-events-chart', function(hooks) {
|
|||
});
|
||||
|
||||
test('the current date is appended as a datum for the line chart to render', function(assert) {
|
||||
const chart = this.owner.factoryFor('component:scale-events-chart').create();
|
||||
const events = [
|
||||
{ time: new Date('2020-08-02T04:06:00'), count: 2, hasCount: true },
|
||||
{ time: new Date('2020-08-01T04:06:00'), count: 2, hasCount: true },
|
||||
];
|
||||
|
||||
chart.set('events', events);
|
||||
const chart = this.createComponent({ events });
|
||||
|
||||
assert.equal(chart.data.length, events.length + 1);
|
||||
assert.deepEqual(chart.data.slice(0, events.length), events.sortBy('time'));
|
||||
|
@ -33,7 +34,6 @@ module('Unit | Component | scale-events-chart', function(hooks) {
|
|||
});
|
||||
|
||||
test('if the earliest annotation is outside the domain of the events, the earliest annotation time is added as a datum for the line chart to render', function(assert) {
|
||||
const chart = this.owner.factoryFor('component:scale-events-chart').create();
|
||||
const annotationOutside = [
|
||||
{ time: new Date('2020-08-01T04:06:00'), hasCount: false, error: true },
|
||||
{ time: new Date('2020-08-02T04:06:00'), count: 2, hasCount: true },
|
||||
|
@ -45,7 +45,7 @@ module('Unit | Component | scale-events-chart', function(hooks) {
|
|||
{ time: new Date('2020-08-03T04:06:00'), count: 2, hasCount: true },
|
||||
];
|
||||
|
||||
chart.set('events', annotationOutside);
|
||||
const chart = this.createComponent({ events: annotationOutside });
|
||||
|
||||
assert.equal(chart.data.length, annotationOutside.length + 1);
|
||||
assert.deepEqual(
|
||||
|
@ -57,7 +57,7 @@ module('Unit | Component | scale-events-chart', function(hooks) {
|
|||
assert.equal(appendedDatum.count, annotationOutside[1].count);
|
||||
assert.equal(+appendedDatum.time, +annotationOutside[0].time);
|
||||
|
||||
chart.set('events', annotationInside);
|
||||
chart.args.events = annotationInside;
|
||||
|
||||
assert.equal(chart.data.length, annotationOutside.length);
|
||||
assert.deepEqual(
|
||||
|
|
Loading…
Reference in New Issue