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

Fixes price formatting in MRR tooltip + added support for currencies

Browse source 
refs https://github.com/TryGhost/Team/issues/1521

- Formatted the number correctly in the tooltip
- Correctly get the currency that is used in the MRR stats and show that symbol instead of a hardcoded $
This commit is contained in:
Simon Backx 2022-04-14 17:05:01 +02:00
parent 2cbe7b763e
commit fdaf9c5614
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
View file

@ -55,7 +55,7 @@
<button class="gh-dashboard5-stats-button {{if this.chartShowingMrr 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "mrr")}}>
<Dashboard::v5::Parts::Metric
@label="Monthly Revenue (MRR)"
@value="${{gh-price-amount this.currentMRR}}"
@value="{{this.mrrCurrencySymbol}}{{gh-price-amount this.currentMRR}}"
{{!-- @trends={{this.hasTrends}} --}}
{{!-- @percentage={{this.mrrTrend}} --}}
@center={{true}}

24
ghost/admin/app/components/dashboard/v5/charts/anchor.js
View file

@ -1,10 +1,11 @@
import Component from '@glimmer/component';
import moment from 'moment';
import {action} from '@ember/object';
import {ghPriceAmount} from '../../../../helpers/gh-price-amount';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
import {tracked} from '@glimmer/tracking';
const DATE_FORMAT = 'D MMM';
import {getSymbol} from 'ghost-admin/utils/currency';
const DAYS_OPTIONS = [{
name: '7 Days',
@ -288,6 +289,15 @@ export default class Anchor extends Component {
return returnable;
}
get mrrCurrencySymbol() {
if (this.dashboardStats.mrrStats === null) {
return '';
}
const firstCurrency = this.dashboardStats.mrrStats[0] ? this.dashboardStats.mrrStats[0].currency : 'usd';
return getSymbol(firstCurrency);
}
get chartOptions() {
let barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
@ -424,6 +434,12 @@ export default class Anchor extends Component {
titleMarginBottom: 3,
callbacks: {
label: (tooltipItems, data) => {
if (this.chartDisplay === 'mrr') {
// Convert integer in cents to value in USD/other currency.
const valueText = ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index]);
return `Monthly revenue (MRR): ${this.mrrCurrencySymbol}${valueText}`;
}
let valueText = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
let returnable = valueText;
@ -435,10 +451,6 @@ export default class Anchor extends Component {
}
}
if (this.chartDisplay === 'mrr') {
returnable = `Monthly revenue (MRR): $${valueText}`;
}
return returnable;
},
title: (tooltipItems) => {