@oanda/labs-currency-power-balance-widget 1.0.2 → 1.0.4

package/src/CurrencyPowerBalanceWidget/render.tsx

@@ -6,6 +6,7 @@ import { CurrencyPowerBalance } from './CurrencyPowerBalance';
 const {
   graphqlUrl: configGraphQl,
   renderElementId: configRenderElementId,
+  locale: configLocale,
 } = window.currencyPowerBalanceWidgetConfig || {};
 
 const {
@@ -16,11 +17,14 @@ const currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-c
 
 if (currencyPowerBalanceParamsElements.length > 0) {
   currencyPowerBalanceParamsElements.forEach((element) => {
+    const params = element.getAttribute('data-currency-power-balance-params');
     const mode = element.getAttribute('data-mode');
+    const { locale } = JSON.parse(params as string);
 
     render(
       <CurrencyPowerBalance
         graphqlUrl={graphqlUrl}
+        locale={locale}
         theme={mode as Theme}
       />,
       element,
@@ -29,6 +33,7 @@ if (currencyPowerBalanceParamsElements.length > 0) {
 } else {
   render(
     <CurrencyPowerBalance
+      locale={configLocale}
       graphqlUrl={configGraphQl}
     />,
     document.getElementById(configRenderElementId),

package/src/CurrencyPowerBalanceWidget/types.ts

@@ -1,13 +1,16 @@
+import { Locale } from '@oanda/mono-i18n';
 import { Theme } from '@oanda/labs-widget-common';
 import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
 
 export interface CurrencyPowerBalanceConfig {
   graphqlUrl: string;
+  locale: Locale;
   theme?: Theme;
 }
 
 export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
   renderElementId: string;
+  locale: Locale;
 }
 
 export interface ChartWithDataProps {

package/src/translations/index.ts

@@ -0,0 +1,13 @@
+import { Locale, Translations } from '@oanda/mono-i18n';
+
+import en from './sources/en.json';
+import zhTW from './sources/zh_TW.json';
+
+import { defaultTranslations } from './translations';
+
+export type TranslationKey = keyof typeof defaultTranslations;
+
+export const translations: Translations = {
+  [Locale.en]: { translation: en },
+  [Locale.zhTW]: { translation: zhTW },
+};

package/src/translations/sources/en.json

@@ -0,0 +1,18 @@
+{
+  "1_month": "1 month",
+  "1_week": "1 week",
+  "1m": "1M",
+  "1w": "1W",
+  "24_hours": "24 hours",
+  "24h": "24H",
+  "3_months": "3 months",
+  "3m": "3M",
+  "4_hours": "4 hours",
+  "4h": "4H",
+  "8_hours": "8 hours",
+  "8h": "8H",
+  "current_business_day": "Current Business Day",
+  "data_unavailable": "Data unavailable",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "previous_business_day": "Previous Business Day"
+}

package/src/translations/sources/zh_TW.json

@@ -0,0 +1,18 @@
+{
+  "1_month": "1 個月",
+  "1_week": "1星期",
+  "1m": "1M",
+  "1w": "1W",
+  "24_hours": "24小時",
+  "24h": "24H",
+  "3_months": "3 個月",
+  "3m": "3M",
+  "4_hours": "4小時",
+  "4h": "4H",
+  "8_hours": "8小時",
+  "8h": "8H",
+  "current_business_day": "目前營業日",
+  "data_unavailable": "沒有數據",
+  "pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
+  "previous_business_day": "前一營業日"
+}

package/src/translations/translations.ts

@@ -0,0 +1,18 @@
+export const defaultTranslations = {
+  '1_month': '1 month',
+  '1_week': '1 week',
+  '1m': '1M',
+  '1w': '1W',
+  '24_hours': '24 hours',
+  '24h': '24H',
+  '3_months': '3 months',
+  '3m': '3M',
+  '4_hours': '4 hours',
+  '4h': '4H',
+  '8_hours': '8 hours',
+  '8h': '8H',
+  current_business_day: 'Current Business Day',
+  data_unavailable: 'Data unavailable',
+  pagination_entries_range: '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',
+  previous_business_day: 'Previous Business Day',
+};

package/test/chartFormatters.test.ts

@@ -20,11 +20,11 @@ describe('tooltipFormatter', () => {
     const element = document.createElement('div');
     element.innerHTML = tooltipFormatter(values);
 
-    expect(element.querySelector('p')).toContainHTML('<p style="margin-bottom:5px;">10/27/2023, 14:00 UTC</p>');
-    expect(element.querySelectorAll('span')[0]).toContainHTML('<span>Marker 2</span>');
-    expect(element.querySelectorAll('span')[2]).toContainHTML('<span>-20.23</span>');
-    expect(element.querySelectorAll('span')[3]).toContainHTML('<span>Marker 1</span>');
-    expect(element.querySelectorAll('span')[5]).toContainHTML('<span>-30.91</span>');
+    expect(element.querySelector('span')).toContainHTML('<span style="margin-bottom:5px;">10/27/2023, 14:00 UTC</span>');
+    expect(element.querySelectorAll('span')[1]).toContainHTML('<span>Marker 2</span>');
+    expect(element.querySelectorAll('span')[3]).toContainHTML('<span>-20.23</span>');
+    expect(element.querySelectorAll('span')[4]).toContainHTML('<span>Marker 1</span>');
+    expect(element.querySelectorAll('span')[6]).toContainHTML('<span>-30.91</span>');
   });
 });