<section class="gh-dashboard5-section gh-dashboard5-email-open-rate" {{did-insert this.loadCharts}}>
    <article class="gh-dashboard5-box">
        <Dashboard::v5::Parts::Metric
            @label="Email open rate"
            @value="{{this.currentOpenRate}}%"
            />

        <div class="gh-dashboard5-chart">
            {{#if this.loading}}
                <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
            {{else}}
                <div class="gh-dashboard5-chart-ticks">
                    <span>100%</span>
                    <span>75%</span>
                    <span>50%</span>
                    <span>25%</span>
                </div>
                <div class="gh-dashboard5-chart-container">
                    <EmberChart
                        @type={{this.chartType}}
                        @data={{this.chartData}}
                        @options={{this.chartOptions}}
                        @height={{this.chartHeight}} />
                </div>
            {{/if}}
        </div>
    </article>
</section>
