@oanda/labs-crowd-view-widget 1.0.30 → 1.0.31

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -10,15 +10,17 @@ import {
   DataZoomInsideComponent,
   GraphicComponent,
   GridSimpleComponent,
+  MarkPointComponent,
   TooltipComponent,
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React, { useEffect, useRef } from 'react';
 
-import { CHART_HEIGHT } from './constants';
+import { CHART_HEIGHT, MAX_LABELS_COUNT } from './constants';
 import { getDesktopOption, getOption } from './getOption';
 import type { ChartProps } from './types';
+import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
 
 echarts.use([
   GridSimpleComponent,
@@ -29,6 +31,7 @@ echarts.use([
   CustomChart,
   TooltipComponent,
   CandlestickChart,
+  MarkPointComponent,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -43,8 +46,101 @@ const Chart = ({ data }: ChartProps) => {
       const echartInstance = echartRef.current.getEchartsInstance();
 
       echartInstance.setOption(getDesktopOption({ isDark }));
+
+      echartInstance.off('datazoom');
+      echartInstance.on('datazoom', () => {
+        const {
+          dataZoom,
+          // @ts-ignore
+          title: { text },
+        } = echartInstance.getOption();
+
+        const { start, end } = (
+          dataZoom as { start: number; end: number }[]
+        )[0];
+        const prevInterval = Number((text as string).split(',')[0]);
+        const prevIsGreaterThanTwoWeeks = Boolean(
+          Number((text as string).split(',')[1])
+        );
+
+        const visibleItemsCount = Math.round(
+          (data.xAxisData.length * (end - start)) / 100
+        );
+
+        const interval =
+          visibleItemsCount > MAX_LABELS_COUNT
+            ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)
+            : 0;
+
+        if (interval !== prevInterval) {
+          echartInstance.setOption({
+            xAxis: {
+              axisLabel: {
+                interval,
+              },
+            },
+          });
+        }
+
+        const visibleXAxisData = data.xAxisData.slice(
+          (data.xAxisData.length * start) / 100,
+          (data.xAxisData.length * end) / 100
+        );
+
+        const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+          visibleXAxisData[0],
+          visibleXAxisData[visibleXAxisData.length - 1]
+        );
+
+        if (isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
+          const labelsData = getLabelData({
+            xAxisData: data.xAxisData,
+            isGreaterThanTwoWeeks,
+          });
+
+          echartInstance.setOption({
+            series: [
+              {
+                id: 'candlestick',
+                markPoint: {
+                  data: labelsData,
+                },
+              },
+            ],
+          });
+
+          echartInstance.setOption({
+            xAxis: {
+              axisLabel: {
+                formatter: (value: string) => {
+                  const date = new Date(value);
+                  return isGreaterThanTwoWeeks
+                    ? `${date.toLocaleTimeString(undefined, {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}`
+                    : `${date.toLocaleDateString(undefined, {
+                        day: 'numeric',
+                      })}`;
+                },
+              },
+            },
+          });
+        }
+
+        if (
+          interval !== prevInterval ||
+          isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks
+        ) {
+          echartInstance.setOption({
+            title: {
+              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`,
+            },
+          });
+        }
+      });
     }
-  }, [echartRef, isDark]);
+  }, [echartRef, isDark, data]);
 
   return (
     <BaseChart
@@ -52,6 +148,7 @@ const Chart = ({ data }: ChartProps) => {
       chartHeight={CHART_HEIGHT}
       echarts={echarts}
       isDark={isDark}
+      lazyUpdate={true}
       option={getOption(data)}
     />
   );

package/src/CrowdViewWidget/components/Chart/ChartWithData.tsx

@@ -18,7 +18,11 @@ import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { transformDataForChart } from './utils';
 
-const ChartWithData = ({ instrument, bookType }: ChartWithDataProps) => {
+const ChartWithData = ({
+  instrument,
+  bookType,
+  granularity,
+}: ChartWithDataProps) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
@@ -38,8 +42,8 @@ const ChartWithData = ({ instrument, bookType }: ChartWithDataProps) => {
 
   const transformedData = useMemo(() => {
     if (!data) return undefined;
-    return transformDataForChart(data);
-  }, [data]);
+    return transformDataForChart({ data, granularity });
+  }, [data, granularity]);
 
   return (
     <>

package/src/CrowdViewWidget/components/Chart/constants.tsx

@@ -2,3 +2,7 @@ export const X_LABEL_SIZE = 40;
 export const Y_LABEL_SIZE_DESKTOP = 60;
 export const CHART_WIDTH = 9999;
 export const CHART_HEIGHT = 425;
+
+export const INITIAL_START_ZOOM = 80;
+export const INITIAL_END_ZOOM = 100;
+export const MAX_LABELS_COUNT = 14;

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

@@ -8,11 +8,18 @@ import * as echarts from 'echarts/core';
 import {
   CHART_HEIGHT,
   CHART_WIDTH,
+  INITIAL_END_ZOOM,
+  INITIAL_START_ZOOM,
+  MAX_LABELS_COUNT,
   X_LABEL_SIZE,
   Y_LABEL_SIZE_DESKTOP,
 } from './constants';
 import type { GetOptionType, GetResponsiveOptionsProps } from './types';
-import { getRectColor } from './utils';
+import {
+  getLabelData,
+  getRectColor,
+  isDifferenceGreaterThanTwoWeeks,
+} from './utils';
 
 export const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {
   const desktopGridLines = getGridLines({
@@ -60,31 +67,66 @@ export const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {
   };
 };
 
+// @ts-ignore
 export const getOption: GetOptionType = ({
   xAxisData,
   ordersPositionsChartData,
   ordersPositionsBucketWidth,
   candlesSeriesData,
 }) => {
+  const visibleXAxisData = xAxisData.slice(
+    (xAxisData.length * INITIAL_START_ZOOM) / 100,
+    (xAxisData.length * INITIAL_END_ZOOM) / 100
+  );
+
+  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+    visibleXAxisData[0],
+    visibleXAxisData[visibleXAxisData.length - 1]
+  );
+  const labelsData = getLabelData({
+    xAxisData,
+    isGreaterThanTwoWeeks,
+  });
+
+  const visibleItemsCount = Math.round(
+    (xAxisData.length * (INITIAL_END_ZOOM - INITIAL_START_ZOOM)) / 100
+  );
+
+  const initialInterval =
+    visibleItemsCount > MAX_LABELS_COUNT
+      ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)
+      : 0;
+
   return {
+    title: {
+      show: false,
+      text: `${initialInterval},${isGreaterThanTwoWeeks}`,
+    },
     animation: false,
     dataZoom: [
       {
         type: 'inside',
         xAxisIndex: 0,
-        start: 80,
-        end: 100,
-      },
-      {
-        type: 'inside',
-        yAxisIndex: 0,
-        startValue: 1.5,
-        endValue: 1.7,
+        start: INITIAL_START_ZOOM,
+        end: INITIAL_END_ZOOM,
       },
     ],
     tooltip: {
       trigger: 'axis',
-      formatter: '{c}',
+      formatter: (val) => {
+        // @ts-ignore
+        const timestamp = val[0].axisValue as string;
+
+        return `${new Date(timestamp).toLocaleTimeString(undefined, {
+          hour: '2-digit',
+          minute: '2-digit',
+        })}
+      ${new Date(timestamp).toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'short',
+      })}
+`;
+      },
     },
     xAxis: {
       type: 'category',
@@ -95,16 +137,24 @@ export const getOption: GetOptionType = ({
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        formatter: (value) =>
-          `${new Date(value).toLocaleTimeString(undefined, {
-            hour: '2-digit',
-            minute: '2-digit',
-          })}`,
+        interval: initialInterval,
+        formatter: (value) => {
+          const date = new Date(value);
+          return isGreaterThanTwoWeeks
+            ? `${date.toLocaleTimeString(undefined, {
+                hour: '2-digit',
+                minute: '2-digit',
+              })}`
+            : `${date.toLocaleDateString(undefined, {
+                day: 'numeric',
+              })}`;
+        },
       },
     },
     yAxis: {
       type: 'value',
       position: 'right',
+      scale: true,
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
@@ -115,36 +165,39 @@ export const getOption: GetOptionType = ({
     series: [
       {
         type: 'candlestick',
+        id: 'candlestick',
         data: candlesSeriesData,
         itemStyle: {
           color: colorPalette.raspberryLight,
           color0: colorPalette.bottleGreenLight,
         },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 0,
+          data: labelsData,
+        },
       },
       {
         type: 'custom',
         name: 'heatmap',
+        id: 'heatmap',
         silent: true,
         renderItem: (params, api) => {
           const { coordSys } = params;
-
           const xVal = api.value(0);
           const yVal = api.value(1);
           const sentiment = api.value(2) as number;
           const start = api.coord([xVal, yVal]);
-
           const [rectWidth, rectHeight] = api.size!([
             0,
             ordersPositionsBucketWidth,
           ]) as number[];
-
           const boundaries = coordSys as unknown as {
             x: number;
             y: number;
             width: number;
             height: number;
           };
-
           const shape = echarts.graphic.clipRectByRect(
             {
               x: start[0] - rectWidth / 2,

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

@@ -2,6 +2,7 @@ import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/s
 import type { EChartsOption } from 'echarts';
 
 import type { BookType } from '../../../gql/types/graphql';
+import type { GranularityId } from '../../types';
 
 interface ChartOptionsProps {
   xAxisData: string[];
@@ -18,7 +19,6 @@ interface ChartOptionsProps {
 }
 
 export type GetOptionType = (props: ChartOptionsProps) => EChartsOption;
-
 export interface GetResponsiveOptionsProps {
   isDark: boolean;
 }
@@ -30,8 +30,19 @@ export interface ChartProps {
 export interface ChartWithDataProps {
   bookType: BookType;
   instrument: string;
+  granularity: GranularityId;
+}
+
+interface TransformDataForChartTypeProps {
+  data: GetOrderPositionBooksQuery;
+  granularity: GranularityId;
 }
 
 export type TransformDataForChartType = (
-  props: GetOrderPositionBooksQuery
+  props: TransformDataForChartTypeProps
 ) => ChartOptionsProps;
+
+export interface GetLabelsDataProps {
+  xAxisData: string[];
+  isGreaterThanTwoWeeks: boolean;
+}

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

@@ -1,7 +1,9 @@
 import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 import { colorMap } from '../../config';
+import { TimeSpanId } from '../../types';
+import { CHART_HEIGHT } from './constants';
 import { getPriceCandlesMock } from './getPriceCandlesMock';
-import type { TransformDataForChartType } from './types';
+import type { GetLabelsDataProps, TransformDataForChartType } from './types';
 
 export const getRectColor = (sentiment: number) => {
   const colors = sentiment < 0 ? colorMap.short : colorMap.long;
@@ -26,14 +28,55 @@ export const getRectColor = (sentiment: number) => {
   return 'transparent';
 };
 
+export enum GranularityId {
+  MINUTE_5 = 'MINUTE_5',
+  MINUTE_15 = 'MINUTE_15',
+  MINUTE_30 = 'MINUTE_30',
+  HOUR_1 = 'HOUR_1',
+  HOUR_4 = 'HOUR_4',
+  DAY_1 = 'DAY_1',
+}
+
+const timeSpansInMilliseconds: Record<TimeSpanId, number> = {
+  [TimeSpanId.HOUR_1]: 60 * 60 * 1000,
+  [TimeSpanId.HOUR_12]: 12 * 60 * 60 * 1000,
+  [TimeSpanId.DAY_1]: 24 * 60 * 60 * 1000,
+  [TimeSpanId.DAY_2]: 2 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.WEEK_1]: 7 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.WEEK_2]: 14 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.WEEK_3]: 21 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.MONTH_1]: 30 * 24 * 60 * 60 * 1000, // Approximation
+  [TimeSpanId.MONTH_3]: 3 * 30 * 24 * 60 * 60 * 1000, // Approximation
+  [TimeSpanId.MONTH_6]: 6 * 30 * 24 * 60 * 60 * 1000, // Approximation
+  [TimeSpanId.YEAR_1]: 365 * 24 * 60 * 60 * 1000, // Approximation
+  [TimeSpanId.YEAR_5]: 5 * 365 * 24 * 60 * 60 * 1000, // Approximation
+};
+
+const granularityInMilliseconds: Record<GranularityId, number> = {
+  [GranularityId.MINUTE_5]: 5 * 60 * 1000,
+  [GranularityId.MINUTE_15]: 15 * 60 * 1000,
+  [GranularityId.MINUTE_30]: 30 * 60 * 1000,
+  [GranularityId.HOUR_1]: 60 * 60 * 1000,
+  [GranularityId.HOUR_4]: 4 * 60 * 60 * 1000,
+  [GranularityId.DAY_1]: 24 * 60 * 60 * 1000,
+};
+
+const temporaryGranularityTimeSpanMap: Record<GranularityId, TimeSpanId> = {
+  [GranularityId.MINUTE_5]: TimeSpanId.DAY_2,
+  [GranularityId.MINUTE_15]: TimeSpanId.WEEK_1,
+  [GranularityId.MINUTE_30]: TimeSpanId.WEEK_2,
+  [GranularityId.HOUR_1]: TimeSpanId.MONTH_1,
+  [GranularityId.HOUR_4]: TimeSpanId.MONTH_3,
+  [GranularityId.DAY_1]: TimeSpanId.MONTH_6,
+};
+
 const mockOrderPositionDataForHistoricalData = (
-  data: GetOrderPositionBooksQuery
+  data: GetOrderPositionBooksQuery,
+  granularityId: GranularityId
 ) => {
-  const oneMinuteInMilliseconds = 60000;
-  const granularity = oneMinuteInMilliseconds * 5; // 5min
-  const timeSpan = oneMinuteInMilliseconds * 60 * 24; // 24h
-  // const timeSpan =  oneMinuteInMilliseconds * 60 * 6 // 6h
-  // const timeSpan =  oneMinuteInMilliseconds * 15 //15min
+  const granularity = granularityInMilliseconds[granularityId];
+  const timeSpan =
+    timeSpansInMilliseconds[temporaryGranularityTimeSpanMap[granularityId]];
 
   const currentTime = data.orderPositionBooks[0]!.time;
 
@@ -50,13 +93,68 @@ const mockOrderPositionDataForHistoricalData = (
         buckets: data.orderPositionBooks[0]!.buckets,
         bucketWidth: data.orderPositionBooks[0]!.bucketWidth,
       };
-    });
+    })
+    .reverse();
 
   return orderPositionDataForHistorical;
 };
 
-export const transformDataForChart: TransformDataForChartType = (data) => {
-  const mockedData = mockOrderPositionDataForHistoricalData(data);
+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: 'short',
+        day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
+      }),
+      xAxis: item,
+      y: CHART_HEIGHT - 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 TWO_WEEKS_IN_MS = 14 * 24 * 60 * 60 * 1000;
+
+  const differenceInMs = Math.abs(date2.getTime() - date1.getTime());
+
+  return differenceInMs < TWO_WEEKS_IN_MS;
+};
+
+export const transformDataForChart: TransformDataForChartType = ({
+  data,
+  granularity,
+}) => {
+  const mockedData = mockOrderPositionDataForHistoricalData(data, granularity);
 
   const xAxisData = mockedData.map(({ time }) => time);
   const ordersPositionsChartData = mockedData
@@ -70,7 +168,7 @@ export const transformDataForChart: TransformDataForChartType = (data) => {
     )
     .filter((item) => Math.abs(item[2]) > 0.15);
 
-  const mockedCandles = getPriceCandlesMock(ordersPositionsChartData.length);
+  const mockedCandles = getPriceCandlesMock(xAxisData.length);
 
   const candlesSeriesData: [number, number, number, number][] =
     mockedCandles.map(({ close, open, low, high }) => [
@@ -85,5 +183,6 @@ export const transformDataForChart: TransformDataForChartType = (data) => {
     ordersPositionsChartData,
     ordersPositionsBucketWidth: mockedData[0]!.bucketWidth,
     candlesSeriesData,
+    granularity,
   };
 };

package/src/CrowdViewWidget/config.ts

@@ -105,19 +105,27 @@ const instrumentPrecisionConfig: Record<InstrumentId, number> = {
 
 const granularitySelectConfig = [
   {
-    id: GranularityId.M5,
+    id: GranularityId.MINUTE_5,
     label: '5_minutes',
   },
   {
-    id: GranularityId.M15,
+    id: GranularityId.MINUTE_15,
     label: '15_minutes',
   },
   {
-    id: GranularityId.H1,
+    id: GranularityId.MINUTE_30,
+    label: '30_minutes',
+  },
+  {
+    id: GranularityId.HOUR_1,
     label: '1_hour',
   },
   {
-    id: GranularityId.D1,
+    id: GranularityId.HOUR_4,
+    label: '4_hours',
+  },
+  {
+    id: GranularityId.DAY_1,
     label: '1_day',
   },
 ];

package/src/CrowdViewWidget/types.ts

@@ -29,10 +29,27 @@ export enum InstrumentId {
 }
 
 export enum GranularityId {
-  M5 = '5M',
-  M15 = '15M',
-  H1 = '1H',
-  D1 = '1D',
+  MINUTE_5 = 'MINUTE_5',
+  MINUTE_15 = 'MINUTE_15',
+  MINUTE_30 = 'MINUTE_30',
+  HOUR_1 = 'HOUR_1',
+  HOUR_4 = 'HOUR_4',
+  DAY_1 = 'DAY_1',
+}
+
+export enum TimeSpanId {
+  HOUR_1 = 'HOUR_1',
+  HOUR_12 = 'HOUR_12',
+  DAY_1 = 'DAY_1',
+  DAY_2 = 'DAY_2',
+  WEEK_1 = 'WEEK_1',
+  WEEK_2 = 'WEEK_2',
+  WEEK_3 = 'WEEK_3',
+  MONTH_1 = 'MONTH_1',
+  MONTH_3 = 'MONTH_3',
+  MONTH_6 = 'MONTH_6',
+  YEAR_1 = 'YEAR_1',
+  YEAR_5 = 'YEAR_5',
 }
 
 export interface OrdersPositionsData {