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

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

@@ -0,0 +1,42 @@
+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);
+
+      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
+    );

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

@@ -0,0 +1,27 @@
+import { COLOR_MAP } from '../../../constants';
+import { getGradientColor } from './getGradientColor';
+
+export const getRectColor = (
+  sentiment: number,
+  isDark: boolean,
+  minThreshold: number,
+  maxThreshold: number
+) => {
+  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+
+  return sentiment < 0
+    ? getGradientColor(
+        sentiment * -1,
+        colorPalette.short[0],
+        colorPalette.short[1],
+        minThreshold,
+        maxThreshold
+      )
+    : getGradientColor(
+        sentiment,
+        colorPalette.long[0],
+        colorPalette.long[1],
+        minThreshold,
+        maxThreshold
+      );
+};

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

@@ -0,0 +1,183 @@
+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',
+};
+
+const SENTIMENT_DISPLAY_PRECISION = 2;
+
+const calculateBucketDisplayPrecision = (bucketWidth: number): number => {
+  return bucketWidth.toString().split('.')[1]?.length || 0;
+};
+
+const findSeriesParam = <T extends TooltipParam['seriesId']>(
+  params: TooltipParam[],
+  seriesId: T
+): Extract<TooltipParam, { seriesId: T }> | undefined => {
+  return params.find(
+    (series): series is Extract<TooltipParam, { seriesId: T }> =>
+      series.seriesId === seriesId
+  );
+};
+
+const getSentimentOverbalanceLabel = (
+  sentiment: number,
+  bookType: BookType
+): string => {
+  if (sentiment < 0) {
+    return bookType === BookType.Order
+      ? 'sell_overbalance'
+      : 'short_overbalance';
+  }
+  return bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance';
+};
+
+const formatCandleData = (
+  candleData: [number, number, number, number, number],
+  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 formatBookData = ({
+  matchedBucket,
+  bucketWidth,
+  bucketDisplayPrecision,
+  bookType,
+  labelCallback,
+}: {
+  matchedBucket: Bucket;
+  bucketWidth: number;
+  bucketDisplayPrecision: number;
+  bookType: BookType;
+  labelCallback: (key: string) => string;
+}): string => {
+  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'positions';
+  const priceRangeStart = matchedBucket.price.toFixed(bucketDisplayPrecision);
+  const priceRangeEnd = (matchedBucket.price + bucketWidth).toFixed(
+    bucketDisplayPrecision
+  );
+  const sentimentLabel = getSentimentOverbalanceLabel(
+    matchedBucket.sentiment,
+    bookType
+  );
+  const sentimentValue = Math.abs(matchedBucket.sentiment).toFixed(
+    bucketDisplayPrecision
+  );
+
+  return `<br /><p><b>${labelCallback(bookLabelKey)}:</b></p>
+<p>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </p>
+<p>${labelCallback(sentimentLabel)}: ${sentimentValue}% </p>`;
+};
+
+const formatSentimentData = (
+  sentimentParam: Extract<TooltipParam, { seriesId: 'sentiment' }>,
+  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>`;
+};
+
+const hasValidCandleData = (
+  candleData: [number, number, number, number, number]
+): boolean =>
+  !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[3];
+const hasValidSentimentData = (
+  sentimentParam: Extract<TooltipParam, { seriesId: 'sentiment' }> | undefined
+): boolean => !!sentimentParam?.value[1] && !!sentimentParam?.value[2];
+const findMatchingBucket = (
+  buckets: Bucket[][],
+  bucketsIndex: number | undefined,
+  selectedPrice: number,
+  bucketWidth: number
+): Bucket | undefined => {
+  if (bucketsIndex === undefined) {
+    return undefined;
+  }
+  const selectedBuckets = buckets[bucketsIndex];
+  return selectedBuckets?.find(
+    ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth
+  );
+};
+
+export const getTooltipFormatter = ({
+  params,
+  buckets,
+  bucketWidth,
+  selectedPrice,
+  bookType,
+  labelCallback,
+}: {
+  params: TooltipParam[];
+  buckets: Bucket[][];
+  bucketWidth: number;
+  selectedPrice: number;
+  bookType: BookType;
+  labelCallback: (key: string) => string;
+}) => {
+  if (!params || !Array.isArray(params) || params.length === 0) {
+    return '';
+  }
+
+  const candleParam = findSeriesParam(params, 'candlestick');
+  const booksParam = findSeriesParam(params, 'heatmap');
+  const sentimentParam = findSeriesParam(params, 'sentiment');
+
+  if (!candleParam) {
+    return '';
+  }
+
+  const bucketDisplayPrecision = calculateBucketDisplayPrecision(bucketWidth);
+  const time = new Date(candleParam.axisValue as string);
+  const candleData = candleParam.value;
+  const bucketsIndex = booksParam?.value[2];
+  const matchedBucket = findMatchingBucket(
+    buckets,
+    bucketsIndex,
+    selectedPrice,
+    bucketWidth
+  );
+  const showCandles = hasValidCandleData(candleData);
+  const showSentiment = hasValidSentimentData(sentimentParam);
+
+  if (!showCandles && !matchedBucket) {
+    return '';
+  }
+
+  const timeFormatted = time.toLocaleString(undefined, DATE_FORMAT_OPTIONS);
+  const candleSection = showCandles
+    ? formatCandleData(candleData, labelCallback)
+    : '';
+  const bookSection = matchedBucket
+    ? formatBookData({
+        matchedBucket,
+        bucketWidth,
+        bucketDisplayPrecision,
+        bookType,
+        labelCallback,
+      })
+    : '';
+  const sentimentSection =
+    showSentiment && sentimentParam
+      ? formatSentimentData(sentimentParam, labelCallback)
+      : '';
+
+  return `<p>${timeFormatted}</p><br />
+${candleSection}
+${bookSection}
+${sentimentSection}`;
+};

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

@@ -0,0 +1,7 @@
+export * from './formatXAxisLabel';
+export * from './getChartStyles';
+export * from './getGradientColor';
+export * from './getLabelData';
+export * from './getRectColor';
+export * from './getTooltipFormatter';
+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/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,5 @@
-export * from './chartUtils';
-export * from './getChartStyles';
+export * from './getInstrumentConfigForDivision';
+export * from './getTimeSpanForGranularity';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';
 export * from './processSentiments';

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

@@ -0,0 +1,114 @@
+import { CHART_CONFIG } from '../../constants';
+import {
+  getDataZoomConfig,
+  getGridConfig,
+  getGridLines,
+  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,
+  },
+  isDark,
+  isDesktop,
+  labelCallback,
+}) => {
+  const styles = getChartStyles(isDark);
+  const selectedPriceRef = { current: 0 };
+
+  const visibleXAxisData = dates.slice(
+    (dates.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
+    (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+  );
+
+  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+    visibleXAxisData[0],
+    visibleXAxisData[visibleXAxisData.length - 1]
+  );
+
+  return {
+    animation: false,
+    tooltip: getTooltipConfig({
+      bookType,
+      bucketWidth,
+      buckets,
+      displayPrecision,
+      labelCallback,
+      selectedPriceRef,
+      tooltipLinesColor: styles.tooltipLinesColor,
+    }),
+    grid: getGridConfig({ isDesktop }),
+    xAxis: getXAxisConfig({
+      dates,
+      isGreaterThanTwoWeeks,
+    }),
+    yAxis: getYAxisConfig({
+      bucketWidth,
+      displayPrecision,
+      isDesktop,
+      labelCallback,
+    }),
+    dataZoom: getDataZoomConfig(),
+    visualMap: getVisualMapConfig({
+      sentimentLongColor: styles.sentimentLongColor,
+      sentimentShortColor: styles.sentimentShortColor,
+    }),
+    graphic: getGridLines({ isDark }),
+    dataset: {
+      source: {
+        dates,
+        candlesOpen,
+        candlesClose,
+        candlesLow,
+        candlesHigh,
+        bookPrices: bookPrices ?? [],
+        bookIndexes: bookIndexes ?? [],
+        sentimentShorts,
+        sentimentLongs,
+      },
+    },
+    series: [
+      getSeriesCandlestickConfig({
+        dates,
+        isGreaterThanTwoWeeks,
+        styles,
+      }),
+      getSeriesHeatmapConfig({
+        bucketWidth,
+        buckets,
+        isDark,
+        sentimentThresholdMax,
+        sentimentThresholdMin,
+      }),
+      getSeriesSentimentConfig({
+        styles,
+      }),
+    ],
+  };
+};

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

@@ -14,14 +14,14 @@ 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 {
   getTimeSpanForGranularity,
   processOrderPositionBooks,
   processPriceCandles,
   processSentiments,
   validateData,
-} from './utils';
+} from './dataUtils';
+import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
 
 export const useCrowdViewData = ({
   instrument,
@@ -83,7 +83,7 @@ export const useCrowdViewData = ({
         granularity,
         maxBookPrice: maxPrice,
         minBookPrice: minPrice,
-        bucketMultiplier: 3,
+        bucketMultiplier: 2,
         bucketMargin: BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
       },
       fetchPolicy: 'no-cache',

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-[250px]" />
+        <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

@@ -5,39 +5,26 @@ 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];
 
   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="lw-flex lw-h-2 lw-w-full lw-overflow-hidden">
+      <div
+        className="lw-h-full lw-flex-1"
+        data-testid="legend-bar-segment"
+        style={{
+          background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,
+        }}
+      />
     </div>
   );
 };

package/src/CrowdViewWidget/constants.ts

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 
 import { InstrumentId } from './types';
 
@@ -12,6 +13,7 @@ export const TIME_THRESHOLDS = {
 } as const;
 
 export const CHART_CONFIG = {
+  HEIGHT: 440,
   MAIN_HEIGHT: 400,
   MARGIN_BETWEEN: 50,
   SENTIMENT_HEIGHT: 120,
@@ -19,33 +21,34 @@ export const CHART_CONFIG = {
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
   Y_LABEL_SIZE_MOBILE: 40,
-  INITIAL_START_ZOOM: 80,
+  Y_SENTIMENT_LABEL_SIZE: 40,
+  INITIAL_START_ZOOM: 90,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
-  SENTIMENT_INTERVAL: 25,
-  SENTIMENT_TEXT_OFFSET: 16,
 } 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/translations/sources/en.json

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