@oanda/labs-crowd-view-widget 1.0.53 → 1.0.55

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_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"],"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\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

@@ -27,5 +27,7 @@
   "sell": "Sell",
   "sentiment": "Sentiment",
   "short_overbalance": "Short overbalance",
-  "short": "Short"
+  "short": "Short",
+  "even_market_demand": "Even market demand",
+  "price": "Price"
 }

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

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

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

@@ -0,0 +1,6 @@
+import type { GridComponentOption } from 'echarts';
+interface GetGridConfigParams {
+    isDesktop: boolean;
+}
+export declare const getGridConfig: ({ isDesktop, }: GetGridConfigParams) => GridComponentOption[];
+export {};

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

@@ -0,0 +1,7 @@
+import type { GraphicComponentOption } from 'echarts';
+interface GetGridLinesParams {
+    isDark: boolean;
+    isDesktop: boolean;
+}
+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

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

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

@@ -0,0 +1,12 @@
+import type { CustomSeriesOption } from 'echarts';
+import type { Bucket } from '../types';
+interface GetSeriesHeatmapConfigParams {
+    bucketWidth: number;
+    buckets: Bucket[][];
+    isDark: boolean;
+    sentimentThresholdMax: number;
+    sentimentThresholdMin: number;
+    isLoading: boolean;
+}
+export declare const getSeriesHeatmapConfig: ({ bucketWidth, buckets, isDark, sentimentThresholdMax, sentimentThresholdMin, isLoading, }: GetSeriesHeatmapConfigParams) => CustomSeriesOption;
+export {};

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

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

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

@@ -0,0 +1,18 @@
+import type { TooltipComponentOption } from 'echarts';
+import type { BookType } from '../../../../gql/types/graphql';
+import type { Bucket } from '../types';
+interface GetTooltipConfigParams {
+    bookType: BookType;
+    bucketWidth: number;
+    buckets: Bucket[][];
+    displayPrecision: number;
+    labelCallback: (key: string, params?: Record<string, unknown>) => string;
+    selectedPriceRef: {
+        current: number;
+    };
+    tooltipLinesColor: string;
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
+}
+export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, sentimentLongs, sentimentShorts, }: GetTooltipConfigParams) => TooltipComponentOption;
+export {};

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

@@ -0,0 +1,7 @@
+import type { VisualMapComponentOption } from 'echarts';
+interface GetVisualMapConfigParams {
+    sentimentLongColor: string;
+    sentimentShortColor: string;
+}
+export declare const getVisualMapConfig: ({ sentimentLongColor, sentimentShortColor, }: GetVisualMapConfigParams) => VisualMapComponentOption;
+export {};

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

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

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

@@ -0,0 +1,7 @@
+import type { YAXisComponentOption } from 'echarts';
+interface GetYAxisConfigParams {
+    bucketWidth: number;
+    displayPrecision: number;
+}
+export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, }: GetYAxisConfigParams) => YAXisComponentOption[];
+export {};

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

@@ -0,0 +1,11 @@
+export * from './getDataZoomConfig';
+export * from './getGridConfig';
+export * from './getGridLines';
+export * from './getLabelsConfig';
+export * from './getSeriesCandlestickConfig';
+export * from './getSeriesHeatmapConfig';
+export * from './getSeriesSentimentConfig';
+export * from './getTooltipConfig';
+export * from './getVisualMapConfig';
+export * from './getXAxisConfig';
+export * from './getYAxisConfig';

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

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

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

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

package/dist/types/CrowdViewWidget/components/Chart/{utils → chartUtils}/getChartStyles.d.ts

@@ -1,10 +1,10 @@
 export interface ChartStyles {
     sentimentLongColor: string;
     sentimentShortColor: string;
+    sentimentOutlineColor: string;
     candleLongColor: string;
     candleShortColor: string;
-    sentimentAreaOpacity: number;
     tooltipLinesColor: string;
-    sentimentLabelColor: string;
+    sentimentOutlineWidth: number;
 }
 export declare const getChartStyles: (isDark: boolean) => ChartStyles;

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

@@ -0,0 +1 @@
+export declare const getGradientColor: (value: number, startColor: string, targetColor: string, minThreshold: number, maxThreshold: number) => string;

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

