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

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

@@ -0,0 +1,40 @@
+export const getOrderPositionDataMock = _ref => {
+  let {
+    min = 1.3,
+    max = 2.1,
+    bucketWidth = 0.005,
+    baseValue,
+    crossoverValue = baseValue
+  } = _ref;
+  const results = [];
+  const maxDistance = Math.max(baseValue - min, max - baseValue);
+  for (let currentPrice = min; currentPrice < max; currentPrice += bucketWidth) {
+    const distance = Math.abs(currentPrice - baseValue);
+    const proximityFactor = 1 - distance / maxDistance;
+    const strongProximityFactor = Math.pow(proximityFactor, 2);
+    let shortCountPercent;
+    let longCountPercent;
+    if (currentPrice === baseValue) {
+      shortCountPercent = Math.random() * 0.5;
+      longCountPercent = Math.random() * 0.5;
+    } else {
+      const maxDifference = 0.5;
+      const targetDifference = Math.random() * maxDifference * strongProximityFactor;
+      const baseRandom = Math.random() * (0.5 - targetDifference);
+      if (currentPrice < crossoverValue) {
+        shortCountPercent = baseRandom;
+        longCountPercent = baseRandom + targetDifference;
+      } else {
+        longCountPercent = baseRandom;
+        shortCountPercent = baseRandom + targetDifference;
+      }
+    }
+    results.push({
+      shortCountPercent: Math.round(shortCountPercent * 10000) / 10000,
+      longCountPercent: Math.round(longCountPercent * 10000) / 10000,
+      price: currentPrice
+    });
+  }
+  return results;
+};
+//# sourceMappingURL=getOrderPositionDataMock.js.map

package/dist/module/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"],"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":"AAcA,OAAO,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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport type { EChartsOption } from 'echarts';\n\nimport type { BookType } from '../../../gql/types/graphql';\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/module/CrowdViewWidget/components/Chart/utils.js

@@ -1,6 +1,7 @@
 import { colorMap } from '../../config';
 import { TimeSpanId } from '../../types';
 import { CHART_HEIGHT } from './constants';
