@oanda/labs-crowd-view-widget 1.0.54 → 1.0.56

package/dist/module/CrowdViewWidget/selectConfig.js

@@ -8,6 +8,9 @@ const navigationConfig = [{
   label: 'position_book'
 }];
 const instrumentSelectConfigOC = [{
+  id: InstrumentId.EUR_USD,
+  label: 'EUR/USD'
+}, {
   id: InstrumentId.EUR_AUD,
   label: 'EUR/AUD'
 }, {
@@ -16,9 +19,6 @@ const instrumentSelectConfigOC = [{
 }, {
   id: InstrumentId.EUR_JPY,
   label: 'EUR/JPY'
-}, {
-  id: InstrumentId.EUR_USD,
-  label: 'EUR/USD'
 }, {
   id: InstrumentId.EUR_CHF,
   label: 'EUR/CHF'
@@ -63,12 +63,6 @@ const granularitySelectConfig = [{
 }, {
   id: Granularity.H4,
   label: '4_hours'
-}, {
-  id: Granularity.M5,
-  label: '5_minutes'
-}, {
-  id: Granularity.M15,
-  label: '15_minutes'
 }];
 export { granularitySelectConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig };
 //# sourceMappingURL=selectConfig.js.map

package/dist/module/CrowdViewWidget/selectConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectConfig.js","names":["BookType","Granularity","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_AUD","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","instrumentSelectConfig","XAU_USD","XAG_USD","granularitySelectConfig","H1","H4","M5","M15"],"sources":["../../../src/CrowdViewWidget/selectConfig.ts"],"sourcesContent":["import { BookType, Granularity } from '../gql/types/graphql';\nimport { InstrumentId } from './types';\n\nconst navigationConfig = [\n  {\n    id: BookType.Order,\n    label: 'order_book',\n  },\n  {\n    id: BookType.Position,\n    label: 'position_book',\n  },\n];\n\nconst instrumentSelectConfigOC = [\n  {\n    id: InstrumentId.EUR_AUD,\n    label: 'EUR/AUD',\n  },\n  {\n    id: InstrumentId.EUR_GBP,\n    label: 'EUR/GBP',\n  },\n  {\n    id: InstrumentId.EUR_JPY,\n    label: 'EUR/JPY',\n  },\n  {\n    id: InstrumentId.EUR_USD,\n    label: 'EUR/USD',\n  },\n  {\n    id: InstrumentId.EUR_CHF,\n    label: 'EUR/CHF',\n  },\n  {\n    id: InstrumentId.USD_CHF,\n    label: 'USD/CHF',\n  },\n  {\n    id: InstrumentId.USD_JPY,\n    label: 'USD/JPY',\n  },\n  {\n    id: InstrumentId.USD_CAD,\n    label: 'USD/CAD',\n  },\n  {\n    id: InstrumentId.GBP_USD,\n    label: 'GBP/USD',\n  },\n  {\n    id: InstrumentId.GBP_JPY,\n    label: 'GBP/JPY',\n  },\n  {\n    id: InstrumentId.GBP_CHF,\n    label: 'GBP/CHF',\n  },\n  {\n    id: InstrumentId.AUD_JPY,\n    label: 'AUD/JPY',\n  },\n  {\n    id: InstrumentId.AUD_USD,\n    label: 'AUD/USD',\n  },\n  {\n    id: InstrumentId.NZD_USD,\n    label: 'NZD/USD',\n  },\n];\n\nconst instrumentSelectConfig = [\n  ...instrumentSelectConfigOC,\n  {\n    id: InstrumentId.XAU_USD,\n    label: 'XAU/USD',\n  },\n  {\n    id: InstrumentId.XAG_USD,\n    label: 'XAG/USD',\n  },\n];\n\nconst granularitySelectConfig = [\n  {\n    id: Granularity.H1,\n    label: '1_hour',\n  },\n  {\n    id: Granularity.H4,\n    label: '4_hours',\n  },\n  {\n    id: Granularity.M5,\n    label: '5_minutes',\n  },\n  {\n    id: Granularity.M15,\n    label: '15_minutes',\n  },\n];\n\nexport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n};\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,sBAAsB;AAC5D,SAASC,YAAY,QAAQ,SAAS;AAEtC,MAAMC,gBAAgB,GAAG,CACvB;EACEC,EAAE,EAAEJ,QAAQ,CAACK,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEJ,QAAQ,CAACO,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAME,wBAAwB,GAAG,CAC/B;EACEJ,EAAE,EAAEF,YAAY,CAACO,OAAO;EACxBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACQ,OAAO;EACxBJ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACS,OAAO;EACxBL,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACU,OAAO;EACxBN,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACW,OAAO;EACxBP,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACY,OAAO;EACxBR,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACa,OAAO;EACxBT,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACc,OAAO;EACxBV,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACe,OAAO;EACxBX,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACgB,OAAO;EACxBZ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACiB,OAAO;EACxBb,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACkB,OAAO;EACxBd,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACmB,OAAO;EACxBf,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACoB,OAAO;EACxBhB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMiB,sBAAsB,GAAG,CAC7B,GAAGf,wBAAwB,EAC3B;EACEJ,EAAE,EAAEF,YAAY,CAACsB,OAAO;EACxBlB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACuB,OAAO;EACxBnB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMoB,uBAAuB,GAAG,CAC9B;EACEtB,EAAE,EAAEH,WAAW,CAAC0B,EAAE;EAClBrB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC2B,EAAE;EAClBtB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC4B,EAAE;EAClBvB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC6B,GAAG;EACnBxB,KAAK,EAAE;AACT,CAAC,CACF;AAED,SACEoB,uBAAuB,EACvBH,sBAAsB,EACtBf,wBAAwB,EACxBL,gBAAgB","ignoreList":[]}
+{"version":3,"file":"selectConfig.js","names":["BookType","Granularity","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_USD","EUR_AUD","EUR_GBP","EUR_JPY","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","instrumentSelectConfig","XAU_USD","XAG_USD","granularitySelectConfig","H1","H4"],"sources":["../../../src/CrowdViewWidget/selectConfig.ts"],"sourcesContent":["import { BookType, Granularity } from '../gql/types/graphql';\nimport { InstrumentId } from './types';\n\nconst navigationConfig = [\n  {\n    id: BookType.Order,\n    label: 'order_book',\n  },\n  {\n    id: BookType.Position,\n    label: 'position_book',\n  },\n];\n\nconst instrumentSelectConfigOC = [\n  {\n    id: InstrumentId.EUR_USD,\n    label: 'EUR/USD',\n  },\n  {\n    id: InstrumentId.EUR_AUD,\n    label: 'EUR/AUD',\n  },\n  {\n    id: InstrumentId.EUR_GBP,\n    label: 'EUR/GBP',\n  },\n  {\n    id: InstrumentId.EUR_JPY,\n    label: 'EUR/JPY',\n  },\n  {\n    id: InstrumentId.EUR_CHF,\n    label: 'EUR/CHF',\n  },\n  {\n    id: InstrumentId.USD_CHF,\n    label: 'USD/CHF',\n  },\n  {\n    id: InstrumentId.USD_JPY,\n    label: 'USD/JPY',\n  },\n  {\n    id: InstrumentId.USD_CAD,\n    label: 'USD/CAD',\n  },\n  {\n    id: InstrumentId.GBP_USD,\n    label: 'GBP/USD',\n  },\n  {\n    id: InstrumentId.GBP_JPY,\n    label: 'GBP/JPY',\n  },\n  {\n    id: InstrumentId.GBP_CHF,\n    label: 'GBP/CHF',\n  },\n  {\n    id: InstrumentId.AUD_JPY,\n    label: 'AUD/JPY',\n  },\n  {\n    id: InstrumentId.AUD_USD,\n    label: 'AUD/USD',\n  },\n  {\n    id: InstrumentId.NZD_USD,\n    label: 'NZD/USD',\n  },\n];\n\nconst instrumentSelectConfig = [\n  ...instrumentSelectConfigOC,\n  {\n    id: InstrumentId.XAU_USD,\n    label: 'XAU/USD',\n  },\n  {\n    id: InstrumentId.XAG_USD,\n    label: 'XAG/USD',\n  },\n];\n\nconst granularitySelectConfig = [\n  {\n    id: Granularity.H1,\n    label: '1_hour',\n  },\n  {\n    id: Granularity.H4,\n    label: '4_hours',\n  },\n];\n\nexport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n};\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,sBAAsB;AAC5D,SAASC,YAAY,QAAQ,SAAS;AAEtC,MAAMC,gBAAgB,GAAG,CACvB;EACEC,EAAE,EAAEJ,QAAQ,CAACK,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEJ,QAAQ,CAACO,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAME,wBAAwB,GAAG,CAC/B;EACEJ,EAAE,EAAEF,YAAY,CAACO,OAAO;EACxBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACQ,OAAO;EACxBJ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACS,OAAO;EACxBL,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACU,OAAO;EACxBN,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACW,OAAO;EACxBP,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACY,OAAO;EACxBR,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACa,OAAO;EACxBT,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACc,OAAO;EACxBV,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACe,OAAO;EACxBX,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACgB,OAAO;EACxBZ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACiB,OAAO;EACxBb,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACkB,OAAO;EACxBd,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACmB,OAAO;EACxBf,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACoB,OAAO;EACxBhB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMiB,sBAAsB,GAAG,CAC7B,GAAGf,wBAAwB,EAC3B;EACEJ,EAAE,EAAEF,YAAY,CAACsB,OAAO;EACxBlB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACuB,OAAO;EACxBnB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMoB,uBAAuB,GAAG,CAC9B;EACEtB,EAAE,EAAEH,WAAW,CAAC0B,EAAE;EAClBrB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC2B,EAAE;EAClBtB,KAAK,EAAE;AACT,CAAC,CACF;AAED,SACEoB,uBAAuB,EACvBH,sBAAsB,EACtBf,wBAAwB,EACxBL,gBAAgB","ignoreList":[]}

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

@@ -3,30 +3,32 @@
   "15_minutes": "15 minutes",
   "4_hours": "4 hours",
   "5_minutes": "5 minutes",
-  "buy_overbalance": "Buy overbalance",
   "buy": "Buy",
+  "buy_overbalance": "Buy overbalance",
   "candle": "Candle",
-  "close_price": "Close price",
+  "close": "Close",
   "data_unavailable": "Data unavailable",
+  "even_market_demand": "Even market demand",
   "granularity": "Granularity",
   "high": "High",
   "instrument": "Instrument",
-  "long_overbalance": "Long overbalance",
   "long": "Long",
+  "long_overbalance": "Long overbalance",
   "low": "Low",
   "no_matching_results": "No matching results",
-  "open_price": "Open price",
+  "open": "Open",
   "order_book": "Order book",
   "orders": "Orders",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "position_book": "Position book",
-  "positions": "Positions",
+  "price": "Price",
   "price_range": "Price range",
   "search": "Search",
-  "sell_overbalance": "Sell overbalance",
   "sell": "Sell",
+  "sell_overbalance": "Sell overbalance",
   "sentiment": "Sentiment",
-  "short_overbalance": "Short overbalance",
   "short": "Short",
-  "even_market_demand": "Even market demand"
+  "short_overbalance": "Short overbalance",
+  "tap_chart_to_see_more_details": "Tap chart to see more details",
+  "trades": "Trades"
 }

package/dist/types/CrowdViewWidget/components/Chart/Chart.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ChartProps } from './types';
-declare const Chart: ({ mainData, additionalData, isDesktop }: ChartProps) => React.JSX.Element;
+declare const Chart: ({ mainData, additionalData, isDesktop, isLoading, }: ChartProps) => React.JSX.Element;
 export { Chart };

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getDataZoomConfig.d.ts

@@ -1,2 +1,6 @@
 import type { DataZoomComponentOption } from 'echarts';
-export declare const getDataZoomConfig: () => DataZoomComponentOption;
+interface GetDataZoomConfigParams {
+    isDesktop: boolean;
+}
+export declare const getDataZoomConfig: ({ isDesktop, }: GetDataZoomConfigParams) => DataZoomComponentOption;
+export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getGridLines.d.ts

@@ -1,6 +1,7 @@
 import type { GraphicComponentOption } from 'echarts';
 interface GetGridLinesParams {
     isDark: boolean;
+    isDesktop: boolean;
 }
-export declare const getGridLines: ({ isDark, }: GetGridLinesParams) => GraphicComponentOption[];
+export declare const getGridLines: ({ isDark, isDesktop, }: GetGridLinesParams) => GraphicComponentOption[];
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.d.ts

@@ -0,0 +1,8 @@
+import type { GraphicComponentOption } from 'echarts';
+interface getLabelsConfigParams {
+    isDark: boolean;
+    isDesktop: boolean;
+    labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+export declare const getLabelsConfig: ({ isDark, isDesktop, labelCallback, }: getLabelsConfigParams) => GraphicComponentOption[];
+export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getSeriesCandlestickConfig.d.ts

@@ -1,9 +1,8 @@
 import type { CandlestickSeriesOption } from 'echarts';
 import type { ChartStyles } from '../chartUtils/getChartStyles';
 interface GetSeriesCandlestickConfigParams {
-    dates: string[];
-    isGreaterThanTwoWeeks: boolean;
     styles: ChartStyles;
+    isLoading: boolean;
 }
-export declare const getSeriesCandlestickConfig: ({ dates, isGreaterThanTwoWeeks, styles, }: GetSeriesCandlestickConfigParams) => CandlestickSeriesOption;
+export declare const getSeriesCandlestickConfig: ({ styles, isLoading, }: GetSeriesCandlestickConfigParams) => CandlestickSeriesOption;
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getSeriesHeatmapConfig.d.ts

@@ -6,6 +6,7 @@ interface GetSeriesHeatmapConfigParams {
     isDark: boolean;
     sentimentThresholdMax: number;
     sentimentThresholdMin: number;
+    isLoading: boolean;
 }
-export declare const getSeriesHeatmapConfig: ({ bucketWidth, buckets, isDark, sentimentThresholdMax, sentimentThresholdMin, }: GetSeriesHeatmapConfigParams) => CustomSeriesOption;
+export declare const getSeriesHeatmapConfig: ({ bucketWidth, buckets, isDark, sentimentThresholdMax, sentimentThresholdMin, isLoading, }: GetSeriesHeatmapConfigParams) => CustomSeriesOption;
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getSeriesSentimentConfig.d.ts

@@ -2,6 +2,7 @@ import type { LineSeriesOption } from 'echarts';
 import type { ChartStyles } from '../chartUtils';
 interface GetSeriesSentimentConfigParams {
     styles: ChartStyles;
+    isLoading: boolean;
 }
-export declare const getSeriesSentimentConfig: ({ styles, }: GetSeriesSentimentConfigParams) => LineSeriesOption;
+export declare const getSeriesSentimentConfig: ({ styles, isLoading, }: GetSeriesSentimentConfigParams) => LineSeriesOption;
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.d.ts

@@ -11,6 +11,11 @@ interface GetTooltipConfigParams {
         current: number;
     };
     tooltipLinesColor: string;
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
+    isDesktop: boolean;
+    isDark: boolean;
+    locale: string;
 }
-export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, }: GetTooltipConfigParams) => TooltipComponentOption;
+export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, sentimentLongs, sentimentShorts, isDesktop, isDark, locale, }: GetTooltipConfigParams) => TooltipComponentOption;
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getXAxisConfig.d.ts

