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

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

@@ -1,401 +0,0 @@
-import chroma from 'chroma-js';
-
-import { CHART_CONFIG, CHART_CONFIG_CALCULATED } from '../../constants';
-import type { Bucket, GetOptionType, TooltipParam } from './types';
-import {
-  formatXAxisLabel,
-  getLabelData,
-  getRectColor,
-  getTooltipFormatter,
-  isDifferenceGreaterThanTwoWeeks,
-} from './utils/chartUtils';
-import { getChartStyles } from './utils/getChartStyles';
-import { getGridLines } from './utils/getGridLines';
-
-// @ts-expect-error
-export const getOption: GetOptionType = (
-  {
-    xAxisData,
-    candlesSeriesData,
-    orderPositionBooks,
-    bucketWidth,
-    buckets,
-    precision,
-    bookType,
-    sentiments,
-  },
-  isDark,
-  isDesktop,
-  labelCallback
-) => {
-  let selectedPrice: number;
-  const {
-    sentimentLongColor,
-    sentimentShortColor,
-    candleLongColor,
-    candleShortColor,
-    sentimentAreaOpacity,
-    tooltipLinesColor,
-    sentimentLabelColor,
-  } = getChartStyles(isDark);
-
-  const visibleXAxisData = xAxisData.slice(
-    (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
-    (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
-  );
-
-  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-    visibleXAxisData[0],
-    visibleXAxisData[visibleXAxisData.length - 1]
-  );
-
-  const labelsData = getLabelData({
-    xAxisData,
-    isGreaterThanTwoWeeks,
-  });
-
-  const gridMainLines = getGridLines({
-    isDark,
-    isDesktop,
-  });
-
-  return {
-    animation: false,
-    dataZoom: [
-      {
-        id: 'main',
-        type: 'inside',
-        xAxisIndex: 0,
-        start: CHART_CONFIG.INITIAL_START_ZOOM,
-        end: CHART_CONFIG.INITIAL_END_ZOOM,
-        filterMode: 'filter',
-      },
-      {
-        id: 'sentiment',
-        type: 'inside',
-        xAxisIndex: 1,
-        start: CHART_CONFIG.INITIAL_START_ZOOM,
-        end: CHART_CONFIG.INITIAL_END_ZOOM,
-        filterMode: 'none',
-      },
-    ],
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        axis: 'x',
-        lineStyle: {
-          color: tooltipLinesColor,
-        },
-        crossStyle: {
-          color: tooltipLinesColor,
-        },
-        label: {
-          padding: 0,
-          lineHeight: 24,
-          formatter: (params) => {
-            if (params.axisDimension === 'y' && params.axisIndex === 0) {
-              selectedPrice = Number(params.value);
-              return ` ${Number(params.value).toFixed(precision)} `;
-            }
-
-            return null;
-          },
-        },
-      },
-      confine: true,
-      formatter: (params: TooltipParam[]) =>
-        getTooltipFormatter({
-          params,
-          buckets,
-          bucketWidth,
-          selectedPrice,
-          labelCallback,
-          precision,
-          bookType,
-        }),
-    },
-    xAxis: [
-      {
-        type: 'category',
-        name: 'xAxis-less-than-two-weeks',
-        nameTextStyle: {
-          fontSize: 0,
-        },
-        id: 'main-xAxis',
-        data: xAxisData,
-        splitNumber: 1,
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          padding: [8, 16, 8, 16],
-          margin: 0,
-          formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),
-        },
-      },
-      {
-        type: 'category',
-        gridIndex: 1,
-        show: false,
-        data: xAxisData,
-        splitNumber: 1,
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          show: false,
-        },
-      },
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        gridIndex: 0,
-        position: 'right',
-        min: (val) => val.min - bucketWidth * 2,
-        max: (val) => val.max + bucketWidth * 2,
-        axisLine: { show: false },
-        axisTick: { show: false },
-        axisLabel: {
-          showMaxLabel: false,
-          showMinLabel: false,
-          margin: isDesktop ? 4 : 2,
-          formatter: (value: number) => value.toFixed(precision - 1),
-        },
-      },
-      {
-        type: 'value',
-        gridIndex: 1,
-        position: 'right',
-        min: CHART_CONFIG.SENTIMENT_MIN,
-        max: CHART_CONFIG.SENTIMENT_MAX,
-        interval: CHART_CONFIG.SENTIMENT_INTERVAL,
-        axisLine: { show: false },
-        axisTick: { show: false },
-        axisLabel: {
-          verticalAlignMaxLabel: 'top',
-          verticalAlignMinLabel: 'bottom',
-          lineHeight: 20,
-          margin: isDesktop ? 4 : 2,
-          rich: {
-            shortRect: {
-              backgroundColor: chroma(sentimentShortColor).alpha(0.3).css(),
-              borderColor: sentimentShortColor,
-              borderWidth: 1,
-              width: 8,
-              height: 8,
-            },
-            longRect: {
-              backgroundColor: chroma(sentimentLongColor).alpha(0.3).css(),
-              borderColor: sentimentLongColor,
-              borderWidth: 1,
-              width: 8,
-              height: 8,
-            },
-          },
-          formatter: (value: number) => {
-            if (value === CHART_CONFIG.SENTIMENT_MIN) {
-              return `{shortRect| } ${labelCallback('short')}`;
-            }
-
-            if (value === CHART_CONFIG.SENTIMENT_MAX) {
-              return `{longRect| } ${labelCallback('long')}`;
-            }
-
-            if (value === CHART_CONFIG.SENTIMENT_MAX / 2) {
-              return '50%';
-            }
-
-            return undefined;
-          },
-        },
-      },
-    ],
-    axisPointer: {
-      link: [
-        {
-          xAxisIndex: 'all',
-        },
-      ],
-    },
-    visualMap: {
-      show: false,
-      seriesId: 'sentiment',
-      dimension: 1,
-      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,
-        },
-      ],
-    },
-    series: [
-      {
-        type: 'candlestick',
-        id: 'candlestick',
-        gridIndex: 0,
-        xAxisIndex: 0,
-        yAxisIndex: 0,
-        data: candlesSeriesData,
-        itemStyle: {
-          color: chroma(candleShortColor).desaturate().css(),
-          color0: chroma(candleLongColor).desaturate().css(),
-          borderColor: candleShortColor,
-          borderColor0: candleLongColor,
-        },
-        emphasis: {
-          itemStyle: {
-            color: candleShortColor,
-            color0: candleLongColor,
-          },
-        },
-        markPoint: {
-          symbol: 'circle',
-          symbolSize: 0,
-          data: labelsData,
-        },
-      },
-      {
-        type: 'custom',
-        gridIndex: 0,
-        name: 'heatmap',
-        id: 'heatmap',
-        xAxisIndex: 0,
-        yAxisIndex: 0,
-        silent: true,
-        clip: true,
-        renderItem: (_params, api) => {
-          const xVal = api.value(0);
-          const bucketIndex = api.value(2) as number;
-          const metaValues = buckets[bucketIndex];
-
-          const [rectWidth, rectHeight] = api.size!([
-            0,
-            bucketWidth,
-          ]) as number[];
-
-          const items = metaValues.map(({ price, sentiment }: Bucket) => {
-            const start = api.coord([xVal, price]);
-
-            return {
-              type: 'rect',
-              shape: {
-                x: start[0] - rectWidth / 2,
-                y: start[1] - rectHeight,
-                width: rectWidth + 1,
-                height: rectHeight,
-              },
-              style: {
-                fill: getRectColor(sentiment, isDark),
-              },
-              silent: true,
-              emphasisDisabled: true,
-            };
-          });
-
-          return {
-            type: 'group',
-            children: items,
-            silent: true,
-            emphasisDisabled: true,
-          };
-        },
-        data: orderPositionBooks,
-      },
-      {
-        type: 'line',
-        name: 'sentiment-short',
-        id: 'sentiment',
-        xAxisIndex: 1,
-        yAxisIndex: 1,
-        data: sentiments,
-        showSymbol: false,
-        symbol: 'none',
-        lineStyle: {
-          width: 3,
-          opacity: 1,
-        },
-        areaStyle: {
-          color: sentimentShortColor,
-          opacity: sentimentAreaOpacity,
-        },
-        emphasis: {
-          areaStyle: {
-            opacity: 0,
-          },
-        },
-        stack: 'sentiment',
-      },
-      {
-        type: 'line',
-        name: 'sentiment-long',
-        id: 'sentiment-long',
-        xAxisIndex: 1,
-        yAxisIndex: 1,
-        data: sentiments.map((sentiment) => [sentiment[0], sentiment[2]]),
-        symbol: 'none',
-        lineStyle: {
-          color: 'transparent',
-          width: 0,
-        },
-        areaStyle: {
-          color: sentimentLongColor,
-          opacity: sentimentAreaOpacity,
-        },
-        stack: 'sentiment',
-        emphasis: {
-          disabled: true,
-        },
-        tooltip: {
-          show: false,
-        },
-      },
-    ],
-    grid: [
-      {
-        name: 'main-grid',
-        id: 'main-grid',
-        height: `${CHART_CONFIG.MAIN_HEIGHT}px`,
-        top: '0px',
-        left: '0px',
-        right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
-        bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
-      },
-      {
-        name: 'sentiment-grid',
-        id: 'sentiment-grid',
-        height: `${CHART_CONFIG.SENTIMENT_HEIGHT}px`,
-        bottom: `0px`,
-        left: '0px',
-        right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
-      },
-    ],
-    graphic: [
-      ...gridMainLines,
-      {
-        type: 'text',
-        silent: true,
-        z: 1,
-        left: 4,
-        bottom: CHART_CONFIG_CALCULATED.SENTIMENT_TEXT_POSITION,
-        style: {
-          text: `${labelCallback('sentiment')}:`,
-          fontFamily: 'Sofia W03',
-          fontSize: 14,
-          fontWeight: 'bold',
-          fill: sentimentLabelColor,
-        },
-      },
-    ],
-  };
-};

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

