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

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

@@ -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/src/CrowdViewWidget/components/Chart/chartUtils/isDifferenceGreaterThanTwoWeeks.ts

@@ -0,0 +1,13 @@
+import { TIME_THRESHOLDS } from '../../../constants';
+
+export const isDifferenceGreaterThanTwoWeeks = (
+  startDate: string,
+  endDate: string
+) => {
+  const date1 = new Date(startDate);
+  const date2 = new Date(endDate);
+
+  const differenceInMs = Math.abs(date2.getTime() - date1.getTime());
+
+  return differenceInMs < TIME_THRESHOLDS.TWO_WEEKS_MS;
+};

package/src/CrowdViewWidget/{utils/instrumentUtils.ts → components/Chart/dataUtils/getInstrumentConfigForDivision.ts}

@@ -1,8 +1,8 @@
-import { Division } from '../../gql/types/graphql';
+import { Division } from '../../../../gql/types/graphql';
 import {
   instrumentSelectConfig,
   instrumentSelectConfigOC,
-} from '../selectConfig';
+} from '../../../selectConfig';
 
 export const getInstrumentConfigForDivision = (division: Division) => {
   return division === Division.Oc

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/getTimeSpanForGranularity.ts

@@ -0,0 +1,14 @@
+import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+
+export const getTimeSpanForGranularity = (
+  granularity: Granularity
+): TimeSpan => {
+  const granularityTimeSpanMap: Record<Granularity, TimeSpan> = {
+    [Granularity.M5]: TimeSpan.TwoDays,
+    [Granularity.M15]: TimeSpan.FiveDays,
+    [Granularity.H1]: TimeSpan.TwentyDays,
+    [Granularity.H4]: TimeSpan.NinetyDays,
+  };
+
+  return granularityTimeSpanMap[granularity] || TimeSpan.TwoDays;
+};

package/src/CrowdViewWidget/components/Chart/{utils → dataUtils}/index.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/src/CrowdViewWidget/components/Chart/getOption.ts

@@ -0,0 +1,138 @@
+import { CHART_CONFIG } from '../../constants';
+import {
+  getDataZoomConfig,
+  getGridConfig,
+  getGridLines,
+  getLabelsConfig,
+  getSeriesCandlestickConfig,
+  getSeriesHeatmapConfig,
+  getSeriesSentimentConfig,
+  getTooltipConfig,
+  getVisualMapConfig,
+  getXAxisConfig,
+  getYAxisConfig,
+} from './chartOptions';
+import { isDifferenceGreaterThanTwoWeeks } from './chartUtils';
+import { getChartStyles } from './chartUtils/getChartStyles';
+import type { GetOptionType } from './types';
+
+export const getOption: GetOptionType = ({
+  mainData: {
+    dates,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    bookPrices,
+    bookIndexes,
+    sentimentShorts,
+    sentimentLongs,
+  },
+  additionalData: {
+    bucketWidth,
+    buckets,
+    displayPrecision,
+    bookType,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
+  },
+  isLoading,
+  isDark,
+  isDesktop,
+  labelCallback,
+}) => {
+  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 * initialStartZoom) / 100,
+    (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+  );
+
+  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+    visibleXAxisData[0],
+    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({
+      bookType,
+      bucketWidth,
+      buckets,
+      displayPrecision,
+      labelCallback,
+      selectedPriceRef,
+      tooltipLinesColor: styles.tooltipLinesColor,
+      sentimentLongs,
+      sentimentShorts,
+    }),
+    grid: getGridConfig({ isDesktop }),
+    xAxis: getXAxisConfig({
+      dates,
+      isGreaterThanTwoWeeks,
+    }),
+    yAxis: getYAxisConfig({
+      bucketWidth,
+      displayPrecision,
+    }),
+    dataZoom: getDataZoomConfig({ isDesktop }),
+    visualMap: getVisualMapConfig({
+      sentimentLongColor: styles.sentimentLongColor,
+      sentimentShortColor: styles.sentimentShortColor,
+    }),
+    graphic: [
+      ...getGridLines({ isDark, isDesktop }),
+      ...getLabelsConfig({ isDark, isDesktop, labelCallback }),
+    ],
+    dataset: {
+      source: {
+        dates,
+        candlesOpen,
+        candlesClose,
+        candlesLow,
+        candlesHigh,
+        bookPrices: bookPrices ?? [],
+        bookIndexes: bookIndexes ?? [],
+        sentimentShorts,
+        sentimentLongs,
+      },
+    },
+    series: [
+      getSeriesCandlestickConfig({
+        styles,
+        isLoading,
+      }),
+      ...heatmapChart,
+      ...sentimentChart,
+    ],
+  };
+};

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

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

