@oanda/labs-crowd-view-widget 1.0.43 → 1.0.45

package/dist/module/CrowdViewWidget/components/Chart/{getOption.js → chartOptions.js}

@@ -4,17 +4,18 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
-import { getLabelData, getRectColor, isDifferenceGreaterThanTwoWeeks } from './utils';
-export const getOption = (_ref, isDark) => {
+import { CHART_CONFIG } from '../../constants';
+import { formatXAxisLabel, getLabelData, getRectColor, getTooltipFormatter, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
+export const getOption = (_ref, isDark, labelCallback) => {
   let {
     xAxisData,
-    ordersPositionsChartData,
-    ordersPositionsBucketWidth,
-    candlesSeriesData
+    candlesSeriesData,
+    orderPositionBooks,
+    bucketWidth,
+    buckets
   } = _ref;
-  const visibleXAxisData = xAxisData.slice(xAxisData.length * INITIAL_START_ZOOM / 100, xAxisData.length * INITIAL_END_ZOOM / 100);
+  let selectedPrice;
+  const visibleXAxisData = xAxisData.slice(xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM / 100, xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM / 100);
   const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
   const labelsData = getLabelData({
     xAxisData,
@@ -22,10 +23,10 @@ export const getOption = (_ref, isDark) => {
   });
   const gridLines = getGridLines({
     isDark,
-    chartWidth: CHART_WIDTH,
-    chartHeight: CHART_HEIGHT,
-    xLabelsSize: X_LABEL_SIZE,
-    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    chartWidth: CHART_CONFIG.WIDTH,
+    chartHeight: CHART_CONFIG.HEIGHT,
+    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
+    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
     bottomLeftBox: false
   });
   return {
@@ -33,46 +34,54 @@ export const getOption = (_ref, isDark) => {
     dataZoom: [{
       type: 'inside',
       xAxisIndex: 0,
-      start: INITIAL_START_ZOOM,
-      end: INITIAL_END_ZOOM
+      start: CHART_CONFIG.INITIAL_START_ZOOM,
+      end: CHART_CONFIG.INITIAL_END_ZOOM
     }],
     tooltip: {
       trigger: 'axis',
-      formatter: val => {
-        const timestamp = val[0].axisValue;
-        return "".concat(new Date(timestamp).toLocaleTimeString(undefined, {
-          hour: '2-digit',
-          minute: '2-digit'
-        }), "\n      ").concat(new Date(timestamp).toLocaleDateString(undefined, {
-          day: 'numeric',
-          month: 'short'
-        }), "\n");
-      }
+      axisPointer: {
+        type: 'cross',
+        axis: 'x',
+        label: {
+          formatter: params => {
+            if (params.axisDimension === 'y') {
+              selectedPrice = Number(params.value);
+              return Number(params.value).toFixed(5);
+            }
+            if (params.axisDimension === 'x') {
+              const date = new Date(params.value);
+              return date.toLocaleString(undefined, {
+                hour: '2-digit',
+                minute: '2-digit',
+                day: 'numeric',
+                month: 'short'
+              });
+            }
+            return null;
+          }
+        }
+      },
+      confine: true,
+      formatter: params => getTooltipFormatter(params, buckets, bucketWidth, selectedPrice, labelCallback)
     },
     xAxis: {
       type: 'category',
       data: xAxisData,
+      splitNumber: 1,
       axisTick: {
         show: false
       },
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        formatter: value => {
-          const date = new Date(value);
-          return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
-            hour: '2-digit',
-            minute: '2-digit'
-          })) : "".concat(date.toLocaleDateString(undefined, {
-            day: 'numeric'
-          }));
-        }
+        formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks)
       }
     },
     yAxis: {
       type: 'value',
       position: 'right',
-      scale: true,
+      min: val => val.min - bucketWidth * 2,
+      max: val => val.max + bucketWidth * 2,
       axisLine: {
         show: false
       },
@@ -102,39 +111,48 @@ export const getOption = (_ref, isDark) => {
       name: 'heatmap',
       id: 'heatmap',
       silent: true,
-      renderItem: (params, api) => {
-        const {
-          coordSys
-        } = params;
+      clip: true,
+      renderItem: (_params, api) => {
         const xVal = api.value(0);
-        const yVal = api.value(1);
-        const sentiment = api.value(2);
-        const start = api.coord([xVal, yVal]);
-        const [rectWidth, rectHeight] = api.size([0, ordersPositionsBucketWidth]);
-        const boundaries = coordSys;
-        const shape = echarts.graphic.clipRectByRect({
-          x: start[0] - rectWidth / 2,
-          y: start[1],
-          width: rectWidth,
-          height: rectHeight
-        }, boundaries);
-        return shape && {
-          type: 'rect',
-          shape,
-          style: {
-            fill: getRectColor(sentiment)
-          },
+        const bucketIndex = api.value(2);
+        const metaValues = buckets[bucketIndex];
+        const [rectWidth, rectHeight] = api.size([0, bucketWidth]);
+        const items = metaValues.map(_ref2 => {
+          let {
+            price,
+            sentiment
+          } = _ref2;
+          const start = api.coord([xVal, price]);
+          return {
+            type: 'rect',
+            shape: {
+              x: start[0] - rectWidth / 2,
+              y: start[1] - rectHeight,
+              width: rectWidth,
+              height: rectHeight
+            },
+            style: {
+              fill: getRectColor(sentiment)
+            },
+            silent: true,
+            emphasisDisabled: true
+          };
+        });
+        return {
+          type: 'group',
+          children: items,
+          silent: true,
           emphasisDisabled: true
         };
       },
-      data: ordersPositionsChartData
+      data: orderPositionBooks
     }],
     grid: [{
       name: 'main-grid',
       top: '0px',
       left: '0px',
-      right: "".concat(Y_LABEL_SIZE_DESKTOP, "px"),
-      bottom: "".concat(X_LABEL_SIZE, "px")
+      right: "".concat(CHART_CONFIG.Y_LABEL_SIZE_DESKTOP, "px"),
+      bottom: "".concat(CHART_CONFIG.X_LABEL_SIZE, "px")
     }],
     graphic: [...gridLines, _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
       top: 0,
@@ -148,4 +166,4 @@ export const getOption = (_ref, isDark) => {
     })]
   };
 };
