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

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

@@ -1,6 +1,10 @@
 import type { XAXisComponentOption } from 'echarts';
 
-import { formatXAxisLabel } from '../chartUtils';
+import {
+  formatXAxisAdditionalLabel,
+  formatXAxisLabel,
+  getLabelData,
+} from '../chartUtils';
 
 interface GetXAxisConfigParams {
   dates: string[];
@@ -10,34 +14,55 @@ interface GetXAxisConfigParams {
 export const getXAxisConfig = ({
   dates,
   isGreaterThanTwoWeeks,
-}: GetXAxisConfigParams): XAXisComponentOption[] => [
-  {
-    type: 'category',
-    id: 'main-xAxis',
-    name: 'xAxis-less-than-two-weeks',
-    nameTextStyle: {
-      fontSize: 0,
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      padding: [8, 16, 8, 16],
-      margin: 0,
-      formatter: (value: unknown) =>
-        formatXAxisLabel(value, isGreaterThanTwoWeeks),
-    },
-  },
-  {
-    type: 'category',
-    gridIndex: 1,
-    show: false,
-    axisTick: {
-      show: false,
+}: GetXAxisConfigParams): XAXisComponentOption[] => {
+  const labelsData = getLabelData({
+    dates,
+    isGreaterThanTwoWeeks,
+  });
+
+  return [
+    {
+      type: 'category',
+      id: 'main-xAxis',
+      name: isGreaterThanTwoWeeks
+        ? 'xAxis-greater-than-two-weeks'
+        : 'xAxis-less-than-two-weeks',
+      nameTextStyle: {
+        fontSize: 0,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        padding: [8, 16, 8, 16],
+        margin: 0,
+        formatter: (value: unknown) =>
+          formatXAxisLabel(value, isGreaterThanTwoWeeks),
+      },
+      boundaryGap: false,
     },
-    axisLabel: {
-      show: false,
+    {
+      type: 'category',
+      id: 'additional-xAxis',
+      gridIndex: 1,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        margin: 24,
+        hideOverlap: true,
+        customValues: labelsData,
+        formatter: (value: unknown) =>
+          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks),
+      },
+      data: dates,
+      boundaryGap: false,
     },
-    data: dates,
-  },
-];
+  ];
+};

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

