mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 10:53:34 +03:00
183 lines
9.4 KiB
Handlebars
183 lines
9.4 KiB
Handlebars
<section class="gh-canvas">
|
|
<GhCanvasHeader class="gh-canvas-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>
|
|
Dashboard
|
|
</h2>
|
|
</GhCanvasHeader>
|
|
|
|
<div class="view-container gh-dashboard">
|
|
<section class="gh-dashboard-area charts">
|
|
<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">
|
|
<div class="gh-dashboard-summary">
|
|
{{#if this.mrrStatsData}}
|
|
<div class="data">{{this.mrrStatsData.current}}</div>
|
|
<div class="growth">{{this.mrrStatsData.percentGrowth}}%</div>
|
|
{{else}}
|
|
<div class="data">$0</div>
|
|
<div class="growth">0.0%</div>
|
|
{{/if}}
|
|
</div>
|
|
{{#if this.mrrStatsData}}
|
|
<div class="gh-dashboard-chart">
|
|
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} />
|
|
</div>
|
|
{{else}}
|
|
<div class="gh-dashboard-chart nodata">
|
|
No data
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-box total-members">
|
|
<div class="gh-dashboard-chart-container">
|
|
<div class="gh-dashboard-summary small">
|
|
<h4 class="gh-dashboard-header">Total members</h4>
|
|
<div class="data-container">
|
|
<div class="data">{{this.memberCountStatsData.all.total}}</div>
|
|
<div class="growth">{{this.memberCountStatsData.all.percentGrowth}}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-chart small">
|
|
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.all}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-box paid-members">
|
|
<div class="gh-dashboard-chart-container">
|
|
<div class="gh-dashboard-summary small">
|
|
<h4 class="gh-dashboard-header">Paid members</h4>
|
|
<div class="data-container">
|
|
<div class="data">{{this.memberCountStatsData.paid.total}}</div>
|
|
<div class="growth">{{this.memberCountStatsData.paid.percentGrowth}}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-chart small">
|
|
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.paid}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-box newsletter-open-rate">
|
|
<div class="gh-dashboard-chart-container">
|
|
<div class="gh-dashboard-summary small">
|
|
<h4 class="gh-dashboard-header">Last post open rate</h4>
|
|
<div class="data-container">
|
|
<div class="data">0%</div>
|
|
<div class="growth">0.0%</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-chart small">
|
|
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.newsletterOpenRatesData}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="gh-dashboard-area mixed">
|
|
{{#if (and this.session.user.isOwner (not this.feature.launchComplete))}}
|
|
<div class="gh-dashboard-box green">
|
|
<div class="content">
|
|
<h3>Launch your site</h3>
|
|
<p>You are just a few steps away from launching your membership Ghost site.</p>
|
|
</div>
|
|
<div class="footer">
|
|
<LinkTo class="gh-btn gh-btn-green" @route="launch"><span>Set up your site</span></LinkTo>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="gh-dashboard-container col-2">
|
|
<div class="gh-dashboard-box">
|
|
<div class="content">
|
|
<h4>Introduction to Members</h4>
|
|
<p>The native Members feature makes it possible to launch a membership business, develop a direct relationship with your audience and generate revenue from your creative work.</p>
|
|
</div>
|
|
<div class="footer">
|
|
<a class="gh-btn gh-btn-outline" href="https://ghost.org/help/members-introduction/" target="_blank" rel="noopener"><span>Learn more about Members</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-box">
|
|
<div class="content">
|
|
<h4>Customise Members experience</h4>
|
|
<p>Set membership signup details in Portal settings, remove or add your site's name and logo in newsletter emails.</p>
|
|
</div>
|
|
<div class="footer">
|
|
<LinkTo class="gh-btn gh-btn-outline" @route="settings"><span>Portal settings</span></LinkTo>
|
|
<LinkTo class="gh-btn gh-btn-outline ml2" @route="settings.members-email"><span>Email design</span></LinkTo>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-container">
|
|
<div class="gh-dashboard-box">
|
|
<div class="content">
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="gh-dashboard-area members-activity">
|
|
{{#if (and this.showTopMembers this.topMembersData)}}
|
|
<div class="gh-dashboard-box grey activity-feed">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="gh-dashboard-header">Top members</h4>
|
|
<h4 class="gh-dashboard-header secondary">Open rate</h4>
|
|
</div>
|
|
<div class="gh-dashboard-list nodata">
|
|
{{#if this.topMembersLoading}}
|
|
Loading...
|
|
{{else}}
|
|
{{#if this.topMembersError}}
|
|
<p class="error">
|
|
There was an error loading events
|
|
<code>{{this.events.error.message}}</code>
|
|
</p>
|
|
{{else}}
|
|
<ul class="gh-dashboard-top-members">
|
|
{{#each this.topMembersData as |member|}}
|
|
<li class="gh-dashboard-top-member">
|
|
<LinkTo class="member-details" @route="member" @model="{{member.id}}">
|
|
<GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
|
|
<span class="name">{{member.name}}</span>
|
|
</LinkTo>
|
|
<span class="open-rate">{{member.emailOpenRate}}%</span>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/if}}
|
|
{{/if}}
|
|
<div class="gh-dashboard-top-members-footer">
|
|
<LinkTo @route="members">See all members {{svg-jar "arrow-right"}}</LinkTo>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
<div class="gh-dashboard-box grey activity-feed">
|
|
<h4 class="gh-dashboard-header">Activity feed</h4>
|
|
<div class="content">
|
|
{{#if this.eventsLoading}}
|
|
Loading...
|
|
{{else}}
|
|
{{#if this.eventsError}}
|
|
<p class="error">
|
|
There was an error loading events
|
|
<code>{{this.eventsError.message}}</code>
|
|
</p>
|
|
{{else}}
|
|
<GhEventTimeline @events={{this.eventsData}}/>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
<div class="gh-dashboard-box">
|
|
<div class="content">
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section> |