github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/components/chart-primitives/v-annotations.js (about)

     1  import Component from '@glimmer/component';
     2  import { htmlSafe } from '@ember/template';
     3  import { action } 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        };
    55      });
    56    }
    57  
    58    @action
    59    selectAnnotation(annotation) {
    60      if (this.args.annotationClick) this.args.annotationClick(annotation);
    61    }
    62  }