@oanda/labs-crowd-view-widget 1.0.68 → 1.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "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.250",
+    "@oanda/labs-widget-common": "^1.0.252",
     "@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": "df3186a91395ca5e8cd25c89a2c3cc130dc3c3f1"
+  "gitHead": "ae201544a004425cf83a3ba9356adbda66f7d0fd"
 }

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

@@ -1,3 +1,4 @@
+import { Locale } from '@oanda/mono-i18n';
 import type { TooltipComponentOption } from 'echarts';
 
 import type { BookType } from '../../../../gql/types/graphql';
@@ -58,6 +59,7 @@ export const getTooltipConfig = ({
       isDesktop,
       locale,
       isDark,
+      isJapanese: locale === Locale.ja,
     }),
   hideDelay: 0,
   axisPointer: {

package/src/CrowdViewWidget/components/Chart/chartUtils/getTooltipFormatter.ts

@@ -171,6 +171,7 @@ export const getTooltipFormatter = ({
   isDesktop,
   locale,
   isDark,
+  isJapanese,
 }: {
   params: TooltipParam[];
   buckets: Bucket[][];
@@ -183,6 +184,7 @@ export const getTooltipFormatter = ({
   isDesktop: boolean;
   locale: string;
   isDark: boolean;
+  isJapanese: boolean;
 }) => {
   if (!params || !Array.isArray(params) || params.length === 0) {
     return '';
@@ -250,6 +252,7 @@ export const getTooltipFormatter = ({
       sentimentSection,
       bookSection,
       isDark,
+      isJapanese,
     });
   }
 
@@ -274,21 +277,23 @@ const buildDesktopTooltip = ({
   sentimentSection,
   bookSection,
   isDark,
+  isJapanese,
 }: TooltipSections & {
   isDark: boolean;
+  isJapanese: boolean;
 }): string => {
   const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
   const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
 
   return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
   <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
- <div style="width: 40%;">
+ <div style="${isJapanese ? 'width: 45%;' : 'width: 40%;'}">
 ${candleSection}
 </div>
-<div style="width: 22%;">
+<div style="${isJapanese ? 'width: 24%;' : 'width: 20%;'}">
 ${sentimentSection}
 </div>
-<div style="width: 38%;">
+<div style="${isJapanese ? 'width: 31%;' : 'width: 40%;'}">
 ${bookSection}
 </div>
 </div>

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

@@ -21,7 +21,9 @@ export const processSentiments = (
       item?.time,
       {
         sentimentShorts: item?.sentiment?.shortPercent ?? null,
-        sentimentLongs: item?.sentiment?.longPercent ?? null,
+        sentimentLongs: item?.sentiment?.shortPercent
+          ? 100 - item?.sentiment?.shortPercent
+          : null,
       },
     ])
   );

package/src/gql/getSentiments.ts

@@ -13,7 +13,6 @@ const getSentiments = gql`
     ) {
       sentiments {
         sentiment {
-          longPercent
           shortPercent
         }
         time

package/src/gql/types/gql.ts

@@ -17,7 +17,7 @@ const documents = {
     types.GetOrderPositionBooksDocument,
   '\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n      pipsLocation\n    }\n  }\n':
     types.GetPriceCandlesDocument,
-  '\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          longPercent\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n':
+  '\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n':
     types.GetSentimentsDocument,
 };
 
@@ -51,8 +51,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          longPercent\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n'
-): (typeof documents)['\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          longPercent\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n'];
+  source: '\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/gql/types/graphql.ts

@@ -623,11 +623,7 @@ export type GetSentimentsQuery = {
     sentiments: Array<{
       __typename?: 'SentimentWithTime';
       time: string;
-      sentiment: {
-        __typename?: 'Sentiment';
-        longPercent: number;
-        shortPercent: number;
-      };
+      sentiment: { __typename?: 'Sentiment'; shortPercent: number };
     } | null>;
   };
 };
@@ -1115,10 +1111,6 @@ export const GetSentimentsDocument = {
                         selectionSet: {
                           kind: 'SelectionSet',
                           selections: [
-                            {
-                              kind: 'Field',
-                              name: { kind: 'Name', value: 'longPercent' },
-                            },
                             {
                               kind: 'Field',
                               name: { kind: 'Name', value: 'shortPercent' },

package/src/translations/sources/ja.json

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

package/test/components/Chart/utils/chartUtils.test.ts

@@ -257,6 +257,7 @@ describe('chartUtils', () => {
         isDesktop: true,
         locale: 'en-US',
         isDark: false,
+        isJapanese: false,
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
@@ -298,6 +299,7 @@ describe('chartUtils', () => {
         isDesktop: true,
         locale: 'en-US',
         isDark: false,
+        isJapanese: false,
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
@@ -331,6 +333,7 @@ describe('chartUtils', () => {
         isDesktop: true,
         locale: 'en-US',
         isDark: false,
+        isJapanese: false,
       });
       expect(html).toBe('');
     });
@@ -348,6 +351,7 @@ describe('chartUtils', () => {
         isDesktop: true,
         locale: 'en-US',
         isDark: false,
+        isJapanese: false,
       });
       expect(html).toBe('');
     });

package/test/components/Chart/utils/processSentiments.test.ts

@@ -52,14 +52,12 @@ describe('processSentiments', () => {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: 30.5,
-              longPercent: 69.5,
             },
           },
           {
             time: '2025-03-15T11:30:00Z',
             sentiment: {
               shortPercent: 40.2,
-              longPercent: 59.8,
             },
           },
         ],
@@ -81,14 +79,12 @@ describe('processSentiments', () => {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: 30.5,
-              longPercent: 69.5,
             },
           },
           {
             time: '2025-03-15T12:30:00Z', // Not in dates
             sentiment: {
               shortPercent: 50.0,
-              longPercent: 50.0,
             },
           },
         ],
@@ -109,7 +105,6 @@ describe('processSentiments', () => {
             time: '2025-03-15T11:30:00Z',
             sentiment: {
               shortPercent: 30.5,
-              longPercent: 69.5,
             },
           },
         ],
@@ -135,14 +130,12 @@ describe('processSentiments', () => {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: 30.5,
-              longPercent: 69.5,
             },
           },
           {
             time: '2025-03-15T12:30:00Z',
             sentiment: {
               shortPercent: 25.0,
-              longPercent: 75.0,
             },
           },
         ],
@@ -181,7 +174,6 @@ describe('processSentiments', () => {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: undefined as never,
-              longPercent: undefined as never,
             },
           },
         ],
@@ -201,7 +193,6 @@ describe('processSentiments', () => {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: 30.5,
-              longPercent: 69.5,
             },
           },
         ],
@@ -224,7 +215,6 @@ describe('processSentiments', () => {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: 30.5,
-              longPercent: 69.5,
             },
           },
         ],