Convert ScaleEventsChart into a glimmer component

This commit is contained in:
Michael Lange 2021-02-22 17:47:18 -08:00
parent 2fff2ac3e4
commit 9277ecd2b7
2 changed files with 16 additions and 19 deletions

View File

@ -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;
}
}

View File

@ -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(