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

<LineChart
  @data={{@data}}
  @dataProp={{@dataProp}}
  @xProp="timestamp"
  @yProp={{if @dataProp "percentStack" "percent"}}
  @chartClass={{@chartClass}}
  @timeseries={{true}}
  @title="Stats Time Series Chart"
  @description={{this.description}}
  @xScale={{bind this.xScale this}}
  @yScale={{bind this.yScale this}}
  @xFormat={{this.xFormat}}
  @yFormat={{this.yFormat}}>
  <:svg as |c|>
    {{#if this.useDefaults}}
      <c.Area @data={{@data}} @colorClass={{@chartClass}} />
    {{/if}}
    {{yield c to="svg"}}
  </:svg>
  <:after as |c|>
    {{#if this.useDefaults}}
      <c.Tooltip class="is-snappy" as |series datum|>
        <li>
          <span class="label"><span class="color-swatch {{@chartClass}}" />{{datum.formattedX}}</span>
          <span class="value">{{datum.formattedY}}</span>
        </li>
      </c.Tooltip>
    {{/if}}
    {{yield c to="after"}}
  </:after>
</LineChart>
