Ghost/ghost/admin/app/templates/dashboard.hbs
Rish 05df2bbad4 Added initial charts for dashboard
refs https://github.com/TryGhost/Team/issues/469

- Added MRR chart for last 30 days
- Added initial chart for Total member count
2021-02-18 22:20:58 +05:30

164 lines
7.7 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">
<div class="data">$0</div>
<div class="growth">0.0%</div>
</div>
<div class="gh-dashboard-chart">
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" style="width:100%" />
</div>
</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">0</div>
<div class="growth">0.0%</div>
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="counts" style="width:100%" />
</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">0</div>
<div class="growth">0.0%</div>
</div>
</div>
<div class="gh-dashboard-chart small nodata">
No data
</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">Newsletter 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 nodata">
No data
</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">
<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">
<ul class="gh-dashboard-top-members">
<li class="gh-dashboard-top-member">
<div class="member-details">
<div class="avatar">KL</div>
<span class="name">Kadin Levin</span>
</div>
<span class="open-rate">97%</span>
</li>
<li class="gh-dashboard-top-member">
<div class="member-details">
<div class="avatar">TS</div>
<span class="name">Terry Stanton</span>
</div>
<span class="open-rate">91%</span>
</li>
</ul>
<div class="gh-dashboard-top-members-footer">
<LinkTo @route="members">See all members {{svg-jar "arrow-right"}}</LinkTo>
</div>
</div>
</div>
<div class="gh-dashboard-box grey activity-feed">
<h4 class="gh-dashboard-header">Activity feed</h4>
<div class="content">
{{#if this.events.loading}}
Loading...
{{else}}
{{#if this.events.error}}
<p class="error">
There was an error loading events
<code>{{this.events.error.message}}</code>
</p>
{{else}}
<GhEventTimeline @events={{this.events.data}}/>
{{/if}}
{{/if}}
</div>
</div>
<div class="gh-dashboard-box">
<div class="content">
<p>...</p>
</div>
</div>
</section>
</div>
</section>