Ghost/ghost/admin/app/components/dashboard/members-graphs.hbs

<section class="gh-dashboard-area charts" data-test-dashboard-members-graphs>
    <div class="gh-dashboard-box mrr">
        <div class="flex items-center justify-between">
            <h4 class="gh-dashboard-header">MRR</h4>
            <h4 class="gh-dashboard-header secondary">30 days</h4>
        </div>
        <div class="gh-dashboard-chart-container">
            {{#if this.mrrStatsLoading}}
                Loading...
            {{else}}
                {{#if this.mrrStatsError}}
                    <p class="error">
                        There was an error loading MRR
                        <code>{{this.mrrStatsError.message}}</code>
                    </p>
                {{else}}
                    <div class="gh-dashboard-summary">
                        <div class="data"><span class="currency">{{this.mrrStatsData.currency}}</span>{{format-number this.mrrStatsData.currentAmount}}</div>
                        <div class="growth {{this.mrrStatsData.percentClass}}">{{this.mrrStatsData.percentGrowth}}%</div>
                    </div>
                    {{#if this.mrrStatsData}}
                        <div class="gh-dashboard-chart">
                            <GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} />
                        </div>
                    {{/if}}
                {{/if}}
            {{/if}}
        </div>
    </div>
    <div class="gh-dashboard-box total-members">
        <div class="gh-dashboard-chart-container">
            {{#if this.memberCountStatsLoading}}
                Loading...
            {{else}}
                {{#if this.memberCountStatsError}}
                    <p class="error">
                        There was an error loading total members
                        <code>{{this.memberCountStatsData.message}}</code>
                    </p>
                {{else}}
                    <div class="gh-dashboard-summary small">
                        <h4 class="gh-dashboard-header">Total members</h4>
                        <div class="data-container">
                            <div class="data">{{format-number this.memberCountStatsData.all.total}}</div>
                            <div class="growth {{this.memberCountStatsData.all.percentClass}}">{{this.memberCountStatsData.all.percentGrowth}}%</div>
                        </div>
                    </div>
                    <div class="gh-dashboard-chart small">
                        <GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.all}} />
                    </div>
                {{/if}}
            {{/if}}
        </div>
    </div>
    <div class="gh-dashboard-box paid-members">
        <div class="gh-dashboard-chart-container">
            {{#if this.memberCountStatsLoading}}
                Loading...
            {{else}}
                {{#if this.memberCountStatsError}}
                    <p class="error">
                        There was an error loading paid members
                        <code>{{this.memberCountStatsData.message}}</code>
                    </p>
                {{else}}
                    <div class="gh-dashboard-summary small">
                        <h4 class="gh-dashboard-header">Paid members</h4>
                        <div class="data-container">
                            <div class="data">{{format-number this.memberCountStatsData.paid.total}}</div>
                            <div class="growth {{this.memberCountStatsData.paid.percentClass}}">{{this.memberCountStatsData.paid.percentGrowth}}%</div>
                        </div>
                    </div>
                    <div class="gh-dashboard-chart small">
                        <GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.paid}} />
                    </div>
                {{/if}}
            {{/if}}
        </div>
    </div>
    <div class="gh-dashboard-box newsletter-open-rate">
        <div class="gh-dashboard-chart-container">
            {{#if this.newsletterOpenRatesLoading}}
                Loading...
            {{else}}
                {{#if this.newsletterOpenRatesError}}
                    <p class="error">
                        There was an error loading newsletter open rates
                        <code>{{this.memberCountStatsData.message}}</code>
                    </p>
                {{else}}
                    <div class="gh-dashboard-summary small">
                        <h4 class="gh-dashboard-header">Email open rate</h4>

                        <div class="data-container">
                            <div class="data">{{this.newsletterOpenRatesData.current}}%</div>
                            <div class="growth {{this.newsletterOpenRatesData.percentClass}}">{{this.newsletterOpenRatesData.percentGrowth}}%</div>
                        </div>
                    </div>
                    <div class="gh-dashboard-chart small">
                        <GhMembersChart @type="bar" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="open-rate" @showRange={{false}} @chartStats={{this.newsletterOpenRatesData}} />
                    </div>
                {{/if}}
            {{/if}}
        </div>
    </div>
</section>