-//# sourceMappingURL=getOption.js.map
+//# sourceMappingURL=chartOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartOptions.js","names":["colorPalette","getGridLines","getLineCommons","CHART_CONFIG","formatXAxisLabel","getLabelData","getRectColor","getTooltipFormatter","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","labelCallback","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","buckets","selectedPrice","visibleXAxisData","slice","length","INITIAL_START_ZOOM","INITIAL_END_ZOOM","isGreaterThanTwoWeeks","labelsData","gridLines","chartWidth","WIDTH","chartHeight","HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","axisPointer","axis","label","formatter","params","axisDimension","Number","value","toFixed","date","Date","toLocaleString","undefined","hour","minute","day","month","confine","xAxis","data","splitNumber","axisTick","show","axisLabel","padding","margin","yAxis","position","min","val","max","axisLine","showMaxLabel","showMinLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","name","silent","clip","renderItem","_params","api","xVal","bucketIndex","metaValues","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","coord","shape","x","y","width","height","style","fill","emphasisDisabled","children","grid","top","left","right","concat","bottom","graphic","_objectSpread","x1","y1","x2","y2"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/chartOptions.ts"],"sourcesContent":["import {\n  colorPalette,\n  getGridLines,\n  getLineCommons,\n} from '@oanda/labs-widget-common';\n\nimport { CHART_CONFIG } from '../../constants';\nimport type { GetOptionType } from './types';\nimport {\n  formatXAxisLabel,\n  getLabelData,\n  getRectColor,\n  getTooltipFormatter,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\n// @ts-expect-error\nexport const getOption: GetOptionType = (\n  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth, buckets },\n  isDark,\n  labelCallback\n) => {\n  let selectedPrice: number;\n  const visibleXAxisData = xAxisData.slice(\n    (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,\n    (xAxisData.length * CHART_CONFIG.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_CONFIG.WIDTH,\n    chartHeight: CHART_CONFIG.HEIGHT,\n    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,\n    yLabelSize: CHART_CONFIG.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: CHART_CONFIG.INITIAL_START_ZOOM,\n        end: CHART_CONFIG.INITIAL_END_ZOOM,\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n        axis: 'x',\n        label: {\n          formatter: (params) => {\n            if (params.axisDimension === 'y') {\n              selectedPrice = Number(params.value);\n              return Number(params.value).toFixed(5);\n            }\n\n            if (params.axisDimension === 'x') {\n              const date = new Date(params.value as string);\n              return date.toLocaleString(undefined, {\n                hour: '2-digit',\n                minute: '2-digit',\n                day: 'numeric',\n                month: 'short',\n              });\n            }\n\n            return null;\n          },\n        },\n      },\n      confine: true,\n      formatter: (params) =>\n        getTooltipFormatter(\n          params,\n          buckets,\n          bucketWidth,\n          selectedPrice,\n          labelCallback\n        ),\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisData,\n      splitNumber: 1,\n      axisTick: {\n        show: false,\n      },\n      axisLabel: {\n        padding: [8, 16, 8, 16],\n        margin: 0,\n        formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      min: (val) => val.min - bucketWidth * 2,\n      max: (val) => val.max + bucketWidth * 2,\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        clip: true,\n        renderItem: (_params, api) => {\n          const xVal = api.value(0);\n          const bucketIndex = api.value(2) as number;\n          const metaValues = buckets[bucketIndex];\n\n          const [rectWidth, rectHeight] = api.size!([\n            0,\n            bucketWidth,\n          ]) as number[];\n\n          const items = metaValues.map(\n            ({ price, sentiment }: { price: number; sentiment: number }) => {\n              const start = api.coord([xVal, price]);\n\n              return {\n                type: 'rect',\n                shape: {\n                  x: start[0] - rectWidth / 2,\n                  y: start[1] - rectHeight,\n                  width: rectWidth,\n                  height: rectHeight,\n                },\n                style: {\n                  fill: getRectColor(sentiment),\n                },\n                silent: true,\n                emphasisDisabled: true,\n              };\n            }\n          );\n\n          return {\n            type: 'group',\n            children: items,\n            silent: true,\n            emphasisDisabled: true,\n          };\n        },\n        data: orderPositionBooks,\n      },\n    ],\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${CHART_CONFIG.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":[]}

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

@@ -1,3 +1,7 @@
 export * from './Chart';
+export * from './chartOptions';
 export * from './ChartWithData';
