github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/chart-primitives/h-annotations.js (about)

     1  import Component from '@glimmer/component';
     2  import { htmlSafe } from '@ember/template';
     3  import { action, get } from '@ember/object';
     4  import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
     5  
     6  export default class ChartPrimitiveVAnnotations extends Component {
     7    @styleString
     8    get chartAnnotationsStyle() {
     9      return {
    10        width: this.args.width,
    11        left: this.args.left,
    12      };
    13    }
    14  
    15    get processed() {
    16      const { scale, prop, annotations, format, labelProp } = this.args;
    17  
    18      if (!annotations || !annotations.length) return null;
    19  
    20      let sortedAnnotations = annotations.sortBy(prop).reverse();
    21  
    22      return sortedAnnotations.map((annotation) => {
    23        const y = scale(annotation[prop]);
    24        const x = 0;
    25        const formattedY = format()(annotation[prop]);
    26  
    27        return {
    28          annotation,
    29          style: htmlSafe(`transform:translate(${x}px,${y}px)`),
    30          label: annotation[labelProp],
    31          a11yLabel: `${annotation[labelProp]} at ${formattedY}`,
    32          isActive: this.annotationIsActive(annotation),
    33        };
    34      });
    35    }
    36  
    37    annotationIsActive(annotation) {
    38      const { key, activeAnnotation } = this.args;
    39      if (!activeAnnotation) return false;
    40  
    41      if (key) return get(annotation, key) === get(activeAnnotation, key);
    42      return annotation === activeAnnotation;
    43    }
    44  
    45    @action
    46    selectAnnotation(annotation) {
    47      if (this.args.annotationClick) this.args.annotationClick(annotation);
    48    }
    49  }