Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added free members chart to labs dashboard

Browse source 
no issue

- added free members to dashboard controller's count stats data
- moved email open rate chart into it's own dashboard box
- added free members count chart under paid members chart (where email open rate used to be)
This commit is contained in:
Kevin Ansfield 2021-08-07 08:57:06 +01:00
parent 30756f8882
commit 5173d556f9
2 changed files with 52 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ghost/admin/app/controllers/dashboard-labs.js
View file

@ -112,10 +112,13 @@ export default class DashboardController extends Controller {
const dateValues = Object.values(statsDateObj); const dateValues = Object.values(statsDateObj);
const currentAllCount = dateValues.length ? dateValues[dateValues.length - 1].total : 0; const currentAllCount = dateValues.length ? dateValues[dateValues.length - 1].total : 0;
const currentPaidCount = dateValues.length ? dateValues[dateValues.length - 1].paid : 0; const currentPaidCount = dateValues.length ? dateValues[dateValues.length - 1].paid : 0;
const currentFreeCount = dateValues.length ? dateValues[dateValues.length - 1].free : 0;
const rangeStartAllCount = dateValues.length ? dateValues[0].total : 0; const rangeStartAllCount = dateValues.length ? dateValues[0].total : 0;
const rangeStartPaidCount = dateValues.length ? dateValues[0].paid : 0; const rangeStartPaidCount = dateValues.length ? dateValues[0].paid : 0;
const rangeStartFreeCount = dateValues.length ? dateValues[0].free : 0;
const allCountPercentGrowth = rangeStartAllCount !== 0 ? ((currentAllCount - rangeStartAllCount) / rangeStartAllCount) * 100 : 0; const allCountPercentGrowth = rangeStartAllCount !== 0 ? ((currentAllCount - rangeStartAllCount) / rangeStartAllCount) * 100 : 0;
const paidCountPercentGrowth = rangeStartPaidCount !== 0 ? ((currentPaidCount - rangeStartPaidCount) / rangeStartPaidCount) * 100 : 0; const paidCountPercentGrowth = rangeStartPaidCount !== 0 ? ((currentPaidCount - rangeStartPaidCount) / rangeStartPaidCount) * 100 : 0;
const freeCountPercentGrowth = rangeStartFreeCount !== 0 ? ((currentFreeCount - rangeStartFreeCount) / rangeStartFreeCount) * 100 : 0;
this.memberCountStatsData = { this.memberCountStatsData = {
all: { all: {
@ -147,6 +150,21 @@ export default class DashboardController extends Controller {
}, },
title: 'Paid Members', title: 'Paid Members',
stats: stats stats: stats
},
free: {
percentGrowth: freeCountPercentGrowth.toFixed(1),
percentClass: (freeCountPercentGrowth > 0 ? 'positive' : (freeCountPercentGrowth < 0 ? 'negative' : '')),
total: dateValues.length ? dateValues[dateValues.length - 1].free : 0,
options: {
rangeInDays: 30
},
data: {
label: 'Members',
dateLabels: Object.keys(statsDateObj),
dateValues: dateValues.map(d => d.paid)
},
title: 'Free Members',
stats: stats
} }
}; };
} }

42
ghost/admin/app/templates/dashboard-labs.hbs
View file

@ -108,25 +108,24 @@
</div> </div>
<div class="gh-dashboard-box newsletter-open-rate"> <div class="gh-dashboard-box newsletter-open-rate">
<div class="gh-dashboard-chart-container"> <div class="gh-dashboard-chart-container">
{{#if this.newsletterOpenRatesLoading}} {{#if this.memberCountStatsLoading}}
Loading... Loading...
{{else}} {{else}}
{{#if this.newsletterOpenRatesError}} {{#if this.memberCountStatsError}}
<p class="error"> <p class="error">
There was an error loading newsletter open rates There was an error loading free members
<code>{{this.memberCountStatsData.message}}</code> <code>{{this.memberCountStatsData.message}}</code>
</p> </p>
{{else}} {{else}}
<div class="gh-dashboard-summary small"> <div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Email open rate</h4> <h4 class="gh-dashboard-header">Free members</h4>
<div class="data-container"> <div class="data-container">
<div class="data">{{this.newsletterOpenRatesData.current}}%</div> <div class="data">{{format-number this.memberCountStatsData.free.total}}</div>
<div class="growth {{this.newsletterOpenRatesData.percentClass}}">{{this.newsletterOpenRatesData.percentGrowth}}%</div> <div class="growth {{this.memberCountStatsData.free.percentClass}}">{{this.memberCountStatsData.free.percentGrowth}}%</div>
</div> </div>
</div> </div>
<div class="gh-dashboard-chart small"> <div class="gh-dashboard-chart small">
<GhMembersChart @type="bar" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="open-rate" @showRange={{false}} @chartStats={{this.newsletterOpenRatesData}} /> <GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.free}} />
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -314,6 +313,33 @@
</div> </div>
{{/if}} {{/if}}
<div class="gh-dashboard-box">
<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>
{{#unless (and this.session.user.isOwnerOnly (not this.feature.launchComplete))}} {{#unless (and this.session.user.isOwnerOnly (not this.feature.launchComplete))}}
<div class="gh-dashboard-box grey activity-feed"> <div class="gh-dashboard-box grey activity-feed">
<h4 class="gh-dashboard-header">Activity feed</h4> <h4 class="gh-dashboard-header">Activity feed</h4>