50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { htmlSafe } from '@ember/template';
|
|
import { action, get } from '@ember/object';
|
|
import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
|
|
|
|
export default class ChartPrimitiveVAnnotations extends Component {
|
|
@styleString
|
|
get chartAnnotationsStyle() {
|
|
return {
|
|
width: this.args.width,
|
|
left: this.args.left,
|
|
};
|
|
}
|
|
|
|
get processed() {
|
|
const { scale, prop, annotations, format, labelProp } = this.args;
|
|
|
|
if (!annotations || !annotations.length) return null;
|
|
|
|
let sortedAnnotations = annotations.sortBy(prop).reverse();
|
|
|
|
return sortedAnnotations.map((annotation) => {
|
|
const y = scale(annotation[prop]);
|
|
const x = 0;
|
|
const formattedY = format()(annotation[prop]);
|
|
|
|
return {
|
|
annotation,
|
|
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);
|
|
}
|
|
}
|