+export * from './types';
+export * from './useCrowdViewData';
+export * from './utils/chartUtils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/index.ts"],"sourcesContent":["export * from './Chart';\nexport * from './ChartWithData';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/index.ts"],"sourcesContent":["export * from './Chart';\nexport * from './chartOptions';\nexport * from './ChartWithData';\nexport * from './types';\nexport * from './useCrowdViewData';\nexport * from './utils/chartUtils';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,oBAAoB;AAClC,cAAc,oBAAoB","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 { 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":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type {\n  BookType,\n  Division,\n  Granularity,\n} from '../../../gql/types/graphql';\n\nexport interface UseCrowdViewDataProps {\n  instrument: string;\n  bookType: BookType;\n  division: Division;\n  granularity: Granularity;\n}\n\ninterface CrowdViewData {\n  xAxisData: string[];\n  // [open, close, low, high]\n  candlesSeriesData: [number, number, number, number][];\n  // [time, price, index]\n  orderPositionBooks: ([string, number, number] | null)[];\n  bucketWidth: number;\n  buckets: { price: number; sentiment: number }[][];\n}\n\nexport interface UseCrowdViewDataReturn {\n  data: CrowdViewData | null;\n  loading: boolean;\n  error: boolean;\n}\n\nexport type GetOptionType = (\n  props: CrowdViewData,\n  isDark: boolean,\n  labelCallback: (key: string, params?: Record<string, unknown>) => string\n) => EChartsOption;\n\nexport interface ChartProps {\n  data: CrowdViewData;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  division: Division;\n  instrument: string;\n  granularity: Granularity;\n}\n\nexport interface GetLabelsDataProps {\n  xAxisData: string[];\n  isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,177 @@
+import { useQuery } from '@apollo/client';
+import { useMemo } from 'react';
+import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
+import { getPriceCandles } from '../../../gql/getPriceCandles';
+import { BookType, DataSource, Division } from '../../../gql/types/graphql';
+import { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';
+import { getTimeSpanForGranularity } from './utils/chartUtils';
+const processPriceCandles = priceCandlesData => {
+  var _priceCandlesData$pri;
+  if (!(priceCandlesData !== null && priceCandlesData !== void 0 && (_priceCandlesData$pri = priceCandlesData.priceCandles) !== null && _priceCandlesData$pri !== void 0 && (_priceCandlesData$pri = _priceCandlesData$pri.candle) !== null && _priceCandlesData$pri !== void 0 && _priceCandlesData$pri.length)) {
+    return {
+      minPrice: 0,
+      maxPrice: 0,
+      hasValidCandles: false,
+      candleMap: new Map(),
+      candles: []
+    };
+  }
+  const candles = priceCandlesData.priceCandles.candle;
+  let calculatedMinPrice = Number.MAX_VALUE;
+  let calculatedMaxPrice = Number.MIN_VALUE;
+  const candleMap = new Map();
+  candles.forEach(candle => {
+    if (!candle) return;
+    if (candle.high > calculatedMaxPrice) {
+      calculatedMaxPrice = candle.high;
+    }
+    if (candle.low < calculatedMinPrice) {
+      calculatedMinPrice = candle.low;
+    }
+    if (candle.point) {
+      candleMap.set(candle.point, candle);
+    }
+  });
+  return {
+    minPrice: calculatedMinPrice,
+    maxPrice: calculatedMaxPrice,
+    hasValidCandles: true,
+    candleMap,
+    candles
+  };
+};
+const processOrderPositionBooks = (orderPositionData, candleMap) => {
+  var _orderPositionData$or;
+  if (!(orderPositionData !== null && orderPositionData !== void 0 && (_orderPositionData$or = orderPositionData.orderPositionBooks) !== null && _orderPositionData$or !== void 0 && _orderPositionData$or.length)) {
+    return [];
+  }
+  return orderPositionData.orderPositionBooks.filter(book => {
+    var _book$buckets;
+    return book !== null && ((_book$buckets = book.buckets) === null || _book$buckets === void 0 ? void 0 : _book$buckets.length) > 0;
+  }).map((book, index) => {
+    var _candle$high;
+    const candle = candleMap.get(book.time);
+    const price = (_candle$high = candle === null || candle === void 0 ? void 0 : candle.high) !== null && _candle$high !== void 0 ? _candle$high : null;
+    return [book.time, price, index];
+  });
+};
+const processBuckets = orderPositionData => {
+  var _orderPositionData$or2;
+  if (!(orderPositionData !== null && orderPositionData !== void 0 && (_orderPositionData$or2 = orderPositionData.orderPositionBooks) !== null && _orderPositionData$or2 !== void 0 && _orderPositionData$or2.length)) {
+    return [];
+  }
+  return orderPositionData.orderPositionBooks.filter(book => {
+    var _book$buckets2;
+    return book !== null && ((_book$buckets2 = book.buckets) === null || _book$buckets2 === void 0 ? void 0 : _book$buckets2.length) > 0;
+  }).map(book => {
+    const filteredBuckets = book.buckets.filter(bucket => {
+      if (!bucket || bucket.sentiment === undefined || bucket.sentiment === null || bucket.price === undefined) {
+        return false;
+      }
+      return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;
+    }).map(bucket => ({
+      price: bucket.price,
+      sentiment: bucket.sentiment
+    }));
+    return filteredBuckets;
+  });
+};
+const validateData = (priceCandlesData, orderPositionData, hasValidCandles) => {
+  var _priceCandlesData$pri2, _priceCandlesData$pri3, _orderPositionData$or3, _orderPositionData$or4;
+  const hasValidPriceData = ((_priceCandlesData$pri2 = priceCandlesData === null || priceCandlesData === void 0 || (_priceCandlesData$pri3 = priceCandlesData.priceCandles) === null || _priceCandlesData$pri3 === void 0 || (_priceCandlesData$pri3 = _priceCandlesData$pri3.candle) === null || _priceCandlesData$pri3 === void 0 ? void 0 : _priceCandlesData$pri3.length) !== null && _priceCandlesData$pri2 !== void 0 ? _priceCandlesData$pri2 : 0) >= 1;
+  const hasValidOrderData = ((_orderPositionData$or3 = orderPositionData === null || orderPositionData === void 0 || (_orderPositionData$or4 = orderPositionData.orderPositionBooks) === null || _orderPositionData$or4 === void 0 ? void 0 : _orderPositionData$or4.length) !== null && _orderPositionData$or3 !== void 0 ? _orderPositionData$or3 : 0) >= 1;
+  if (!hasValidPriceData) {
+    return new Error('Insufficient price candle data');
+  }
+  if (!hasValidOrderData) {
+    return new Error('Insufficient order position data');
+  }
+  if (!hasValidCandles) {
+    return new Error('Invalid candle data');
+  }
+  return null;
+};
+export const useCrowdViewData = _ref => {
+  let {
+    instrument,
+    bookType,
+    division,
+    granularity
+  } = _ref;
+  const {
+    loading: priceCandlesLoading,
+    data: priceCandlesData,
+    error: priceCandlesError
+  } = useQuery(getPriceCandles, {
+    variables: {
+      dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,
+      division,
+      instrument,
+      granularity,
+      timeSpan: getTimeSpanForGranularity(granularity)
+    },
+    fetchPolicy: 'no-cache'
+  });
+  const priceCandlesProcessed = useMemo(() => processPriceCandles(priceCandlesData), [priceCandlesData]);
+  const {
+    minPrice,
+    maxPrice,
+    hasValidCandles,
+    candleMap,
+    candles
+  } = priceCandlesProcessed;
+  const maxBookPrice = useMemo(() => maxPrice + BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER, [maxPrice]);
+  const minBookPrice = useMemo(() => minPrice - BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER, [minPrice]);
+  const {
+    loading: orderPositionLoading,
+    data: orderPositionData,
+    error: orderPositionError
+  } = useQuery(getOrderPositionBooks, {
+    variables: {
+      instrument,
+      bookType: bookType || BookType.Order,
+      timeSpan: getTimeSpanForGranularity(granularity),
+      granularity,
+      maxBookPrice,
+      minBookPrice
+    },
+    fetchPolicy: 'no-cache',
+    skip: priceCandlesLoading || !!priceCandlesError
+  });
+  const loading = priceCandlesLoading || orderPositionLoading;
+  const orderPositionBooks = useMemo(() => processOrderPositionBooks(orderPositionData, candleMap), [orderPositionData, candleMap]);
+  const buckets = useMemo(() => processBuckets(orderPositionData), [orderPositionData]);
+  const error = useMemo(() => {
+    if (priceCandlesError) {
+      return new Error("Price candles error: ".concat(priceCandlesError.message));
+    }
+    if (orderPositionError) {
+      return new Error("Order position error: ".concat(orderPositionError.message));
+    }
+    if (loading) {
+      return null;
+    }
+    return validateData(priceCandlesData, orderPositionData, hasValidCandles);
+  }, [priceCandlesError, orderPositionError, loading, priceCandlesData, orderPositionData, hasValidCandles]);
+  const data = useMemo(() => {
+    var _orderPositionData$or5;
+    if (!priceCandlesData || !orderPositionData || error) {
+      return null;
+    }
+    const xAxisData = candles.map(candle => (candle === null || candle === void 0 ? void 0 : candle.point) || '');
+    const candlesSeriesData = candles.map(candle => [(candle === null || candle === void 0 ? void 0 : candle.open) || 0, (candle === null || candle === void 0 ? void 0 : candle.close) || 0, (candle === null || candle === void 0 ? void 0 : candle.low) || 0, (candle === null || candle === void 0 ? void 0 : candle.high) || 0]);
+    return {
+      buckets,
+      xAxisData,
+      candlesSeriesData,
+      orderPositionBooks,
+      bucketWidth: ((_orderPositionData$or5 = orderPositionData.orderPositionBooks) === null || _orderPositionData$or5 === void 0 || (_orderPositionData$or5 = _orderPositionData$or5[0]) === null || _orderPositionData$or5 === void 0 ? void 0 : _orderPositionData$or5.bucketWidth) || 0
+    };
+  }, [priceCandlesData, orderPositionData, error, candles, orderPositionBooks, buckets]);
+  return {
+    data,
+    loading,
+    error: !!error
+  };
+};
+//# sourceMappingURL=useCrowdViewData.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCrowdViewData.js","names":["useQuery","useMemo","getOrderPositionBooks","getPriceCandles","BookType","DataSource","Division","BOOKS_THRESHOLDS","BUCKET_CONFIG","getTimeSpanForGranularity","processPriceCandles","priceCandlesData","_priceCandlesData$pri","priceCandles","candle","length","minPrice","maxPrice","hasValidCandles","candleMap","Map","candles","calculatedMinPrice","Number","MAX_VALUE","calculatedMaxPrice","MIN_VALUE","forEach","high","low","point","set","processOrderPositionBooks","orderPositionData","_orderPositionData$or","orderPositionBooks","filter","book","_book$buckets","buckets","map","index","_candle$high","get","time","price","processBuckets","_orderPositionData$or2","_book$buckets2","filteredBuckets","bucket","sentiment","undefined","Math","abs","MIN","validateData","_priceCandlesData$pri2","_priceCandlesData$pri3","_orderPositionData$or3","_orderPositionData$or4","hasValidPriceData","hasValidOrderData","Error","useCrowdViewData","_ref","instrument","bookType","division","granularity","loading","priceCandlesLoading","data","error","priceCandlesError","variables","dataSource","Oc","V20","Mt5","timeSpan","fetchPolicy","priceCandlesProcessed","maxBookPrice","DEFAULT_WIDTH","PRICE_PADDING_MULTIPLIER","minBookPrice","orderPositionLoading","orderPositionError","Order","skip","concat","message","_orderPositionData$or5","xAxisData","candlesSeriesData","open","close","bucketWidth"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/useCrowdViewData.ts"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { useMemo } from 'react';\n\nimport { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\nimport { getPriceCandles } from '../../../gql/getPriceCandles';\nimport type {\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables,\n  GetPriceCandlesQuery,\n  GetPriceCandlesQueryVariables,\n} from '../../../gql/types/graphql';\nimport { BookType, DataSource, Division } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';\nimport type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';\nimport { getTimeSpanForGranularity } from './utils/chartUtils';\n\nconst processPriceCandles = (\n  priceCandlesData: GetPriceCandlesQuery | undefined\n) => {\n  if (!priceCandlesData?.priceCandles?.candle?.length) {\n    return {\n      minPrice: 0,\n      maxPrice: 0,\n      hasValidCandles: false,\n      candleMap: new Map(),\n      candles: [],\n    };\n  }\n\n  const candles = priceCandlesData.priceCandles.candle;\n  let calculatedMinPrice = Number.MAX_VALUE;\n  let calculatedMaxPrice = Number.MIN_VALUE;\n\n  const candleMap = new Map<\n    string,\n    {\n      point?: string;\n      high?: number;\n      low?: number;\n      open?: number;\n      close?: number;\n    }\n  >();\n\n  candles.forEach((candle) => {\n    if (!candle) return;\n\n    if (candle.high > calculatedMaxPrice) {\n      calculatedMaxPrice = candle.high;\n    }\n    if (candle.low < calculatedMinPrice) {\n      calculatedMinPrice = candle.low;\n    }\n\n    if (candle.point) {\n      candleMap.set(candle.point, candle);\n    }\n  });\n\n  return {\n    minPrice: calculatedMinPrice,\n    maxPrice: calculatedMaxPrice,\n    hasValidCandles: true,\n    candleMap,\n    candles,\n  };\n};\n\nconst processOrderPositionBooks = (\n  orderPositionData: GetOrderPositionBooksQuery | undefined,\n  candleMap: Map<\n    string,\n    {\n      point?: string;\n      high?: number;\n      low?: number;\n      open?: number;\n      close?: number;\n    }\n  >\n) => {\n  if (!orderPositionData?.orderPositionBooks?.length) {\n    return [];\n  }\n\n  return orderPositionData.orderPositionBooks\n    .filter((book): book is NonNullable<typeof book> => {\n      return book !== null && book.buckets?.length > 0;\n    })\n    .map((book, index) => {\n      const candle = candleMap.get(book.time);\n      const price = candle?.high ?? null;\n\n      return [book.time, price, index] as [string, number, number];\n    });\n};\n\nconst processBuckets = (\n  orderPositionData: GetOrderPositionBooksQuery | undefined\n) => {\n  if (!orderPositionData?.orderPositionBooks?.length) {\n    return [];\n  }\n\n  return orderPositionData.orderPositionBooks\n    .filter((book): book is NonNullable<typeof book> => {\n      return book !== null && book.buckets?.length > 0;\n    })\n    .map((book) => {\n      const filteredBuckets = book.buckets\n        .filter((bucket) => {\n          if (\n            !bucket ||\n            bucket.sentiment === undefined ||\n            bucket.sentiment === null ||\n            bucket.price === undefined\n          ) {\n            return false;\n          }\n          return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;\n        })\n        .map((bucket) => ({\n          price: bucket!.price!,\n          sentiment: bucket!.sentiment!,\n        }));\n\n      return filteredBuckets;\n    });\n};\n\nconst validateData = (\n  priceCandlesData: GetPriceCandlesQuery | undefined,\n  orderPositionData: GetOrderPositionBooksQuery | undefined,\n  hasValidCandles: boolean\n): Error | null => {\n  const hasValidPriceData =\n    (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;\n  const hasValidOrderData =\n    (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;\n\n  if (!hasValidPriceData) {\n    return new Error('Insufficient price candle data');\n  }\n  if (!hasValidOrderData) {\n    return new Error('Insufficient order position data');\n  }\n  if (!hasValidCandles) {\n    return new Error('Invalid candle data');\n  }\n\n  return null;\n};\n\nexport const useCrowdViewData = ({\n  instrument,\n  bookType,\n  division,\n  granularity,\n}: UseCrowdViewDataProps): UseCrowdViewDataReturn => {\n  const {\n    loading: priceCandlesLoading,\n    data: priceCandlesData,\n    error: priceCandlesError,\n  } = useQuery<GetPriceCandlesQuery, GetPriceCandlesQueryVariables>(\n    getPriceCandles,\n    {\n      variables: {\n        dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,\n        division,\n        instrument,\n        granularity,\n        timeSpan: getTimeSpanForGranularity(granularity),\n      },\n      fetchPolicy: 'no-cache',\n    }\n  );\n\n  const priceCandlesProcessed = useMemo(\n    () => processPriceCandles(priceCandlesData),\n    [priceCandlesData]\n  );\n\n  const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =\n    priceCandlesProcessed;\n\n  const maxBookPrice = useMemo(\n    () =>\n      maxPrice +\n      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,\n    [maxPrice]\n  );\n\n  const minBookPrice = useMemo(\n    () =>\n      minPrice -\n      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,\n    [minPrice]\n  );\n\n  const {\n    loading: orderPositionLoading,\n    data: orderPositionData,\n    error: orderPositionError,\n  } = useQuery<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>(\n    getOrderPositionBooks,\n    {\n      variables: {\n        instrument,\n        bookType: bookType || BookType.Order,\n        timeSpan: getTimeSpanForGranularity(granularity),\n        granularity,\n        maxBookPrice,\n        minBookPrice,\n      },\n      fetchPolicy: 'no-cache',\n      skip: priceCandlesLoading || !!priceCandlesError,\n    }\n  );\n\n  const loading = priceCandlesLoading || orderPositionLoading;\n\n  const orderPositionBooks = useMemo(\n    () => processOrderPositionBooks(orderPositionData, candleMap),\n    [orderPositionData, candleMap]\n  );\n\n  const buckets = useMemo(\n    () => processBuckets(orderPositionData),\n    [orderPositionData]\n  );\n\n  const error = useMemo((): Error | null => {\n    if (priceCandlesError) {\n      return new Error(`Price candles error: ${priceCandlesError.message}`);\n    }\n    if (orderPositionError) {\n      return new Error(`Order position error: ${orderPositionError.message}`);\n    }\n    if (loading) {\n      return null;\n    }\n    return validateData(priceCandlesData, orderPositionData, hasValidCandles);\n  }, [\n    priceCandlesError,\n    orderPositionError,\n    loading,\n    priceCandlesData,\n    orderPositionData,\n    hasValidCandles,\n  ]);\n\n  const data = useMemo(() => {\n    if (!priceCandlesData || !orderPositionData || error) {\n      return null;\n    }\n\n    const xAxisData = candles.map((candle) => candle?.point || '');\n    const candlesSeriesData: [number, number, number, number][] = candles.map(\n      (candle) => [\n        candle?.open || 0,\n        candle?.close || 0,\n        candle?.low || 0,\n        candle?.high || 0,\n      ]\n    );\n\n    return {\n      buckets,\n      xAxisData,\n      candlesSeriesData,\n      orderPositionBooks,\n      bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth || 0,\n    };\n  }, [\n    priceCandlesData,\n    orderPositionData,\n    error,\n    candles,\n    orderPositionBooks,\n    buckets,\n  ]);\n\n  return {\n    data,\n    loading,\n    error: !!error,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,94 @@
+import chroma from 'chroma-js';
+import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+import { BOOKS_THRESHOLDS, CHART_CONFIG, COLOR_MAP, TIME_THRESHOLDS } from '../../../constants';
+export const getLabelData = _ref => {
+  let {
+    xAxisData,
+    isGreaterThanTwoWeeks
+  } = _ref;
+  return xAxisData.filter((record, index, arr) => {
+    if (index === 0) {
+      return false;
+    }
+    const previousTimestamp = arr[index - 1];
+    const currentDate = new Date(record);
+    const previousDate = new Date(previousTimestamp);
+    return isGreaterThanTwoWeeks ? currentDate.getDate() !== previousDate.getDate() : currentDate.getMonth() !== previousDate.getMonth();
+  }).map(item => ({
+    name: new Date(item).toLocaleDateString(undefined, {
+      month: isGreaterThanTwoWeeks ? 'short' : 'long',
+      day: isGreaterThanTwoWeeks ? 'numeric' : undefined
+    }),
+    xAxis: item,
+    y: CHART_CONFIG.HEIGHT - 22,
+    silent: true,
+    emphasis: {
+      disabled: true
+    },
+    label: {
+      fontFamily: 'Sofia W03',
+      fontSize: 10,
+      position: 'bottom',
+      align: 'center',
+      formatter: '{b}'
+    }
+  }));
+};
+export const isDifferenceGreaterThanTwoWeeks = (startDate, endDate) => {
+  const date1 = new Date(startDate);
+  const date2 = new Date(endDate);
+  const differenceInMs = Math.abs(date2.getTime() - date1.getTime());
+  return differenceInMs < TIME_THRESHOLDS.TWO_WEEKS_MS;
+};
+export const getTimeSpanForGranularity = granularity => {
+  const granularityTimeSpanMap = {
+    [Granularity.M5]: TimeSpan.TwoDays,
+    [Granularity.M15]: TimeSpan.FiveDays,
+    [Granularity.H1]: TimeSpan.TwentyDays,
+    [Granularity.H4]: TimeSpan.NinetyDays
+  };
+  return granularityTimeSpanMap[granularity] || TimeSpan.TwoDays;
+};
+const getGradientColor = (value, startColor, targetColor) => {
+  const startThreshold = BOOKS_THRESHOLDS.MIN;
+  const endThreshold = BOOKS_THRESHOLDS.MAX;
+  const colorScale = chroma.scale([startColor, targetColor]).domain([startThreshold, endThreshold]).mode('rgb');
+  return colorScale(value).hex();
+};
+export const getRectColor = sentiment => sentiment < 0 ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1]) : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);
+export const getTooltipFormatter = (params, buckets, bucketWidth, selectedPrice, labelCallback) => {
+  var _booksParam$value;
+  const arr = params;
+  const candleParam = arr[0];
+  const booksParam = arr[1];
+  const time = new Date(candleParam.axisValue);
+  const candleData = candleParam.value;
+  const booksData = (_booksParam$value = booksParam === null || booksParam === void 0 ? void 0 : booksParam.value) !== null && _booksParam$value !== void 0 ? _booksParam$value : [];
+  const bucketsIndex = booksData[2];
+  const selectedBuckets = buckets[bucketsIndex];
+  const matchedBucket = selectedBuckets === null || selectedBuckets === void 0 ? void 0 : selectedBuckets.find(_ref2 => {
+    let {
+      price
+    } = _ref2;
+    return selectedPrice >= price && selectedPrice < price + bucketWidth;
+  });
+  const showCandles = !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
+  return "<p>".concat(time.toLocaleString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    year: 'numeric',
+    day: 'numeric',
+    month: 'numeric',
+    timeZoneName: 'short'
+  }), "</p><br />\n").concat(showCandles ? "<p><b>".concat(labelCallback('candle'), ":</b></p>\n<p>").concat(labelCallback('open_price'), ": ").concat(candleData[1], " </p>\n<p>").concat(labelCallback('close_price'), ": ").concat(candleData[2], " </p>\n<p>").concat(labelCallback('low'), ": ").concat(candleData[3], " </p>\n<p>").concat(labelCallback('high'), ": ").concat(candleData[4], " </p>\n") : '', "\n").concat(matchedBucket ? "<br /><p><b>".concat(labelCallback('orders'), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(matchedBucket.price, " - ").concat(Number(matchedBucket.price + bucketWidth).toFixed(4), " </p>\n<p>").concat(matchedBucket.sentiment < 0 ? labelCallback('sell_advantage') : labelCallback('buy_advantage'), ": ").concat(Math.abs(matchedBucket.sentiment), "% </p>") : '');
+};
+export const formatXAxisLabel = (value, isGreaterThanTwoWeeks) => {
+  const date = new Date(value);
+  return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit'
+  })) : "".concat(CHART_CONFIG.X_AXIS_DATE_PADDING).concat(date.toLocaleDateString(undefined, {
+    day: 'numeric'
+  })).concat(CHART_CONFIG.X_AXIS_DATE_PADDING);
+};
+//# sourceMappingURL=chartUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartUtils.js","names":["chroma","Granularity","TimeSpan","BOOKS_THRESHOLDS","CHART_CONFIG","COLOR_MAP","TIME_THRESHOLDS","getLabelData","_ref","xAxisData","isGreaterThanTwoWeeks","filter","record","index","arr","previousTimestamp","currentDate","Date","previousDate","getDate","getMonth","map","item","name","toLocaleDateString","undefined","month","day","xAxis","y","HEIGHT","silent","emphasis","disabled","label","fontFamily","fontSize","position","align","formatter","isDifferenceGreaterThanTwoWeeks","startDate","endDate","date1","date2","differenceInMs","Math","abs","getTime","TWO_WEEKS_MS","getTimeSpanForGranularity","granularity","granularityTimeSpanMap","M5","TwoDays","M15","FiveDays","H1","TwentyDays","H4","NinetyDays","getGradientColor","value","startColor","targetColor","startThreshold","MIN","endThreshold","MAX","colorScale","scale","domain","mode","hex","getRectColor","sentiment","short","long","getTooltipFormatter","params","buckets","bucketWidth","selectedPrice","labelCallback","_booksParam$value","candleParam","booksParam","time","axisValue","candleData","booksData","bucketsIndex","selectedBuckets","matchedBucket","find","_ref2","price","showCandles","concat","toLocaleString","hour","minute","year","timeZoneName","Number","toFixed","formatXAxisLabel","date","toLocaleTimeString","X_AXIS_DATE_PADDING"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n  BOOKS_THRESHOLDS,\n  CHART_CONFIG,\n  COLOR_MAP,\n  TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { GetLabelsDataProps } from '../types';\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: isGreaterThanTwoWeeks ? 'short' : 'long',\n        day: isGreaterThanTwoWeeks ? 'numeric' : undefined,\n      }),\n      xAxis: item,\n      y: CHART_CONFIG.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 differenceInMs = Math.abs(date2.getTime() - date1.getTime());\n\n  return differenceInMs < TIME_THRESHOLDS.TWO_WEEKS_MS;\n};\n\nexport const getTimeSpanForGranularity = (\n  granularity: Granularity\n): TimeSpan => {\n  const granularityTimeSpanMap: Record<Granularity, TimeSpan> = {\n    [Granularity.M5]: TimeSpan.TwoDays,\n    [Granularity.M15]: TimeSpan.FiveDays,\n    [Granularity.H1]: TimeSpan.TwentyDays,\n    [Granularity.H4]: TimeSpan.NinetyDays,\n  };\n\n  return granularityTimeSpanMap[granularity] || TimeSpan.TwoDays;\n};\n\nconst getGradientColor = (\n  value: number,\n  startColor: string,\n  targetColor: string\n): string => {\n  const startThreshold = BOOKS_THRESHOLDS.MIN;\n  const endThreshold = BOOKS_THRESHOLDS.MAX;\n\n  const colorScale = chroma\n    .scale([startColor, targetColor])\n    .domain([startThreshold, endThreshold])\n    .mode('rgb');\n\n  return colorScale(value).hex();\n};\n\nexport const getRectColor = (sentiment: number) =>\n  sentiment < 0\n    ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1])\n    : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);\n\nexport const getTooltipFormatter = (\n  params: unknown,\n  buckets: Array<Array<{ price: number; sentiment: number }>>,\n  bucketWidth: number,\n  selectedPrice: number,\n  labelCallback: (key: string) => string\n) => {\n  const arr = params as unknown as Array<Record<string, unknown>>;\n  const candleParam = arr[0] as {\n    axisValue: string;\n    value: [number, number, number, number, number];\n  };\n  const booksParam = arr[1] as { value: [string, number, number] };\n  const time = new Date(candleParam.axisValue as string);\n\n  const candleData = candleParam.value;\n  const booksData = booksParam?.value ?? [];\n  const bucketsIndex = booksData[2];\n  const selectedBuckets = buckets[bucketsIndex];\n\n  const matchedBucket = selectedBuckets?.find(\n    ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth\n  );\n  const showCandles =\n    !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];\n\n  return `<p>${time.toLocaleString(undefined, {\n    hour: '2-digit',\n    minute: '2-digit',\n    year: 'numeric',\n    day: 'numeric',\n    month: 'numeric',\n    timeZoneName: 'short',\n  })}</p><br />\n${\n  showCandles\n    ? `<p><b>${labelCallback('candle')}:</b></p>\n<p>${labelCallback('open_price')}: ${candleData[1]} </p>\n<p>${labelCallback('close_price')}: ${candleData[2]} </p>\n<p>${labelCallback('low')}: ${candleData[3]} </p>\n<p>${labelCallback('high')}: ${candleData[4]} </p>\n`\n    : ''\n}\n${\n  matchedBucket\n    ? `<br /><p><b>${labelCallback('orders')}:</b></p>\n<p>${labelCallback('price_range')}: ${matchedBucket.price} - ${Number(matchedBucket.price + bucketWidth).toFixed(4)} </p>\n<p>${matchedBucket.sentiment < 0 ? labelCallback('sell_advantage') : labelCallback('buy_advantage')}: ${Math.abs(matchedBucket.sentiment)}% </p>`\n    : ''\n}`;\n};\n\nexport const formatXAxisLabel = (\n  value: unknown,\n  isGreaterThanTwoWeeks: boolean\n) => {\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    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {\n        day: 'numeric',\n      })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,10 +1,11 @@
 import { useLocale } from '@oanda/mono-i18n';
 import React from 'react';
