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

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

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformDataForChart = exports.getRectColor = void 0;
+exports.transformDataForChart = exports.isDifferenceGreaterThanTwoWeeks = exports.getRectColor = exports.getLabelData = exports.GranularityId = void 0;
 var _config = require("../../config");
+var _types = require("../../types");
+var _constants = require("./constants");
 var _getPriceCandlesMock = require("./getPriceCandlesMock");
 const getRectColor = sentiment => {
   const colors = sentiment < 0 ? _config.colorMap.short : _config.colorMap.long;
@@ -24,10 +26,48 @@ const getRectColor = sentiment => {
   return 'transparent';
 };
 exports.getRectColor = getRectColor;
-const mockOrderPositionDataForHistoricalData = data => {
-  const oneMinuteInMilliseconds = 60000;
-  const granularity = oneMinuteInMilliseconds * 5;
-  const timeSpan = oneMinuteInMilliseconds * 60 * 24;
+let GranularityId = exports.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 = {
+  [_types.TimeSpanId.HOUR_1]: 60 * 60 * 1000,
+  [_types.TimeSpanId.HOUR_12]: 12 * 60 * 60 * 1000,
+  [_types.TimeSpanId.DAY_1]: 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.DAY_2]: 2 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.WEEK_1]: 7 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.WEEK_2]: 14 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.WEEK_3]: 21 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.MONTH_1]: 30 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.MONTH_3]: 3 * 30 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.MONTH_6]: 6 * 30 * 24 * 60 * 60 * 1000,
+  [_types.TimeSpanId.YEAR_1]: 365 * 24 * 60 * 60 * 1000,
+  [_types.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]: _types.TimeSpanId.DAY_2,
+  [GranularityId.MINUTE_15]: _types.TimeSpanId.WEEK_1,
+  [GranularityId.MINUTE_30]: _types.TimeSpanId.WEEK_2,
+  [GranularityId.HOUR_1]: _types.TimeSpanId.MONTH_1,
+  [GranularityId.HOUR_4]: _types.TimeSpanId.MONTH_3,
+  [GranularityId.DAY_1]: _types.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;
@@ -38,39 +78,86 @@ const mockOrderPositionDataForHistoricalData = data => {
       buckets: data.orderPositionBooks[0].buckets,
       bucketWidth: data.orderPositionBooks[0].bucketWidth
     };
-  });
+  }).reverse();
   return orderPositionDataForHistorical;
 };
