{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<div
  class="chart line-chart"
  ...attributes
  {{did-insert this.onInsert}}
  {{did-update this.renderChart}}
  {{did-update this.recomputeXAxis this.xScale}}
  {{did-update this.recomputeYAxis this.yScale}}
  {{window-resize this.updateDimensions}}>
  <svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}">
    <title id="{{this.titleId}}">{{this.title}}</title>
    <desc id="{{this.descriptionId}}">
      {{#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}}
    </desc>
    <g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g>
    {{#if this.ready}}
      {{yield (hash
        Area=(component "chart-primitives/area"
          curve="linear"
          xScale=this.xScale
          yScale=this.yScale
          xProp=this.xProp
          yProp=this.yProp
          width=this.yAxisOffset
          height=this.xAxisOffset)
      ) to="svg"}}
    {{/if}}
    <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>
    <rect data-test-hover-target class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
  </svg>
  {{#if this.ready}}
    {{yield (hash
      VAnnotations=(component "chart-primitives/v-annotations"
        timeseries=@timeseries
        format=this.xFormat
        scale=this.xScale
        prop=this.xProp
        height=this.xAxisOffset)
      HAnnotations=(component "chart-primitives/h-annotations"
        format=this.yFormat
        scale=this.yScale
        prop=this.yProp
        left=this.canvasDimensions.left
        width=this.canvasDimensions.width)
      Tooltip=(component "chart-primitives/tooltip"
        active=this.activeData.length
        style=this.tooltipStyle
        data=this.activeData)
    ) to="after"}}
  {{/if}}
</div>
