open-nomad/ui/app/templates/components/line-chart.hbs

<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" this.elementId}} {{concat "desc-" this.elementId}}">
  <title id="{{concat "title-" this.elementId}}">{{this.title}}</title>
  <description id="{{concat "desc-" this.elementId}}">
    {{#if this.description}}
      {{this.description}}
    {{else}}
      X-axis values range from {{this.xRange.firstObject}} to {{this.xRange.lastObject}},
      and Y-axis values range from {{this.yRange.firstObject}} to {{this.yRange.lastObject}}.
    {{/if}}
  </description>
  <defs>
    <linearGradient x1="0" x2="0" y1="0" y2="1" class="{{this.chartClass}}" id="{{this.fillId}}">
      <stop class="start" offset="0%" />
      <stop class="end" offset="100%" />
    </linearGradient>
    <clipPath id="{{this.maskId}}">
      <path class="fill" d="{{this.area}}" />
    </clipPath>
  </defs>
  <g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g>
  <g class="canvas {{this.chartClass}}">
    <path class="line" d="{{this.line}}" />
    <rect class="area" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" fill="url(#{{this.fillId}})" clip-path="url(#{{this.maskId}})" />
    <rect class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
  </g>
  <g aria-hidden="true" class="x-axis axis" transform="translate(0, {{this.xAxisOffset}})"></g>
  <g aria-hidden="true" class="y-axis axis" transform="translate({{this.yAxisOffset}}, 0)"></g>
</svg>
<div data-test-annotations class="line-chart-annotations" style={{this.chartAnnotationsStyle}}>
  {{#each this.processedAnnotations key=this.annotationKey as |annotation|}}
  <div data-test-annotation class="chart-annotation {{annotation.iconClass}} {{annotation.staggerClass}}" style={{annotation.style}}>
      <button
        type="button"
        class="indicator {{if (or
          (and this.annotationKey (eq-by this.annotationKey annotation.annotation this.activeAnnotation))
          (and (not this.annotationKey) (eq annotation.annotation this.activeAnnotation))
        ) "is-active"}}"
        title={{annotation.label}}
        onclick={{action this.annotationClick annotation.annotation}}>
        {{x-icon annotation.icon}}
      </button>
      <div class="line" />
    </div>
  {{/each}}
</div>
<div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
  <p>
    <span class="label">
      <span class="color-swatch {{this.chartClass}}" />
      {{this.activeDatumLabel}}
    </span>
    <span class="value">{{this.activeDatumValue}}</span>
  </p>
</div>