From fdaf9c56148de16c3bbacdaef2f1c1c1e34e353a Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Thu, 14 Apr 2022 17:05:01 +0200
Subject: [PATCH] Fixes price formatting in MRR tooltip + added support for
 currencies

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 $
---
 .../components/dashboard/v5/charts/anchor.hbs |  2 +-
 .../components/dashboard/v5/charts/anchor.js  | 24 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
index 5bd277a59b..b82f5629ea 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
@@ -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}}
diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js
index 9d14622489..05a5dddd95 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js
@@ -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) => {