@@ -1,44 +0,0 @@
-import Decimal from 'decimal.js';
-
-import type { Bucket } from '../types';
-
-export const aggregateBuckets = (
-  buckets: Bucket[],
-  newBucketWidth: number
-): Bucket[] => {
-  if (!buckets.length) {
-    return [];
-  }
-
-  const bucketWidthDecimal = new Decimal(newBucketWidth);
-
-  const aggregatedMap = new Map<string, Decimal>();
-
-  for (const bucket of buckets) {
-    const priceDecimal = new Decimal(bucket.price);
-    const sentimentDecimal = new Decimal(bucket.sentiment);
-
-    const bucketIndex = priceDecimal.div(bucketWidthDecimal).floor();
-    const groupingKey = bucketIndex.mul(bucketWidthDecimal);
-
-    const groupingKeyStr = groupingKey.toString();
-
-    const currentSentiment =
-      aggregatedMap.get(groupingKeyStr) ?? new Decimal(0);
-    aggregatedMap.set(groupingKeyStr, currentSentiment.add(sentimentDecimal));
-  }
-
-  const aggregatedBuckets = Array.from(aggregatedMap.entries()).map(
-    ([priceStr, sentimentDecimal]) => {
-      const price = new Decimal(priceStr).toNumber();
-      const sentiment = sentimentDecimal.toNumber();
-
-      return {
-        price,
-        sentiment,
-      };
-    }
-  );
-
-  return aggregatedBuckets;
-};

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

