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

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

    <GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
        <div class="flex flex-column flex-grow-1">
            <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 this.post.hasBeenEmailed }}
                        {{#if this.post.emailOnly}}
                            Sent
                        {{else}}
                            Published and sent
                        {{/if}}
                    {{else}}
                        Published
                        {{#if @post.didEmailFail}}
                            but failed to send
                        {{else}}
                            on your site
                        {{/if}}
                    {{/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>
        </div>
    </GhCanvasHeader>

    <h4 class="gh-main-section-header small bn">
        Engagement
    </h4>
    <div class="gh-post-analytics-box">
        {{#if this.post.hasBeenEmailed}}
            <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>{{format-number this.post.email.openedCount}}</h3>
                        <p>Opened &mdash; <strong>{{this.post.email.openRate}}%</strong></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>{{format-number this.post.count.clicks}}</h3>
                        <p>Clicked &mdash; <strong>{{this.post.clickRate}}%</strong></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">
                    Growth from this post
                </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}}
                                @setSortColumn={{this.setSortColumn}}
                            />
                        </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>