@@ -5,15 +5,11 @@ import { BUCKET_CONFIG, CHART_CONFIG } from '../../../constants';
 interface GetYAxisConfigParams {
   bucketWidth: number;
   displayPrecision: number;
-  isDesktop: boolean;
-  labelCallback: (key: string, params?: Record<string, unknown>) => string;
 }
 
 export const getYAxisConfig = ({
   bucketWidth,
   displayPrecision,
-  isDesktop,
-  labelCallback,
 }: GetYAxisConfigParams): YAXisComponentOption[] => [
   {
     type: 'value',
@@ -25,11 +21,15 @@ export const getYAxisConfig = ({
       val.max + bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
     axisLine: { show: false },
     axisTick: { show: false },
+    splitLine: { show: false },
     axisLabel: {
-      showMinLabel: false,
-      showMaxLabel: false,
-      formatter: (value: number) => value.toFixed(displayPrecision - 1),
+      lineHeight: 20,
+      margin: 4,
+      verticalAlignMinLabel: 'bottom',
+      verticalAlignMaxLabel: 'top',
+      formatter: (value: number) => value.toFixed(displayPrecision),
     },
+    z: 30,
   },
   {
     type: 'value',
@@ -39,14 +39,13 @@ export const getYAxisConfig = ({
     max: CHART_CONFIG.SENTIMENT_MAX,
     axisLine: { show: false },
     axisTick: { show: false },
-    axisPointer: {
-      show: false,
-    },
+    axisPointer: { show: false },
+    splitLine: { show: false },
     axisLabel: {
-      margin: isDesktop ? 4 : 2,
+      margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: 'top',
+      verticalAlignMaxLabel: 'middle',
       customValues: [
         CHART_CONFIG.SENTIMENT_MIN,
         CHART_CONFIG.SENTIMENT_MAX / 5,
@@ -54,24 +53,8 @@ export const getYAxisConfig = ({
         (CHART_CONFIG.SENTIMENT_MAX * 4) / 5,
         CHART_CONFIG.SENTIMENT_MAX,
       ],
-      formatter: (value: number) => {
-        if (value === CHART_CONFIG.SENTIMENT_MIN) {
-          return `${labelCallback('short')}`;
-        }
-        if (value === CHART_CONFIG.SENTIMENT_MAX) {
-          return `${labelCallback('long')}`;
-        }
-        if (value === CHART_CONFIG.SENTIMENT_MAX / 2) {
-          return '50%';
-        }
-        if (value === CHART_CONFIG.SENTIMENT_MAX / 5) {
-          return '80%';
-        }
-        if (value === (CHART_CONFIG.SENTIMENT_MAX * 4) / 5) {
-          return '20%';
-        }
-        return '';
-      },
+      formatter: (value: number) => `${value}%`,
     },
+    z: 30,
   },
 ];

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

@@ -0,0 +1,13 @@
+export const formatXAxisAdditionalLabel = (
+  value: unknown,
+  isGreaterThanTwoWeeks: boolean
+) => {
+  const date = new Date(value as string);
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+  return `${date.toLocaleDateString(undefined, {
+    month: isGreaterThanTwoWeeks ? 'short' : 'long',
+    day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
+  })}`;
+};

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

@@ -1,42 +1,18 @@
-import { CHART_CONFIG } from '../../../constants';
 import type { GetLabelsDataProps } from '../types';
 
 export const getLabelData = ({
   dates,
   isGreaterThanTwoWeeks,
 }: GetLabelsDataProps) =>
-  dates
-    .filter((record, index, arr) => {
-      if (index === 0) {
-        return false;
-      }
-      const previousTimestamp = arr[index - 1];
-      const currentDate = new Date(record);
-      const previousDate = new Date(previousTimestamp);
+  dates.filter((record, index, arr) => {
+    if (index === 0) {
+      return false;
+    }
+    const previousTimestamp = arr[index - 1];
+    const currentDate = new Date(record);
+    const previousDate = new Date(previousTimestamp);
 
-      return isGreaterThanTwoWeeks
-        ? currentDate.getDate() !== previousDate.getDate()
-        : currentDate.getMonth() !== previousDate.getMonth();
-    })
-    .map(
-      (item) =>
-        ({
-          name: new Date(item).toLocaleDateString(undefined, {
-            month: isGreaterThanTwoWeeks ? 'short' : 'long',
-            day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
-          }),
-          xAxis: item,
-          y: CHART_CONFIG.MAIN_HEIGHT + CHART_CONFIG.X_LABEL_SIZE - 22,
-          silent: true,
-          emphasis: {
-            disabled: true,
-          },
-          label: {
-            fontFamily: 'Sofia W03',
-            fontSize: 10,
-            position: 'bottom' as const,
-            align: 'center' as const,
-            formatter: '{b}',
-          },
-        }) as const
-    );
+    return isGreaterThanTwoWeeks
+      ? currentDate.getDate() !== previousDate.getDate()
+      : currentDate.getMonth() !== previousDate.getMonth();
+  });

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

@@ -26,6 +26,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
@@ -83,22 +99,25 @@ const formatBookData = ({
 };
 
 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>`;
+<p>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>
+<p>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>`;
 };
 
 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 +140,8 @@ export const getTooltipFormatter = ({
   selectedPrice,
   bookType,
   labelCallback,
+  sentimentLongs,
+  sentimentShorts,
 }: {
   params: TooltipParam[];
   buckets: Bucket[][];
@@ -128,6 +149,8 @@ export const getTooltipFormatter = ({
   selectedPrice: number;
   bookType: BookType;
   labelCallback: (key: string) => string;
+  sentimentLongs: (number | null)[];
+  sentimentShorts: (number | null)[];
 }) => {
   if (!params || !Array.isArray(params) || params.length === 0) {
     return '';
@@ -135,7 +158,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,7 +179,7 @@ export const getTooltipFormatter = ({
     bucketWidth
   );
   const showCandles = hasValidCandleData(candleData);
-  const showSentiment = hasValidSentimentData(sentimentParam);
+  const showSentiment = hasValidSentimentData(sentimentLong, sentimentShort);
 
   if (!showCandles && !matchedBucket) {
     return '';
@@ -162,6 +189,7 @@ export const getTooltipFormatter = ({
   const candleSection = showCandles
     ? formatCandleData(candleData, labelCallback)
     : '';
+
   const bookSection = matchedBucket
     ? formatBookData({
         matchedBucket,
@@ -171,9 +199,10 @@ export const getTooltipFormatter = ({
         labelCallback,
       })
     : '';
+
   const sentimentSection =
-    showSentiment && sentimentParam
-      ? formatSentimentData(sentimentParam, labelCallback)
+    showSentiment && sentimentLong && sentimentShort
+      ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
       : '';
 
   return `<p>${timeFormatted}</p><br />

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

@@ -0,0 +1,75 @@
+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>
+): 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),
+            },
+          },
+          {
+            id: 'additional-xAxis',
+            axisLabel: {
+              customValues: labelsData,
+              formatter: (value: unknown) =>
+                formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks),
+            },
+          },
+        ],
+      });
+
+      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,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/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/getOption.ts

@@ -3,6 +3,7 @@ import {
   getDataZoomConfig,
   getGridConfig,
   getGridLines,
+  getLabelsConfig,
   getSeriesCandlestickConfig,
   getSeriesHeatmapConfig,
   getSeriesSentimentConfig,
@@ -35,6 +36,7 @@ export const getOption: GetOptionType = ({
     sentimentThresholdMin,
     sentimentThresholdMax,
   },
+  isLoading,
   isDark,
   isDesktop,
   labelCallback,
@@ -42,8 +44,12 @@ export const getOption: GetOptionType = ({
   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 +58,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,6 +92,8 @@ export const getOption: GetOptionType = ({
       labelCallback,
       selectedPriceRef,
       tooltipLinesColor: styles.tooltipLinesColor,
+      sentimentLongs,
+      sentimentShorts,
     }),
     grid: getGridConfig({ isDesktop }),
     xAxis: getXAxisConfig({
@@ -71,15 +103,16 @@ export const getOption: GetOptionType = ({
     yAxis: getYAxisConfig({
       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 +128,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,6 +55,7 @@ interface GetOptionProps {
   additionalData: CrowdViewAdditionalData;
   isDark: boolean;
   isDesktop: boolean;
+  isLoading: boolean;
   labelCallback: (key: string, params?: Record<string, unknown>) => string;
 }
 
@@ -61,6 +65,7 @@ export interface ChartProps {
   mainData: CrowdViewMainData;
   additionalData: CrowdViewAdditionalData;
   isDesktop: boolean;
+  isLoading: boolean;
 }
 
 export interface ChartWithDataProps {