@@ -0,0 +1,2 @@
+import type { GetLabelsDataProps } from '../types';
+export declare const getLabelData: ({ dates, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => string[];

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

@@ -0,0 +1 @@
+export declare const getRectColor: (sentiment: number, isDark: boolean, minThreshold: number, maxThreshold: number) => string;

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

@@ -0,0 +1,12 @@
+import { BookType } from '../../../../gql/types/graphql';
+import type { Bucket, TooltipParam } from '../types';
+export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, bookType, labelCallback, sentimentLongs, sentimentShorts, }: {
+    params: TooltipParam[];
+    buckets: Bucket[][];
+    bucketWidth: number;
+    selectedPrice: number;
+    bookType: BookType;
+    labelCallback: (key: string) => string;
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
+}) => 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>) => 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

@@ -0,0 +1,10 @@
+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';

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

@@ -0,0 +1 @@
+export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;

package/dist/types/CrowdViewWidget/{utils/instrumentUtils.d.ts → components/Chart/dataUtils/getInstrumentConfigForDivision.d.ts}

@@ -1,5 +1,5 @@
-import { Division } from '../../gql/types/graphql';
+import { Division } from '../../../../gql/types/graphql';
 export declare const getInstrumentConfigForDivision: (division: Division) => {
-    id: import("..").InstrumentId;
+    id: import("../../..").InstrumentId;
     label: 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/getTimeSpanForGranularity.d.ts

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

package/dist/types/CrowdViewWidget/components/Chart/{utils → dataUtils}/index.d.ts

@@ -1,5 +1,6 @@
-export * from './chartUtils';
-export * from './getChartStyles';
+export * from './getInstrumentConfigForDivision';
+export * from './getMultiplayerForTimeSpan';
+export * from './getTimeSpanForGranularity';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';
 export * from './processSentiments';

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

@@ -1,6 +1,6 @@
 export * from './Chart';
 export * from './chartOptions';
 export * from './ChartWithData';
+export * from './dataUtils';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils';

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,6 +44,7 @@ interface GetOptionProps {
     additionalData: CrowdViewAdditionalData;
     isDark: boolean;
     isDesktop: boolean;
+    isLoading: boolean;
     labelCallback: (key: string, params?: Record<string, unknown>) => string;
 }
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
@@ -48,6 +52,7 @@ export interface ChartProps {
     mainData: CrowdViewMainData;
     additionalData: CrowdViewAdditionalData;
     isDesktop: boolean;
+    isLoading: boolean;
 }
 export interface ChartWithDataProps {
     bookType: BookType;

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { BookType } from '../../../gql/types/graphql';
 interface LegendProps {
-    longValues: (number | undefined)[];
-    shortValues: (number | undefined)[];
     bookType: BookType;
-    isDark: boolean;
 }
-export declare const Legend: ({ longValues, shortValues, bookType, isDark, }: LegendProps) => React.JSX.Element;
+export declare const Legend: ({ bookType }: LegendProps) => React.JSX.Element;
 export {};

package/dist/types/CrowdViewWidget/components/Legend/LegendBar.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 export type LegendType = 'long' | 'short';
 interface LegendBarProps {
-    values: (number | undefined)[];
     type: LegendType;
-    label: string;
     isDark: boolean;
 }
-export declare const LegendBar: ({ values, type, label, isDark }: LegendBarProps) => React.JSX.Element;
+export declare const LegendBar: ({ type, isDark }: LegendBarProps) => React.JSX.Element;
 export {};

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

@@ -1,30 +1,34 @@
 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_DESKTOP: 50;
     readonly Y_LABEL_SIZE_MOBILE: 40;
-    readonly INITIAL_START_ZOOM: 80;
+    readonly Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40;
+    readonly Y_SENTIMENT_LABEL_MOBILE_SIZE: 30;
+    readonly INITIAL_START_ZOOM_DESKTOP: 70;
+    readonly INITIAL_START_ZOOM_MOBILE: 85;
     readonly INITIAL_END_ZOOM: 100;
     readonly X_AXIS_DATE_PADDING: "        ";
     readonly SENTIMENT_MIN: 0;
     readonly SENTIMENT_MAX: 100;
-    readonly SENTIMENT_INTERVAL: 25;
-    readonly SENTIMENT_TEXT_OFFSET: 16;
-};
-export declare const CHART_CONFIG_CALCULATED: {
-    FULL_HEIGHT: number;
-    SENTIMENT_TEXT_POSITION: number;
+    readonly TOP_MARGIN_DESKTOP: 0;
+    readonly TOP_MARGIN_MOBILE: 30;
+    readonly TOOLTIP_OFFSET: 5;
 };
 export declare const COLOR_MAP: {
     readonly dark: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "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.235",
+    "@oanda/labs-widget-common": "^1.0.237",
     "@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": "4ee940ddbff3283e2d6e412b0216df56a4eff346"
+  "gitHead": "c229ff589fb221f71aa5b10c1498b32e4a3b61b3"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -10,10 +10,10 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
-import { ChartWithData } from './components';
+import { ChartWithData, Legend } from './components';
+import { getInstrumentConfigForDivision } from './components/Chart/dataUtils/getInstrumentConfigForDivision';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
 import type { InstrumentId, MainProps } from './types';
-import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const { lang } = useLocale();
@@ -107,6 +107,7 @@ const Main = ({ division }: MainProps) => {
             granularity={granularity.id}
             instrument={instrument.id}
           />
+          <Legend bookType={bookType} />
         </div>
       )}
     </>

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

@@ -12,28 +12,23 @@ import {
   DataZoomInsideComponent,
   GraphicComponent,
   GridSimpleComponent,
-  MarkAreaComponent,
-  MarkPointComponent,
+  MarkLineComponent,
   TooltipComponent,
   VisualMapComponent,
 } 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_CALCULATED } from '../../constants';
