luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Move complex annotation hbs logic into JS

Browse source 
As @backspace pointed out, we're processing a bunch of other stuff
anyway, so might as well process the active state there too where it's
more likely to be expected.
This commit is contained in:
Michael Lange 2021-03-09 16:46:49 -08:00
parent e58f67c417
commit 744f86eb65
4 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/app/components/chart-primitives/h-annotations.hbs
View file

@ -4,10 +4,7 @@
<button
type="button"
title={{annotation.a11yLabel}}
class="indicator {{if (or
(and @key (eq-by @key annotation.annotation @activeAnnotation))
(and (not @key) (eq annotation.annotation @activeAnnotation))
) "is-active"}}"
class="indicator {{if annotation.isActive "is-active"}}"
{{on "click" (fn this.selectAnnotation annotation.annotation)}}>
{{annotation.label}}
</button>

11
ui/app/components/chart-primitives/h-annotations.js
View file

@ -1,6 +1,6 @@
import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';
import { action } from '@ember/object';
import { action, get } from '@ember/object';
import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
export default class ChartPrimitiveVAnnotations extends Component {
@ -29,10 +29,19 @@ export default class ChartPrimitiveVAnnotations extends Component {
style: htmlSafe(`transform:translate(${x}px,${y}px)`),
label: annotation[labelProp],
a11yLabel: `${annotation[labelProp]} at ${formattedY}`,
isActive: this.annotationIsActive(annotation),
};
});
}
annotationIsActive(annotation) {
const { key, activeAnnotation } = this.args;
if (!activeAnnotation) return false;
if (key) return get(annotation, key) === get(activeAnnotation, key);
return annotation === activeAnnotation;
}
@action
selectAnnotation(annotation) {
if (this.args.annotationClick) this.args.annotationClick(annotation);

5
ui/app/components/chart-primitives/v-annotations.hbs
View file

@ -4,10 +4,7 @@
<button
type="button"
title={{annotation.label}}
class="indicator {{if (or
(and @key (eq-by @key annotation.annotation @activeAnnotation))
(and (not @key) (eq annotation.annotation @activeAnnotation))
) "is-active"}}"
class="indicator {{if annotation.isActive "is-active"}}"
{{on "click" (fn this.selectAnnotation annotation.annotation)}}>
{{x-icon annotation.icon}}
</button>

12
ui/app/components/chart-primitives/v-annotations.js
View file

@ -1,6 +1,6 @@
import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';
import { action } from '@ember/object';
import { action, get } from '@ember/object';
import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
const iconFor = {
@ -51,10 +51,20 @@ export default class ChartPrimitiveVAnnotations extends Component {
iconClass: iconClassFor[annotation.type],
staggerClass: prevHigh ? 'is-staggered' : '',
label: `${annotation.type} event at ${formattedX}`,
isActive: this.annotationIsActive(annotation),
};
});
}
annotationIsActive(annotation) {
const { key, activeAnnotation } = this.args;
console.log(key, activeAnnotation, annotation);
if (!activeAnnotation) return false;
if (key) return get(annotation, key) === get(activeAnnotation, key);
return annotation === activeAnnotation;
}
@action
selectAnnotation(annotation) {
if (this.args.annotationClick) this.args.annotationClick(annotation);