@@ -2,6 +2,7 @@ import type { XAXisComponentOption } from 'echarts';
 interface GetXAxisConfigParams {
     dates: string[];
     isGreaterThanTwoWeeks: boolean;
+    locale: string;
 }
-export declare const getXAxisConfig: ({ dates, isGreaterThanTwoWeeks, }: GetXAxisConfigParams) => XAXisComponentOption[];
+export declare const getXAxisConfig: ({ dates, isGreaterThanTwoWeeks, locale, }: GetXAxisConfigParams) => XAXisComponentOption[];
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/getYAxisConfig.d.ts

@@ -3,7 +3,6 @@ interface GetYAxisConfigParams {
     bucketWidth: number;
     displayPrecision: number;
     isDesktop: boolean;
-    labelCallback: (key: string, params?: Record<string, unknown>) => string;
 }
-export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, isDesktop, labelCallback, }: GetYAxisConfigParams) => YAXisComponentOption[];
+export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, isDesktop, }: GetYAxisConfigParams) => YAXisComponentOption[];
 export {};

package/dist/types/CrowdViewWidget/components/Chart/chartOptions/index.d.ts

@@ -1,6 +1,7 @@
 export * from './getDataZoomConfig';
 export * from './getGridConfig';
 export * from './getGridLines';