-const transformDataForChart = data => {
-  const mockedData = mockOrderPositionDataForHistoricalData(data);
-  const xAxisData = mockedData.map(_ref => {
+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: _constants.CHART_HEIGHT - 22,
+    silent: true,
+    emphasis: {
+      disabled: true
+    },
+    label: {
+      fontFamily: 'Sofia W03',
+      fontSize: 10,
+      position: 'bottom',
+      align: 'center',
+      formatter: '{b}'
+    }
+  }));
+};
+exports.getLabelData = getLabelData;
+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;
+};
+exports.isDifferenceGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks;
+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 = (0, _getPriceCandlesMock.getPriceCandlesMock)(ordersPositionsChartData.length);
-  const candlesSeriesData = mockedCandles.map(_ref3 => {
+  const mockedCandles = (0, _getPriceCandlesMock.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
   };
 };
 exports.transformDataForChart = transformDataForChart;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["_config","require","_getPriceCandlesMock","getRectColor","sentiment","colors","colorMap","short","long","absSentiment","Math","abs","exports","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","getPriceCandlesMock","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":["_config","require","_types","_constants","_getPriceCandlesMock","getRectColor","sentiment","colors","colorMap","short","long","absSentiment","Math","abs","exports","GranularityId","timeSpansInMilliseconds","TimeSpanId","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","CHART_HEIGHT","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","getPriceCandlesMock","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/main/CrowdViewWidget/config.js

@@ -82,16 +82,22 @@ const instrumentPrecisionConfig = exports.instrumentPrecisionConfig = {
   [_types.InstrumentId.XAG_USD]: 5
 };
 const granularitySelectConfig = exports.granularitySelectConfig = [{
-  id: _types.GranularityId.M5,
+  id: _types.GranularityId.MINUTE_5,
   label: '5_minutes'
 }, {
-  id: _types.GranularityId.M15,
+  id: _types.GranularityId.MINUTE_15,
   label: '15_minutes'
 }, {
-  id: _types.GranularityId.H1,
+  id: _types.GranularityId.MINUTE_30,
+  label: '30_minutes'
+}, {
+  id: _types.GranularityId.HOUR_1,
   label: '1_hour'
 }, {
-  id: _types.GranularityId.D1,
+  id: _types.GranularityId.HOUR_4,
+  label: '4_hours'
+}, {
+  id: _types.GranularityId.DAY_1,
   label: '1_day'
 }];
 const colorMap = exports.colorMap = {

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

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["_graphql","require","_types","navigationConfig","exports","id","BookType","Order","label","Position","instrumentSelectConfigOC","InstrumentId","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","GranularityId","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":["_graphql","require","_types","navigationConfig","exports","id","BookType","Order","label","Position","instrumentSelectConfigOC","InstrumentId","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","GranularityId","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/main/CrowdViewWidget/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InstrumentId = exports.GranularityId = void 0;
+exports.TimeSpanId = exports.InstrumentId = exports.GranularityId = void 0;
 let InstrumentId = exports.InstrumentId = function (InstrumentId) {
   InstrumentId["EUR_AUD"] = "EURAUD";
   InstrumentId["EUR_GBP"] = "EURGBP";
@@ -24,10 +24,27 @@ let InstrumentId = exports.InstrumentId = function (InstrumentId) {
   return InstrumentId;
 }({});
 let GranularityId = exports.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;
 }({});
+let TimeSpanId = exports.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/main/CrowdViewWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["InstrumentId","exports","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":";;;;;;IAWYA,YAAY,GAAAC,OAAA,CAAAD,YAAA,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;AAAA,IAmBZE,aAAa,GAAAD,OAAA,CAAAC,aAAA,aAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["InstrumentId","exports","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":";;;;;;IAWYA,YAAY,GAAAC,OAAA,CAAAD,YAAA,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;AAAA,IAmBZE,aAAa,GAAAD,OAAA,CAAAC,aAAA,aAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA;AAAA,IASbC,UAAU,GAAAF,OAAA,CAAAE,UAAA,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/module/CrowdViewWidget/Main.js

@@ -54,6 +54,7 @@ const Main = _ref => {
     setSelectedOption: val => setGranularity(val)
   }))), React.createElement(ChartWithData, {
     bookType: bookType,
+    granularity: granularity.id,
     instrument: instrument.id
   }), React.createElement(Legend, {
     longValues: [0.15, 0.25, 0.4, 0.55],

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useState","BookType","Division","ChartWithData","Legend","granularitySelectConfig","instrumentSelectConfig","instrumentSelectConfigOC","navigationConfig","Main","_ref","division","instrumentSelectConfigWithDivision","Oc","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","lang","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id","longValues","shortValues"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport { ChartWithData, Legend } from './components';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={instrumentSelectConfigWithDivision}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('instrument')}\n                selectedOption={instrument}\n                setSelectedOption={(val) =>\n                  setInstrument(val as { id: InstrumentId; label: string })\n                }\n              />\n            </div>\n            <div\n              className={cn({\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n\n          <ChartWithData bookType={bookType} instrument={instrument.id} />\n\n          <Legend\n            longValues={[0.15, 0.25, 0.4, 0.55]}\n            shortValues={[0.15, 0.25, 0.4, 0.55]}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useState","BookType","Division","ChartWithData","Legend","granularitySelectConfig","instrumentSelectConfig","instrumentSelectConfigOC","navigationConfig","Main","_ref","division","instrumentSelectConfigWithDivision","Oc","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","lang","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id","longValues","shortValues"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport { ChartWithData, Legend } from './components';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={instrumentSelectConfigWithDivision}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('instrument')}\n                selectedOption={instrument}\n                setSelectedOption={(val) =>\n                  setInstrument(val as { id: InstrumentId; label: string })\n                }\n              />\n            </div>\n            <div\n              className={cn({\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n\n          <ChartWithData\n            bookType={bookType}\n            granularity={granularity.id}\n            instrument={instrument.id}\n          />\n\n          <Legend\n            longValues={[0.15, 0.25, 0.4, 0.55]}\n            shortValues={[0.15, 0.25, 0.4, 0.55]}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,12 +1,13 @@
 import { BaseChart, getChartTheme, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
 import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
-import { DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, TooltipComponent } from 'echarts/components';
+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';
-echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart]);
+import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
+echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 const Chart = _ref => {
@@ -23,13 +24,78 @@ const Chart = _ref => {
       echartInstance.setOption(getDesktopOption({
         isDark
       }));
+      echartInstance.off('datazoom');
+      echartInstance.on('datazoom', () => {
+        const {
+          dataZoom,
+          title: {
+            text
+          }
+        } = echartInstance.getOption();
+        const {
+          start,
+          end
+        } = dataZoom[0];
+        const prevInterval = Number(text.split(',')[0]);
+        const prevIsGreaterThanTwoWeeks = Boolean(Number(text.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 => {
+                  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 React.createElement(BaseChart, {
     ref: echartRef,
     chartHeight: CHART_HEIGHT,
     echarts: echarts,
     isDark: isDark,
+    lazyUpdate: true,
     option: getOption(data)
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","BarChart","CandlestickChart","CustomChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","TooltipComponent","echarts","CanvasRenderer","React","useEffect","useRef","CHART_HEIGHT","getDesktopOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","echartRef","current","echartInstance","getEchartsInstance","setOption","createElement","ref","chartHeight","option"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';\nimport {\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useEffect, useRef } from 'react';\n\nimport { CHART_HEIGHT } from './constants';\nimport { getDesktopOption, getOption } from './getOption';\nimport type { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  BarChart,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data }: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(getDesktopOption({ isDark }));\n    }\n  }, [echartRef, isDark]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(data)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AACA,SACEA,SAAS,EACTC,aAAa,EACbC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,QAAQ,EAAEC,gBAAgB,EAAEC,WAAW,QAAQ,gBAAgB;AACxE,SACEC,uBAAuB,EACvBC,gBAAgB,EAChBC,mBAAmB,EACnBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAASC,gBAAgB,EAAEC,SAAS,QAAQ,aAAa;AAGzDP,OAAO,CAACQ,GAAG,CAAC,CACVV,mBAAmB,EACnBD,gBAAgB,EAChBJ,QAAQ,EACRQ,cAAc,EACdL,uBAAuB,EACvBD,WAAW,EACXI,gBAAgB,EAChBL,gBAAgB,CACjB,CAAC;AAEFM,OAAO,CAACS,aAAa,CAAC,YAAY,EAAEnB,aAAa,CAACC,KAAK,CAACmB,IAAI,CAAC,CAAC;AAC9DV,OAAO,CAACS,aAAa,CAAC,aAAa,EAAEnB,aAAa,CAACC,KAAK,CAACoB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAA0B;EAAA,IAAzB;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EACjC,MAAM;IAAEE;EAAO,CAAC,GAAGvB,iBAAiB,CAAC,CAAC;EACtC,MAAMwB,SAAS,GAAGZ,MAAM,CAAsB,IAAI,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACd,IAAIa,SAAS,CAACC,OAAO,EAAE;MACrB,MAAMC,cAAc,GAAGF,SAAS,CAACC,OAAO,CAACE,kBAAkB,CAAC,CAAC;MAE7DD,cAAc,CAACE,SAAS,CAACd,gBAAgB,CAAC;QAAES;MAAO,CAAC,CAAC,CAAC;IACxD;EACF,CAAC,EAAE,CAACC,SAAS,EAAED,MAAM,CAAC,CAAC;EAEvB,OACEb,KAAA,CAAAmB,aAAA,CAAChC,SAAS;IACRiC,GAAG,EAAEN,SAAU;IACfO,WAAW,EAAElB,YAAa;IAC1BL,OAAO,EAAEA,OAAQ;IACjBe,MAAM,EAAEA,MAAO;IACfS,MAAM,EAAEjB,SAAS,CAACO,IAAI;EAAE,CACzB,CAAC;AAEN,CAAC;AAED,SAASF,KAAK","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","BarChart","CandlestickChart","CustomChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","useEffect","useRef","CHART_HEIGHT","MAX_LABELS_COUNT","getDesktopOption","getOption","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","echartRef","current","echartInstance","getEchartsInstance","setOption","off","on","dataZoom","title","text","start","end","prevInterval","Number","split","prevIsGreaterThanTwoWeeks","Boolean","visibleItemsCount","Math","round","xAxisData","length","interval","floor","xAxis","axisLabel","visibleXAxisData","slice","isGreaterThanTwoWeeks","labelsData","series","id","markPoint","formatter","value","date","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","createElement","ref","chartHeight","lazyUpdate","option"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';\nimport {\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkPointComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useEffect, useRef } from 'react';\n\nimport { CHART_HEIGHT, MAX_LABELS_COUNT } from './constants';\nimport { getDesktopOption, getOption } from './getOption';\nimport type { ChartProps } from './types';\nimport { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  BarChart,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkPointComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data }: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(getDesktopOption({ isDark }));\n\n      echartInstance.off('datazoom');\n      echartInstance.on('datazoom', () => {\n        const {\n          dataZoom,\n          // @ts-ignore\n          title: { text },\n        } = echartInstance.getOption();\n\n        const { start, end } = (\n          dataZoom as { start: number; end: number }[]\n        )[0];\n        const prevInterval = Number((text as string).split(',')[0]);\n        const prevIsGreaterThanTwoWeeks = Boolean(\n          Number((text as string).split(',')[1])\n        );\n\n        const visibleItemsCount = Math.round(\n          (data.xAxisData.length * (end - start)) / 100\n        );\n\n        const interval =\n          visibleItemsCount > MAX_LABELS_COUNT\n            ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)\n            : 0;\n\n        if (interval !== prevInterval) {\n          echartInstance.setOption({\n            xAxis: {\n              axisLabel: {\n                interval,\n              },\n            },\n          });\n        }\n\n        const visibleXAxisData = data.xAxisData.slice(\n          (data.xAxisData.length * start) / 100,\n          (data.xAxisData.length * end) / 100\n        );\n\n        const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n          visibleXAxisData[0],\n          visibleXAxisData[visibleXAxisData.length - 1]\n        );\n\n        if (isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {\n          const labelsData = getLabelData({\n            xAxisData: data.xAxisData,\n            isGreaterThanTwoWeeks,\n          });\n\n          echartInstance.setOption({\n            series: [\n              {\n                id: 'candlestick',\n                markPoint: {\n                  data: labelsData,\n                },\n              },\n            ],\n          });\n\n          echartInstance.setOption({\n            xAxis: {\n              axisLabel: {\n                formatter: (value: string) => {\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          });\n        }\n\n        if (\n          interval !== prevInterval ||\n          isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks\n        ) {\n          echartInstance.setOption({\n            title: {\n              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`,\n            },\n          });\n        }\n      });\n    }\n  }, [echartRef, isDark, data]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption(data)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

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

@@ -8,7 +8,8 @@ import { transformDataForChart } from './utils';
 const ChartWithData = _ref => {
   let {
     instrument,
-    bookType
+    bookType,
+    granularity
   } = _ref;
   const {
     size
@@ -29,8 +30,11 @@ const ChartWithData = _ref => {
   const isError = !!error;
   const transformedData = useMemo(() => {
     if (!data) return undefined;
-    return transformDataForChart(data);
-  }, [data]);
+    return transformDataForChart({
+      data,
+      granularity
+    });
+  }, [data, granularity]);
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: classnames('lw-relative lw-w-full', {
       'lw-h-[450px]': isDesktop,

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["useQuery","ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","classnames","React","useMemo","getOrderPositionBooks","Chart","transformDataForChart","ChartWithData","_ref","instrument","bookType","size","isDesktop","DESKTOP","loading","data","error","variables","recentHours","fetchPolicy","isError","transformedData","undefined","createElement","Fragment","className","lg"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport type {\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables,\n} from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { transformDataForChart } from './utils';\n\nconst ChartWithData = ({ instrument, bookType }: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const { loading, data, error } = useQuery<\n    GetOrderPositionBooksQuery,\n    GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  const isError = !!error;\n\n  const transformedData = useMemo(() => {\n    if (!data) return undefined;\n    return transformDataForChart(data);\n  }, [data]);\n\n  return (\n    <>\n      <div\n        className={classnames('lw-relative lw-w-full', {\n          'lw-h-[450px]': isDesktop,\n          'lw-h-[390px]': !isDesktop,\n        })}\n      >\n        {isError && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {!isError && transformedData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={transformedData} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AAKzC,SACEC,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,qBAAqB,QAAQ,SAAS;AAE/C,MAAMC,aAAa,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,UAAU;IAAEC;EAA6B,CAAC,GAAAF,IAAA;EACjE,MAAM;IAAEG;EAAK,CAAC,GAAGX,iBAAiB,CAAC,CAAC;EACpC,MAAMY,SAAS,GAAGD,IAAI,KAAKd,IAAI,CAACgB,OAAO;EAEvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGrB,QAAQ,CAGvCS,qBAAqB,EAAE;IACvBa,SAAS,EAAE;MACTR,UAAU;MACVC,QAAQ;MACRQ,WAAW,EAAE;IACf,CAAC;IACDC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAG,CAAC,CAACJ,KAAK;EAEvB,MAAMK,eAAe,GAAGlB,OAAO,CAAC,MAAM;IACpC,IAAI,CAACY,IAAI,EAAE,OAAOO,SAAS;IAC3B,OAAOhB,qBAAqB,CAACS,IAAI,CAAC;EACpC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,OACEb,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QACEtB,KAAA,CAAAqB,aAAA;IACEE,SAAS,EAAExB,UAAU,CAAC,uBAAuB,EAAE;MAC7C,cAAc,EAAEW,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEFQ,OAAO,IACNlB,KAAA,CAAAqB,aAAA;IACEE,SAAS,EAAExB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAqB,aAAA,CAAC3B,UAAU,MAAE,CACV,CACN,EACAkB,OAAO,IACNZ,KAAA,CAAAqB,aAAA;IACEE,SAAS,EAAExB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAqB,aAAA,CAACzB,OAAO;IAACa,IAAI,EAAEZ,WAAW,CAAC2B;EAAG,CAAE,CAC7B,CACN,EACA,CAACN,OAAO,IAAIC,eAAe,IAC1BnB,KAAA,CAAAqB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEvB,KAAA,CAAAqB,aAAA,CAAClB,KAAK;IAACU,IAAI,EAAEM;EAAgB,CAAE,CAC5B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASd,aAAa","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["useQuery","ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","classnames","React","useMemo","getOrderPositionBooks","Chart","transformDataForChart","ChartWithData","_ref","instrument","bookType","granularity","size","isDesktop","DESKTOP","loading","data","error","variables","recentHours","fetchPolicy","isError","transformedData","undefined","createElement","Fragment","className","lg"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport type {\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables,\n} from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { transformDataForChart } from './utils';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const { loading, data, error } = useQuery<\n    GetOrderPositionBooksQuery,\n    GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  const isError = !!error;\n\n  const transformedData = useMemo(() => {\n    if (!data) return undefined;\n    return transformDataForChart({ data, granularity });\n  }, [data, granularity]);\n\n  return (\n    <>\n      <div\n        className={classnames('lw-relative lw-w-full', {\n          'lw-h-[450px]': isDesktop,\n          'lw-h-[390px]': !isDesktop,\n        })}\n      >\n        {isError && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {!isError && transformedData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={transformedData} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AAKzC,SACEC,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,qBAAqB,QAAQ,SAAS;AAE/C,MAAMC,aAAa,GAAGC,IAAA,IAII;EAAA,IAJH;IACrBC,UAAU;IACVC,QAAQ;IACRC;EACkB,CAAC,GAAAH,IAAA;EACnB,MAAM;IAAEI;EAAK,CAAC,GAAGZ,iBAAiB,CAAC,CAAC;EACpC,MAAMa,SAAS,GAAGD,IAAI,KAAKf,IAAI,CAACiB,OAAO;EAEvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGtB,QAAQ,CAGvCS,qBAAqB,EAAE;IACvBc,SAAS,EAAE;MACTT,UAAU;MACVC,QAAQ;MACRS,WAAW,EAAE;IACf,CAAC;IACDC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAG,CAAC,CAACJ,KAAK;EAEvB,MAAMK,eAAe,GAAGnB,OAAO,CAAC,MAAM;IACpC,IAAI,CAACa,IAAI,EAAE,OAAOO,SAAS;IAC3B,OAAOjB,qBAAqB,CAAC;MAAEU,IAAI;MAAEL;IAAY,CAAC,CAAC;EACrD,CAAC,EAAE,CAACK,IAAI,EAAEL,WAAW,CAAC,CAAC;EAEvB,OACET,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACEvB,KAAA,CAAAsB,aAAA;IACEE,SAAS,EAAEzB,UAAU,CAAC,uBAAuB,EAAE;MAC7C,cAAc,EAAEY,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEFQ,OAAO,IACNnB,KAAA,CAAAsB,aAAA;IACEE,SAAS,EAAEzB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEY,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFX,KAAA,CAAAsB,aAAA,CAAC5B,UAAU,MAAE,CACV,CACN,EACAmB,OAAO,IACNb,KAAA,CAAAsB,aAAA;IACEE,SAAS,EAAEzB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEY,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFX,KAAA,CAAAsB,aAAA,CAAC1B,OAAO;IAACc,IAAI,EAAEb,WAAW,CAAC4B;EAAG,CAAE,CAC7B,CACN,EACA,CAACN,OAAO,IAAIC,eAAe,IAC1BpB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzExB,KAAA,CAAAsB,aAAA,CAACnB,KAAK;IAACW,IAAI,EAAEM;EAAgB,CAAE,CAC5B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASf,aAAa","ignoreList":[]}

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

@@ -2,4 +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;
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/constants.tsx"],"sourcesContent":["export const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_DESKTOP = 60;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 425;\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,oBAAoB,GAAG,EAAE;AACtC,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,YAAY,GAAG,GAAG","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT","INITIAL_START_ZOOM","INITIAL_END_ZOOM","MAX_LABELS_COUNT"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/constants.tsx"],"sourcesContent":["export const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_DESKTOP = 60;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 425;\n\nexport const INITIAL_START_ZOOM = 80;\nexport const INITIAL_END_ZOOM = 100;\nexport const MAX_LABELS_COUNT = 14;\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,oBAAoB,GAAG,EAAE;AACtC,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,YAAY,GAAG,GAAG;AAE/B,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC,OAAO,MAAMC,gBAAgB,GAAG,GAAG;AACnC,OAAO,MAAMC,gBAAgB,GAAG,EAAE","ignoreList":[]}