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

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

@@ -0,0 +1,74 @@
+import type { TooltipComponentOption } from 'echarts';
+
+import type { BookType } from '../../../../gql/types/graphql';
+import { CHART_CONFIG } from '../../../constants';
+import { getTooltipFormatter } from '../chartUtils';
+import type { Bucket, TooltipParam } 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 const getTooltipConfig = ({
+  bookType,
+  bucketWidth,
+  buckets,
+  displayPrecision,
+  labelCallback,
+  selectedPriceRef,
+  tooltipLinesColor,
+  sentimentLongs,
+  sentimentShorts,
+}: GetTooltipConfigParams): TooltipComponentOption => ({
+  trigger: 'axis' as const,
+  formatter: (params) =>
+    getTooltipFormatter({
+      bookType,
+      bucketWidth,
+      buckets,
+      labelCallback,
+      params: params as unknown as TooltipParam[],
+      selectedPrice: selectedPriceRef.current,
+      sentimentLongs,
+      sentimentShorts,
+    }),
+  hideDelay: 0,
+  axisPointer: {
+    type: 'cross' as const,
+    axis: 'x' as const,
+    lineStyle: {
+      color: tooltipLinesColor,
+    },
+    crossStyle: {
+      color: tooltipLinesColor,
+    },
+    label: {
+      padding: 0,
+      lineHeight: 24,
+      formatter: (params: {
+        axisDimension?: string;
+        axisIndex?: number;
+        value: unknown;
+      }) => {
+        if (params.axisDimension === 'y' && params.axisIndex === 0) {
+          selectedPriceRef.current = Number(params.value);
+          return ` ${Number(params.value).toFixed(displayPrecision)} `;
+        }
+        return '';
+      },
+    },
+  },
+  confine: true,
+  position: (point) => [
+    point[0] + CHART_CONFIG.TOOLTIP_OFFSET,
+    point[1] + CHART_CONFIG.TOOLTIP_OFFSET,
+  ],
+});

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

@@ -0,0 +1,32 @@
+import type { VisualMapComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface GetVisualMapConfigParams {
+  sentimentLongColor: string;
+  sentimentShortColor: string;
+}
+
+export const getVisualMapConfig = ({
+  sentimentLongColor,
+  sentimentShortColor,
+}: GetVisualMapConfigParams): VisualMapComponentOption => ({
+  show: false,
+  dimension: 1,
+  seriesId: 'sentiment',
+  pieces: [
+    {
+      lt: CHART_CONFIG.SENTIMENT_MAX / 2,
+      color: sentimentShortColor,
+    },
+    {
+      gte: CHART_CONFIG.SENTIMENT_MAX / 2,
+      lte: CHART_CONFIG.SENTIMENT_MAX,
+      color: sentimentLongColor,
+    },
+    {
+      gt: CHART_CONFIG.SENTIMENT_MAX,
+      color: sentimentLongColor,
+    },
+  ],
+});

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

@@ -0,0 +1,68 @@
+import type { XAXisComponentOption } from 'echarts';
+
+import {
+  formatXAxisAdditionalLabel,
+  formatXAxisLabel,
+  getLabelData,
+} from '../chartUtils';
+
+interface GetXAxisConfigParams {
+  dates: string[];
+  isGreaterThanTwoWeeks: boolean;
+}
+
+export const getXAxisConfig = ({
+  dates,
+  isGreaterThanTwoWeeks,
+}: 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,
+    },
+    {
+      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,
+    },
+  ];
+};

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

@@ -0,0 +1,60 @@
+import type { YAXisComponentOption } from 'echarts';
+
+import { BUCKET_CONFIG, CHART_CONFIG } from '../../../constants';
+
+interface GetYAxisConfigParams {
+  bucketWidth: number;
+  displayPrecision: number;
+}
+
+export const getYAxisConfig = ({
+  bucketWidth,
+  displayPrecision,
+}: GetYAxisConfigParams): YAXisComponentOption[] => [
+  {
+    type: 'value',
+    gridIndex: 0,
+    position: 'right',
+    min: (val: { min: number }) =>
+      val.min - bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+    max: (val: { max: number }) =>
+      val.max + bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false },
+    axisLabel: {
+      lineHeight: 20,
+      margin: 4,
+      verticalAlignMinLabel: 'bottom',
+      verticalAlignMaxLabel: 'top',
+      formatter: (value: number) => value.toFixed(displayPrecision),
+    },
+    z: 30,
+  },
+  {
+    type: 'value',
+    gridIndex: 1,
+    position: 'left',
+    min: CHART_CONFIG.SENTIMENT_MIN,
+    max: CHART_CONFIG.SENTIMENT_MAX,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisPointer: { show: false },
+    splitLine: { show: false },
+    axisLabel: {
+      margin: 4,
+      lineHeight: 20,
+      verticalAlignMinLabel: 'bottom',
+      verticalAlignMaxLabel: 'middle',
+      customValues: [
+        CHART_CONFIG.SENTIMENT_MIN,
+        CHART_CONFIG.SENTIMENT_MAX / 5,
+        CHART_CONFIG.SENTIMENT_MAX / 2,
+        (CHART_CONFIG.SENTIMENT_MAX * 4) / 5,
+        CHART_CONFIG.SENTIMENT_MAX,
+      ],
+      formatter: (value: number) => `${value}%`,
+    },
+    z: 30,
+  },
+];

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

