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 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>