Ghost/ghost/admin/app/components/posts/analytics.hbs

<section class="gh-canvas" {{did-insert this.loadData}}>

    <GhCanvasHeader class="gh-canvas-header stacked gh-post-analytics-header">
        <div class="gh-canvas-breadcrumb">
            <LinkTo @route="posts">
                Posts
            </LinkTo>
            {{svg-jar "arrow-right-small"}}Analytics
        </div>
        <h2 class="gh-canvas-title gh-post-title">
            {{this.post.title}}
        </h2>
        <div class="gh-post-analytics-meta">
            <div class="gh-post-analytics-meta-text">
                {{#if
                    (or this.post.isSent
                        (and this.post.isPublished this.post.email)
                        this.post.willEmail
                    )
                }}
                    {{#if this.post.emailOnly}}
                        Sent
                    {{else}}
                        Published and sent
                    {{/if}}
                {{else}}
                    Published on your site
                {{/if}}

                {{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
                    on
                    {{moment-format publishedAt "D MMM YYYY"}}
                    at
                    {{moment-format publishedAt "HH:mm"}}
                {{/let}}
            </div>
            <LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="gh-post-list-cta edit" title="">
                {{svg-jar "pen" title=""}}<span>Edit post</span>
            </LinkTo>
        </div>
    </GhCanvasHeader>

    <h4 class="gh-main-section-header small bn">
        Engagement
    </h4>
    <div class="gh-post-analytics-box">
        {{#if (or this.post.isSent (and this.post.isPublished this.post.email))}}
            <div class="gh-post-analytics-item">
                <LinkTo @route="members" @query={{hash filterParam=(concat "emails.post_id:[" this.post.id "]") }}>
                    <h3>{{format-number this.post.email.emailCount}}</h3>
                    <p>Sent</p>
                </LinkTo>
            </div>

            {{#if this.post.showEmailOpenAnalytics }}
                <div class="gh-post-analytics-item">
                    <LinkTo @route="members" @query={{hash filterParam=(concat "opened_emails.post_id:[" this.post.id "]") }}>
                        <h3>{{this.post.email.openRate}}<sup>%</sup></h3>
                        <p><strong>{{format-number this.post.email.openedCount}}</strong> opened</p>
                    </LinkTo>
                </div>
            {{/if}}

            {{#if this.post.showEmailClickAnalytics }}
                <div class="gh-post-analytics-item">
                    <LinkTo @route="members" @query={{hash filterParam=(concat "clicked_links.post_id:[" this.post.id "]") }}>
                        <h3>{{this.post.clickRate}}<sup>%</sup></h3>
                        <p><strong>{{format-number this.post.count.clicks}}</strong> clicked</p>
                    </LinkTo>
                </div>
            {{/if}}
        {{/if}}

        {{#if this.post.showAttributionAnalytics }}
            <div class="gh-post-analytics-item">
                <LinkTo @route="members" @query={{hash filterParam=(concat "signup:[" this.post.id "]") }}>
                    <h3>{{format-number this.post.count.signups}}</h3>
                    <p>{{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
                </LinkTo>
            </div>

            {{#if this.post.showPaidAttributionAnalytics }}
                <div class="gh-post-analytics-item">
                    <LinkTo @route="members" @query={{hash filterParam=(concat "conversion:[" this.post.id "]") }}>
                        <h3>{{format-number this.post.count.paid_conversions}}</h3>
                        <p><span class="hide-when-small">Paid </span>{{gh-pluralize this.post.count.paid_conversions "conversion" without-count=true}}</p>
                    </LinkTo>
                </div>
            {{/if}}
        {{/if}}
    </div>

    {{#if this.isLoaded }}
        {{#if this.showLinks }}
            {{#if (is-empty this.links) }}
                {{!-- Empty state --}}
            {{else}}
                <Posts::LinksTable @links={{this.links}} />
            {{/if}}
        {{/if}}

        {{#if this.showSources }}
            {{#if (is-empty this.sources) }}
                {{!-- Empty state --}}
            {{else}}
                <h4 class="gh-main-section-header small bn">
                    Source attribution
                </h4>
                <div class="gh-post-analytics-box column">
                    <div class="gh-attribution-box">
                        <div class="gh-dashboard-select" style="top:40px;right:24px">
                            <PowerSelect
                                @selected={{this.selectedDisplayOption}}
                                @options={{this.allowedDisplayOptions}}
                                @searchEnabled={{false}}
                                @onChange={{this.onDisplayChange}}
                                @triggerComponent={{component "gh-power-select/trigger"}}
                                @triggerClass="gh-contentfilter-menu-trigger"
                                @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
                                @matchTriggerWidth={{false}}
                                @disabled={{this.isDropdownDisabled}}
                                @horizontalPosition="right"

                                as |option|
                            >
                                {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
                            </PowerSelect>
                        </div>
                        <div class="gh-attribution-table-column">
                            <MemberAttribution::SourceAttributionTable
                                @sources={{this.sources}}
                                @sortColumn={{this.sortColumn}}
                            />
                        </div>
                        <div class="gh-attribution-chart-column">
                            <div class="gh-attribution-chart-column-inner">
                                <MemberAttribution::SourceAttributionChart
                                    @sources={{this.sources}}
                                    @sortColumn={{this.sortColumn}}
                                />
                                <div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
                                    <div class="gh-dashboard-tooltip-value">
                                        -
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {{/if}}
        {{/if}}

        <h4 class="gh-main-section-header small bn">
            Get started with analytics
        </h4>
        <div class="gh-post-analytics-box resources">
            <a href="https://ghost.org/help/post-analytics/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">
                <div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-1.jpg);"></div>
                <div class="flex flex-column justify-between">
                    <div>
                        <h3>Understanding analytics in Ghost</h3>
                        <p>Find out how to review the performance of your content and get the most out of post analytics in Ghost.</p>
                    </div>
                    <div class="gh-btn gh-btn-link">Read more &rarr;</div>
                </div>
            </a>
            <a href="https://ghost.org/resources/content-distribution/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">
                <div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-2.jpg);"></div>
                <div class="flex flex-column justify-between">
                    <div>
                        <h3>How to get your content seen online</h3>
                        <p>Use these content distribution tactics to get more people to discover your work and increase engagement.</p>
                    </div>
                    <div class="gh-btn gh-btn-link">Read more &rarr;</div>
                </div>
            </a>
        </div>
    {{else}}
        <div class="gh-post-analytics-loading">
            <div class="gh-loading-spinner-outer">
                <div class="gh-loading-spinner"></div>
            </div>
        </div>
    {{/if}}
</section>