+import { BOOKS_THRESHOLDS } from '../../constants';
 import { LegendBar } from './LegendBar';
 export const Legend = _ref => {
   let {
-    longValues,
-    shortValues
+    longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
+    shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX]
   } = _ref;
   const {
     lang

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","names":["useLocale","React","LegendBar","Legend","_ref","longValues","shortValues","lang","createElement","className","label","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues: number[];\n  shortValues: number[];\n}\n\nexport const Legend = ({ longValues, shortValues }: LegendProps) => {\n  const { lang } = useLocale();\n\n  return (\n    <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl\">\n      <LegendBar label={lang('long')} type=\"long\" values={longValues} />\n      <LegendBar label={lang('short')} type=\"short\" values={shortValues} />\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,aAAa;AAOvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAA8C;EAAA,IAA7C;IAAEC,UAAU;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG;EAAK,CAAC,GAAGP,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAA6G,GAC1HR,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACQ,KAAK,EAAEH,IAAI,CAAC,MAAM,CAAE;IAACI,IAAI,EAAC,MAAM;IAACC,MAAM,EAAEP;EAAW,CAAE,CAAC,EAClEJ,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACQ,KAAK,EAAEH,IAAI,CAAC,OAAO,CAAE;IAACI,IAAI,EAAC,OAAO;IAACC,MAAM,EAAEN;EAAY,CAAE,CACjE,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"Legend.js","names":["useLocale","React","BOOKS_THRESHOLDS","LegendBar","Legend","_ref","longValues","MIN","MAX","shortValues","lang","createElement","className","label","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues?: [number, number];\n  shortValues?: [number, number];\n}\n\nexport const Legend = ({\n  longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n  shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n}: LegendProps) => {\n  const { lang } = useLocale();\n\n  return (\n    <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl\">\n      <LegendBar label={lang('long')} type=\"long\" values={longValues} />\n      <LegendBar label={lang('short')} type=\"short\" values={shortValues} />\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,SAAS,QAAQ,aAAa;AAOvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAGH;EAAA,IAHI;IACrBC,UAAU,GAAG,CAACJ,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IACzDC,WAAW,GAAG,CAACP,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG;EAC9C,CAAC,GAAAH,IAAA;EACZ,MAAM;IAAEK;EAAK,CAAC,GAAGV,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAA6G,GAC1HX,KAAA,CAAAU,aAAA,CAACR,SAAS;IAACU,KAAK,EAAEH,IAAI,CAAC,MAAM,CAAE;IAACI,IAAI,EAAC,MAAM;IAACC,MAAM,EAAET;EAAW,CAAE,CAAC,EAClEL,KAAA,CAAAU,aAAA,CAACR,SAAS;IAACU,KAAK,EAAEH,IAAI,CAAC,OAAO,CAAE;IAACI,IAAI,EAAC,OAAO;IAACC,MAAM,EAAEN;EAAY,CAAE,CACjE,CAAC;AAEV,CAAC","ignoreList":[]}