@oanda/labs-crowd-view-widget 1.0.36 → 1.0.37

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

@@ -0,0 +1 @@
+{"version":3,"file":"getOrderPositionDataMock.js","names":["getOrderPositionDataMock","_ref","min","max","bucketWidth","baseValue","crossoverValue","results","maxDistance","Math","currentPrice","distance","abs","proximityFactor","strongProximityFactor","pow","shortCountPercent","longCountPercent","random","maxDifference","targetDifference","baseRandom","push","round","price","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/getOrderPositionDataMock.ts"],"sourcesContent":["export interface OrderPositionData {\n  shortCountPercent: number;\n  longCountPercent: number;\n  price: number;\n}\n\ninterface GetOrderPositionDataMockParams {\n  min?: number;\n  max?: number;\n  bucketWidth?: number;\n  baseValue: number;\n  crossoverValue?: number;\n}\n\nexport const getOrderPositionDataMock = ({\n  min = 1.3,\n  max = 2.1,\n  bucketWidth = 0.005,\n  baseValue,\n  crossoverValue = baseValue,\n}: GetOrderPositionDataMockParams): OrderPositionData[] => {\n  const results: OrderPositionData[] = [];\n\n  const maxDistance = Math.max(baseValue - min, max - baseValue);\n\n  for (\n    let currentPrice = min;\n    currentPrice < max;\n    currentPrice += bucketWidth\n  ) {\n    const distance = Math.abs(currentPrice - baseValue);\n\n    const proximityFactor = 1 - distance / maxDistance;\n    const strongProximityFactor = Math.pow(proximityFactor, 2);\n\n    let shortCountPercent: number;\n    let longCountPercent: number;\n\n    if (currentPrice === baseValue) {\n      shortCountPercent = Math.random() * 0.5;\n      longCountPercent = Math.random() * 0.5;\n    } else {\n      const maxDifference = 0.5;\n      const targetDifference =\n        Math.random() * maxDifference * strongProximityFactor;\n\n      const baseRandom = Math.random() * (0.5 - targetDifference);\n\n      if (currentPrice < crossoverValue) {\n        shortCountPercent = baseRandom;\n        longCountPercent = baseRandom + targetDifference;\n      } else {\n        longCountPercent = baseRandom;\n        shortCountPercent = baseRandom + targetDifference;\n      }\n    }\n\n    results.push({\n      shortCountPercent: Math.round(shortCountPercent * 10000) / 10000,\n      longCountPercent: Math.round(longCountPercent * 10000) / 10000,\n      price: currentPrice,\n    });\n  }\n\n  return results;\n};\n"],"mappings":";;;;;;AAcO,MAAMA,wBAAwB,GAAGC,IAAA,IAMmB;EAAA,IANlB;IACvCC,GAAG,GAAG,GAAG;IACTC,GAAG,GAAG,GAAG;IACTC,WAAW,GAAG,KAAK;IACnBC,SAAS;IACTC,cAAc,GAAGD;EACa,CAAC,GAAAJ,IAAA;EAC/B,MAAMM,OAA4B,GAAG,EAAE;EAEvC,MAAMC,WAAW,GAAGC,IAAI,CAACN,GAAG,CAACE,SAAS,GAAGH,GAAG,EAAEC,GAAG,GAAGE,SAAS,CAAC;EAE9D,KACE,IAAIK,YAAY,GAAGR,GAAG,EACtBQ,YAAY,GAAGP,GAAG,EAClBO,YAAY,IAAIN,WAAW,EAC3B;IACA,MAAMO,QAAQ,GAAGF,IAAI,CAACG,GAAG,CAACF,YAAY,GAAGL,SAAS,CAAC;IAEnD,MAAMQ,eAAe,GAAG,CAAC,GAAGF,QAAQ,GAAGH,WAAW;IAClD,MAAMM,qBAAqB,GAAGL,IAAI,CAACM,GAAG,CAACF,eAAe,EAAE,CAAC,CAAC;IAE1D,IAAIG,iBAAyB;IAC7B,IAAIC,gBAAwB;IAE5B,IAAIP,YAAY,KAAKL,SAAS,EAAE;MAC9BW,iBAAiB,GAAGP,IAAI,CAACS,MAAM,CAAC,CAAC,GAAG,GAAG;MACvCD,gBAAgB,GAAGR,IAAI,CAACS,MAAM,CAAC,CAAC,GAAG,GAAG;IACxC,CAAC,MAAM;MACL,MAAMC,aAAa,GAAG,GAAG;MACzB,MAAMC,gBAAgB,GACpBX,IAAI,CAACS,MAAM,CAAC,CAAC,GAAGC,aAAa,GAAGL,qBAAqB;MAEvD,MAAMO,UAAU,GAAGZ,IAAI,CAACS,MAAM,CAAC,CAAC,IAAI,GAAG,GAAGE,gBAAgB,CAAC;MAE3D,IAAIV,YAAY,GAAGJ,cAAc,EAAE;QACjCU,iBAAiB,GAAGK,UAAU;QAC9BJ,gBAAgB,GAAGI,UAAU,GAAGD,gBAAgB;MAClD,CAAC,MAAM;QACLH,gBAAgB,GAAGI,UAAU;QAC7BL,iBAAiB,GAAGK,UAAU,GAAGD,gBAAgB;MACnD;IACF;IAEAb,OAAO,CAACe,IAAI,CAAC;MACXN,iBAAiB,EAAEP,IAAI,CAACc,KAAK,CAACP,iBAAiB,GAAG,KAAK,CAAC,GAAG,KAAK;MAChEC,gBAAgB,EAAER,IAAI,CAACc,KAAK,CAACN,gBAAgB,GAAG,KAAK,CAAC,GAAG,KAAK;MAC9DO,KAAK,EAAEd;IACT,CAAC,CAAC;EACJ;EAEA,OAAOH,OAAO;AAChB,CAAC;AAACkB,OAAA,CAAAzB,wBAAA,GAAAA,wBAAA","ignoreList":[]}

