@oanda/labs-crowd-view-widget 1.0.60 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.242",
+    "@oanda/labs-widget-common": "^1.0.243",
     "@oanda/mono-i18n": "10.0.1",
     "chroma-js": "^3.1.2",
     "decimal.js": "^10.6.0",
@@ -24,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@types/chroma-js": "^3.1.2"
   },
-  "gitHead": "5023edd1d0ab11c4d681588f2ee9f9ea482a9605"
+  "gitHead": "f3d41f07e0f42d2885b8e6aac34c886d24f321c6"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -5,37 +5,31 @@ import {
   Tabs,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import { useLocale } from '@oanda/mono-i18n';
+import { Locale, useLocale } from '@oanda/mono-i18n';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
-import { ChartWithData, Legend } from './components';
-import { getInstrumentConfigForDivision } from './components/Chart/dataUtils/getInstrumentConfigForDivision';
-import { granularitySelectConfig, navigationConfig } from './selectConfig';
+import { ChartWithData, getInstrumentConfig, Legend } from './components';
+import { getGranularitySelectConfig, navigationConfig } from './selectConfig';
 import type { InstrumentId, MainProps } from './types';
 
 const Main = ({ division }: MainProps) => {
-  const { lang } = useLocale();
+  const { lang, locale } = useLocale();
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
+  const isJapanese = locale === Locale.ja;
 
   const [bookType, setBookType] = useState(BookType.Order);
 
   const granularitySelectConfigWithLang = useMemo(
-    () =>
-      granularitySelectConfig.map((opt) => ({
-        ...opt,
-        label: lang(opt.label),
-      })),
-    [lang]
+    () => getGranularitySelectConfig(lang, isJapanese),
+    [lang, isJapanese]
   );
 
-  const instrumentSelectConfigWithDivision =
-    getInstrumentConfigForDivision(division);
-  const [instrument, setInstrument] = useState(
-    instrumentSelectConfigWithDivision[0]
-  );
+  const instrumentSelectConfig = getInstrumentConfig(division, isJapanese);
+
+  const [instrument, setInstrument] = useState(instrumentSelectConfig[0]);
 
   const [granularity, setGranularity] = useState(
     granularitySelectConfigWithLang[0]
@@ -74,7 +68,7 @@ const Main = ({ division }: MainProps) => {
                 })}
               >
                 <Select
-                  options={instrumentSelectConfigWithDivision}
+                  options={instrumentSelectConfig}
                   searchPlaceholder={lang('search')}
                   selectLabel={lang('instrument')}
                   selectedOption={instrument}

package/src/CrowdViewWidget/components/Chart/chartOptions/getSeriesCandlestickConfig.ts

@@ -1,3 +1,4 @@
+import { Locale } from '@oanda/mono-i18n';
 import chroma from 'chroma-js';
 import type { CandlestickSeriesOption } from 'echarts';
 
@@ -6,13 +7,30 @@ import type { ChartStyles } from '../chartUtils/getChartStyles';
 interface GetSeriesCandlestickConfigParams {
   styles: ChartStyles;
   isLoading: boolean;
+  locale: string;
 }
 
 export const getSeriesCandlestickConfig = ({
   styles,
   isLoading,
+  locale,
 }: GetSeriesCandlestickConfigParams): CandlestickSeriesOption => {
   const { candleLongColor, candleShortColor } = styles;
+  const isJapanese = locale === Locale.ja;
+
+  const itemStyle = isJapanese
+    ? {
+        color: chroma(candleShortColor).desaturate().css(),
+        color0: chroma(candleLongColor).desaturate().css(),
+        borderColor: candleShortColor,
+        borderColor0: candleLongColor,
+      }
+    : {
+        color: chroma(candleLongColor).desaturate().css(),
+        color0: chroma(candleShortColor).desaturate().css(),
+        borderColor: candleLongColor,
+        borderColor0: candleShortColor,
+      };
 
   return {
     animation: isLoading,
@@ -27,12 +45,7 @@ export const getSeriesCandlestickConfig = ({
       x: 'dates',
       y: ['open', 'close', 'low', 'high'],
     },
-    itemStyle: {
-      color: chroma(candleLongColor).desaturate().css(),
-      color0: chroma(candleShortColor).desaturate().css(),
-      borderColor: candleLongColor,
-      borderColor0: candleShortColor,
-    },
+    itemStyle,
     emphasis: {
       itemStyle: {
         color: candleLongColor,

package/src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfig.ts

@@ -0,0 +1,20 @@
+import { Division } from '../../../../gql/types/graphql';
+import {
+  instrumentSelectConfig,
+  instrumentSelectConfigJa,
+  instrumentSelectConfigOC,
+} from '../../../selectConfig';
+
+export const getInstrumentConfig = (
+  division: Division,
+  isJapanese: boolean
+) => {
+  if (isJapanese) {
+    return instrumentSelectConfigJa;
+  }
+
+  if (division === Division.Oc) {
+    return instrumentSelectConfigOC;
+  }
+  return instrumentSelectConfig;
+};

package/src/CrowdViewWidget/components/Chart/dataUtils/index.ts

@@ -1,5 +1,5 @@
 export * from './getBucketWidthMultiplayer';
-export * from './getInstrumentConfigForDivision';
+export * from './getInstrumentConfig';
 export * from './getTimeSpanForGranularity';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';

package/src/CrowdViewWidget/components/Chart/getOption.ts

@@ -136,6 +136,7 @@ export const getOption: GetOptionType = ({
       getSeriesCandlestickConfig({
         styles,
         isLoading,
+        locale,
       }),
       ...heatmapChart,
       ...sentimentChart,

package/src/CrowdViewWidget/selectConfig.ts

@@ -83,20 +83,91 @@ const instrumentSelectConfig = [
   },
 ];
 
-const granularitySelectConfig = [
+const instrumentSelectConfigJa = [
+  {
+    id: InstrumentId.USD_JPY,
+    label: 'USD/JPY',
+  },
+  {
+    id: InstrumentId.EUR_JPY,
+    label: 'EUR/JPY',
+  },
+  {
+    id: InstrumentId.GBP_JPY,
+    label: 'GBP/JPY',
+  },
+  {
+    id: InstrumentId.AUD_JPY,
+    label: 'AUD/JPY',
+  },
+  {
+    id: InstrumentId.EUR_USD,
+    label: 'EUR/USD',
+  },
+  {
+    id: InstrumentId.EUR_AUD,
+    label: 'EUR/AUD',
+  },
+  {
+    id: InstrumentId.EUR_GBP,
+    label: 'EUR/GBP',
+  },
+  {
+    id: InstrumentId.EUR_CHF,
+    label: 'EUR/CHF',
+  },
+  {
+    id: InstrumentId.USD_CHF,
+    label: 'USD/CHF',
+  },
+  {
+    id: InstrumentId.USD_CAD,
+    label: 'USD/CAD',
+  },
+  {
+    id: InstrumentId.GBP_USD,
+    label: 'GBP/USD',
+  },
+  {
+    id: InstrumentId.GBP_CHF,
+    label: 'GBP/CHF',
+  },
+  {
+    id: InstrumentId.AUD_USD,
+    label: 'AUD/USD',
+  },
+  {
+    id: InstrumentId.NZD_USD,
+    label: 'NZD/USD',
+  },
+  {
+    id: InstrumentId.XAU_USD,
+    label: 'XAU/USD',
+  },
+  {
+    id: InstrumentId.XAG_USD,
+    label: 'XAG/USD',
+  },
+];
+
+const getGranularitySelectConfig = (
+  lang: (key: string, options?: { count?: number }) => string,
+  isJapanese: boolean
+) => [
   {
     id: Granularity.H1,
-    label: '1_hour',
+    label: lang(isJapanese ? 'hour_plural' : 'hour', { count: 1 }),
   },
   {
     id: Granularity.H4,
-    label: '4_hours',
+    label: lang('hour_plural', { count: 4 }),
   },
 ];
 
 export {
-  granularitySelectConfig,
+  getGranularitySelectConfig,
   instrumentSelectConfig,
+  instrumentSelectConfigJa,
   instrumentSelectConfigOC,
   navigationConfig,
 };

package/src/translations/index.ts

@@ -2,16 +2,12 @@ import type { Translations } from '@oanda/mono-i18n';
 import { Locale } from '@oanda/mono-i18n';
 
 import en from './sources/en.json';
-import es from './sources/es.json';
-import th from './sources/th.json';
-import zhTW from './sources/zh_TW.json';
+import ja from './sources/ja.json';
 import type { defaultTranslations } from './translations';
 
 export type TranslationKey = keyof typeof defaultTranslations;
 
 export const translations: Translations = {
   [Locale.en]: { translation: en },
-  [Locale.zhTW]: { translation: zhTW },
-  [Locale.es]: { translation: es },
-  [Locale.th]: { translation: th },
+  [Locale.ja]: { translation: ja },
 };

package/src/translations/sources/en.json

@@ -1,8 +1,4 @@
 {
-  "1_hour": "1 hour",
-  "15_minutes": "15 minutes",
-  "4_hours": "4 hours",
-  "5_minutes": "5 minutes",
   "buy": "Buy",
   "buy_overbalance": "Buy overbalance",
   "candle": "Candle",
@@ -11,16 +7,21 @@
   "even_market_demand": "Even market demand",
   "granularity": "Granularity",
   "high": "High",
+  "hour": "{{count}} Hour",
+  "hour_plural": "{{count}} Hours",
+  "hover_chart_to_see_more_details": "Hover over the chart to see more details",
   "instrument": "Instrument",
   "long": "Long",
   "long_overbalance": "Long overbalance",
   "low": "Low",
+  "minute": "{{count}} Minute",
+  "minute_plural": "{{count}} Minutes",
   "no_matching_results": "No matching results",
   "open": "Open",
-  "order_book": "Order book",
+  "order_book": "Order Book",
   "orders": "Orders",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
-  "position_book": "Position book",
+  "position_book": "Position Book",
   "price": "Price",
   "price_range": "Price range",
   "search": "Search",
@@ -30,6 +31,5 @@
   "short": "Short",
   "short_overbalance": "Short overbalance",
   "tap_chart_to_see_more_details": "Tap the chart to see more details",
-  "hover_chart_to_see_more_details": "Hover over the chart to see more details",
   "trades": "Trades"
 }

package/src/translations/sources/ja.json

@@ -0,0 +1,30 @@
+{
+  "buy": "購入",
+  "buy_overbalance": "買い超過",
+  "candle": "ローソク足",
+  "close": "閉じる",
+  "data_unavailable": "データが利用できません",
+  "even_market_demand": "均衡需要",
+  "granularity": "粒度",
+  "high": "高値",
+  "hour_plural": "{{count}} 時間",
+  "hover_chart_to_see_more_details": "チャートの上にカーソルを合わせると詳細を確認できます",
+  "instrument": "金融商品",
+  "long": "ロング",
+  "long_overbalance": "ロング超過",
+  "low": "安値",
+  "open": "オープン",
+  "order_book": "オーダーブック",
+  "orders": "注文",
+  "position_book": "ポジションブック",
+  "price": "価格",
+  "price_range": "価格範囲",
+  "search": "検索",
+  "sell": "売り",
+  "sell_overbalance": "売り超過",
+  "sentiment": "センチメント",
+  "short": "ショート",
+  "short_overbalance": "ショート超過",
+  "tap_chart_to_see_more_details": "チャートをタップすると詳細を確認できます",
+  "trades": "取引"
+}

package/test/utils/instrumentUtils.test.ts

@@ -2,13 +2,13 @@
  * @jest-environment jsdom
  */
 
-import { getInstrumentConfigForDivision } from '../../src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision';
+import { getInstrumentConfig } from '../../src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfig';
 import { Division } from '../../src/gql/types/graphql';
 
 describe('instrumentUtils', () => {
-  describe('getInstrumentConfigForDivision', () => {
-    it('should return OC instrument config for OC division', () => {
-      const result = getInstrumentConfigForDivision(Division.Oc);
+  describe('getInstrumentConfig', () => {
+    it('should return OC instrument config for OC division when not Japanese', () => {
+      const result = getInstrumentConfig(Division.Oc, false);
 
       expect(result).toBeDefined();
       expect(Array.isArray(result)).toBe(true);
@@ -23,8 +23,8 @@ describe('instrumentUtils', () => {
       expect(firstInstrument.id.length).toBeGreaterThan(0);
     });
 
-    it('should return OAP instrument config for OAP division', () => {
-      const result = getInstrumentConfigForDivision(Division.Oap);
+    it('should return OAP instrument config for OAP division when not Japanese', () => {
+      const result = getInstrumentConfig(Division.Oap, false);
 
       expect(result).toBeDefined();
       expect(Array.isArray(result)).toBe(true);
@@ -39,9 +39,31 @@ describe('instrumentUtils', () => {
       expect(firstInstrument.id.length).toBeGreaterThan(0);
     });
 
-    it('should return different configs for different divisions', () => {
-      const ocConfig = getInstrumentConfigForDivision(Division.Oc);
-      const oapConfig = getInstrumentConfigForDivision(Division.Oap);
+    it('should return Japanese instrument config when isJapanese is true', () => {
+      const result = getInstrumentConfig(Division.Oc, true);
+
+      expect(result).toBeDefined();
+      expect(Array.isArray(result)).toBe(true);
+      expect(result.length).toBeGreaterThan(0);
+
+      // Check that the first instrument has the expected structure
+      const firstInstrument = result[0];
+      expect(firstInstrument).toHaveProperty('id');
+      expect(firstInstrument).toHaveProperty('label');
+      expect(typeof firstInstrument.id).toBe('string');
+      expect(firstInstrument.id.length).toBeGreaterThan(0);
+    });
+
+    it('should return Japanese config regardless of division when isJapanese is true', () => {
+      const ocJapaneseConfig = getInstrumentConfig(Division.Oc, true);
+      const oapJapaneseConfig = getInstrumentConfig(Division.Oap, true);
+
+      expect(ocJapaneseConfig).toEqual(oapJapaneseConfig);
+    });
+
+    it('should return different configs for different divisions when not Japanese', () => {
+      const ocConfig = getInstrumentConfig(Division.Oc, false);
+      const oapConfig = getInstrumentConfig(Division.Oap, false);
 
       expect(ocConfig).not.toEqual(oapConfig);
 
@@ -54,5 +76,12 @@ describe('instrumentUtils', () => {
       // OAP config includes XAU_USD and XAG_USD which OC doesn't have
       expect(oapConfig.length).toBeGreaterThan(ocConfig.length);
     });
+
+    it('should return different configs for Japanese vs non-Japanese', () => {
+      const japaneseConfig = getInstrumentConfig(Division.Oc, true);
+      const nonJapaneseConfig = getInstrumentConfig(Division.Oc, false);
+
+      expect(japaneseConfig).not.toEqual(nonJapaneseConfig);
+    });
   });
 });

package/dist/main/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getInstrumentConfigForDivision = void 0;
-var _graphql = require("../../../../gql/types/graphql");
-var _selectConfig = require("../../../selectConfig");
-const getInstrumentConfigForDivision = division => {
-  return division === _graphql.Division.Oc ? _selectConfig.instrumentSelectConfigOC : _selectConfig.instrumentSelectConfig;
-};
-exports.getInstrumentConfigForDivision = getInstrumentConfigForDivision;
-//# sourceMappingURL=getInstrumentConfigForDivision.js.map

package/dist/main/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getInstrumentConfigForDivision.js","names":["_graphql","require","_selectConfig","getInstrumentConfigForDivision","division","Division","Oc","instrumentSelectConfigOC","instrumentSelectConfig","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.ts"],"sourcesContent":["import { Division } from '../../../../gql/types/graphql';\nimport {\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n} from '../../../selectConfig';\n\nexport const getInstrumentConfigForDivision = (division: Division) => {\n  return division === Division.Oc\n    ? instrumentSelectConfigOC\n    : instrumentSelectConfig;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKO,MAAME,8BAA8B,GAAIC,QAAkB,IAAK;EACpE,OAAOA,QAAQ,KAAKC,iBAAQ,CAACC,EAAE,GAC3BC,sCAAwB,GACxBC,oCAAsB;AAC5B,CAAC;AAACC,OAAA,CAAAN,8BAAA,GAAAA,8BAAA","ignoreList":[]}

package/dist/main/translations/sources/es.json

@@ -1,2 +0,0 @@
-{
-}

package/dist/main/translations/sources/th.json

@@ -1,2 +0,0 @@
-{
-}

package/dist/main/translations/sources/zh_TW.json

@@ -1,2 +0,0 @@
-{
-}

package/dist/module/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.js

@@ -1,6 +0,0 @@
-import { Division } from '../../../../gql/types/graphql';
-import { instrumentSelectConfig, instrumentSelectConfigOC } from '../../../selectConfig';
-export const getInstrumentConfigForDivision = division => {
-  return division === Division.Oc ? instrumentSelectConfigOC : instrumentSelectConfig;
-};
-//# sourceMappingURL=getInstrumentConfigForDivision.js.map

package/dist/module/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getInstrumentConfigForDivision.js","names":["Division","instrumentSelectConfig","instrumentSelectConfigOC","getInstrumentConfigForDivision","division","Oc"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.ts"],"sourcesContent":["import { Division } from '../../../../gql/types/graphql';\nimport {\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n} from '../../../selectConfig';\n\nexport const getInstrumentConfigForDivision = (division: Division) => {\n  return division === Division.Oc\n    ? instrumentSelectConfigOC\n    : instrumentSelectConfig;\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,+BAA+B;AACxD,SACEC,sBAAsB,EACtBC,wBAAwB,QACnB,uBAAuB;AAE9B,OAAO,MAAMC,8BAA8B,GAAIC,QAAkB,IAAK;EACpE,OAAOA,QAAQ,KAAKJ,QAAQ,CAACK,EAAE,GAC3BH,wBAAwB,GACxBD,sBAAsB;AAC5B,CAAC","ignoreList":[]}

package/dist/module/translations/sources/es.json

@@ -1,2 +0,0 @@
-{
-}

package/dist/module/translations/sources/th.json

@@ -1,2 +0,0 @@
-{
-}

package/dist/module/translations/sources/zh_TW.json

@@ -1,2 +0,0 @@
-{
-}

package/src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision.ts

@@ -1,11 +0,0 @@
-import { Division } from '../../../../gql/types/graphql';
-import {
-  instrumentSelectConfig,
-  instrumentSelectConfigOC,
-} from '../../../selectConfig';
-
-export const getInstrumentConfigForDivision = (division: Division) => {
-  return division === Division.Oc
-    ? instrumentSelectConfigOC
-    : instrumentSelectConfig;
-};

package/src/translations/sources/es.json

@@ -1,2 +0,0 @@
-{
-}

package/src/translations/sources/th.json

@@ -1,2 +0,0 @@
-{
-}

package/src/translations/sources/zh_TW.json

@@ -1,2 +0,0 @@
-{
-}