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

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

@@ -1,17 +1,28 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
 import { BookType } from '../../../../gql/types/graphql';
 import type { Bucket, TooltipParam } from '../types';
 
 const DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
-  hour: '2-digit',
-  minute: '2-digit',
-  year: 'numeric',
   day: 'numeric',
   month: 'numeric',
-  timeZoneName: 'short',
+  year: 'numeric',
+
+  hour: 'numeric',
+  minute: '2-digit',
+  hour12: false,
+
+  timeZoneName: 'shortOffset',
 };
 
 const SENTIMENT_DISPLAY_PRECISION = 2;
 
+const TOOLTIP_STYLES = {
+  MOBILE_COLUMN_WIDTH: '33.3%',
+  PADDING_BOTTOM: '4px',
+  FULL_WIDTH: '100%',
+} as const;
+
 const calculateBucketDisplayPrecision = (bucketWidth: number): number => {
   return bucketWidth.toString().split('.')[1]?.length || 0;
 };
@@ -26,6 +37,22 @@ const findSeriesParam = <T extends TooltipParam['seriesId']>(
   );
 };
 
+const findSentimentSeriesParam = (
+  params: TooltipParam[],
+  sentimentLongs: (number | null)[],
+  sentimentShorts: (number | null)[]
+): {
+  sentimentLong: number | null;
+  sentimentShort: number | null;
+} => {
+  const index = params[0].dataIndex as number;
+
+  return {
+    sentimentLong: sentimentLongs[index] ?? null,
+    sentimentShort: sentimentShorts[index] ?? null,
+  };
+};
+
 const getSentimentOverbalanceLabel = (
   sentiment: number,
   bookType: BookType
@@ -43,11 +70,17 @@ const formatCandleData = (
   labelCallback: (key: string) => string
 ): string => {
   const [, open, close, low, high] = candleData;
-  return `<p><b>${labelCallback('candle')}:</b></p>
-<p>${labelCallback('open_price')}: ${open} </p>
-<p>${labelCallback('close_price')}: ${close} </p>
-<p>${labelCallback('low')}: ${low} </p>
-<p>${labelCallback('high')}: ${high} </p>
+  const candleLabel = labelCallback('candle');
+  const openLabel = labelCallback('open');
+  const closeLabel = labelCallback('close');
+  const lowLabel = labelCallback('low');
+  const highLabel = labelCallback('high');
+
+  return `<div><b>${candleLabel}:</b></div>
+<div>${openLabel}: ${open} </div>
+<div>${closeLabel}: ${close} </div>
+<div>${lowLabel}: ${low} </div>
+<div>${highLabel}: ${high} </div>
 `;
 };
 
@@ -57,14 +90,16 @@ const formatBookData = ({
   bucketDisplayPrecision,
   bookType,
   labelCallback,
+  isDesktop,
 }: {
   matchedBucket: Bucket;
   bucketWidth: number;
   bucketDisplayPrecision: number;
   bookType: BookType;
   labelCallback: (key: string) => string;
+  isDesktop: boolean;
 }): string => {
-  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'positions';
+  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'trades';
   const priceRangeStart = matchedBucket.price.toFixed(bucketDisplayPrecision);
   const priceRangeEnd = (matchedBucket.price + bucketWidth).toFixed(
     bucketDisplayPrecision
@@ -73,32 +108,39 @@ const formatBookData = ({
     matchedBucket.sentiment,
     bookType
   );
-  const sentimentValue = Math.abs(matchedBucket.sentiment).toFixed(
-    bucketDisplayPrecision
-  );
+  const sentimentValue = Math.abs(matchedBucket.sentiment);
 
-  return `<br /><p><b>${labelCallback(bookLabelKey)}:</b></p>
-<p>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </p>
-<p>${labelCallback(sentimentLabel)}: ${sentimentValue}% </p>`;
+  return isDesktop
+    ? `<div><b>${labelCallback(bookLabelKey)}:</b></div>
+<div>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </div>
+<div>${labelCallback(sentimentLabel)}: ${sentimentValue}% </div>`
+    : `<div><b>${labelCallback(bookLabelKey)}:</b></div>
+<div>${labelCallback('price_range')}:</div>
+<div>${priceRangeStart} - ${priceRangeEnd} </div>
+<div>${labelCallback(sentimentLabel)}:</div>
+<div>${sentimentValue}% </div>`;
 };
 
 const formatSentimentData = (
-  sentimentParam: Extract<TooltipParam, { seriesId: 'sentiment' }>,
+  sentimentLong: number,
+  sentimentShort: number,
   labelCallback: (key: string) => string
 ): string => {
-  const [, shortPercent, longPercent] = sentimentParam.value;
-  return `<br /><p><b>${labelCallback('sentiment')}:</b></p>
-<p>${labelCallback('long')}: ${longPercent.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>
-<p>${labelCallback('short')}: ${shortPercent.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>`;
+  return `<div><b>${labelCallback('sentiment')}:</b></div>
+<div>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>
+<div>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>`;
 };
 
 const hasValidCandleData = (
   candleData: [number, number, number, number, number]
 ): boolean =>
-  !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[3];
+  !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
+
 const hasValidSentimentData = (
-  sentimentParam: Extract<TooltipParam, { seriesId: 'sentiment' }> | undefined
-): boolean => !!sentimentParam?.value[1] && !!sentimentParam?.value[2];
+  sentimentLong: number | null,
+  sentimentShort: number | null
+): boolean => sentimentLong !== null && sentimentShort !== null;
+
 const findMatchingBucket = (
   buckets: Bucket[][],
   bucketsIndex: number | undefined,
@@ -121,6 +163,11 @@ export const getTooltipFormatter = ({
   selectedPrice,
   bookType,
   labelCallback,
+  sentimentLongs,
+  sentimentShorts,
+  isDesktop,
+  locale,
+  isDark,
 }: {
   params: TooltipParam[];
   buckets: Bucket[][];
@@ -128,6 +175,11 @@ export const getTooltipFormatter = ({
   selectedPrice: number;
   bookType: BookType;
   labelCallback: (key: string) => string;
+  sentimentLongs: (number | null)[];
+  sentimentShorts: (number | null)[];
+  isDesktop: boolean;
+  locale: string;
+  isDark: boolean;
 }) => {
   if (!params || !Array.isArray(params) || params.length === 0) {
     return '';
@@ -135,7 +187,11 @@ export const getTooltipFormatter = ({
 
   const candleParam = findSeriesParam(params, 'candlestick');
   const booksParam = findSeriesParam(params, 'heatmap');
-  const sentimentParam = findSeriesParam(params, 'sentiment');
+  const { sentimentLong, sentimentShort } = findSentimentSeriesParam(
+    params,
+    sentimentLongs,
+    sentimentShorts
+  );
 
   if (!candleParam) {
     return '';
@@ -152,16 +208,19 @@ export const getTooltipFormatter = ({
     bucketWidth
   );
   const showCandles = hasValidCandleData(candleData);
-  const showSentiment = hasValidSentimentData(sentimentParam);
+  const showSentiment = hasValidSentimentData(sentimentLong, sentimentShort);
 
   if (!showCandles && !matchedBucket) {
     return '';
   }
 
-  const timeFormatted = time.toLocaleString(undefined, DATE_FORMAT_OPTIONS);
+  const timeFormatted = time
+    .toLocaleString(locale, DATE_FORMAT_OPTIONS)
+    .replace(/\//g, '.');
   const candleSection = showCandles
     ? formatCandleData(candleData, labelCallback)
     : '';
+
   const bookSection = matchedBucket
     ? formatBookData({
         matchedBucket,
@@ -169,15 +228,82 @@ export const getTooltipFormatter = ({
         bucketDisplayPrecision,
         bookType,
         labelCallback,
+        isDesktop,
       })
     : '';
+
   const sentimentSection =
-    showSentiment && sentimentParam
-      ? formatSentimentData(sentimentParam, labelCallback)
+    showSentiment && sentimentLong && sentimentShort
+      ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
       : '';
 
-  return `<p>${timeFormatted}</p><br />
+  if (isDesktop) {
+    return buildDesktopTooltip({
+      timeFormatted,
+      candleSection,
+      sentimentSection,
+      bookSection,
+      hasMatchedBucket: !!matchedBucket,
+    });
+  }
+
+  return buildMobileTooltip({
+    timeFormatted,
+    candleSection,
+    sentimentSection,
+    bookSection,
+    isDark,
+  });
+};
+
+interface TooltipSections {
+  timeFormatted: string;
+  candleSection: string;
+  sentimentSection: string;
+  bookSection: string;
+}
+
+const buildDesktopTooltip = ({
+  timeFormatted,
+  candleSection,
+  sentimentSection,
+  bookSection,
+  hasMatchedBucket,
+}: TooltipSections & { hasMatchedBucket: boolean }): string => {
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+  const sentimentPadding = hasMatchedBucket ? padding : '0px';
+
+  return `<div style="padding-bottom: ${padding};">${timeFormatted}</div>
+<div style="padding-bottom: ${padding};">${candleSection}</div>
+<div style="padding-bottom: ${sentimentPadding};">${sentimentSection}</div>
+<div>${bookSection}</div>
+`;
+};
+
+const buildMobileTooltip = ({
+  timeFormatted,
+  candleSection,
+  sentimentSection,
+  bookSection,
+  isDark,
+}: TooltipSections & { isDark: boolean }): string => {
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const columnWidth = TOOLTIP_STYLES.MOBILE_COLUMN_WIDTH;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+
+  return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
+  <div style="padding-bottom: ${padding};">${timeFormatted}</div>
+  <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
+  <div style="width: ${columnWidth};">
 ${candleSection}
+</div>
+<div style="width: ${columnWidth};">
+${sentimentSection}
+</div>
+<div style="width: ${columnWidth};">
 ${bookSection}
-${sentimentSection}`;
+</div>
+</div>
+</div>`;
 };

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

@@ -0,0 +1,80 @@
+import type { EChartsType } from 'echarts';
+import type { MutableRefObject } from 'react';
+
+import type { ChartProps, DataZoomArray } from '../types';
+import { formatXAxisAdditionalLabel } from './formatXAxisAdditionalLabel';
+import { formatXAxisLabel } from './formatXAxisLabel';
+import { getLabelData } from './getLabelData';
+import { isDifferenceGreaterThanTwoWeeks } from './isDifferenceGreaterThanTwoWeeks';
+
+export const handleLabelUpdate = (
+  instance: EChartsType,
+  mainData: ChartProps['mainData'],
+  labelTimerRef: MutableRefObject<NodeJS.Timeout | null>,
+  isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>,
+  locale: string
+): void => {
+  if (labelTimerRef.current) {
+    clearTimeout(labelTimerRef.current);
+  }
+  labelTimerRef.current = setTimeout(() => {
+    const { dates } = mainData;
+
+    const { dataZoom } = 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 (!dates[startValue] || !dates[endValue]) {
+      return;
+    }
+
+    const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+      dates[startValue],
+      dates[endValue]
+    );
+
+    const wasGreaterThanTwoWeeks = isGreaterThanTwoWeeksRef.current ?? false;
+
+    if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
+      const labelsData = getLabelData({
+        dates,
+        isGreaterThanTwoWeeks,
+      });
+
+      instance.setOption({
+        xAxis: [
+          {
+            id: 'main-xAxis',
+            axisLabel: {
+              formatter: (value: string) =>
+                formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
+            },
+          },
+          {
+            id: 'additional-xAxis',
+            axisLabel: {
+              customValues: labelsData,
+              formatter: (value: unknown) =>
+                formatXAxisAdditionalLabel(
+                  value,
+                  isGreaterThanTwoWeeks,
+                  locale
+                ),
+            },
+          },
+        ],
+      });
+
+      isGreaterThanTwoWeeksRef.current = isGreaterThanTwoWeeks;
+    }
+  }, 50);
+};

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

@@ -0,0 +1,37 @@
+import type { EChartsType } from 'echarts';
+import type { MutableRefObject } from 'react';
+
+export const handleTooltipUpdate = (
+  instance: EChartsType,
+  zoomTimerRef: MutableRefObject<NodeJS.Timeout | null>,
+  tooltipVisibleRef: MutableRefObject<boolean>,
+  canHover: boolean
+): void => {
+  if (!canHover) {
+    return;
+  }
+
+  if (tooltipVisibleRef.current) {
+    instance.setOption({
+      tooltip: {
+        show: false,
+      },
+    });
+    tooltipVisibleRef.current = false;
+  }
+
+  if (zoomTimerRef.current) {
+    clearTimeout(zoomTimerRef.current);
+  }
+
+  zoomTimerRef.current = setTimeout(() => {
+    if (!tooltipVisibleRef.current) {
+      instance.setOption({
+        tooltip: {
+          show: true,
+        },
+      });
+      tooltipVisibleRef.current = true;
+    }
+  }, 100);
+};

package/src/CrowdViewWidget/components/Chart/chartUtils/index.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/src/CrowdViewWidget/components/Chart/chartUtils/normalizeLocale.ts

@@ -0,0 +1,3 @@
+export const normalizeLocale = (locale: string): string => {
+  return locale === 'en' ? 'en-GB' : locale;
+};

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

@@ -0,0 +1,13 @@
+import { Granularity } from '../../../../gql/types/graphql';
+import { BUCKET_CONFIG } from '../../../constants';
+
+export const getMultiplayerForTimeSpan = (granularity: Granularity): number => {
+  const timeSpanMultiplierMap: Record<Granularity, number> = {
+    [Granularity.M5]: BUCKET_CONFIG.MULTIPLIER_5M,
+    [Granularity.M15]: BUCKET_CONFIG.MULTIPLIER_15M,
+    [Granularity.H1]: BUCKET_CONFIG.MULTIPLIER_1H,
+    [Granularity.H4]: BUCKET_CONFIG.MULTIPLIER_4H,
+  };
+
+  return timeSpanMultiplierMap[granularity] || BUCKET_CONFIG.MULTIPLIER_5M;
+};

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

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

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

@@ -60,7 +60,7 @@ export const processPriceCandles = (
     candlesClose,
     candlesLow,
     candlesHigh,
-    dates,
+    dates: [...dates, new Date().toISOString()],
     hasValidCandles: true,
     pipsLocation: priceCandlesData.priceCandles.pipsLocation,
   };

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

@@ -3,6 +3,7 @@ import {
   getDataZoomConfig,
   getGridConfig,
   getGridLines,
+  getLabelsConfig,
   getSeriesCandlestickConfig,
   getSeriesHeatmapConfig,
   getSeriesSentimentConfig,
@@ -35,15 +36,21 @@ export const getOption: GetOptionType = ({
     sentimentThresholdMin,
     sentimentThresholdMax,
   },
+  isLoading,
   isDark,
   isDesktop,
   labelCallback,
+  locale,
 }) => {
   const styles = getChartStyles(isDark);
   const selectedPriceRef = { current: 0 };
 
+  const initialStartZoom = isDesktop
+    ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP
+    : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;
+
   const visibleXAxisData = dates.slice(
-    (dates.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
+    (dates.length * initialStartZoom) / 100,
     (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
   );
 
@@ -52,6 +59,30 @@ export const getOption: GetOptionType = ({
     visibleXAxisData[visibleXAxisData.length - 1]
   );
 
+  const heatmapChart =
+    bookPrices && bookPrices.length > 0
+      ? [
+          getSeriesHeatmapConfig({
+            bucketWidth,
+            buckets,
+            isDark,
+            sentimentThresholdMax,
+            sentimentThresholdMin,
+            isLoading,
+          }),
+        ]
+      : [];
+
+  const sentimentChart =
+    sentimentLongs && sentimentLongs.length > 0
+      ? [
+          getSeriesSentimentConfig({
+            styles,
+            isLoading,
+          }),
+        ]
+      : [];
+
   return {
     animation: false,
     tooltip: getTooltipConfig({
@@ -62,24 +93,32 @@ export const getOption: GetOptionType = ({
       labelCallback,
       selectedPriceRef,
       tooltipLinesColor: styles.tooltipLinesColor,
+      sentimentLongs,
+      sentimentShorts,
+      isDesktop,
+      isDark,
+      locale,
     }),
     grid: getGridConfig({ isDesktop }),
     xAxis: getXAxisConfig({
       dates,
       isGreaterThanTwoWeeks,
+      locale,
     }),
     yAxis: getYAxisConfig({
+      isDesktop,
       bucketWidth,
       displayPrecision,
-      isDesktop,
-      labelCallback,
     }),
-    dataZoom: getDataZoomConfig(),
+    dataZoom: getDataZoomConfig({ isDesktop }),
     visualMap: getVisualMapConfig({
       sentimentLongColor: styles.sentimentLongColor,
       sentimentShortColor: styles.sentimentShortColor,
     }),
-    graphic: getGridLines({ isDark }),
+    graphic: [
+      ...getGridLines({ isDark, isDesktop }),
+      ...getLabelsConfig({ isDark, isDesktop, labelCallback }),
+    ],
     dataset: {
       source: {
         dates,
@@ -95,20 +134,11 @@ export const getOption: GetOptionType = ({
     },
     series: [
       getSeriesCandlestickConfig({
-        dates,
-        isGreaterThanTwoWeeks,
-        styles,
-      }),
-      getSeriesHeatmapConfig({
-        bucketWidth,
-        buckets,
-        isDark,
-        sentimentThresholdMax,
-        sentimentThresholdMin,
-      }),
-      getSeriesSentimentConfig({
         styles,
+        isLoading,
       }),
+      ...heatmapChart,
+      ...sentimentChart,
     ],
   };
 };

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

@@ -44,6 +44,9 @@ export interface UseCrowdViewDataReturn {
   mainData?: CrowdViewMainData | null;
   additionalData?: CrowdViewAdditionalData | null;
   loading: boolean;
+  priceCandlesLoading: boolean;
+  orderPositionLoading: boolean;
+  sentimentsLoading: boolean;
   error: boolean;
 }
 
@@ -52,7 +55,9 @@ 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;
@@ -61,6 +66,7 @@ export interface ChartProps {
   mainData: CrowdViewMainData;
   additionalData: CrowdViewAdditionalData;
   isDesktop: boolean;
+  isLoading: boolean;
 }
 
 export interface ChartWithDataProps {

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

@@ -15,6 +15,7 @@ import type {
 import { BookType, DataSource, Division } from '../../../gql/types/graphql';
 import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../constants';
 import {
+  getMultiplayerForTimeSpan,
   getTimeSpanForGranularity,
   processOrderPositionBooks,
   processPriceCandles,
@@ -83,7 +84,7 @@ export const useCrowdViewData = ({
         granularity,
         maxBookPrice: maxPrice,
         minBookPrice: minPrice,
-        bucketMultiplier: 2,
+        bucketMultiplier: getMultiplayerForTimeSpan(granularity),
         bucketMargin: BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
       },
       fetchPolicy: 'no-cache',
@@ -161,7 +162,7 @@ export const useCrowdViewData = ({
   ]);
 
   const data = useMemo(() => {
-    if (!priceCandlesData || !orderPositionData || !sentimentsData || error) {
+    if (!priceCandlesData || error) {
       return null;
     }
 
@@ -178,7 +179,10 @@ export const useCrowdViewData = ({
         sentimentLongs,
       },
       additionalData: {
-        bucketWidth,
+        bucketWidth:
+          bucketWidth ||
+          INSTRUMENTS_CONFIG[instrument].defaultBucketWidth *
+            getMultiplayerForTimeSpan(granularity),
         buckets,
         displayPrecision: pipsLocation,
         bookType,
@@ -188,8 +192,6 @@ export const useCrowdViewData = ({
     };
   }, [
     priceCandlesData,
-    orderPositionData,
-    sentimentsData,
     error,
     dates,
     candlesOpen,
@@ -201,6 +203,8 @@ export const useCrowdViewData = ({
     sentimentShorts,
     sentimentLongs,
     bucketWidth,
+    granularity,
+    instrument,
     buckets,
     pipsLocation,
     bookType,
@@ -211,6 +215,9 @@ export const useCrowdViewData = ({
   return {
     mainData: data?.mainData,
     additionalData: data?.additionalData,
+    priceCandlesLoading,
+    orderPositionLoading,
+    sentimentsLoading,
     loading,
     error: !!error,
   };