+import { getOrderPositionDataMock } from './getOrderPositionDataMock';
 import { getPriceCandlesMock } from './getPriceCandlesMock';
 export const getRectColor = sentiment => {
   const colors = sentiment < 0 ? colorMap.short : colorMap.long;
@@ -58,19 +59,15 @@ const temporaryGranularityTimeSpanMap = {
   [GranularityId.HOUR_4]: TimeSpanId.MONTH_3,
   [GranularityId.DAY_1]: 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;
 };
@@ -116,37 +113,42 @@ export const isDifferenceGreaterThanTwoWeeks = (startDate, endDate) => {
 };
 export 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 = getPriceCandlesMock(mockedXAxisData.length);
+  const orderPositionData = mockedCandles.map((item, index) => {
+    return {
+      time: mockedXAxisData[index],
+      buckets: 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 = 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/module/CrowdViewWidget/components/Chart/utils.js.map

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

@@ -1,115 +1,2 @@
-import type { GetOptionType, GetResponsiveOptionsProps } from './types';
-export declare const getDesktopOption: ({ isDark }: GetResponsiveOptionsProps) => {
-    yAxis: {
-        nameTextStyle: {
-            align: string;
-            padding: number[];
-        };
-        axisLabel: {
-            margin: number;
-        };
-    };
-    grid: {
-        name: string;
-        top: string;
-        left: string;
-        right: string;
-        bottom: string;
-    }[];
-    graphic: ({
-        top: number | undefined;
-        bottom: number | undefined;
-        left: number | undefined;
-        right: number | undefined;
-        shape: {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        };
-        type: string;
-        silent: boolean;
-        z: number;
-        style: {
-            stroke: string;
-            lineWidth: number;
-        };
-    } | {
-        top: number;
-        shape: {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        };
-        type: string;
-        silent: boolean;
-        z: number;
-        style: {
-            stroke: string;
-            lineWidth: number;
-        };
-    } | {
-        right: number;
-        shape: {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        };
-        type: string;
-        silent: boolean;
-        z: number;
-        style: {
-            stroke: string;
-            lineWidth: number;
-        };
-    } | {
-        bottom: number;
-        shape: {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        };
-        type: string;
-        silent: boolean;
-        z: number;
-        style: {
-            stroke: string;
-            lineWidth: number;
-        };
-    } | {
-        left: number;
-        shape: {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        };
-        type: string;
-        silent: boolean;
-        z: number;
-        style: {
-            stroke: string;
-            lineWidth: number;
-        };
-    } | {
-        top: number;
-        right: number;
-        shape: {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        };
-        type: string;
-        silent: boolean;
-        z: number;
-        style: {
-            stroke: string;
-            lineWidth: number;
-        };
-    })[];
-};
+import type { GetOptionType } from './types';
 export declare const getOption: GetOptionType;

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

@@ -0,0 +1,14 @@
+export interface OrderPositionData {
+    shortCountPercent: number;
+    longCountPercent: number;
+    price: number;
+}
+interface GetOrderPositionDataMockParams {
+    min?: number;
+    max?: number;
+    bucketWidth?: number;
+    baseValue: number;
+    crossoverValue?: number;
+}
+export declare const getOrderPositionDataMock: ({ min, max, bucketWidth, baseValue, crossoverValue, }: GetOrderPositionDataMockParams) => OrderPositionData[];
+export {};

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

@@ -1,4 +1,3 @@
-import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';
 import type { EChartsOption } from 'echarts';
 import type { BookType } from '../../../gql/types/graphql';
 import type { GranularityId } from '../../types';
@@ -12,10 +11,7 @@ interface ChartOptionsProps {
     ordersPositionsBucketWidth: number;
     candlesSeriesData: [number, number, number, number][];
 }
-export type GetOptionType = (props: ChartOptionsProps) => EChartsOption;
-export interface GetResponsiveOptionsProps {
-    isDark: boolean;
-}
+export type GetOptionType = (props: ChartOptionsProps, isDark: boolean) => EChartsOption;
 export interface ChartProps {
     data: ChartOptionsProps;
 }
@@ -25,7 +21,6 @@ export interface ChartWithDataProps {
     granularity: GranularityId;
 }
 interface TransformDataForChartTypeProps {
-    data: GetOrderPositionBooksQuery;
     granularity: GranularityId;
 }
 export type TransformDataForChartType = (props: TransformDataForChartTypeProps) => ChartOptionsProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.218",
+    "@oanda/labs-widget-common": "^1.0.219",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "7a07df3d3cadc0733696bb4579b520fe54eacee0"
+  "gitHead": "39a4ba7320ad2596a931ebc3b19cda09da14f9de"
 }

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

@@ -1,10 +1,10 @@
-import type { BaseChartRef } from '@oanda/labs-widget-common';
 import {
   BaseChart,
   getChartTheme,
   Theme,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
+import type { EChartsType } from 'echarts';
 import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
 import {
   DataZoomInsideComponent,
@@ -15,10 +15,10 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
-import { CHART_HEIGHT, MAX_LABELS_COUNT } from './constants';
-import { getDesktopOption, getOption } from './getOption';
+import { CHART_HEIGHT } from './constants';
+import { getOption } from './getOption';
 import type { ChartProps } from './types';
 import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
 
@@ -39,77 +39,33 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ data }: ChartProps) => {
   const { isDark } = useLayoutProvider();
-  const echartRef = useRef<BaseChartRef | null>(null);
 
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-
-      echartInstance.setOption(getDesktopOption({ isDark }));
-
-      echartInstance.off('datazoom');
-      echartInstance.on('datazoom', () => {
-        const {
-          dataZoom,
-          // @ts-ignore
-          title: { text },
-        } = echartInstance.getOption();
-
-        const { start, end } = (
-          dataZoom as { start: number; end: number }[]
-        )[0];
-        const prevInterval = Number((text as string).split(',')[0]);
-        const prevIsGreaterThanTwoWeeks = Boolean(
-          Number((text as string).split(',')[1])
-        );
-
-        const visibleItemsCount = Math.round(
-          (data.xAxisData.length * (end - start)) / 100
-        );
-
-        const interval =
-          visibleItemsCount > MAX_LABELS_COUNT
-            ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)
-            : 0;
-
-        if (interval !== prevInterval) {
-          echartInstance.setOption({
-            xAxis: {
-              axisLabel: {
-                interval,
-              },
-            },
-          });
-        }
+  return (
+    <BaseChart
+      chartHeight={CHART_HEIGHT}
+      echarts={echarts}
+      isDark={isDark}
+      lazyUpdate={true}
+      option={getOption(data, isDark)}
+      onEvents={{
+        datazoom: (_params: unknown, instance: EChartsType) => {
+          const { dataZoom } = instance.getOption();
 
-        const visibleXAxisData = data.xAxisData.slice(
-          (data.xAxisData.length * start) / 100,
-          (data.xAxisData.length * end) / 100
-        );
+          const { startValue, endValue } = (
+            dataZoom as { startValue: number; endValue: number }[]
+          )[0];
 
-        const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-          visibleXAxisData[0],
-          visibleXAxisData[visibleXAxisData.length - 1]
-        );
+          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+            data.xAxisData[startValue],
+            data.xAxisData[endValue]
+          );
 
-        if (isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
           const labelsData = getLabelData({
             xAxisData: data.xAxisData,
             isGreaterThanTwoWeeks,
           });
 
-          echartInstance.setOption({
-            series: [
-              {
-                id: 'candlestick',
-                markPoint: {
-                  data: labelsData,
-                },
-              },
-            ],
-          });
-
-          echartInstance.setOption({
+          instance.setOption({
             xAxis: {
               axisLabel: {
                 formatter: (value: string) => {
@@ -125,31 +81,17 @@ const Chart = ({ data }: ChartProps) => {
                 },
               },
             },
+            series: [
+              {
+                id: 'candlestick',
+                markPoint: {
+                  data: labelsData,
+                },
+              },
+            ],
           });
-        }
-
-        if (
-          interval !== prevInterval ||
-          isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks
-        ) {
-          echartInstance.setOption({
-            title: {
-              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`,
-            },
-          });
-        }
-      });
-    }
-  }, [echartRef, isDark, data]);
-
-  return (
-    <BaseChart
-      ref={echartRef}
-      chartHeight={CHART_HEIGHT}
-      echarts={echarts}
-      isDark={isDark}
-      lazyUpdate={true}
-      option={getOption(data)}
+        },
+      }}
     />
   );
 };

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

@@ -1,8 +1,3 @@
-import { useQuery } from '@apollo/client';
-import type {
-  GetOrderPositionBooksQuery,
-  GetOrderPositionBooksQueryVariables,
-} from '@oanda/labs-order-book-widget/src/gql/types/graphql';
 import {
   ChartError,
   Size,
@@ -13,7 +8,6 @@ import {
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
 
-import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { transformDataForChart } from './utils';
@@ -26,24 +20,13 @@ const ChartWithData = ({
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const { loading, data, error } = useQuery<
-    GetOrderPositionBooksQuery,
-    GetOrderPositionBooksQueryVariables
-  >(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]);
+    return transformDataForChart({ granularity });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instrument, granularity, bookType]);
 
   return (
     <>