package/dist/main/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';\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":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import 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 = (\n  props: ChartOptionsProps,\n  isDark: boolean\n) => EChartsOption;\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  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/main/CrowdViewWidget/components/Chart/utils.js

@@ -7,6 +7,7 @@ exports.transformDataForChart = exports.isDifferenceGreaterThanTwoWeeks = export
 var _config = require("../../config");
 var _types = require("../../types");
 var _constants = require("./constants");
+var _getOrderPositionDataMock = require("./getOrderPositionDataMock");
 var _getPriceCandlesMock = require("./getPriceCandlesMock");
 const getRectColor = sentiment => {
   const colors = sentiment < 0 ? _config.colorMap.short : _config.colorMap.long;
@@ -65,19 +66,15 @@ const temporaryGranularityTimeSpanMap = {
   [GranularityId.HOUR_4]: _types.TimeSpanId.MONTH_3,
   [GranularityId.DAY_1]: _types.TimeSpanId.MONTH_6
 };
-const mockOrderPositionDataForHistoricalData = (data, granularityId) => {
+const mockXAxisData = granularityId => {
   const granularity = granularityInMilliseconds[granularityId];
   const timeSpan = timeSpansInMilliseconds[temporaryGranularityTimeSpanMap[granularityId]];
-  const currentTime = data.orderPositionBooks[0].time;
-  const startDate = new Date(currentTime);
+  const currentTime = new Date();
+  const startDate = currentTime;
   const totalSteps = timeSpan / granularity;
   const orderPositionDataForHistorical = new Array(totalSteps).fill(null).map((_, index) => {
     const newDate = new Date(startDate.getTime() - index * granularity);
-    return {
-      time: `${newDate.toISOString().slice(0, 19)}Z`,
-      buckets: data.orderPositionBooks[0].buckets,
-      bucketWidth: data.orderPositionBooks[0].bucketWidth
-    };
+    return `${newDate.toISOString().slice(0, 19)}Z`;
   }).reverse();
   return orderPositionDataForHistorical;
 };
@@ -125,37 +122,42 @@ const isDifferenceGreaterThanTwoWeeks = (startDate, endDate) => {
 exports.isDifferenceGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks;
 const transformDataForChart = _ref2 => {
   let {
-    data,
     granularity
   } = _ref2;
-  const mockedData = mockOrderPositionDataForHistoricalData(data, granularity);
-  const xAxisData = mockedData.map(_ref3 => {
-    let {
-      time
-    } = _ref3;
-    return time;
+  const bucketWidth = 0.005;
+  const mockedXAxisData = mockXAxisData(granularity);
+  const mockedCandles = (0, _getPriceCandlesMock.getPriceCandlesMock)(mockedXAxisData.length);
+  const orderPositionData = mockedCandles.map((item, index) => {
+    return {
+      time: mockedXAxisData[index],
+      buckets: (0, _getOrderPositionDataMock.getOrderPositionDataMock)({
+        baseValue: item.high,
+        bucketWidth,
+        crossoverValue: item.high + (Math.random() - 0.5) * 0.3
+      }),
+      bucketWidth: 0.005
+    };
   });
-  const ordersPositionsChartData = mockedData.flatMap(_ref4 => {
+  const ordersPositionsChartData = orderPositionData.flatMap(_ref3 => {
     let {
       buckets,
       time
-    } = _ref4;
+    } = _ref3;
     return buckets.map(bucket => [time, bucket.price, bucket.longCountPercent - bucket.shortCountPercent]);
   }).filter(item => Math.abs(item[2]) > 0.15);
-  const mockedCandles = (0, _getPriceCandlesMock.getPriceCandlesMock)(xAxisData.length);
-  const candlesSeriesData = mockedCandles.map(_ref5 => {
+  const candlesSeriesData = mockedCandles.map(_ref4 => {
     let {
       close,
       open,
       low,
       high
-    } = _ref5;
+    } = _ref4;
     return [+close.toFixed(5), +open.toFixed(5), +low.toFixed(5), +high.toFixed(5)];
   });
   return {
-    xAxisData,
+    xAxisData: mockedXAxisData,
     ordersPositionsChartData,
-    ordersPositionsBucketWidth: mockedData[0].bucketWidth,
+    ordersPositionsBucketWidth: bucketWidth,
     candlesSeriesData,
     granularity
   };

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"utils.js","names":["_config","require","_types","_constants","_getOrderPositionDataMock","_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","mockXAxisData","granularityId","granularity","timeSpan","currentTime","Date","startDate","totalSteps","orderPositionDataForHistorical","Array","fill","map","_","index","newDate","getTime","toISOString","slice","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","bucketWidth","mockedXAxisData","mockedCandles","getPriceCandlesMock","length","orderPositionData","time","buckets","getOrderPositionDataMock","baseValue","high","crossoverValue","random","ordersPositionsChartData","flatMap","_ref3","bucket","price","longCountPercent","shortCountPercent","candlesSeriesData","_ref4","close","open","low","toFixed","ordersPositionsBucketWidth"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/utils.ts"],"sourcesContent":["import { colorMap } from '../../config';\nimport { TimeSpanId } from '../../types';\nimport { CHART_HEIGHT } from './constants';\nimport { getOrderPositionDataMock } from './getOrderPositionDataMock';\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 mockXAxisData = (granularityId: GranularityId) => {\n  const granularity = granularityInMilliseconds[granularityId];\n  const timeSpan =\n    timeSpansInMilliseconds[temporaryGranularityTimeSpanMap[granularityId]];\n\n  const currentTime = new Date();\n\n  const startDate = currentTime;\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 `${newDate.toISOString().slice(0, 19)}Z`;\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  granularity,\n}) => {\n  const bucketWidth = 0.005;\n  const mockedXAxisData = mockXAxisData(granularity);\n  const mockedCandles = getPriceCandlesMock(mockedXAxisData.length);\n\n  const orderPositionData = mockedCandles.map((item, index) => {\n    return {\n      time: mockedXAxisData[index],\n      buckets: getOrderPositionDataMock({\n        baseValue: item.high,\n        bucketWidth,\n        crossoverValue: item.high + (Math.random() - 0.5) * 0.3,\n      }),\n      bucketWidth: 0.005,\n    };\n  });\n\n  const ordersPositionsChartData = orderPositionData\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 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: mockedXAxisData,\n    ordersPositionsChartData,\n    ordersPositionsBucketWidth: bucketWidth,\n    candlesSeriesData,\n    granularity,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,9 +3,9 @@ import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
 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, MAX_LABELS_COUNT } from './constants';
-import { getDesktopOption, getOption } from './getOption';
+import React from 'react';
+import { CHART_HEIGHT } from './constants';
+import { getOption } from './getOption';
 import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
 echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -17,86 +17,49 @@ const Chart = _ref => {
   const {
     isDark
   } = useLayoutProvider();
-  const echartRef = useRef(null);
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.setOption(getDesktopOption({
-        isDark
-      }));
-      echartInstance.off('datazoom');
-      echartInstance.on('datazoom', () => {
+  return React.createElement(BaseChart, {
+    chartHeight: CHART_HEIGHT,
+    echarts: echarts,
+    isDark: isDark,
+    lazyUpdate: true,
+    option: getOption(data, isDark),
+    onEvents: {
+      datazoom: (_params, instance) => {
         const {
-          dataZoom,
-          title: {
-            text
-          }
-        } = echartInstance.getOption();
+          dataZoom
+        } = instance.getOption();
         const {
-          start,
-          end
+          startValue,
+          endValue
         } = 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 isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(data.xAxisData[startValue], data.xAxisData[endValue]);
+        const labelsData = getLabelData({
+          xAxisData: data.xAxisData,
+          isGreaterThanTwoWeeks
+        });
+        instance.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'
+                })}`;
               }
             }
-          });
-        }
-        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'
-                  })}`;
-                }
-              }
+          },
+          series: [{
+            id: 'candlestick',
+            markPoint: {
+              data: labelsData
             }
-          });
-        }
-        if (interval !== prevInterval || isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
-          echartInstance.setOption({
-            title: {
-              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`
-            }
-          });
-        }
-      });
+          }]
+        });
+      }
     }
-  }, [echartRef, isDark, data]);
-  return React.createElement(BaseChart, {
-    ref: echartRef,
-    chartHeight: CHART_HEIGHT,
-    echarts: echarts,
-    isDark: isDark,
-    lazyUpdate: true,
-    option: getOption(data)
   });
 };
 export { Chart };

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","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":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","BarChart","CandlestickChart","CustomChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_HEIGHT","getOption","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","createElement","chartHeight","lazyUpdate","option","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","date","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","series","id","markPoint"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport type { EChartsType } from 'echarts';\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 from 'react';\n\nimport { CHART_HEIGHT } from './constants';\nimport { 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\n  return (\n    <BaseChart\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption(data, isDark)}\n      onEvents={{\n        datazoom: (_params: unknown, instance: EChartsType) => {\n          const { dataZoom } = instance.getOption();\n\n          const { startValue, endValue } = (\n            dataZoom as { startValue: number; endValue: number }[]\n          )[0];\n\n          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n            data.xAxisData[startValue],\n            data.xAxisData[endValue]\n          );\n\n          const labelsData = getLabelData({\n            xAxisData: data.xAxisData,\n            isGreaterThanTwoWeeks,\n          });\n\n          instance.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            series: [\n              {\n                id: 'candlestick',\n                markPoint: {\n                  data: labelsData,\n                },\n              },\n            ],\n          });\n        },\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAElC,SAASC,QAAQ,EAAEC,gBAAgB,EAAEC,WAAW,QAAQ,gBAAgB;AACxE,SACEC,uBAAuB,EACvBC,gBAAgB,EAChBC,mBAAmB,EACnBC,kBAAkB,EAClBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAASC,SAAS,QAAQ,aAAa;AAEvC,SAASC,YAAY,EAAEC,+BAA+B,QAAQ,SAAS;AAEvEN,OAAO,CAACO,GAAG,CAAC,CACVV,mBAAmB,EACnBD,gBAAgB,EAChBJ,QAAQ,EACRS,cAAc,EACdN,uBAAuB,EACvBD,WAAW,EACXK,gBAAgB,EAChBN,gBAAgB,EAChBK,kBAAkB,CACnB,CAAC;AAEFE,OAAO,CAACQ,aAAa,CAAC,YAAY,EAAEnB,aAAa,CAACC,KAAK,CAACmB,IAAI,CAAC,CAAC;AAC9DT,OAAO,CAACQ,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;EAEtC,OACEW,KAAA,CAAAa,aAAA,CAAC3B,SAAS;IACR4B,WAAW,EAAEb,YAAa;IAC1BH,OAAO,EAAEA,OAAQ;IACjBc,MAAM,EAAEA,MAAO;IACfG,UAAU,EAAE,IAAK;IACjBC,MAAM,EAAEd,SAAS,CAACS,IAAI,EAAEC,MAAM,CAAE;IAChCK,QAAQ,EAAE;MACRC,QAAQ,EAAEA,CAACC,OAAgB,EAAEC,QAAqB,KAAK;QACrD,MAAM;UAAEC;QAAS,CAAC,GAAGD,QAAQ,CAAClB,SAAS,CAAC,CAAC;QAEzC,MAAM;UAAEoB,UAAU;UAAEC;QAAS,CAAC,GAC5BF,QAAQ,CACR,CAAC,CAAC;QAEJ,MAAMG,qBAAqB,GAAGpB,+BAA+B,CAC3DO,IAAI,CAACc,SAAS,CAACH,UAAU,CAAC,EAC1BX,IAAI,CAACc,SAAS,CAACF,QAAQ,CACzB,CAAC;QAED,MAAMG,UAAU,GAAGvB,YAAY,CAAC;UAC9BsB,SAAS,EAAEd,IAAI,CAACc,SAAS;UACzBD;QACF,CAAC,CAAC;QAEFJ,QAAQ,CAACO,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,SAAS,EAAE;cACTC,SAAS,EAAGC,KAAa,IAAK;gBAC5B,MAAMC,IAAI,GAAG,IAAIC,IAAI,CAACF,KAAK,CAAC;gBAC5B,OAAOP,qBAAqB,GACxB,GAAGQ,IAAI,CAACE,kBAAkB,CAACC,SAAS,EAAE;kBACpCC,IAAI,EAAE,SAAS;kBACfC,MAAM,EAAE;gBACV,CAAC,CAAC,EAAE,GACJ,GAAGL,IAAI,CAACM,kBAAkB,CAACH,SAAS,EAAE;kBACpCI,GAAG,EAAE;gBACP,CAAC,CAAC,EAAE;cACV;YACF;UACF,CAAC;UACDC,MAAM,EAAE,CACN;YACEC,EAAE,EAAE,aAAa;YACjBC,SAAS,EAAE;cACT/B,IAAI,EAAEe;YACR;UACF,CAAC;QAEL,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,SAASjB,KAAK","ignoreList":[]}

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

@@ -1,8 +1,6 @@
-import { useQuery } from '@apollo/client';
 import { ChartError, Size, Spinner, SpinnerSize, useLayoutProvider } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
-import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
 import { Chart } from './Chart';
 import { transformDataForChart } from './utils';
 const ChartWithData = _ref => {
@@ -15,26 +13,13 @@ const ChartWithData = _ref => {
     size
   } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
-  const {
-    loading,
-    data,
-    error
-  } = useQuery(getOrderPositionBooks, {
-    variables: {
-      instrument,
-      bookType,
-      recentHours: 1
-    },
-    fetchPolicy: 'network-only'
-  });
-  const isError = !!error;
+  const isError = false;
+  const loading = false;
   const transformedData = useMemo(() => {
-    if (!data) return undefined;
     return transformDataForChart({
-      data,
       granularity
     });
-  }, [data, granularity]);
+  }, [instrument, granularity, bookType]);
   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","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":[]}
+{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","classnames","React","useMemo","Chart","transformDataForChart","ChartWithData","_ref","instrument","bookType","granularity","size","isDesktop","DESKTOP","isError","loading","transformedData","createElement","Fragment","className","lg","data"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\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 { 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 isError = false;\n  const loading = false;\n\n  const transformedData = useMemo(() => {\n    return transformDataForChart({ granularity });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [instrument, granularity, bookType]);\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,SACEA,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,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,GAAGX,iBAAiB,CAAC,CAAC;EACpC,MAAMY,SAAS,GAAGD,IAAI,KAAKd,IAAI,CAACgB,OAAO;EAEvC,MAAMC,OAAO,GAAG,KAAK;EACrB,MAAMC,OAAO,GAAG,KAAK;EAErB,MAAMC,eAAe,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOE,qBAAqB,CAAC;MAAEK;IAAY,CAAC,CAAC;EAE/C,CAAC,EAAE,CAACF,UAAU,EAAEE,WAAW,EAAED,QAAQ,CAAC,CAAC;EAEvC,OACEP,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QACEhB,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CAAC,uBAAuB,EAAE;MAC7C,cAAc,EAAEW,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEFE,OAAO,IACNZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAe,aAAA,CAACrB,UAAU,MAAE,CACV,CACN,EACAmB,OAAO,IACNb,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAe,aAAA,CAACnB,OAAO;IAACa,IAAI,EAAEZ,WAAW,CAACqB;EAAG,CAAE,CAC7B,CACN,EACA,CAACN,OAAO,IAAIE,eAAe,IAC1Bd,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEjB,KAAA,CAAAe,aAAA,CAACb,KAAK;IAACiB,IAAI,EAAEL;EAAgB,CAAE,CAC5B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASV,aAAa","ignoreList":[]}

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

@@ -1,69 +1,29 @@
 import { colorPalette, getGridLines, getLineCommons } from '@oanda/labs-widget-common';
 import * as echarts from 'echarts/core';
-import { CHART_HEIGHT, CHART_WIDTH, INITIAL_END_ZOOM, INITIAL_START_ZOOM, MAX_LABELS_COUNT, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
+import { CHART_HEIGHT, CHART_WIDTH, INITIAL_END_ZOOM, INITIAL_START_ZOOM, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
 import { getLabelData, getRectColor, isDifferenceGreaterThanTwoWeeks } from './utils';
-export const getDesktopOption = _ref => {
-  let {
-    isDark
-  } = _ref;
-  const desktopGridLines = getGridLines({
-    isDark,
-    chartWidth: CHART_WIDTH,
-    chartHeight: CHART_HEIGHT,
-    xLabelsSize: X_LABEL_SIZE,
-    yLabelSize: Y_LABEL_SIZE_DESKTOP,
-    bottomLeftBox: false
-  });
-  return {
-    yAxis: {
-      nameTextStyle: {
-        align: 'left',
-        padding: [0, 0, 0, 8]
-      },
-      axisLabel: {
-        margin: 8
-      }
-    },
-    grid: [{
-      name: 'main-grid',
-      top: '0px',
-      left: '0px',
-      right: `${Y_LABEL_SIZE_DESKTOP}px`,
-      bottom: `${X_LABEL_SIZE}px`
-    }],
-    graphic: [...desktopGridLines, {
-      ...getLineCommons(isDark),
-      top: 0,
-      right: 0,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 0
-      }
-    }]
-  };
-};
-export const getOption = _ref2 => {
+export const getOption = (_ref, isDark) => {
   let {
     xAxisData,
     ordersPositionsChartData,
     ordersPositionsBucketWidth,
     candlesSeriesData
-  } = _ref2;
+  } = _ref;
   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;
+  const gridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: X_LABEL_SIZE,
+    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    bottomLeftBox: false
+  });
   return {
-    title: {
-      show: false,
-      text: `${initialInterval},${isGreaterThanTwoWeeks}`
-    },
     animation: false,
     dataZoom: [{
       type: 'inside',
@@ -95,7 +55,6 @@ export const getOption = _ref2 => {
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        interval: initialInterval,
         formatter: value => {
           const date = new Date(value);
           return isGreaterThanTwoWeeks ? `${date.toLocaleTimeString(undefined, {
@@ -166,6 +125,24 @@ export const getOption = _ref2 => {
         };
       },
       data: ordersPositionsChartData
+    }],
+    grid: [{
+      name: 'main-grid',
+      top: '0px',
+      left: '0px',
+      right: `${Y_LABEL_SIZE_DESKTOP}px`,
+      bottom: `${X_LABEL_SIZE}px`
+    }],
+    graphic: [...gridLines, {
+      ...getLineCommons(isDark),
+      top: 0,
+      right: 0,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0
+      }
     }]
   };
 };

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","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":[]}
+{"version":3,"file":"getOption.js","names":["colorPalette","getGridLines","getLineCommons","echarts","CHART_HEIGHT","CHART_WIDTH","INITIAL_END_ZOOM","INITIAL_START_ZOOM","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","getLabelData","getRectColor","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","xAxisData","ordersPositionsChartData","ordersPositionsBucketWidth","candlesSeriesData","visibleXAxisData","slice","length","isGreaterThanTwoWeeks","labelsData","gridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","formatter","val","timestamp","axisValue","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","month","xAxis","data","axisTick","show","axisLabel","padding","margin","value","date","yAxis","position","scale","axisLine","showMaxLabel","showMinLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","name","silent","renderItem","params","api","coordSys","xVal","yVal","sentiment","coord","rectWidth","rectHeight","size","boundaries","shape","graphic","clipRectByRect","x","y","width","height","style","fill","emphasisDisabled","grid","top","left","right","bottom","x1","y1","x2","y2"],"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  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n} from './constants';\nimport type { GetOptionType } from './types';\nimport {\n  getLabelData,\n  getRectColor,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils';\n\n// @ts-expect-error\nexport const getOption: GetOptionType = (\n  {\n    xAxisData,\n    ordersPositionsChartData,\n    ordersPositionsBucketWidth,\n    candlesSeriesData,\n  },\n  isDark\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\n  const labelsData = getLabelData({\n    xAxisData,\n    isGreaterThanTwoWeeks,\n  });\n\n  const gridLines = 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    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-expect-error\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        formatter: (value) => {\n          const date = new Date(value as string);\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    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      ...gridLines,\n      {\n        ...getLineCommons(isDark as boolean),\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"],"mappings":"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","ignoreList":[]}