@@ -1,216 +0,0 @@
-import chroma from 'chroma-js';
-
-import { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';
-import {
-  BOOKS_THRESHOLDS,
-  CHART_CONFIG,
-  COLOR_MAP,
-  TIME_THRESHOLDS,
-} from '../../../constants';
-import type { Bucket, GetLabelsDataProps, TooltipParam } from '../types';
-
-export const getLabelData = ({
-  xAxisData,
-  isGreaterThanTwoWeeks,
-}: GetLabelsDataProps) =>
-  xAxisData
-    .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
-): string => {
-  const startThreshold = BOOKS_THRESHOLDS.MIN;
-  const endThreshold = BOOKS_THRESHOLDS.MAX;
-
-  const colorScale = chroma
-    .scale([startColor, targetColor])
-    .domain([startThreshold, endThreshold])
-    .mode('rgb');
-
-  return colorScale(value).hex();
-};
-
-export const getRectColor = (sentiment: number, isDark: boolean) => {
-  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
-
-  return sentiment < 0
-    ? getGradientColor(
-        sentiment * -1,
-        colorPalette.short[0],
-        colorPalette.short[1]
-      )
-    : getGradientColor(sentiment, colorPalette.long[0], colorPalette.long[1]);
-};
-
-export const getTooltipFormatter = ({
-  params,
-  buckets,
-  bucketWidth,
-  selectedPrice,
-  precision,
-  bookType,
-  labelCallback,
-}: {
-  params: TooltipParam[];
-  buckets: Bucket[][];
-  bucketWidth: number;
-  selectedPrice: number;
-  precision: number;
-  bookType: BookType;
-  labelCallback: (key: string) => string;
-}) => {
-  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(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>
-<p>${
-        matchedBucket.sentiment < 0
-          ? labelCallback(
-              bookType === BookType.Order
-                ? 'sell_overbalance'
-                : 'short_overbalance'
-            )
-          : labelCallback(
-              bookType === BookType.Order
-                ? 'buy_overbalance'
-                : 'long_overbalance'
-            )
-      }: ${Math.abs(matchedBucket.sentiment)}% </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}`;
-};