Ghost/ghost/admin/app/components/gh-members-chart.hbs

<div class="flex justify-between mb6 items-stretch gh-members-chart-wrapper gh-main-width"
    {{did-insert (perform this.fetchStatsTask)}}
>

    {{!-- Chart title/filter graph --}}
    <div class="flex-auto gh-content-box black gh-members-chart-box">
        <div class="flex justify-between items-center gh-members-chart-header">
            <h2 class="gh-members-chart-summary-heading">Total members</h2>
            <div class="view-actions">
                <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
                    <PowerSelect
                        @selected={{this.selectedRange}}
                        @options={{this.availableRanges}}
                        @searchEnabled={{false}}
                        @onChange={{action "changeDateRange"}}
                        @triggerComponent="gh-power-select/trigger"
                        @triggerClass="gh-contentfilter-menu-trigger"
                        @dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"
                        @matchTriggerWidth={{false}}
                        data-test-type-select="true"
                        as |range|
                    >
                        {{range.name}}
                    </PowerSelect>
                </div>
            </div>
        </div>
        <div class="gh-members-chart-container">
            {{#if (not this.stats)}}
                <GhLoadingSpinner />
            {{else}}
                <EmberChart
                    @type="LineWithLine"
                    @options={{this.chartOptions}}
                    @data={{this.chartData}}
                    @height={{300}} />
            {{/if}}
        </div>
        <div class="flex justify-between pa4 pt0 pb2 nt1">
            <span class="f8 midlightgrey">{{this.startDateLabel}}</span>
            <span class="f8 midlightgrey">Today</span>
        </div>
    </div>

    {{!-- Summary --}}
    <div class="gh-content-box grey gh-members-chart-summary flex flex-column justify-between">
        <div class="flex-auto flex flex-column justify-center items-start pa4">
            <h3 class="gh-members-chart-summary-heading">Total Members</h3>
            <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
        </div>
        <div class="flex-auto flex flex-column justify-center items-start pa4">
            {{#if (eq this.selectedRange.days "all-time")}}
                <h3 class="gh-members-chart-summary-heading">All time signups</h3>
            {{else}}
                <h3 class="gh-members-chart-summary-heading">Signed up in the last {{this.selectedRange.days}} days</h3>
            {{/if}}
            <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
        </div>
        <div class="flex-auto flex flex-column justify-center items-start pa4">
            <h3 class="gh-members-chart-summary-heading">Signed up today</h3>
            <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
        </div>
    </div>
</div>