@@ -0,0 +1,16 @@
+import { CHART_CONFIG } from '../../../constants';
+
+export const formatXAxisLabel = (
+  value: unknown,
+  isGreaterThanTwoWeeks: boolean
+) => {
+  const date = new Date(value as string);
+  return isGreaterThanTwoWeeks
+    ? `${date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+      })}`
+    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {
+        day: 'numeric',
+      })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;
+};

package/src/CrowdViewWidget/components/Chart/{utils → chartUtils}/getChartStyles.ts

@@ -3,11 +3,11 @@ import { colorPalette } from '@oanda/labs-widget-common';
 export interface ChartStyles {
   sentimentLongColor: string;
   sentimentShortColor: string;
+  sentimentOutlineColor: string;
   candleLongColor: string;
   candleShortColor: string;
-  sentimentAreaOpacity: number;
   tooltipLinesColor: string;
-  sentimentLabelColor: string;
+  sentimentOutlineWidth: number;
 }
 
 export const getChartStyles = (isDark: boolean): ChartStyles => {
@@ -18,25 +18,28 @@ export const getChartStyles = (isDark: boolean): ChartStyles => {
     ? colorPalette.darkYellow90
     : colorPalette.lightYellow90;
 
+  const sentimentOutlineColor = isDark
+    ? colorPalette.black
+    : colorPalette.white;
+  const sentimentOutlineWidth = isDark ? 3 : 2;
+
   const candleLongColor = isDark
     ? colorPalette.bottleGreenDark
     : colorPalette.bottleGreenLight;
   const candleShortColor = isDark
     ? colorPalette.orange
     : colorPalette.raspberryLight;
-  const sentimentAreaOpacity = isDark ? 0.5 : 0.2;
   const tooltipLinesColor = isDark
     ? colorPalette.orange
     : colorPalette.bottleGreenLight;
-  const sentimentLabelColor = isDark ? colorPalette.white : colorPalette.black;
 
   return {
     sentimentLongColor,
     sentimentShortColor,
+    sentimentOutlineColor,
     candleLongColor,
     candleShortColor,
-    sentimentAreaOpacity,
     tooltipLinesColor,
-    sentimentLabelColor,
+    sentimentOutlineWidth,
   };
 };

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

@@ -0,0 +1,16 @@
+import chroma from 'chroma-js';
+
+export const getGradientColor = (
+  value: number,
+  startColor: string,
+  targetColor: string,
+  minThreshold: number,
+  maxThreshold: number
+): string => {
+  const colorScale = chroma
+    .scale([startColor, targetColor])
+    .domain([minThreshold, maxThreshold])
+    .mode('rgb');
+
+  return colorScale(value).hex();
+};

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

@@ -0,0 +1,18 @@
+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();
+  });

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,212 @@
+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 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
+): 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 = (
+  sentimentLong: number,
+  sentimentShort: number,
+  labelCallback: (key: string) => string
+): string => {
+  return `<br /><p><b>${labelCallback('sentiment')}:</b></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[4];
+
+const hasValidSentimentData = (
+  sentimentLong: number | null,
+  sentimentShort: number | null
+): boolean => sentimentLong !== null && sentimentShort !== null;
+
+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,
+  sentimentLongs,
+  sentimentShorts,
+}: {
+  params: TooltipParam[];
+  buckets: Bucket[][];
+  bucketWidth: number;
+  selectedPrice: number;
+  bookType: BookType;
+  labelCallback: (key: string) => string;
+  sentimentLongs: (number | null)[];
+  sentimentShorts: (number | null)[];
+}) => {
+  if (!params || !Array.isArray(params) || params.length === 0) {
+    return '';
+  }
+
+  const candleParam = findSeriesParam(params, 'candlestick');
+  const booksParam = findSeriesParam(params, 'heatmap');
+  const { sentimentLong, sentimentShort } = findSentimentSeriesParam(
+    params,
+    sentimentLongs,
+    sentimentShorts
+  );
+
+  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(sentimentLong, sentimentShort);
+
+  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 && sentimentLong && sentimentShort
+      ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
+      : '';
+
+  return `<p>${timeFormatted}</p><br />
+${candleSection}
+${bookSection}
+${sentimentSection}`;
+};

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);
+};