<svg
data-test-line-chart
class="chart has-grid"
{{on "mouseleave" this.removeTooltip}}
{{did-insert this.renderChart @dataset @upgradeData}}
{{did-update this.renderChart @dataset @upgradeData}}
>
</svg>
{{! 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}}