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

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

@@ -1,228 +0,0 @@
-import chroma from 'chroma-js';
-
-import { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';
-import { CHART_CONFIG, COLOR_MAP, TIME_THRESHOLDS } from '../../../constants';
-import type { Bucket, GetLabelsDataProps, TooltipParam } 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',
-        align: 'center',
-        formatter: '{b}',
-      },
-    }));
-
-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;
-};
-
-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;
-};
-
-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();
-};
-
-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
-      );
-};
-
-export const getTooltipFormatter = ({
-  params,
-  buckets,
-  bucketWidth,
-  selectedPrice,
-  bookType,
-  labelCallback,
-}: {
-  params: TooltipParam[];
-  buckets: Bucket[][];
-  bucketWidth: number;
-  selectedPrice: number;
-  bookType: BookType;
-  labelCallback: (key: string) => string;
-}) => {
-  const bucketDisplayPrecision =
-    bucketWidth.toString().split('.')[1]?.length || 0;
-
-  if (!params || !Array.isArray(params) || params.length === 0) {
-    return undefined;
-  }
-  const candleParam = params.find(
-    (series): series is Extract<TooltipParam, { seriesId: 'candlestick' }> =>
-      series.seriesId === 'candlestick'
-  );
-  const booksParam = params.find(
-    (series): series is Extract<TooltipParam, { seriesId: 'heatmap' }> =>
-      series.seriesId === 'heatmap'
-  );
-  const sentimentParam = params.find(
-    (series): series is Extract<TooltipParam, { seriesId: 'sentiment' }> =>
-      series.seriesId === 'sentiment'
-  );
-
-  if (!candleParam) {
-    return undefined;
-  }
-  const time = new Date(candleParam.axisValue as string);
-
-  const candleData = candleParam.value;
-  const bucketsIndex = booksParam?.value[2];
-  const selectedBuckets =
-    bucketsIndex !== undefined ? buckets[bucketsIndex] : undefined;
-
-  const matchedBucket = selectedBuckets?.find(
-    ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth
-  );
-  const showCandles =
-    !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
-
-  if (!showCandles && !matchedBucket) {
-    return undefined;
-  }
-
-  const showSentiment =
-    !!sentimentParam?.value[1] && !!sentimentParam?.value[2];
-
-  return `<p>${time.toLocaleString(undefined, {
-    hour: '2-digit',
-    minute: '2-digit',
-    year: 'numeric',
-    day: 'numeric',
-    month: 'numeric',
-    timeZoneName: 'short',
-  })}</p><br />
-${
-  showCandles
-    ? `<p><b>${labelCallback('candle')}:</b></p>
-<p>${labelCallback('open_price')}: ${candleData[1]} </p>
-<p>${labelCallback('close_price')}: ${candleData[2]} </p>
-<p>${labelCallback('low')}: ${candleData[3]} </p>
-<p>${labelCallback('high')}: ${candleData[4]} </p>
-`
-    : ''
-}
-${
-  matchedBucket
-    ? `<br /><p><b>${labelCallback(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>
-<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(
-        bucketDisplayPrecision
-      )} - ${Number(matchedBucket.price + bucketWidth).toFixed(
-        bucketDisplayPrecision
-      )} </p>
-<p>${
-        matchedBucket.sentiment < 0
-          ? labelCallback(
-              bookType === BookType.Order
-                ? 'sell_overbalance'
-                : 'short_overbalance'
-            )
-          : labelCallback(
-              bookType === BookType.Order
-                ? 'buy_overbalance'
-                : 'long_overbalance'
-            )
-      }: ${Math.abs(Number(matchedBucket.sentiment.toFixed(bucketDisplayPrecision)))}% </p>`
-    : ''
-}${
-    showSentiment && sentimentParam
-      ? `<br /><p><b>${labelCallback('sentiment')}:</b></p>
-<p>${labelCallback('long')}: ${sentimentParam.value[2].toFixed(2)}% </p>
-<p>${labelCallback('short')}: ${sentimentParam.value[1].toFixed(2)}% </p>`
-      : ''
-  }`;
-};
-
-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/getGridLines.ts

@@ -1,148 +0,0 @@
-import { getLineCommons } from '@oanda/labs-widget-common';
-
-import { CHART_CONFIG } from '../../../constants';
-
-export const getGridLines = ({
-  isDark,
-  isDesktop,
-}: {
-  isDark: boolean;
-  isDesktop: boolean;
-}) => {
-  const {
-    WIDTH,
-    MAIN_HEIGHT,
-    MARGIN_BETWEEN,
-    SENTIMENT_HEIGHT,
-    X_LABEL_SIZE,
-    Y_LABEL_SIZE_DESKTOP,
-    Y_LABEL_SIZE_MOBILE,
-  } = CHART_CONFIG;
-  return [
-    // Main Top
-    {
-      ...getLineCommons(isDark),
-      top: -2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: WIDTH,
-        y2: 0,
-      },
-    },
-    // Main Right
-    {
-      ...getLineCommons(isDark),
-      right: -2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
-      },
-    },
-    // Main Bottom
-    {
-      ...getLineCommons(isDark),
-      top: MAIN_HEIGHT - 2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: WIDTH,
-        y2: 0,
-      },
-    },
-    // Main Left
-    {
-      ...getLineCommons(isDark),
-      left: -2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
-      },
-    },
-    // Main Y Label
-    {
-      ...getLineCommons(isDark),
-      right: (isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) - 2,
-      top: -2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: MAIN_HEIGHT,
-      },
-    },
-    // Main X Label
-    {
-      ...getLineCommons(isDark),
-      top: MAIN_HEIGHT + X_LABEL_SIZE,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: WIDTH,
-        y2: 0,
-      },
-    },
-    // Sentiment Top
-    {
-      ...getLineCommons(isDark),
-      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: WIDTH,
-        y2: 0,
-      },
-    },
-    // Sentiment Right
-    {
-      ...getLineCommons(isDark),
-      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
-      right: -2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: SENTIMENT_HEIGHT,
-      },
-    },
-    // Sentiment Bottom
-    {
-      ...getLineCommons(isDark),
-      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN + SENTIMENT_HEIGHT - 3,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: WIDTH,
-        y2: 0,
-      },
-    },
-    // Sentiment Left
-    {
-      ...getLineCommons(isDark),
-      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
-      left: -2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: SENTIMENT_HEIGHT,
-      },
-    },
-    // Sentiment Y Label
-    {
-      ...getLineCommons(isDark),
-      right: (isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) - 3,
-      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: SENTIMENT_HEIGHT,
-      },
-    },
-  ];
-};