@@ -14,14 +14,15 @@ import type {
 } from '../../../gql/types/graphql';
 import { BookType, DataSource, Division } from '../../../gql/types/graphql';
 import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../constants';
-import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
 import {
+  getMultiplayerForTimeSpan,
   getTimeSpanForGranularity,
   processOrderPositionBooks,
   processPriceCandles,
   processSentiments,
   validateData,
-} from './utils';
+} from './dataUtils';
+import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
 
 export const useCrowdViewData = ({
   instrument,
@@ -83,7 +84,7 @@ export const useCrowdViewData = ({
         granularity,
         maxBookPrice: maxPrice,
         minBookPrice: minPrice,
-        bucketMultiplier: 3,
+        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,
   };

package/src/CrowdViewWidget/components/Legend/Legend.tsx

@@ -1,3 +1,4 @@
+import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import React from 'react';
 
@@ -5,34 +6,35 @@ import { BookType } from '../../../gql/types/graphql';
 import { LegendBar } from './LegendBar';
 
 interface LegendProps {
-  longValues: (number | undefined)[];
-  shortValues: (number | undefined)[];
   bookType: BookType;
-  isDark: boolean;
 }
 
-export const Legend = ({
-  longValues,
-  shortValues,
-  bookType,
-  isDark,
-}: LegendProps) => {
+export const Legend = ({ bookType }: LegendProps) => {
+  const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
   return (
-    <div className="lw-mx-auto lw-mt-4 lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl">
-      <LegendBar
-        isDark={isDark}
-        label={lang(bookType === BookType.Order ? 'buy' : 'long')}
-        type="long"
-        values={longValues}
-      />
-      <LegendBar
-        isDark={isDark}
-        label={lang(bookType === BookType.Order ? 'sell' : 'short')}
-        type="short"
-        values={shortValues}
-      />
+    <div className="lw-my-4 lw-w-full">
+      <div className="lw-mb-1 lw-flex lw-w-full lw-flex-row lw-justify-between">
+        <LegendBar isDark={isDark} type="long" />
+        <div className="lw-w-[200px]" />
+        <LegendBar isDark={isDark} type="short" />
+      </div>
+      <div className="lw-flex lw-w-full lw-flex-row lw-justify-between lw-pb-2 lw-font-sans lw-text-xs lw-text-text-primary">
+        <span>
+          {lang(
+            bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance'
+          )}
+        </span>
+        <span>{lang('even_market_demand')}</span>
+        <span>
+          {lang(
+            bookType === BookType.Order
+              ? 'sell_overbalance'
+              : 'short_overbalance'
+          )}
+        </span>
+      </div>
     </div>
   );
 };

package/src/CrowdViewWidget/components/Legend/LegendBar.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@oanda/labs-widget-common';
 import React from 'react';
 
 import { COLOR_MAP } from '../../constants';
@@ -5,39 +6,41 @@ import { COLOR_MAP } from '../../constants';
 export type LegendType = 'long' | 'short';
 
 interface LegendBarProps {
-  values: (number | undefined)[];
   type: LegendType;
-  label: string;
   isDark: boolean;
 }
 
-export const LegendBar = ({ values, type, label, isDark }: LegendBarProps) => {
+export const LegendBar = ({ type, isDark }: LegendBarProps) => {
   const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
-  const colors = type === 'long' ? colorPalette.long : colorPalette.short;
+  const startColor =
+    type === 'long' ? colorPalette.long[1] : colorPalette.short[0];
+  const endColor =
+    type === 'long' ? colorPalette.long[0] : colorPalette.short[1];
+  const endGradient =
+    type === 'long'
+      ? `linear-gradient(90deg,${endColor} 0%, transparent 100%)`
+      : `linear-gradient(270deg,${startColor} 0%, transparent 100%)`;
 
   return (
-    <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">
-      <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-        {label}
-      </span>
-      <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary">
-        <div
-          className="lw-h-full lw-flex-1"
-          data-testid="legend-bar-segment"
-          style={{
-            background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,
-          }}
-        />
-      </div>
-
-      <div className="lw-flex lw-w-full lw-justify-between">
-        <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[0] ? `${values[0].toFixed(2)}%` : '—'}
-        </span>
-        <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[1] ? `≤ ${values[1].toFixed(2)}%` : '—'}
-        </span>
-      </div>
+    <div
+      className={cn('lw-flex lw-h-2 lw-w-full lw-overflow-hidden', {
+        'lw-flex-row-reverse': type === 'short',
+      })}
+    >
+      <div
+        className="lw-h-full lw-flex-1"
+        data-testid="legend-bar-segment"
+        style={{
+          background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,
+        }}
+      />
+      <div
+        className="lw-h-full lw-w-[10px]"
+        data-testid="legend-bar-segment"
+        style={{
+          background: endGradient,
+        }}
+      />
     </div>
   );
 };

package/src/CrowdViewWidget/constants.ts

@@ -1,9 +1,13 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 
 import { InstrumentId } from './types';
 
 export const BUCKET_CONFIG = {
-  MULTIPLIER: 4,
+  MULTIPLIER_5M: 1,
+  MULTIPLIER_15M: 1,
+  MULTIPLIER_1H: 2,
+  MULTIPLIER_4H: 4,
   PRICE_MARGIN_MULTIPLIER: 2,
 } as const;
 
@@ -12,40 +16,47 @@ export const TIME_THRESHOLDS = {
 } as const;
 
 export const CHART_CONFIG = {
+  HEIGHT: 440,
   MAIN_HEIGHT: 400,
   MARGIN_BETWEEN: 50,
   SENTIMENT_HEIGHT: 120,
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
-  Y_LABEL_SIZE_DESKTOP: 60,
+  Y_LABEL_SIZE_DESKTOP: 50,
   Y_LABEL_SIZE_MOBILE: 40,
-  INITIAL_START_ZOOM: 80,
+  Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40,
+  Y_SENTIMENT_LABEL_MOBILE_SIZE: 30,
+  INITIAL_START_ZOOM_DESKTOP: 70,
+  INITIAL_START_ZOOM_MOBILE: 85,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
-  SENTIMENT_INTERVAL: 25,
-  SENTIMENT_TEXT_OFFSET: 16,
+  TOP_MARGIN_DESKTOP: 0,
+  TOP_MARGIN_MOBILE: 30,
+  TOOLTIP_OFFSET: 5,
 } as const;
 
-export const CHART_CONFIG_CALCULATED = {
-  FULL_HEIGHT:
-    CHART_CONFIG.MAIN_HEIGHT +
-    CHART_CONFIG.MARGIN_BETWEEN +
-    CHART_CONFIG.SENTIMENT_HEIGHT +
-    CHART_CONFIG.X_LABEL_SIZE,
-  SENTIMENT_TEXT_POSITION:
-    CHART_CONFIG.SENTIMENT_HEIGHT + CHART_CONFIG.SENTIMENT_TEXT_OFFSET,
-};
-
 export const COLOR_MAP = {
   dark: {
-    long: [colorPalette.darkBlue10, colorPalette.darkBlue90],
-    short: [colorPalette.darkYellow10, colorPalette.darkYellow90],
+    long: [
+      chroma(colorPalette.darkBlue10).shade(0.5).hex(),
+      chroma(colorPalette.darkBlue90).shade(0.5).hex(),
+    ],
+    short: [
+      chroma(colorPalette.darkYellow10).shade(0.5).hex(),
+      chroma(colorPalette.darkYellow90).shade(0.5).hex(),
+    ],
   },
   light: {
-    long: [colorPalette.lightBlue10, colorPalette.lightBlue90],
-    short: [colorPalette.lightYellow10, colorPalette.lightYellow90],
+    long: [
+      chroma(colorPalette.lightBlue10).tint(0.5).hex(),
+      chroma(colorPalette.lightBlue90).tint(0.5).hex(),
+    ],
+    short: [
+      chroma(colorPalette.lightYellow10).tint(0.5).hex(),
+      chroma(colorPalette.lightYellow90).tint(0.5).hex(),
+    ],
   },
 } as const;
 

package/src/CrowdViewWidget/selectConfig.ts

@@ -92,14 +92,6 @@ const granularitySelectConfig = [
     id: Granularity.H4,
     label: '4_hours',
   },
-  {
-    id: Granularity.M5,
-    label: '5_minutes',
-  },
-  {
-    id: Granularity.M15,
-    label: '15_minutes',
-  },
 ];
 
 export {

package/src/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"
 }