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

Added percentage growth styles

This commit is contained in:
Peter Zimon 2021-02-24 10:32:10 +01:00
parent 32c69b4f1b
commit 8565b2521b
2 changed files with 6 additions and 7 deletions

View file

@ -72,6 +72,7 @@ export default class DashboardController extends Controller {
this.mrrStatsData = { this.mrrStatsData = {
current: `${getSymbol(currencyStats.currency)}${currentMRR}`, current: `${getSymbol(currencyStats.currency)}${currentMRR}`,
percentGrowth: percentGrowth.toFixed(1), percentGrowth: percentGrowth.toFixed(1),
percentClass: (percentGrowth > 0 ? 'positive' : (percentGrowth < 0 ? 'negative' : '')),
options: { options: {
rangeInDays: 30 rangeInDays: 30
}, },
@ -107,6 +108,7 @@ export default class DashboardController extends Controller {
this.memberCountStatsData = { this.memberCountStatsData = {
all: { all: {
percentGrowth: allCountPercentGrowth.toFixed(1), percentGrowth: allCountPercentGrowth.toFixed(1),
percentClass: (allCountPercentGrowth > 0 ? 'positive' : (allCountPercentGrowth < 0 ? 'negative' : '')),
total: dateValues.length ? dateValues[dateValues.length - 1].total : 0, total: dateValues.length ? dateValues[dateValues.length - 1].total : 0,
options: { options: {
rangeInDays: 30 rangeInDays: 30
@ -121,6 +123,7 @@ export default class DashboardController extends Controller {
}, },
paid: { paid: {
percentGrowth: paidCountPercentGrowth.toFixed(1), percentGrowth: paidCountPercentGrowth.toFixed(1),
percentClass: (paidCountPercentGrowth > 0 ? 'positive' : (paidCountPercentGrowth < 0 ? 'negative' : '')),
total: dateValues.length ? dateValues[dateValues.length - 1].paid : 0, total: dateValues.length ? dateValues[dateValues.length - 1].paid : 0,
options: { options: {
rangeInDays: 30 rangeInDays: 30

View file

@ -16,7 +16,7 @@
<div class="gh-dashboard-summary"> <div class="gh-dashboard-summary">
{{#if this.mrrStatsData}} {{#if this.mrrStatsData}}
<div class="data">{{this.mrrStatsData.current}}</div> <div class="data">{{this.mrrStatsData.current}}</div>
<div class="growth">{{this.mrrStatsData.percentGrowth}}%</div> <div class="growth {{this.mrrStatsData.percentClass}}">{{this.mrrStatsData.percentGrowth}}%</div>
{{else}} {{else}}
<div class="data">$0</div> <div class="data">$0</div>
<div class="growth">0.0%</div> <div class="growth">0.0%</div>
@ -26,10 +26,6 @@
<div class="gh-dashboard-chart"> <div class="gh-dashboard-chart">
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} /> <GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} />
</div> </div>
{{else}}
<div class="gh-dashboard-chart nodata">
No data
</div>
{{/if}} {{/if}}
</div> </div>
</div> </div>
@ -39,7 +35,7 @@
<h4 class="gh-dashboard-header">Total members</h4> <h4 class="gh-dashboard-header">Total members</h4>
<div class="data-container"> <div class="data-container">
<div class="data">{{this.memberCountStatsData.all.total}}</div> <div class="data">{{this.memberCountStatsData.all.total}}</div>
<div class="growth">{{this.memberCountStatsData.all.percentGrowth}}%</div> <div class="growth {{this.memberCountStatsData.all.percentClass}}">{{this.memberCountStatsData.all.percentGrowth}}%</div>
</div> </div>
</div> </div>
<div class="gh-dashboard-chart small"> <div class="gh-dashboard-chart small">
@ -53,7 +49,7 @@
<h4 class="gh-dashboard-header">Paid members</h4> <h4 class="gh-dashboard-header">Paid members</h4>
<div class="data-container"> <div class="data-container">
<div class="data">{{this.memberCountStatsData.paid.total}}</div> <div class="data">{{this.memberCountStatsData.paid.total}}</div>
<div class="growth">{{this.memberCountStatsData.paid.percentGrowth}}%</div> <div class="growth {{this.memberCountStatsData.paid.percentClass}}">{{this.memberCountStatsData.paid.percentGrowth}}%</div>
</div> </div>
</div> </div>
<div class="gh-dashboard-chart small"> <div class="gh-dashboard-chart small">