Graph showing wrong currency on Y axis.

[mohitwp]

Bug Description

While using oi.ie site. Under AdSense (Performance for the last 28 days) widget showing earnings in euro 💶 but on Y axis currency listed as $. Ideally, both currency should match and graph currency must get update as per data.

Steps to reproduce

1. Set up site kit using oi.ie.
2. Set up AdSense.
3. Click on Monetization chip.
4. See listed currency under "performance for the last 28 days" graph Y axis.

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Google Charts should be loaded and displayed using the user's chosen locale.
• The locale should be determined from the WordPress locale, falling back to the browser's locale (this is how we currently determine the locale in other scenarios).
• The AdSense Performance chart's Y axis currency symbol should match the currency provided by the report (i.e. what's shown for Earnings above the chart).
• The above Y axis currency number formatting should be correct for the user's locale. It should fall back to a default en-US-equivalent format for any unsupported locale.

Implementation Brief

This PoC can serve as a starting point for the IB.

• In assets/js/components/GoogleChart/index.js GoogleChart component, pass the locale to the chart using chartLanguage={ getLocale() }
• In assets/js/components/GoogleChart/utils.js create a new function getCurrencyPattern()
  • This function should accept to properties: currencyCode (e.g. USD, GBP, EUR), and locale (optional). Set the default value for local to getLocale().
  • The format should return a localized format string that can be used as a format for the Google Chart. See vAxis.format on the Google Charts docs. Example: '$ #,###,##0.00'
  • Even though localized, the decimal separator must always be . while the grouping/thousands separator must always be ,. This will part will be localized by the GoogleChart automatically, as we set the Chart locale.
  • See the getCurrencyPattern() function on the PoC.
• In ModuleOverviewWidget/Stats.js
  • Import the getCurrencyPattern() function.
  • Create getFormat function within the Stats component.
  • In options.vAxis.format and call the new getFormat() function and pass currentRangeData.headers[ selectedStats + 1 ].
  • Before using currentRangeData do a deep clone using cloneDeep from lodash.
  • In the getFormat() function descructure type and currencyCode.
  • If type is METRIC_CURRENCY return getCurrencyPattern() from the funciton.
  • Else return formats[ type ];
  • Again, see PoC for reference.

Test Coverage

• Add tests for the new getCurrencyPattern()
  • Test with multiple locals that use different characters for decimal/thousand separators.
  • Test with multiple locals that show the currency symbol before and after the number.
  • Test with multiple currencies.

QA Brief

• Change your WordPress locale to multiple languages and use Adsense accounts set to different currencies.
• Verify that the number format shown on for the Currencies in the Adsense graph align with the locale set in WordPress.
• Verify the Currency is always set to what is set in Adsense.
• Verify Currency and localized number format are independent from each other.
• Following differences between locales exist (not a complete list)
  • Some locales show the currency symbol before the value (English US), some after the (German Germany)
  • Some show only the currency symbol for dollar $ (English US) and some show it like US$ (English Canada)
  • Some show a blank between currency and number (Portuguese Brasil) some not (English US)

Changelog entry

• Fix incorrect currency displayed in the AdSense overview widget.

[mxbclang]

@aaemnnosttv This feels to me like something we should fix sooner than later as it just doesn't look very nice. Let me know what you think!

[aaemnnosttv]

This is a limitation of Google charts which defers this kind of formatting to the configured locale of the charts library as a whole. This isn't ideal because the currency of the data isn't specific to a geographic locale.

https://developers.google.com/chart/interactive/docs/gallery/linechart#data-format

We currently load the charts with the default locale, but even if we passed through the user's locale (used for formatting numbers, etc) this wouldn't exactly solve the problem because it would still be formatting the currency based on the locale, not the data it's plotting which we don't know about until it comes from the API of course.

Not a great experience, but I'm not sure what we can really do about this for now 😕

[techanvil]

I've looked into this and it turns out we can address this by using the vAxis.format decimal pattern syntax, in conjunction with loading the Google Chart in the user's locale (this is necessary in order to fully support locale-specific number formatting).

I've put together a PoC - here's how it looks with the WP language set to French (note this is a development site so SK's own text isn't translated, but it would be in a real-world scenario):

It seems to me that loading the charts in the user's locale is the right thing to anyway, so I've added AC to this issue which include that aspect.

[tofumatt]

@techanvil Does setting the locale to French force the Euro currency in this case? Locales and currencies shouldn't be tied together like that 😓

I suppose if Google Charts won't let us manually specify currency there's not much we can do, but French locale could warrant all sorts of non-Euro currencies, just as a for instance. 🤔

[techanvil]

Hey @tofumatt, the locale and currency are decoupled by virtue of specifying our own pattern for vAxis.format, rather than specifying the built-in currency format. In the previous example the vAxis.format value is determined to be #,###,##0.00 € - which is the French format barring the group , and decimal . separators, which the Google Chart always expects as the comma and period respectively. Setting the locale on the chart then ensures it renders the locale-specific separators (e.g. these are swapped in the French notation). Note that the currency symbol in the format pattern is determined from the currencyCode provided by the AdSense report.

To illustrate further here's the same chart with Japanese selected in WP:

And here it is in en-US:

With the vAxis.format value being determined as €#,###,##0.00 in both of these cases.

[tofumatt]

Awesome, okay, thanks for the explanation 😅

In that case: all is good! 🙂

[tofumatt]

@derweili Looks good, but can you add an estimate for the issue? I'm guessing around an 11 but want to confirm with you 🙂

[tofumatt]

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• The number format shown for the Currencies in the Adsense graph align with the locale set in WordPress.
• The Currency is always set to what is set in Adsense.
• Currency and localized number format are independent of each other.

Screenshots