+export * from './getLabelsConfig';
 export * from './getSeriesCandlestickConfig';
 export * from './getSeriesHeatmapConfig';
 export * from './getSeriesSentimentConfig';

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel.d.ts

@@ -0,0 +1 @@
+export declare const formatXAxisAdditionalLabel: (value: unknown, isGreaterThanTwoWeeks: boolean, locale: string) => string;

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.d.ts

@@ -1 +1 @@
-export declare const formatXAxisLabel: (value: unknown, isGreaterThanTwoWeeks: boolean) => string;
+export declare const formatXAxisLabel: (value: unknown, isGreaterThanTwoWeeks: boolean, locale: string) => string;

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/getLabelData.d.ts

@@ -1,17 +1,2 @@
 import type { GetLabelsDataProps } from '../types';
-export declare const getLabelData: ({ dates, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => {
-    readonly name: string;
-    readonly xAxis: string;
-    readonly y: number;
-    readonly silent: true;
-    readonly emphasis: {
-        readonly disabled: true;
-    };
-    readonly label: {
-        readonly fontFamily: "Sofia W03";
-        readonly fontSize: 10;
-        readonly position: "bottom";
-        readonly align: "center";
-        readonly formatter: "{b}";
-    };
-}[];
+export declare const getLabelData: ({ dates, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => string[];

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/getTooltipFormatter.d.ts

@@ -1,10 +1,15 @@
 import { BookType } from '../../../../gql/types/graphql';
 import type { Bucket, TooltipParam } from '../types';
-export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, bookType, labelCallback, }: {
+export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, bookType, labelCallback, sentimentLongs, sentimentShorts, isDesktop, locale, isDark, }: {
     params: TooltipParam[];
     buckets: Bucket[][];
     bucketWidth: number;
     selectedPrice: number;
     bookType: BookType;
     labelCallback: (key: string) => string;
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
+    isDesktop: boolean;
+    locale: string;
+    isDark: boolean;
 }) => string;

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/handleLabelUpdate.d.ts

@@ -0,0 +1,4 @@
+import type { EChartsType } from 'echarts';
+import type { MutableRefObject } from 'react';
+import type { ChartProps } from '../types';
+export declare const handleLabelUpdate: (instance: EChartsType, mainData: ChartProps["mainData"], labelTimerRef: MutableRefObject<NodeJS.Timeout | null>, isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>, locale: string) => void;

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/handleTooltipUpdate.d.ts

@@ -0,0 +1,3 @@
+import type { EChartsType } from 'echarts';
+import type { MutableRefObject } from 'react';
+export declare const handleTooltipUpdate: (instance: EChartsType, zoomTimerRef: MutableRefObject<NodeJS.Timeout | null>, tooltipVisibleRef: MutableRefObject<boolean>, canHover: boolean) => void;

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/index.d.ts

@@ -1,7 +1,11 @@
+export * from './formatXAxisAdditionalLabel';
 export * from './formatXAxisLabel';
 export * from './getChartStyles';
 export * from './getGradientColor';
 export * from './getLabelData';
 export * from './getRectColor';
 export * from './getTooltipFormatter';
+export * from './handleLabelUpdate';
+export * from './handleTooltipUpdate';
 export * from './isDifferenceGreaterThanTwoWeeks';
+export * from './normalizeLocale';

package/dist/types/CrowdViewWidget/components/Chart/chartUtils/normalizeLocale.d.ts

@@ -0,0 +1 @@
+export declare const normalizeLocale: (locale: string) => string;

package/dist/types/CrowdViewWidget/components/Chart/dataUtils/getMultiplayerForTimeSpan.d.ts

@@ -0,0 +1,2 @@
+import { Granularity } from '../../../../gql/types/graphql';
+export declare const getMultiplayerForTimeSpan: (granularity: Granularity) => number;

package/dist/types/CrowdViewWidget/components/Chart/dataUtils/index.d.ts

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

package/dist/types/CrowdViewWidget/components/Chart/types.d.ts

@@ -34,6 +34,9 @@ export interface UseCrowdViewDataReturn {
     mainData?: CrowdViewMainData | null;
     additionalData?: CrowdViewAdditionalData | null;
     loading: boolean;
+    priceCandlesLoading: boolean;
+    orderPositionLoading: boolean;
+    sentimentsLoading: boolean;
     error: boolean;
 }
 interface GetOptionProps {
@@ -41,13 +44,16 @@ interface GetOptionProps {
     additionalData: CrowdViewAdditionalData;
     isDark: boolean;
     isDesktop: boolean;
+    isLoading: boolean;
     labelCallback: (key: string, params?: Record<string, unknown>) => string;
+    locale: string;
 }
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
 export interface ChartProps {
     mainData: CrowdViewMainData;
     additionalData: CrowdViewAdditionalData;
     isDesktop: boolean;
+    isLoading: boolean;
 }
 export interface ChartWithDataProps {
     bookType: BookType;

package/dist/types/CrowdViewWidget/components/Chart/useResizeObserver.d.ts

@@ -0,0 +1,5 @@
+interface UseResizeObserverOptions {
+    debounceDelay?: number;
+}
+export declare const useResizeObserver: (options?: UseResizeObserverOptions) => [React.RefObject<HTMLDivElement>, boolean];
+export {};

package/dist/types/CrowdViewWidget/constants.d.ts

@@ -1,35 +1,48 @@
 import { InstrumentId } from './types';
 export declare const BUCKET_CONFIG: {
-    readonly MULTIPLIER: 4;
+    readonly MULTIPLIER_5M: 1;
+    readonly MULTIPLIER_15M: 1;
+    readonly MULTIPLIER_1H: 2;
+    readonly MULTIPLIER_4H: 4;
     readonly PRICE_MARGIN_MULTIPLIER: 2;
 };
 export declare const TIME_THRESHOLDS: {
     readonly TWO_WEEKS_MS: number;
 };
 export declare const CHART_CONFIG: {
-    readonly HEIGHT: 440;
-    readonly MAIN_HEIGHT: 400;
-    readonly MARGIN_BETWEEN: 50;
-    readonly SENTIMENT_HEIGHT: 120;
-    readonly WIDTH: 9999;
-    readonly X_LABEL_SIZE: 40;
-    readonly Y_LABEL_SIZE_DESKTOP: 60;
-    readonly Y_LABEL_SIZE_MOBILE: 40;
-    readonly Y_SENTIMENT_LABEL_SIZE: 40;
-    readonly INITIAL_START_ZOOM: 90;
-    readonly INITIAL_END_ZOOM: 100;
-    readonly X_AXIS_DATE_PADDING: "        ";
-    readonly SENTIMENT_MIN: 0;
-    readonly SENTIMENT_MAX: 100;
+    readonly HEIGHT_DESKTOP: number;
+    readonly HEIGHT_MOBILE: number;
+    readonly MAIN_HEIGHT_DESKTOP: number;
+    readonly MAIN_HEIGHT_MOBILE: number;
+    readonly MARGIN_BETWEEN: number;
+    readonly SENTIMENT_HEIGHT: number;
+    readonly WIDTH: number;
+    readonly X_LABEL_SIZE: number;
+    readonly Y_LABEL_SIZE_DESKTOP: number;
+    readonly Y_LABEL_SIZE_MOBILE: number;
+    readonly Y_SENTIMENT_LABEL_DESKTOP_SIZE: number;
+    readonly Y_SENTIMENT_LABEL_MOBILE_SIZE: number;
+    readonly INITIAL_START_ZOOM_DESKTOP: number;
+    readonly INITIAL_START_ZOOM_MOBILE: number;
+    readonly INITIAL_END_ZOOM: number;
+    readonly X_AXIS_DATE_PADDING: string;
+    readonly SENTIMENT_MIN: number;
+    readonly SENTIMENT_MAX: number;
+    readonly TOP_MARGIN_DESKTOP: number;
+    readonly TOP_MARGIN_MOBILE: number;
+    readonly MOBILE_TOOLTIP_HEIGHT: number;
+    readonly TOOLTIP_OFFSET: number;
 };
 export declare const COLOR_MAP: {
     readonly dark: {
         readonly long: readonly [string, string];
         readonly short: readonly [string, string];
+        readonly backgroundColor: string;
     };
     readonly light: {
         readonly long: readonly [string, string];
         readonly short: readonly [string, string];
+        readonly backgroundColor: string;
     };
 };
 export declare const INSTRUMENTS_CONFIG: Record<InstrumentId, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "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.236",
+    "@oanda/labs-widget-common": "^1.0.238",
     "@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": "f04c026db9ec11a1d0ac934dd66146c877b01570"
+  "gitHead": "e8ab708b3dac3a041e9ed7fda6458ca06571d6cf"
 }

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -18,21 +18,18 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { CHART_CONFIG } from '../../constants';
 import {
-  formatXAxisLabel,
-  getLabelData,
+  handleLabelUpdate,
+  handleTooltipUpdate,
   isDifferenceGreaterThanTwoWeeks,
+  normalizeLocale,
 } from './chartUtils';
 import { getOption } from './getOption';
-import type {
-  ChartProps,
-  DataZoomArray,
-  DataZoomEvent,
-  XAxisArray,
-} from './types';
+import type { ChartProps, DataZoomEvent } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -51,87 +48,88 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
+const Chart = ({
+  mainData,
+  additionalData,
+  isDesktop,
+  isLoading,
+}: ChartProps) => {
   const { isDark } = useLayoutProvider();
-  const { lang } = useLocale();
+  const { lang, locale } = useLocale();
+  const canHover = useMediaQuery('(hover: hover)');
+  const labelTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const isGreaterThanTwoWeeksRef = useRef<boolean | null>(null);
+  const zoomTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const tooltipVisibleRef = useRef<boolean>(true);
 
-  return (
-    <BaseChart
-      chartHeight={CHART_CONFIG.HEIGHT}
-      echarts={echarts}
-      isDark={isDark}
-      lazyUpdate={true}
-      option={getOption({
-        mainData,
-        additionalData,
-        isDark,
-        isDesktop,
-        labelCallback: lang,
-      })}
-      opts={{ renderer: 'canvas' }}
-      onEvents={{
-        datazoom: (params: DataZoomEvent, instance: EChartsType) => {
-          if (!params.batch?.[0]) {
-            return;
-          }
+  const initialIsGreaterThanTwoWeeks = useMemo(() => {
+    const { dates } = mainData;
+    const initialStartZoom = isDesktop
+      ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP
+      : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;
 
-          const { dates } = mainData;
+    const visibleXAxisData = dates.slice(
+      (dates.length * initialStartZoom) / 100,
+      (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+    );
 
-          const { dataZoom, xAxis } = instance.getOption();
-          if (
-            !Array.isArray(dataZoom) ||
-            dataZoom.length === 0 ||
-            !dataZoom[0] ||
-            typeof dataZoom[0].startValue !== 'number' ||
-            typeof dataZoom[0].endValue !== 'number'
-          ) {
-            return;
-          }
+    if (visibleXAxisData.length === 0) {
+      return false;
+    }
 
-          const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];
+    return isDifferenceGreaterThanTwoWeeks(
+      visibleXAxisData[0],
+      visibleXAxisData[visibleXAxisData.length - 1]
+    );
+  }, [mainData, isDesktop]);
 
-          if (!dates[startValue] || !dates[endValue]) {
-            return;
-          }
+  useEffect(() => {
+    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;
+  }, [initialIsGreaterThanTwoWeeks]);
 
-          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-            dates[startValue],
-            dates[endValue]
-          );
+  const chartOption = useMemo(
+    () =>
+      getOption({
+        mainData,
+        additionalData,
+        isDark,
+        isDesktop,
+        isLoading,
+        locale: normalizeLocale(locale),
+        labelCallback: lang,
+      }),
+    [mainData, additionalData, isDark, isDesktop, isLoading, lang, locale]
+  );
 
-          const wasGreaterThanTwoWeeks =
-            Array.isArray(xAxis) &&
-            xAxis.length > 0 &&
-            (xAxis as XAxisArray)[0]?.name === 'xAxis-greater-than-two-weeks';
+  // Memoize event handler to prevent unnecessary re-renders
+  const handleDataZoom = useCallback(
+    (_params: DataZoomEvent, instance: EChartsType) => {
+      handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);
+      handleLabelUpdate(
+        instance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        normalizeLocale(locale)
+      );
+    },
+    [mainData, canHover, locale]
+  );
 
-          if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
-            const labelsData = getLabelData({
-              dates,
-              isGreaterThanTwoWeeks,
-            });
+  const chartHeight = isDesktop
+    ? CHART_CONFIG.HEIGHT_DESKTOP
+    : CHART_CONFIG.HEIGHT_MOBILE;
 
-            instance.setOption({
-              xAxis: {
-                id: 'main-xAxis',
-                name: isGreaterThanTwoWeeks
-                  ? 'xAxis-greater-than-two-weeks'
-                  : 'xAxis-less-than-two-weeks',
-                axisLabel: {
-                  formatter: (value: string) =>
-                    formatXAxisLabel(value, isGreaterThanTwoWeeks),
-                },
-              },
-              series: [
-                {
-                  id: 'candlestick',
-                  markPoint: {
-                    data: labelsData,
-                  },
-                },
-              ],
-            });
-          }
-        },
+  return (
+    <BaseChart
+      chartHeight={chartHeight}
+      echarts={echarts}
+      isDark={isDark}
+      lazyUpdate={true}
+      option={chartOption}
+      opts={{ renderer: 'canvas' }}
+      onEvents={{
+        datazoom: handleDataZoom,
       }}
     />
   );