Ghost/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs

<section class="gh-dashboard5-section gh-dashboard5-anchor" {{did-insert this.loadCharts}}>
    <article class="gh-dashboard5-box">
        {{#if this.hasPaidTiers}}
            <Dashboard::v5::Parts::Metric
                @label="Members over time" /> 
        {{else}}
            <Dashboard::v5::Parts::Metric
                @label="Total members"
                @value={{format-number this.totalMembers}}
                @trends={{this.hasTrends}}
                @percentage={{this.totalMembersTrend}}
                @large={{true}} /> 
        {{/if}}

        <div class="gh-dashboard5-hero {{unless this.hasPaidTiers 'is-solo'}}">
            <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-container">
                        <EmberChart
                            @type="line"
                            @data={{this.chartData}}
                            @options={{this.chartOptions}}
                            @height={{if this.hasPaidTiers this.chartHeight this.chartHeightSmall}} />
                    </div>
                    <div class="gh-dashboard5-chart-ticks">
                        <span id="gh-dashboard5-anchor-date-start"> </span>
                        <span id="gh-dashboard5-anchor-date-end"> </span>
                    </div>
                {{/if}}
            </div>

            {{#if this.hasPaidTiers}}
                <article class="gh-dashboard5-columns">
                    <div class="gh-dashboard5-column gh-dashboard5-mrr">
                        <Dashboard::v5::Charts::Mrr />
                    </div>
                    <div class="gh-dashboard5-column gh-dashboard5-breakdown">
                        <Dashboard::v5::Charts::PaidBreakdown />
                    </div>
                    <div class="gh-dashboard5-column gh-dashboard5-mix">
                        <Dashboard::v5::Charts::PaidMix />
                    </div>
                </article>
            {{/if}}
        </div>

        <div class="gh-dashboard5-selects">
            {{#if this.hasPaidTiers}}
                <div class="gh-dashboard5-select">
                    <PowerSelect
                        @selected={{this.selectedDisplayOption}}
                        @options={{this.displayOptions}}
                        @searchEnabled={{false}}
                        @onChange={{this.onDisplayChange}}
                        @triggerComponent="gh-power-select/trigger"
                        @triggerClass="gh-contentfilter-menu-trigger"
                        @dropdownClass="gh-contentfilter-menu-dropdown"
                        @matchTriggerWidth={{false}}
                        as |option|
                    >
                        {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
                    </PowerSelect>
                </div>
            {{/if}}

            <div class="gh-dashboard5-select">
                <PowerSelect
                    @selected={{this.selectedDaysOption}}
                    @options={{this.daysOptions}}
                    @searchEnabled={{false}}
                    @onChange={{this.onDaysChange}}
                    @triggerComponent="gh-power-select/trigger"
                    @triggerClass="gh-contentfilter-menu-trigger"
                    @dropdownClass="gh-contentfilter-menu-dropdown"
                    @matchTriggerWidth={{false}}
                    as |option|
                >
                    {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
                </PowerSelect>
            </div>
        </div>
    </article>
</section>