{{#if @dataset}}
  <svg
    data-test-line-chart
    class="chart has-grid"
    {{on "mouseleave" this.removeTooltip}}
    {{did-insert this.renderChart @dataset}}
    {{did-update this.renderChart @dataset}}
  >
  </svg>
{{else}}
  <EmptyState @subTitle={{or @noDataMessage "No data to display"}} @bottomBorder={{true}} />
{{/if}}

{{! TOOLTIP }}

{{#if this.tooltipTarget}}
  {{! Required to set tag name = div https://github.com/yapplabs/ember-modal-dialog/issues/290 }}
  {{! Component must be in curly bracket notation }}
  {{! template-lint-disable no-curly-component-invocation }}
  {{#modal-dialog
    tagName="div"
    tetherTarget=this.tooltipTarget
    targetAttachment="bottom middle"
    attachment="bottom middle"
    offset="35px 0"
  }}
    <div class="chart-tooltip line-chart">
      <p class="bold">{{this.tooltipMonth}}</p>
      <p>{{this.tooltipTotal}}</p>
      <p>{{this.tooltipNew}}</p>
      {{#if this.tooltipUpgradeText}}
        <br />
        <p class="has-text-highlight">{{this.tooltipUpgradeText}}</p>
      {{/if}}
    </div>
    <div class="chart-tooltip-arrow"></div>
  {{/modal-dialog}}
{{/if}}