Ghost/ghost/admin/app/components/dashboard/members-graphs.hbs
Kevin Ansfield 696fca0f9e Hid members graphs in dashboard until get-started block dismissed or members added
refs https://github.com/TryGhost/Team/issues/1406

- added fetch of a single member to the dashboard initialisation if we don't already have some members loaded in memory
- added `showMembersGraphs` getter used in the conditional for rendering the members graphs block component
  - if `improvedOnboarding` flag is disabled, return `showMemberData` so existing functionality is retained
  - will return `false` if until the single-member fetch has completed if we don't already have any members in memory
  - returns `true` if any members exist or the "get started" dashboard resources block has been dismissed
2022-03-07 13:26:52 +00:00

106 lines
5.5 KiB
Handlebars

<section class="gh-dashboard-area charts" data-test-dashboard-members-graphs>
<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">
{{#if this.mrrStatsLoading}}
Loading...
{{else}}
{{#if this.mrrStatsError}}
<p class="error">
There was an error loading MRR
<code>{{this.mrrStatsError.message}}</code>
</p>
{{else}}
<div class="gh-dashboard-summary">
<div class="data"><span class="currency">{{this.mrrStatsData.currency}}</span>{{format-number this.mrrStatsData.currentAmount}}</div>
<div class="growth {{this.mrrStatsData.percentClass}}">{{this.mrrStatsData.percentGrowth}}%</div>
</div>
{{#if this.mrrStatsData}}
<div class="gh-dashboard-chart">
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} />
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
<div class="gh-dashboard-box total-members">
<div class="gh-dashboard-chart-container">
{{#if this.memberCountStatsLoading}}
Loading...
{{else}}
{{#if this.memberCountStatsError}}
<p class="error">
There was an error loading total members
<code>{{this.memberCountStatsData.message}}</code>
</p>
{{else}}
<div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Total members</h4>
<div class="data-container">
<div class="data">{{format-number this.memberCountStatsData.all.total}}</div>
<div class="growth {{this.memberCountStatsData.all.percentClass}}">{{this.memberCountStatsData.all.percentGrowth}}%</div>
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.all}} />
</div>
{{/if}}
{{/if}}
</div>
</div>
<div class="gh-dashboard-box paid-members">
<div class="gh-dashboard-chart-container">
{{#if this.memberCountStatsLoading}}
Loading...
{{else}}
{{#if this.memberCountStatsError}}
<p class="error">
There was an error loading paid members
<code>{{this.memberCountStatsData.message}}</code>
</p>
{{else}}
<div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Paid members</h4>
<div class="data-container">
<div class="data">{{format-number this.memberCountStatsData.paid.total}}</div>
<div class="growth {{this.memberCountStatsData.paid.percentClass}}">{{this.memberCountStatsData.paid.percentGrowth}}%</div>
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.paid}} />
</div>
{{/if}}
{{/if}}
</div>
</div>
<div class="gh-dashboard-box newsletter-open-rate">
<div class="gh-dashboard-chart-container">
{{#if this.newsletterOpenRatesLoading}}
Loading...
{{else}}
{{#if this.newsletterOpenRatesError}}
<p class="error">
There was an error loading newsletter open rates
<code>{{this.memberCountStatsData.message}}</code>
</p>
{{else}}
<div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Email open rate</h4>
<div class="data-container">
<div class="data">{{this.newsletterOpenRatesData.current}}%</div>
<div class="growth {{this.newsletterOpenRatesData.percentClass}}">{{this.newsletterOpenRatesData.percentGrowth}}%</div>
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @type="bar" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="open-rate" @showRange={{false}} @chartStats={{this.newsletterOpenRatesData}} />
</div>
{{/if}}
{{/if}}
</div>
</div>
</section>