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

package/dist/module/CrowdViewWidget/components/Chart/getOption.js

@@ -1,7 +1,7 @@
 import { colorPalette, getGridLines, getLineCommons } from '@oanda/labs-widget-common';
 import * as echarts from 'echarts/core';
-import { CHART_HEIGHT, CHART_WIDTH, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
-import { getRectColor } from './utils';
+import { CHART_HEIGHT, CHART_WIDTH, INITIAL_END_ZOOM, INITIAL_START_ZOOM, MAX_LABELS_COUNT, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
+import { getLabelData, getRectColor, isDifferenceGreaterThanTwoWeeks } from './utils';
 export const getDesktopOption = _ref => {
   let {
     isDark
@@ -51,22 +51,40 @@ export const getOption = _ref2 => {
     ordersPositionsBucketWidth,
     candlesSeriesData
   } = _ref2;
+  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 => {
+        const timestamp = val[0].axisValue;
+        return `${new Date(timestamp).toLocaleTimeString(undefined, {
+          hour: '2-digit',
+          minute: '2-digit'
+        })}
+      ${new Date(timestamp).toLocaleDateString(undefined, {
+          day: 'numeric',
+          month: 'short'
+        })}
+`;
+      }
     },
     xAxis: {
       type: 'category',
@@ -77,15 +95,22 @@ export const getOption = _ref2 => {
       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
       },
@@ -99,14 +124,21 @@ export const getOption = _ref2 => {
     },
     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 {

package/dist/module/CrowdViewWidget/components/Chart/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["colorPalette","getGridLines","getLineCommons","echarts","CHART_HEIGHT","CHART_WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","getRectColor","getDesktopOption","_ref","isDark","desktopGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","yAxis","nameTextStyle","align","padding","axisLabel","margin","grid","name","top","left","right","bottom","graphic","shape","x1","y1","x2","y2","getOption","_ref2","xAxisData","ordersPositionsChartData","ordersPositionsBucketWidth","candlesSeriesData","animation","dataZoom","type","xAxisIndex","start","end","yAxisIndex","startValue","endValue","tooltip","trigger","formatter","xAxis","data","axisTick","show","value","Date","toLocaleTimeString","undefined","hour","minute","position","axisLine","showMaxLabel","showMinLabel","series","itemStyle","color","raspberryLight","color0","bottleGreenLight","silent","renderItem","params","api","coordSys","xVal","yVal","sentiment","coord","rectWidth","rectHeight","size","boundaries","clipRectByRect","x","y","width","height","style","fill","emphasisDisabled"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  colorPalette,\n  getGridLines,\n  getLineCommons,\n} from '@oanda/labs-widget-common';\nimport * as echarts from 'echarts/core';\n\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n} from './constants';\nimport type { GetOptionType, GetResponsiveOptionsProps } from './types';\nimport { getRectColor } from './utils';\n\nexport const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {\n  const desktopGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_DESKTOP,\n    bottomLeftBox: false,\n  });\n\n  return {\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 8],\n      },\n      axisLabel: {\n        margin: 8,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...desktopGridLines,\n      {\n        ...getLineCommons(isDark),\n        top: 0,\n        right: 0,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 0,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n\nexport const getOption: GetOptionType = ({\n  xAxisData,\n  ordersPositionsChartData,\n  ordersPositionsBucketWidth,\n  candlesSeriesData,\n}) => {\n  return {\n    animation: false,\n    dataZoom: [\n      {\n        type: 'inside',\n        xAxisIndex: 0,\n        start: 80,\n        end: 100,\n      },\n      {\n        type: 'inside',\n        yAxisIndex: 0,\n        startValue: 1.5,\n        endValue: 1.7,\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: '{c}',\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisData,\n      axisTick: {\n        show: false,\n      },\n      axisLabel: {\n        padding: [8, 16, 8, 16],\n        margin: 0,\n        formatter: (value) =>\n          `${new Date(value).toLocaleTimeString(undefined, {\n            hour: '2-digit',\n            minute: '2-digit',\n          })}`,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: [\n      {\n        type: 'candlestick',\n        data: candlesSeriesData,\n        itemStyle: {\n          color: colorPalette.raspberryLight,\n          color0: colorPalette.bottleGreenLight,\n        },\n      },\n      {\n        type: 'custom',\n        name: 'heatmap',\n        silent: true,\n        renderItem: (params, api) => {\n          const { coordSys } = params;\n\n          const xVal = api.value(0);\n          const yVal = api.value(1);\n          const sentiment = api.value(2) as number;\n          const start = api.coord([xVal, yVal]);\n\n          const [rectWidth, rectHeight] = api.size!([\n            0,\n            ordersPositionsBucketWidth,\n          ]) as number[];\n\n          const boundaries = coordSys as unknown as {\n            x: number;\n            y: number;\n            width: number;\n            height: number;\n          };\n\n          const shape = echarts.graphic.clipRectByRect(\n            {\n              x: start[0] - rectWidth / 2,\n              y: start[1],\n              width: rectWidth,\n              height: rectHeight,\n            },\n            boundaries\n          );\n          return (\n            shape && {\n              type: 'rect',\n              shape,\n              style: {\n                fill: getRectColor(sentiment),\n              },\n              emphasisDisabled: true,\n            }\n          );\n        },\n        data: ordersPositionsChartData,\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["colorPalette","getGridLines","getLineCommons","echarts","CHART_HEIGHT","CHART_WIDTH","INITIAL_END_ZOOM","INITIAL_START_ZOOM","MAX_LABELS_COUNT","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","getLabelData","getRectColor","isDifferenceGreaterThanTwoWeeks","getDesktopOption","_ref","isDark","desktopGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","yAxis","nameTextStyle","align","padding","axisLabel","margin","grid","name","top","left","right","bottom","graphic","shape","x1","y1","x2","y2","getOption","_ref2","xAxisData","ordersPositionsChartData","ordersPositionsBucketWidth","candlesSeriesData","visibleXAxisData","slice","length","isGreaterThanTwoWeeks","labelsData","visibleItemsCount","Math","round","initialInterval","floor","title","show","text","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","formatter","val","timestamp","axisValue","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","month","xAxis","data","axisTick","interval","value","date","position","scale","axisLine","showMaxLabel","showMinLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","silent","renderItem","params","api","coordSys","xVal","yVal","sentiment","coord","rectWidth","rectHeight","size","boundaries","clipRectByRect","x","y","width","height","style","fill","emphasisDisabled"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  colorPalette,\n  getGridLines,\n  getLineCommons,\n} from '@oanda/labs-widget-common';\nimport * as echarts from 'echarts/core';\n\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  INITIAL_END_ZOOM,\n  INITIAL_START_ZOOM,\n  MAX_LABELS_COUNT,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n} from './constants';\nimport type { GetOptionType, GetResponsiveOptionsProps } from './types';\nimport {\n  getLabelData,\n  getRectColor,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils';\n\nexport const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {\n  const desktopGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_DESKTOP,\n    bottomLeftBox: false,\n  });\n\n  return {\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 8],\n      },\n      axisLabel: {\n        margin: 8,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...desktopGridLines,\n      {\n        ...getLineCommons(isDark),\n        top: 0,\n        right: 0,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 0,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n\n// @ts-ignore\nexport const getOption: GetOptionType = ({\n  xAxisData,\n  ordersPositionsChartData,\n  ordersPositionsBucketWidth,\n  candlesSeriesData,\n}) => {\n  const visibleXAxisData = xAxisData.slice(\n    (xAxisData.length * INITIAL_START_ZOOM) / 100,\n    (xAxisData.length * INITIAL_END_ZOOM) / 100\n  );\n\n  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n    visibleXAxisData[0],\n    visibleXAxisData[visibleXAxisData.length - 1]\n  );\n  const labelsData = getLabelData({\n    xAxisData,\n    isGreaterThanTwoWeeks,\n  });\n\n  const visibleItemsCount = Math.round(\n    (xAxisData.length * (INITIAL_END_ZOOM - INITIAL_START_ZOOM)) / 100\n  );\n\n  const initialInterval =\n    visibleItemsCount > MAX_LABELS_COUNT\n      ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)\n      : 0;\n\n  return {\n    title: {\n      show: false,\n      text: `${initialInterval},${isGreaterThanTwoWeeks}`,\n    },\n    animation: false,\n    dataZoom: [\n      {\n        type: 'inside',\n        xAxisIndex: 0,\n        start: INITIAL_START_ZOOM,\n        end: INITIAL_END_ZOOM,\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: (val) => {\n        // @ts-ignore\n        const timestamp = val[0].axisValue as string;\n\n        return `${new Date(timestamp).toLocaleTimeString(undefined, {\n          hour: '2-digit',\n          minute: '2-digit',\n        })}\n      ${new Date(timestamp).toLocaleDateString(undefined, {\n        day: 'numeric',\n        month: 'short',\n      })}\n`;\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisData,\n      axisTick: {\n        show: false,\n      },\n      axisLabel: {\n        padding: [8, 16, 8, 16],\n        margin: 0,\n        interval: initialInterval,\n        formatter: (value) => {\n          const date = new Date(value);\n          return isGreaterThanTwoWeeks\n            ? `${date.toLocaleTimeString(undefined, {\n                hour: '2-digit',\n                minute: '2-digit',\n              })}`\n            : `${date.toLocaleDateString(undefined, {\n                day: 'numeric',\n              })}`;\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      scale: true,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: [\n      {\n        type: 'candlestick',\n        id: 'candlestick',\n        data: candlesSeriesData,\n        itemStyle: {\n          color: colorPalette.raspberryLight,\n          color0: colorPalette.bottleGreenLight,\n        },\n        markPoint: {\n          symbol: 'circle',\n          symbolSize: 0,\n          data: labelsData,\n        },\n      },\n      {\n        type: 'custom',\n        name: 'heatmap',\n        id: 'heatmap',\n        silent: true,\n        renderItem: (params, api) => {\n          const { coordSys } = params;\n          const xVal = api.value(0);\n          const yVal = api.value(1);\n          const sentiment = api.value(2) as number;\n          const start = api.coord([xVal, yVal]);\n          const [rectWidth, rectHeight] = api.size!([\n            0,\n            ordersPositionsBucketWidth,\n          ]) as number[];\n          const boundaries = coordSys as unknown as {\n            x: number;\n            y: number;\n            width: number;\n            height: number;\n          };\n          const shape = echarts.graphic.clipRectByRect(\n            {\n              x: start[0] - rectWidth / 2,\n              y: start[1],\n              width: rectWidth,\n              height: rectHeight,\n            },\n            boundaries\n          );\n          return (\n            shape && {\n              type: 'rect',\n              shape,\n              style: {\n                fill: getRectColor(sentiment),\n              },\n              emphasisDisabled: true,\n            }\n          );\n        },\n        data: ordersPositionsChartData,\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport type { EChartsOption } from 'echarts';\n\nimport type { BookType } from '../../../gql/types/graphql';\n\ninterface ChartOptionsProps {\n  xAxisData: string[];\n  ordersPositionsChartData: [\n    // timestamp\n    string,\n    // price\n    number,\n    // orders-positions sentiment\n    number,\n  ][];\n  ordersPositionsBucketWidth: number;\n  candlesSeriesData: [number, number, number, number][];\n}\n\nexport type GetOptionType = (props: ChartOptionsProps) => EChartsOption;\n\nexport interface GetResponsiveOptionsProps {\n  isDark: boolean;\n}\n\nexport interface ChartProps {\n  data: ChartOptionsProps;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  instrument: string;\n}\n\nexport type TransformDataForChartType = (\n  props: GetOrderPositionBooksQuery\n) => ChartOptionsProps;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport type { EChartsOption } from 'echarts';\n\nimport type { BookType } from '../../../gql/types/graphql';\nimport type { GranularityId } from '../../types';\n\ninterface ChartOptionsProps {\n  xAxisData: string[];\n  ordersPositionsChartData: [\n    // timestamp\n    string,\n    // price\n    number,\n    // orders-positions sentiment\n    number,\n  ][];\n  ordersPositionsBucketWidth: number;\n  candlesSeriesData: [number, number, number, number][];\n}\n\nexport type GetOptionType = (props: ChartOptionsProps) => EChartsOption;\nexport interface GetResponsiveOptionsProps {\n  isDark: boolean;\n}\n\nexport interface ChartProps {\n  data: ChartOptionsProps;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  instrument: string;\n  granularity: GranularityId;\n}\n\ninterface TransformDataForChartTypeProps {\n  data: GetOrderPositionBooksQuery;\n  granularity: GranularityId;\n}\n\nexport type TransformDataForChartType = (\n  props: TransformDataForChartTypeProps\n) => ChartOptionsProps;\n\nexport interface GetLabelsDataProps {\n  xAxisData: string[];\n  isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/utils.js

@@ -1,4 +1,6 @@
 import { colorMap } from '../../config';
+import { TimeSpanId } from '../../types';
+import { CHART_HEIGHT } from './constants';
 import { getPriceCandlesMock } from './getPriceCandlesMock';
 export const getRectColor = sentiment => {
   const colors = sentiment < 0 ? colorMap.short : colorMap.long;
@@ -17,10 +19,48 @@ export const getRectColor = sentiment => {
   }
   return 'transparent';
 };
-const mockOrderPositionDataForHistoricalData = data => {
-  const oneMinuteInMilliseconds = 60000;
-  const granularity = oneMinuteInMilliseconds * 5;
-  const timeSpan = oneMinuteInMilliseconds * 60 * 24;
+export let GranularityId = function (GranularityId) {
+  GranularityId["MINUTE_5"] = "MINUTE_5";
+  GranularityId["MINUTE_15"] = "MINUTE_15";
+  GranularityId["MINUTE_30"] = "MINUTE_30";
+  GranularityId["HOUR_1"] = "HOUR_1";
+  GranularityId["HOUR_4"] = "HOUR_4";
+  GranularityId["DAY_1"] = "DAY_1";
+  return GranularityId;
+}({});
+const timeSpansInMilliseconds = {
+  [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,
+  [TimeSpanId.MONTH_3]: 3 * 30 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.MONTH_6]: 6 * 30 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.YEAR_1]: 365 * 24 * 60 * 60 * 1000,
+  [TimeSpanId.YEAR_5]: 5 * 365 * 24 * 60 * 60 * 1000
+};
+const granularityInMilliseconds = {
+  [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 = {
+  [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, granularityId) => {
+  const granularity = granularityInMilliseconds[granularityId];
+  const timeSpan = timeSpansInMilliseconds[temporaryGranularityTimeSpanMap[granularityId]];
   const currentTime = data.orderPositionBooks[0].time;
   const startDate = new Date(currentTime);
   const totalSteps = timeSpan / granularity;
@@ -31,39 +71,84 @@ const mockOrderPositionDataForHistoricalData = data => {
       buckets: data.orderPositionBooks[0].buckets,
       bucketWidth: data.orderPositionBooks[0].bucketWidth
     };
-  });
+  }).reverse();
   return orderPositionDataForHistorical;
 };
-export const transformDataForChart = data => {
-  const mockedData = mockOrderPositionDataForHistoricalData(data);
-  const xAxisData = mockedData.map(_ref => {
+export const getLabelData = _ref => {
+  let {
+    xAxisData,
+    isGreaterThanTwoWeeks
+  } = _ref;
+  return 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, endDate) => {
+  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 = _ref2 => {
+  let {
+    data,
+    granularity
+  } = _ref2;
+  const mockedData = mockOrderPositionDataForHistoricalData(data, granularity);
+  const xAxisData = mockedData.map(_ref3 => {
     let {
       time
-    } = _ref;
+    } = _ref3;
     return time;
   });
-  const ordersPositionsChartData = mockedData.flatMap(_ref2 => {
+  const ordersPositionsChartData = mockedData.flatMap(_ref4 => {
     let {
       buckets,
       time
-    } = _ref2;
+    } = _ref4;
     return buckets.map(bucket => [time, bucket.price, bucket.longCountPercent - bucket.shortCountPercent]);
   }).filter(item => Math.abs(item[2]) > 0.15);
-  const mockedCandles = getPriceCandlesMock(ordersPositionsChartData.length);
-  const candlesSeriesData = mockedCandles.map(_ref3 => {
+  const mockedCandles = getPriceCandlesMock(xAxisData.length);
+  const candlesSeriesData = mockedCandles.map(_ref5 => {
     let {
       close,
       open,
       low,
       high
-    } = _ref3;
+    } = _ref5;
     return [+close.toFixed(5), +open.toFixed(5), +low.toFixed(5), +high.toFixed(5)];
   });
   return {
     xAxisData,
     ordersPositionsChartData,
     ordersPositionsBucketWidth: mockedData[0].bucketWidth,
-    candlesSeriesData
+    candlesSeriesData,
+    granularity
   };
 };
 //# sourceMappingURL=utils.js.map

package/dist/module/CrowdViewWidget/components/Chart/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["colorMap","getPriceCandlesMock","getRectColor","sentiment","colors","short","long","absSentiment","Math","abs","mockOrderPositionDataForHistoricalData","data","oneMinuteInMilliseconds","granularity","timeSpan","currentTime","orderPositionBooks","time","startDate","Date","totalSteps","orderPositionDataForHistorical","Array","fill","map","_","index","newDate","getTime","toISOString","slice","buckets","bucketWidth","transformDataForChart","mockedData","xAxisData","_ref","ordersPositionsChartData","flatMap","_ref2","bucket","price","longCountPercent","shortCountPercent","filter","item","mockedCandles","length","candlesSeriesData","_ref3","close","open","low","high","toFixed","ordersPositionsBucketWidth"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/utils.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';\nimport { colorMap } from '../../config';\nimport { getPriceCandlesMock } from './getPriceCandlesMock';\nimport type { TransformDataForChartType } from './types';\n\nexport const getRectColor = (sentiment: number) => {\n  const colors = sentiment < 0 ? colorMap.short : colorMap.long;\n  const absSentiment = Math.abs(sentiment);\n\n  if (absSentiment < 0.15) {\n    return colors[3];\n  }\n\n  if (absSentiment < 0.25) {\n    return colors[2];\n  }\n\n  if (absSentiment < 0.4) {\n    return colors[1];\n  }\n\n  if (absSentiment >= 0.4) {\n    return colors[0];\n  }\n\n  return 'transparent';\n};\n\nconst mockOrderPositionDataForHistoricalData = (\n  data: GetOrderPositionBooksQuery\n) => {\n  const oneMinuteInMilliseconds = 60000;\n  const granularity = oneMinuteInMilliseconds * 5; // 5min\n  const timeSpan = oneMinuteInMilliseconds * 60 * 24; // 24h\n  // const timeSpan =  oneMinuteInMilliseconds * 60 * 6 // 6h\n  // const timeSpan =  oneMinuteInMilliseconds * 15 //15min\n\n  const currentTime = data.orderPositionBooks[0]!.time;\n\n  const startDate = new Date(currentTime as string);\n  const totalSteps = timeSpan / granularity;\n\n  const orderPositionDataForHistorical = new Array(totalSteps)\n    .fill(null)\n    .map((_, index) => {\n      const newDate = new Date(startDate.getTime() - index * granularity);\n\n      return {\n        time: `${newDate.toISOString().slice(0, 19)}Z`,\n        buckets: data.orderPositionBooks[0]!.buckets,\n        bucketWidth: data.orderPositionBooks[0]!.bucketWidth,\n      };\n    });\n\n  return orderPositionDataForHistorical;\n};\n\nexport const transformDataForChart: TransformDataForChartType = (data) => {\n  const mockedData = mockOrderPositionDataForHistoricalData(data);\n\n  const xAxisData = mockedData.map(({ time }) => time);\n  const ordersPositionsChartData = mockedData\n    .flatMap(\n      ({ buckets, time }) =>\n        buckets.map((bucket) => [\n          time,\n          bucket!.price,\n          bucket!.longCountPercent - bucket!.shortCountPercent,\n        ]) as [string, number, number][]\n    )\n    .filter((item) => Math.abs(item[2]) > 0.15);\n\n  const mockedCandles = getPriceCandlesMock(ordersPositionsChartData.length);\n\n  const candlesSeriesData: [number, number, number, number][] =\n    mockedCandles.map(({ close, open, low, high }) => [\n      +close.toFixed(5),\n      +open.toFixed(5),\n      +low.toFixed(5),\n      +high.toFixed(5),\n    ]);\n\n  return {\n    xAxisData,\n    ordersPositionsChartData,\n    ordersPositionsBucketWidth: mockedData[0]!.bucketWidth,\n    candlesSeriesData,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["colorMap","TimeSpanId","CHART_HEIGHT","getPriceCandlesMock","getRectColor","sentiment","colors","short","long","absSentiment","Math","abs","GranularityId","timeSpansInMilliseconds","HOUR_1","HOUR_12","DAY_1","DAY_2","WEEK_1","WEEK_2","WEEK_3","MONTH_1","MONTH_3","MONTH_6","YEAR_1","YEAR_5","granularityInMilliseconds","MINUTE_5","MINUTE_15","MINUTE_30","HOUR_4","temporaryGranularityTimeSpanMap","mockOrderPositionDataForHistoricalData","data","granularityId","granularity","timeSpan","currentTime","orderPositionBooks","time","startDate","Date","totalSteps","orderPositionDataForHistorical","Array","fill","map","_","index","newDate","getTime","toISOString","slice","buckets","bucketWidth","reverse","getLabelData","_ref","xAxisData","isGreaterThanTwoWeeks","filter","record","arr","previousTimestamp","currentDate","previousDate","getDate","getMonth","item","name","toLocaleDateString","undefined","month","day","xAxis","y","silent","emphasis","disabled","label","fontFamily","fontSize","position","align","formatter","isDifferenceGreaterThanTwoWeeks","endDate","date1","date2","TWO_WEEKS_IN_MS","differenceInMs","transformDataForChart","_ref2","mockedData","_ref3","ordersPositionsChartData","flatMap","_ref4","bucket","price","longCountPercent","shortCountPercent","mockedCandles","length","candlesSeriesData","_ref5","close","open","low","high","toFixed","ordersPositionsBucketWidth"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/utils.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';\nimport { colorMap } from '../../config';\nimport { TimeSpanId } from '../../types';\nimport { CHART_HEIGHT } from './constants';\nimport { getPriceCandlesMock } from './getPriceCandlesMock';\nimport type { GetLabelsDataProps, TransformDataForChartType } from './types';\n\nexport const getRectColor = (sentiment: number) => {\n  const colors = sentiment < 0 ? colorMap.short : colorMap.long;\n  const absSentiment = Math.abs(sentiment);\n\n  if (absSentiment < 0.15) {\n    return colors[3];\n  }\n\n  if (absSentiment < 0.25) {\n    return colors[2];\n  }\n\n  if (absSentiment < 0.4) {\n    return colors[1];\n  }\n\n  if (absSentiment >= 0.4) {\n    return colors[0];\n  }\n\n  return 'transparent';\n};\n\nexport enum GranularityId {\n  MINUTE_5 = 'MINUTE_5',\n  MINUTE_15 = 'MINUTE_15',\n  MINUTE_30 = 'MINUTE_30',\n  HOUR_1 = 'HOUR_1',\n  HOUR_4 = 'HOUR_4',\n  DAY_1 = 'DAY_1',\n}\n\nconst timeSpansInMilliseconds: Record<TimeSpanId, number> = {\n  [TimeSpanId.HOUR_1]: 60 * 60 * 1000,\n  [TimeSpanId.HOUR_12]: 12 * 60 * 60 * 1000,\n  [TimeSpanId.DAY_1]: 24 * 60 * 60 * 1000,\n  [TimeSpanId.DAY_2]: 2 * 24 * 60 * 60 * 1000,\n  [TimeSpanId.WEEK_1]: 7 * 24 * 60 * 60 * 1000,\n  [TimeSpanId.WEEK_2]: 14 * 24 * 60 * 60 * 1000,\n  [TimeSpanId.WEEK_3]: 21 * 24 * 60 * 60 * 1000,\n  [TimeSpanId.MONTH_1]: 30 * 24 * 60 * 60 * 1000, // Approximation\n  [TimeSpanId.MONTH_3]: 3 * 30 * 24 * 60 * 60 * 1000, // Approximation\n  [TimeSpanId.MONTH_6]: 6 * 30 * 24 * 60 * 60 * 1000, // Approximation\n  [TimeSpanId.YEAR_1]: 365 * 24 * 60 * 60 * 1000, // Approximation\n  [TimeSpanId.YEAR_5]: 5 * 365 * 24 * 60 * 60 * 1000, // Approximation\n};\n\nconst granularityInMilliseconds: Record<GranularityId, number> = {\n  [GranularityId.MINUTE_5]: 5 * 60 * 1000,\n  [GranularityId.MINUTE_15]: 15 * 60 * 1000,\n  [GranularityId.MINUTE_30]: 30 * 60 * 1000,\n  [GranularityId.HOUR_1]: 60 * 60 * 1000,\n  [GranularityId.HOUR_4]: 4 * 60 * 60 * 1000,\n  [GranularityId.DAY_1]: 24 * 60 * 60 * 1000,\n};\n\nconst temporaryGranularityTimeSpanMap: Record<GranularityId, TimeSpanId> = {\n  [GranularityId.MINUTE_5]: TimeSpanId.DAY_2,\n  [GranularityId.MINUTE_15]: TimeSpanId.WEEK_1,\n  [GranularityId.MINUTE_30]: TimeSpanId.WEEK_2,\n  [GranularityId.HOUR_1]: TimeSpanId.MONTH_1,\n  [GranularityId.HOUR_4]: TimeSpanId.MONTH_3,\n  [GranularityId.DAY_1]: TimeSpanId.MONTH_6,\n};\n\nconst mockOrderPositionDataForHistoricalData = (\n  data: GetOrderPositionBooksQuery,\n  granularityId: GranularityId\n) => {\n  const granularity = granularityInMilliseconds[granularityId];\n  const timeSpan =\n    timeSpansInMilliseconds[temporaryGranularityTimeSpanMap[granularityId]];\n\n  const currentTime = data.orderPositionBooks[0]!.time;\n\n  const startDate = new Date(currentTime as string);\n  const totalSteps = timeSpan / granularity;\n\n  const orderPositionDataForHistorical = new Array(totalSteps)\n    .fill(null)\n    .map((_, index) => {\n      const newDate = new Date(startDate.getTime() - index * granularity);\n\n      return {\n        time: `${newDate.toISOString().slice(0, 19)}Z`,\n        buckets: data.orderPositionBooks[0]!.buckets,\n        bucketWidth: data.orderPositionBooks[0]!.bucketWidth,\n      };\n    })\n    .reverse();\n\n  return orderPositionDataForHistorical;\n};\n\nexport const getLabelData = ({\n  xAxisData,\n  isGreaterThanTwoWeeks,\n}: GetLabelsDataProps) =>\n  xAxisData\n    .filter((record, index, arr) => {\n      if (index === 0) {\n        return false;\n      }\n      const previousTimestamp = arr[index - 1];\n      const currentDate = new Date(record);\n      const previousDate = new Date(previousTimestamp);\n\n      return isGreaterThanTwoWeeks\n        ? currentDate.getDate() !== previousDate.getDate()\n        : currentDate.getMonth() !== previousDate.getMonth();\n    })\n    .map((item) => ({\n      name: new Date(item).toLocaleDateString(undefined, {\n        month: 'short',\n        day: isGreaterThanTwoWeeks ? 'numeric' : undefined,\n      }),\n      xAxis: item,\n      y: CHART_HEIGHT - 22,\n      silent: true,\n      emphasis: {\n        disabled: true,\n      },\n      label: {\n        fontFamily: 'Sofia W03',\n        fontSize: 10,\n        position: 'bottom',\n        align: 'center',\n        formatter: '{b}',\n      },\n    }));\n\nexport const isDifferenceGreaterThanTwoWeeks = (\n  startDate: string,\n  endDate: string\n) => {\n  const date1 = new Date(startDate);\n  const date2 = new Date(endDate);\n\n  const TWO_WEEKS_IN_MS = 14 * 24 * 60 * 60 * 1000;\n\n  const differenceInMs = Math.abs(date2.getTime() - date1.getTime());\n\n  return differenceInMs < TWO_WEEKS_IN_MS;\n};\n\nexport const transformDataForChart: TransformDataForChartType = ({\n  data,\n  granularity,\n}) => {\n  const mockedData = mockOrderPositionDataForHistoricalData(data, granularity);\n\n  const xAxisData = mockedData.map(({ time }) => time);\n  const ordersPositionsChartData = mockedData\n    .flatMap(\n      ({ buckets, time }) =>\n        buckets.map((bucket) => [\n          time,\n          bucket!.price,\n          bucket!.longCountPercent - bucket!.shortCountPercent,\n        ]) as [string, number, number][]\n    )\n    .filter((item) => Math.abs(item[2]) > 0.15);\n\n  const mockedCandles = getPriceCandlesMock(xAxisData.length);\n\n  const candlesSeriesData: [number, number, number, number][] =\n    mockedCandles.map(({ close, open, low, high }) => [\n      +close.toFixed(5),\n      +open.toFixed(5),\n      +low.toFixed(5),\n      +high.toFixed(5),\n    ]);\n\n  return {\n    xAxisData,\n    ordersPositionsChartData,\n    ordersPositionsBucketWidth: mockedData[0]!.bucketWidth,\n    candlesSeriesData,\n    granularity,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/config.js

@@ -76,16 +76,22 @@ const instrumentPrecisionConfig = {
   [InstrumentId.XAG_USD]: 5
 };
 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'
 }];
 export { granularitySelectConfig, instrumentPrecisionConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig };

package/dist/module/CrowdViewWidget/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["BookType","GranularityId","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_AUD","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","instrumentSelectConfig","XAU_USD","XAG_USD","instrumentPrecisionConfig","granularitySelectConfig","M5","M15","H1","D1","colorMap","long","short"],"sources":["../../../src/CrowdViewWidget/config.ts"],"sourcesContent":["import { BookType } from '../gql/types/graphql';\nimport type { LegendType } from './components/Legend/LegendBar';\nimport { GranularityId, InstrumentId } from './types';\n\nconst navigationConfig = [\n  {\n    id: BookType.Order,\n    label: 'order_book',\n  },\n  {\n    id: BookType.Position,\n    label: 'position_book',\n  },\n];\n\nconst instrumentSelectConfigOC = [\n  {\n    id: InstrumentId.EUR_AUD,\n    label: 'EUR/AUD',\n  },\n  {\n    id: InstrumentId.EUR_GBP,\n    label: 'EUR/GBP',\n  },\n  {\n    id: InstrumentId.EUR_JPY,\n    label: 'EUR/JPY',\n  },\n  {\n    id: InstrumentId.EUR_USD,\n    label: 'EUR/USD',\n  },\n  {\n    id: InstrumentId.EUR_CHF,\n    label: 'EUR/CHF',\n  },\n  {\n    id: InstrumentId.USD_CHF,\n    label: 'USD/CHF',\n  },\n  {\n    id: InstrumentId.USD_JPY,\n    label: 'USD/JPY',\n  },\n  {\n    id: InstrumentId.USD_CAD,\n    label: 'USD/CAD',\n  },\n  {\n    id: InstrumentId.GBP_USD,\n    label: 'GBP/USD',\n  },\n  {\n    id: InstrumentId.GBP_JPY,\n    label: 'GBP/JPY',\n  },\n  {\n    id: InstrumentId.GBP_CHF,\n    label: 'GBP/CHF',\n  },\n  {\n    id: InstrumentId.AUD_JPY,\n    label: 'AUD/JPY',\n  },\n  {\n    id: InstrumentId.AUD_USD,\n    label: 'AUD/USD',\n  },\n  {\n    id: InstrumentId.NZD_USD,\n    label: 'NZD/USD',\n  },\n];\n\nconst instrumentSelectConfig = [\n  ...instrumentSelectConfigOC,\n  {\n    id: InstrumentId.XAU_USD,\n    label: 'XAU/USD',\n  },\n  {\n    id: InstrumentId.XAG_USD,\n    label: 'XAG/USD',\n  },\n];\n\nconst instrumentPrecisionConfig: Record<InstrumentId, number> = {\n  [InstrumentId.EUR_AUD]: 5,\n  [InstrumentId.EUR_GBP]: 5,\n  [InstrumentId.EUR_JPY]: 3,\n  [InstrumentId.EUR_USD]: 5,\n  [InstrumentId.EUR_CHF]: 5,\n  [InstrumentId.USD_CHF]: 5,\n  [InstrumentId.USD_JPY]: 3,\n  [InstrumentId.USD_CAD]: 5,\n  [InstrumentId.GBP_USD]: 5,\n  [InstrumentId.GBP_JPY]: 3,\n  [InstrumentId.GBP_CHF]: 5,\n  [InstrumentId.AUD_JPY]: 3,\n  [InstrumentId.AUD_USD]: 5,\n  [InstrumentId.NZD_USD]: 5,\n  [InstrumentId.XAU_USD]: 3,\n  [InstrumentId.XAG_USD]: 5,\n};\n\nconst granularitySelectConfig = [\n  {\n    id: GranularityId.M5,\n    label: '5_minutes',\n  },\n  {\n    id: GranularityId.M15,\n    label: '15_minutes',\n  },\n  {\n    id: GranularityId.H1,\n    label: '1_hour',\n  },\n  {\n    id: GranularityId.D1,\n    label: '1_day',\n  },\n];\n\nexport {\n  granularitySelectConfig,\n  instrumentPrecisionConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n};\nexport const colorMap: Record<LegendType, string[]> = {\n  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],\n  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"config.js","names":["BookType","GranularityId","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_AUD","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","instrumentSelectConfig","XAU_USD","XAG_USD","instrumentPrecisionConfig","granularitySelectConfig","MINUTE_5","MINUTE_15","MINUTE_30","HOUR_1","HOUR_4","DAY_1","colorMap","long","short"],"sources":["../../../src/CrowdViewWidget/config.ts"],"sourcesContent":["import { BookType } from '../gql/types/graphql';\nimport type { LegendType } from './components/Legend/LegendBar';\nimport { GranularityId, InstrumentId } from './types';\n\nconst navigationConfig = [\n  {\n    id: BookType.Order,\n    label: 'order_book',\n  },\n  {\n    id: BookType.Position,\n    label: 'position_book',\n  },\n];\n\nconst instrumentSelectConfigOC = [\n  {\n    id: InstrumentId.EUR_AUD,\n    label: 'EUR/AUD',\n  },\n  {\n    id: InstrumentId.EUR_GBP,\n    label: 'EUR/GBP',\n  },\n  {\n    id: InstrumentId.EUR_JPY,\n    label: 'EUR/JPY',\n  },\n  {\n    id: InstrumentId.EUR_USD,\n    label: 'EUR/USD',\n  },\n  {\n    id: InstrumentId.EUR_CHF,\n    label: 'EUR/CHF',\n  },\n  {\n    id: InstrumentId.USD_CHF,\n    label: 'USD/CHF',\n  },\n  {\n    id: InstrumentId.USD_JPY,\n    label: 'USD/JPY',\n  },\n  {\n    id: InstrumentId.USD_CAD,\n    label: 'USD/CAD',\n  },\n  {\n    id: InstrumentId.GBP_USD,\n    label: 'GBP/USD',\n  },\n  {\n    id: InstrumentId.GBP_JPY,\n    label: 'GBP/JPY',\n  },\n  {\n    id: InstrumentId.GBP_CHF,\n    label: 'GBP/CHF',\n  },\n  {\n    id: InstrumentId.AUD_JPY,\n    label: 'AUD/JPY',\n  },\n  {\n    id: InstrumentId.AUD_USD,\n    label: 'AUD/USD',\n  },\n  {\n    id: InstrumentId.NZD_USD,\n    label: 'NZD/USD',\n  },\n];\n\nconst instrumentSelectConfig = [\n  ...instrumentSelectConfigOC,\n  {\n    id: InstrumentId.XAU_USD,\n    label: 'XAU/USD',\n  },\n  {\n    id: InstrumentId.XAG_USD,\n    label: 'XAG/USD',\n  },\n];\n\nconst instrumentPrecisionConfig: Record<InstrumentId, number> = {\n  [InstrumentId.EUR_AUD]: 5,\n  [InstrumentId.EUR_GBP]: 5,\n  [InstrumentId.EUR_JPY]: 3,\n  [InstrumentId.EUR_USD]: 5,\n  [InstrumentId.EUR_CHF]: 5,\n  [InstrumentId.USD_CHF]: 5,\n  [InstrumentId.USD_JPY]: 3,\n  [InstrumentId.USD_CAD]: 5,\n  [InstrumentId.GBP_USD]: 5,\n  [InstrumentId.GBP_JPY]: 3,\n  [InstrumentId.GBP_CHF]: 5,\n  [InstrumentId.AUD_JPY]: 3,\n  [InstrumentId.AUD_USD]: 5,\n  [InstrumentId.NZD_USD]: 5,\n  [InstrumentId.XAU_USD]: 3,\n  [InstrumentId.XAG_USD]: 5,\n};\n\nconst granularitySelectConfig = [\n  {\n    id: GranularityId.MINUTE_5,\n    label: '5_minutes',\n  },\n  {\n    id: GranularityId.MINUTE_15,\n    label: '15_minutes',\n  },\n  {\n    id: GranularityId.MINUTE_30,\n    label: '30_minutes',\n  },\n  {\n    id: GranularityId.HOUR_1,\n    label: '1_hour',\n  },\n  {\n    id: GranularityId.HOUR_4,\n    label: '4_hours',\n  },\n  {\n    id: GranularityId.DAY_1,\n    label: '1_day',\n  },\n];\n\nexport {\n  granularitySelectConfig,\n  instrumentPrecisionConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n};\nexport const colorMap: Record<LegendType, string[]> = {\n  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],\n  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/types.js

@@ -18,10 +18,27 @@ export let InstrumentId = function (InstrumentId) {
   return InstrumentId;
 }({});
 export let GranularityId = function (GranularityId) {
-  GranularityId["M5"] = "5M";
-  GranularityId["M15"] = "15M";
-  GranularityId["H1"] = "1H";
-  GranularityId["D1"] = "1D";
+  GranularityId["MINUTE_5"] = "MINUTE_5";
+  GranularityId["MINUTE_15"] = "MINUTE_15";
+  GranularityId["MINUTE_30"] = "MINUTE_30";
+  GranularityId["HOUR_1"] = "HOUR_1";
+  GranularityId["HOUR_4"] = "HOUR_4";
+  GranularityId["DAY_1"] = "DAY_1";
   return GranularityId;
 }({});
+export let TimeSpanId = function (TimeSpanId) {
+  TimeSpanId["HOUR_1"] = "HOUR_1";
+  TimeSpanId["HOUR_12"] = "HOUR_12";
+  TimeSpanId["DAY_1"] = "DAY_1";
+  TimeSpanId["DAY_2"] = "DAY_2";
+  TimeSpanId["WEEK_1"] = "WEEK_1";
+  TimeSpanId["WEEK_2"] = "WEEK_2";
+  TimeSpanId["WEEK_3"] = "WEEK_3";
+  TimeSpanId["MONTH_1"] = "MONTH_1";
+  TimeSpanId["MONTH_3"] = "MONTH_3";
+  TimeSpanId["MONTH_6"] = "MONTH_6";
+  TimeSpanId["YEAR_1"] = "YEAR_1";
+  TimeSpanId["YEAR_5"] = "YEAR_5";
+  return TimeSpanId;
+}({});
 //# sourceMappingURL=types.js.map

package/dist/module/CrowdViewWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["InstrumentId","GranularityId"],"sources":["../../../src/CrowdViewWidget/types.ts"],"sourcesContent":["import type { WidgetConfig } from '@oanda/labs-widget-common';\n\nimport type { Division } from '../gql/types/graphql';\n\nexport interface CrowdViewConfig extends WidgetConfig {}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n  division: Division;\n}\n\nexport enum InstrumentId {\n  EUR_AUD = 'EURAUD',\n  EUR_GBP = 'EURGBP',\n  EUR_JPY = 'EURJPY',\n  EUR_USD = 'EURUSD',\n  EUR_CHF = 'EURCHF',\n  USD_CHF = 'USDCHF',\n  USD_JPY = 'USDJPY',\n  USD_CAD = 'USDCAD',\n  GBP_USD = 'GBPUSD',\n  GBP_JPY = 'GBPJPY',\n  GBP_CHF = 'GBPCHF',\n  AUD_JPY = 'AUDJPY',\n  AUD_USD = 'AUDUSD',\n  NZD_USD = 'NZDUSD',\n  XAU_USD = 'XAUUSD',\n  XAG_USD = 'XAGUSD',\n}\n\nexport enum GranularityId {\n  M5 = '5M',\n  M15 = '15M',\n  H1 = '1H',\n  D1 = '1D',\n}\n\nexport interface OrdersPositionsData {\n  price: number;\n  buckets: {\n    price: number;\n    longCountPercent: number;\n    shortCountPercent: number;\n  }[];\n  bucketWidth: number;\n  timestamp: number;\n}\n"],"mappings":"AAWA,WAAYA,YAAY,aAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAA,OAAZA,YAAY;AAAA;AAmBxB,WAAYC,aAAa,aAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["InstrumentId","GranularityId","TimeSpanId"],"sources":["../../../src/CrowdViewWidget/types.ts"],"sourcesContent":["import type { WidgetConfig } from '@oanda/labs-widget-common';\n\nimport type { Division } from '../gql/types/graphql';\n\nexport interface CrowdViewConfig extends WidgetConfig {}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n  division: Division;\n}\n\nexport enum InstrumentId {\n  EUR_AUD = 'EURAUD',\n  EUR_GBP = 'EURGBP',\n  EUR_JPY = 'EURJPY',\n  EUR_USD = 'EURUSD',\n  EUR_CHF = 'EURCHF',\n  USD_CHF = 'USDCHF',\n  USD_JPY = 'USDJPY',\n  USD_CAD = 'USDCAD',\n  GBP_USD = 'GBPUSD',\n  GBP_JPY = 'GBPJPY',\n  GBP_CHF = 'GBPCHF',\n  AUD_JPY = 'AUDJPY',\n  AUD_USD = 'AUDUSD',\n  NZD_USD = 'NZDUSD',\n  XAU_USD = 'XAUUSD',\n  XAG_USD = 'XAGUSD',\n}\n\nexport enum GranularityId {\n  MINUTE_5 = 'MINUTE_5',\n  MINUTE_15 = 'MINUTE_15',\n  MINUTE_30 = 'MINUTE_30',\n  HOUR_1 = 'HOUR_1',\n  HOUR_4 = 'HOUR_4',\n  DAY_1 = 'DAY_1',\n}\n\nexport enum TimeSpanId {\n  HOUR_1 = 'HOUR_1',\n  HOUR_12 = 'HOUR_12',\n  DAY_1 = 'DAY_1',\n  DAY_2 = 'DAY_2',\n  WEEK_1 = 'WEEK_1',\n  WEEK_2 = 'WEEK_2',\n  WEEK_3 = 'WEEK_3',\n  MONTH_1 = 'MONTH_1',\n  MONTH_3 = 'MONTH_3',\n  MONTH_6 = 'MONTH_6',\n  YEAR_1 = 'YEAR_1',\n  YEAR_5 = 'YEAR_5',\n}\n\nexport interface OrdersPositionsData {\n  price: number;\n  buckets: {\n    price: number;\n    longCountPercent: number;\n    shortCountPercent: number;\n  }[];\n  bucketWidth: number;\n  timestamp: number;\n}\n"],"mappings":"AAWA,WAAYA,YAAY,aAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAA,OAAZA,YAAY;AAAA;AAmBxB,WAAYC,aAAa,aAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA;AASzB,WAAYC,UAAU,aAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}

package/dist/types/CrowdViewWidget/components/Chart/ChartWithData.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ChartWithDataProps } from './types';
-declare const ChartWithData: ({ instrument, bookType }: ChartWithDataProps) => React.JSX.Element;
+declare const ChartWithData: ({ instrument, bookType, granularity, }: ChartWithDataProps) => React.JSX.Element;
 export { ChartWithData };

package/dist/types/CrowdViewWidget/components/Chart/constants.d.ts

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

package/dist/types/CrowdViewWidget/components/Chart/types.d.ts

@@ -1,6 +1,7 @@
 import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';
 import type { EChartsOption } from 'echarts';
 import type { BookType } from '../../../gql/types/graphql';
+import type { GranularityId } from '../../types';
 interface ChartOptionsProps {
     xAxisData: string[];
     ordersPositionsChartData: [
@@ -21,6 +22,15 @@ export interface ChartProps {
 export interface ChartWithDataProps {
     bookType: BookType;
     instrument: string;
+    granularity: GranularityId;
+}
+interface TransformDataForChartTypeProps {
+    data: GetOrderPositionBooksQuery;
+    granularity: GranularityId;
+}
+export type TransformDataForChartType = (props: TransformDataForChartTypeProps) => ChartOptionsProps;
+export interface GetLabelsDataProps {
+    xAxisData: string[];
+    isGreaterThanTwoWeeks: boolean;
 }
-export type TransformDataForChartType = (props: GetOrderPositionBooksQuery) => ChartOptionsProps;
 export {};

package/dist/types/CrowdViewWidget/components/Chart/utils.d.ts

@@ -1,3 +1,28 @@
-import type { TransformDataForChartType } from './types';
+import type { GetLabelsDataProps, TransformDataForChartType } from './types';
 export declare const getRectColor: (sentiment: number) => string;
+export declare 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"
+}
+export declare const getLabelData: ({ xAxisData, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => {
+    name: string;
+    xAxis: string;
+    y: number;
+    silent: boolean;
+    emphasis: {
+        disabled: boolean;
+    };
+    label: {
+        fontFamily: string;
+        fontSize: number;
+        position: string;
+        align: string;
+        formatter: string;
+    };
+}[];
+export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;
 export declare const transformDataForChart: TransformDataForChartType;

package/dist/types/CrowdViewWidget/types.d.ts

@@ -25,10 +25,26 @@ export declare enum InstrumentId {
     XAG_USD = "XAGUSD"
 }
 export declare 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 declare 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 {
     price: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.212",
+    "@oanda/labs-widget-common": "^1.0.213",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "53a43d8d60d462d74949c32e30a75b09e86f659d"
+  "gitHead": "1853da87eb42d5ffb0c4f9c2ecdc98450c068f9c"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -83,7 +83,11 @@ const Main = ({ division }: MainProps) => {
             </div>
           </div>
 
-          <ChartWithData bookType={bookType} instrument={instrument.id} />
+          <ChartWithData
+            bookType={bookType}
+            granularity={granularity.id}
+            instrument={instrument.id}
+          />
 
           <Legend
             longValues={[0.15, 0.25, 0.4, 0.55]}