github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/chart-primitives/v-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  const iconFor = {
     7    error: 'cancel-circle-fill',
     8    info: 'info-circle-fill',
     9  };
    10  
    11  const iconClassFor = {
    12    error: 'is-danger',
    13    info: '',
    14  };
    15  
    16  export default class ChartPrimitiveVAnnotations extends Component {
    17    @styleString
    18    get chartAnnotationsStyle() {
    19      return {
    20        height: this.args.height,
    21      };
    22    }
    23  
    24    get processed() {
    25      const { scale, prop, annotations, timeseries, format } = this.args;
    26  
    27      if (!annotations || !annotations.length) return null;
    28  
    29      let sortedAnnotations = annotations.sortBy(prop);
    30      if (timeseries) {
    31        sortedAnnotations = sortedAnnotations.reverse();
    32      }
    33  
    34      let prevX = 0;
    35      let prevHigh = false;
    36      return sortedAnnotations.map((annotation) => {
    37        const x = scale(annotation[prop]);
    38        if (prevX && !prevHigh && Math.abs(x - prevX) < 30) {
    39          prevHigh = true;
    40        } else if (prevHigh) {
    41          prevHigh = false;
    42        }
    43        const y = prevHigh ? -15 : 0;
    44        const formattedX = format(timeseries)(annotation[prop]);
    45  
    46        prevX = x;
    47        return {
    48          annotation,
    49          style: htmlSafe(`transform:translate(${x}px,${y}px)`),
    50          icon: iconFor[annotation.type],
    51          iconClass: iconClassFor[annotation.type],
    52          staggerClass: prevHigh ? 'is-staggered' : '',
    53          label: `${annotation.type} event at ${formattedX}`,
    54          isActive: this.annotationIsActive(annotation),
    55        };
    56      });
    57    }
    58  
    59    annotationIsActive(annotation) {
    60      const { key, activeAnnotation } = this.args;
    61      if (!activeAnnotation) return false;
    62  
    63      if (key) return get(annotation, key) === get(activeAnnotation, key);
    64      return annotation === activeAnnotation;
    65    }
    66  
    67    @action
    68    selectAnnotation(annotation) {
    69      if (this.args.annotationClick) this.args.annotationClick(annotation);
    70    }
    71  }