-import { getOption } from './chartOptions';
-import type {
-  ChartProps,
-  DataZoomArray,
-  DataZoomEvent,
-  XAxisArray,
-} from './types';
+import { CHART_CONFIG } from '../../constants';
 import {
-  formatXAxisLabel,
-  getLabelData,
+  handleLabelUpdate,
+  handleTooltipUpdate,
   isDifferenceGreaterThanTwoWeeks,
-} from './utils/chartUtils';
+} from './chartUtils';
+import { getOption } from './getOption';
+import type { ChartProps, DataZoomEvent } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -43,8 +38,7 @@ echarts.use([
   CustomChart,
   TooltipComponent,
   CandlestickChart,
-  MarkPointComponent,
-  MarkAreaComponent,
+  MarkLineComponent,
   LineChart,
   VisualMapComponent,
   DatasetComponent,
@@ -53,109 +47,82 @@ 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 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);
+
+  const initialIsGreaterThanTwoWeeks = useMemo(() => {
+    const { dates } = mainData;
+    const initialStartZoom = isDesktop
+      ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP
+      : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;
+
+    const visibleXAxisData = dates.slice(
+      (dates.length * initialStartZoom) / 100,
+      (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+    );
+
+    if (visibleXAxisData.length === 0) {
+      return false;
+    }
+
+    return isDifferenceGreaterThanTwoWeeks(
+      visibleXAxisData[0],
+      visibleXAxisData[visibleXAxisData.length - 1]
+    );
+  }, [mainData, isDesktop]);
+
+  useEffect(() => {
+    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;
+  }, [initialIsGreaterThanTwoWeeks]);
+
+  const chartOption = useMemo(
+    () =>
+      getOption({
+        mainData,
+        additionalData,
+        isDark,
+        isDesktop,
+        isLoading,
+        labelCallback: lang,
+      }),
+    [mainData, additionalData, isDark, isDesktop, isLoading, lang]
+  );
+
+  // 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
+      );
+    },
+    [mainData, canHover]
+  );
 
   return (
     <BaseChart
-      chartHeight={CHART_CONFIG_CALCULATED.FULL_HEIGHT}
+      chartHeight={CHART_CONFIG.HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption({
-        mainData,
-        additionalData,
-        isDark,
-        isDesktop,
-        labelCallback: lang,
-      })}
+      option={chartOption}
       opts={{ renderer: 'canvas' }}
       onEvents={{
-        datazoom: (params: DataZoomEvent, instance: EChartsType) => {
-          if (!params.batch?.[0]) {
-            return;
-          }
-
-          const { dates } = mainData;
-          const batchItem = params.batch[0];
-          const { start, end } = batchItem;
-
-          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;
-          }
-
-          const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];
-
-          if (batchItem.dataZoomId === 'main') {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              dataZoomId: 'sentiment',
-              start,
-              end,
-              filterMode: 'none',
-            });
-          }
-
-          if (batchItem.dataZoomId === 'sentiment') {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              dataZoomId: 'main',
-              start,
-              end,
-              filterMode: 'filter',
-            });
-          }
-
-          if (!dates[startValue] || !dates[endValue]) {
-            return;
-          }
-
-          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-            dates[startValue],
-            dates[endValue]
-          );
-
-          const wasGreaterThanTwoWeeks =
-            Array.isArray(xAxis) &&
-            xAxis.length > 0 &&
-            (xAxis as XAxisArray)[0]?.name === 'xAxis-greater-than-two-weeks';
-
-          if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
-            const labelsData = getLabelData({
-              dates,
-              isGreaterThanTwoWeeks,
-            });
-
-            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,
-                  },
-                },
-              ],
-            });
-          }
-        },
+        datazoom: handleDataZoom,
       }}
     />
   );