@oanda/labs-crowd-view-widget 1.0.46 → 1.0.48

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

@@ -3,10 +3,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 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 { colorPalette, getGridLines, getLineCommons, themeColors } from '@oanda/labs-widget-common';
 import { CHART_CONFIG } from '../../constants';
 import { formatXAxisLabel, getLabelData, getRectColor, getTooltipFormatter, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
-export const getOption = (_ref, isDark, labelCallback) => {
+export const getOption = (_ref, isDark, isDesktop, labelCallback) => {
   let {
     xAxisData,
     candlesSeriesData,
@@ -28,7 +28,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
     chartWidth: CHART_CONFIG.WIDTH,
     chartHeight: CHART_CONFIG.HEIGHT,
     xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
-    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
+    yLabelSize: isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,
     bottomLeftBox: false
   });
   return {
@@ -44,6 +44,9 @@ export const getOption = (_ref, isDark, labelCallback) => {
       axisPointer: {
         type: 'cross',
         axis: 'x',
+        crossStyle: {
+          color: isDark ? colorPalette.orange : themeColors.borderPrimary.light
+        },
         label: {
           formatter: params => {
             if (params.axisDimension === 'y') {
@@ -101,6 +104,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
       axisLabel: {
         showMaxLabel: false,
         showMinLabel: false,
+        margin: isDesktop ? 4 : 2,
         formatter: value => value.toFixed(precision - 1)
       }
     },
@@ -109,8 +113,10 @@ export const getOption = (_ref, isDark, labelCallback) => {
       id: 'candlestick',
       data: candlesSeriesData,
       itemStyle: {
-        color: colorPalette.raspberryLight,
-        color0: colorPalette.bottleGreenLight
+        color: isDark ? colorPalette.orange : colorPalette.raspberryLight,
+        color0: isDark ? colorPalette.bottleGreenDark : colorPalette.bottleGreenLight,
+        borderColor: isDark ? colorPalette.orange : colorPalette.raspberryLight,
+        borderColor0: isDark ? colorPalette.bottleGreenDark : colorPalette.bottleGreenLight
       },
       markPoint: {
         symbol: 'circle',
@@ -143,7 +149,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
               height: rectHeight
             },
             style: {
-              fill: getRectColor(sentiment)
+              fill: getRectColor(sentiment, isDark)
             },
             silent: true,
             emphasisDisabled: true
@@ -162,7 +168,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
       name: 'main-grid',
       top: '0px',
       left: '0px',
-      right: "".concat(CHART_CONFIG.Y_LABEL_SIZE_DESKTOP, "px"),
+      right: "".concat(isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE, "px"),
       bottom: "".concat(CHART_CONFIG.X_LABEL_SIZE, "px")
     }],
     graphic: [...gridLines, _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {

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

@@ -1 +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","precision","bookType","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 { Bucket, 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  {\n    xAxisData,\n    candlesSeriesData,\n    orderPositionBooks,\n    bucketWidth,\n    buckets,\n    precision,\n    bookType,\n  },\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(precision);\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          precision,\n          bookType,\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        formatter: (value: number) => value.toFixed(precision - 1),\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\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(({ price, sentiment }: Bucket) => {\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 + 1,\n                height: rectHeight,\n              },\n              style: {\n                fill: getRectColor(sentiment),\n              },\n              silent: true,\n              emphasisDisabled: true,\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":[]}
+{"version":3,"file":"chartOptions.js","names":["colorPalette","getGridLines","getLineCommons","themeColors","CHART_CONFIG","formatXAxisLabel","getLabelData","getRectColor","getTooltipFormatter","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","isDesktop","labelCallback","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","buckets","precision","bookType","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","Y_LABEL_SIZE_MOBILE","bottomLeftBox","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","axisPointer","axis","crossStyle","color","orange","borderPrimary","light","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","raspberryLight","color0","bottleGreenDark","bottleGreenLight","borderColor","borderColor0","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  themeColors,\n} from '@oanda/labs-widget-common';\n\nimport { CHART_CONFIG } from '../../constants';\nimport type { Bucket, 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  {\n    xAxisData,\n    candlesSeriesData,\n    orderPositionBooks,\n    bucketWidth,\n    buckets,\n    precision,\n    bookType,\n  },\n  isDark,\n  isDesktop,\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: isDesktop\n      ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n      : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,\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        crossStyle: {\n          color: isDark ? colorPalette.orange : themeColors.borderPrimary.light,\n        },\n        label: {\n          formatter: (params) => {\n            if (params.axisDimension === 'y') {\n              selectedPrice = Number(params.value);\n              return Number(params.value).toFixed(precision);\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          precision,\n          bookType,\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        margin: isDesktop ? 4 : 2,\n        formatter: (value: number) => value.toFixed(precision - 1),\n      },\n    },\n    series: [\n      {\n        type: 'candlestick',\n        id: 'candlestick',\n        data: candlesSeriesData,\n        itemStyle: {\n          color: isDark ? colorPalette.orange : colorPalette.raspberryLight,\n          color0: isDark\n            ? colorPalette.bottleGreenDark\n            : colorPalette.bottleGreenLight,\n          borderColor: isDark\n            ? colorPalette.orange\n            : colorPalette.raspberryLight,\n          borderColor0: isDark\n            ? colorPalette.bottleGreenDark\n            : colorPalette.bottleGreenLight,\n        },\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(({ price, sentiment }: Bucket) => {\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 + 1,\n                height: rectHeight,\n              },\n              style: {\n                fill: getRectColor(sentiment, isDark),\n              },\n              silent: true,\n              emphasisDisabled: true,\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: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}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/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 {\n  BookType,\n  Division,\n  Granularity,\n} from '../../../gql/types/graphql';\nimport type { InstrumentId } from '../../types';\n\nexport interface Bucket {\n  price: number;\n  sentiment: number;\n}\n\nexport interface UseCrowdViewDataProps {\n  instrument: InstrumentId;\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 | null, number][];\n  bucketWidth: number;\n  buckets: Bucket[][];\n  precision: number;\n  bookType: BookType;\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: InstrumentId;\n  granularity: Granularity;\n}\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';\nimport type { InstrumentId } from '../../types';\n\nexport interface Bucket {\n  price: number;\n  sentiment: number;\n}\n\nexport interface UseCrowdViewDataProps {\n  instrument: InstrumentId;\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 | null, number][];\n  bucketWidth: number;\n  buckets: Bucket[][];\n  precision: number;\n  bookType: BookType;\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  isDesktop: boolean,\n  labelCallback: (key: string, params?: Record<string, unknown>) => string\n) => EChartsOption;\n\nexport interface ChartProps {\n  data: CrowdViewData;\n  isDesktop: boolean;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  division: Division;\n  instrument: InstrumentId;\n  granularity: Granularity;\n}\n\nexport interface GetLabelsDataProps {\n  xAxisData: string[];\n  isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -55,7 +55,10 @@ const getGradientColor = (value, startColor, targetColor) => {
   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 getRectColor = (sentiment, isDark) => {
+  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+  return sentiment < 0 ? getGradientColor(sentiment * -1, colorPalette.short[0], colorPalette.short[1]) : getGradientColor(sentiment, colorPalette.long[0], colorPalette.long[1]);
+};
 export const getTooltipFormatter = _ref2 => {
   var _booksParam$value;
   let {
@@ -95,7 +98,7 @@ export const getTooltipFormatter = _ref2 => {
     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(bookType === BookType.Order ? 'orders' : 'positions'), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(matchedBucket.price.toFixed(precision - 1), " - ").concat(Number(matchedBucket.price + bucketWidth).toFixed(precision - 1), " </p>\n<p>").concat(matchedBucket.sentiment < 0 ? labelCallback(bookType === BookType.Order ? 'sell_advantage' : 'short_advantage') : labelCallback(bookType === BookType.Order ? 'buy_advantage' : 'long_advantage'), ": ").concat(Math.abs(matchedBucket.sentiment), "% </p>") : '');
+  }), "</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(bookType === BookType.Order ? 'orders' : 'positions'), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(matchedBucket.price.toFixed(precision - 1), " - ").concat(Number(matchedBucket.price + bucketWidth).toFixed(precision - 1), " </p>\n<p>").concat(matchedBucket.sentiment < 0 ? labelCallback(bookType === BookType.Order ? 'sell_overbalance' : 'short_overbalance') : labelCallback(bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance'), ": ").concat(Math.abs(matchedBucket.sentiment), "% </p>") : '');
 };
 export const formatXAxisLabel = (value, isGreaterThanTwoWeeks) => {
   const date = new Date(value);

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

@@ -1 +1 @@
-{"version":3,"file":"chartUtils.js","names":["chroma","BookType","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","_ref2","_booksParam$value","params","buckets","bucketWidth","selectedPrice","precision","bookType","labelCallback","Array","isArray","length","candleParam","booksParam","time","axisValue","candleData","booksData","bucketsIndex","selectedBuckets","matchedBucket","find","_ref3","price","showCandles","concat","toLocaleString","hour","minute","year","timeZoneName","Order","toFixed","Number","formatXAxisLabel","date","toLocaleTimeString","X_AXIS_DATE_PADDING"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n  BOOKS_THRESHOLDS,\n  CHART_CONFIG,\n  COLOR_MAP,\n  TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { Bucket, 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,\n  buckets,\n  bucketWidth,\n  selectedPrice,\n  precision,\n  bookType,\n  labelCallback,\n}: {\n  params: unknown;\n  buckets: Bucket[][];\n  bucketWidth: number;\n  selectedPrice: number;\n  precision: number;\n  bookType: BookType;\n  labelCallback: (key: string) => string;\n}) => {\n  const arr = params as unknown as Array<Record<string, unknown>>;\n  if (!arr || !Array.isArray(arr) || arr.length === 0) {\n    return undefined;\n  }\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  if (!showCandles && !matchedBucket) {\n    return undefined;\n  }\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(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>\n<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>\n<p>${\n        matchedBucket.sentiment < 0\n          ? labelCallback(\n              bookType === BookType.Order ? 'sell_advantage' : 'short_advantage'\n            )\n          : labelCallback(\n              bookType === BookType.Order ? 'buy_advantage' : 'long_advantage'\n            )\n      }: ${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":"AAAA,OAAOA,MAAM,MAAM,WAAW;AAE9B,SAASC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,+BAA+B;AAC/E,SACEC,gBAAgB,EAChBC,YAAY,EACZC,SAAS,EACTC,eAAe,QACV,oBAAoB;AAG3B,OAAO,MAAMC,YAAY,GAAGC,IAAA;EAAA,IAAC;IAC3BC,SAAS;IACTC;EACkB,CAAC,GAAAF,IAAA;EAAA,OACnBC,SAAS,CACNE,MAAM,CAAC,CAACC,MAAM,EAAEC,KAAK,EAAEC,GAAG,KAAK;IAC9B,IAAID,KAAK,KAAK,CAAC,EAAE;MACf,OAAO,KAAK;IACd;IACA,MAAME,iBAAiB,GAAGD,GAAG,CAACD,KAAK,GAAG,CAAC,CAAC;IACxC,MAAMG,WAAW,GAAG,IAAIC,IAAI,CAACL,MAAM,CAAC;IACpC,MAAMM,YAAY,GAAG,IAAID,IAAI,CAACF,iBAAiB,CAAC;IAEhD,OAAOL,qBAAqB,GACxBM,WAAW,CAACG,OAAO,CAAC,CAAC,KAAKD,YAAY,CAACC,OAAO,CAAC,CAAC,GAChDH,WAAW,CAACI,QAAQ,CAAC,CAAC,KAAKF,YAAY,CAACE,QAAQ,CAAC,CAAC;EACxD,CAAC,CAAC,CACDC,GAAG,CAAEC,IAAI,KAAM;IACdC,IAAI,EAAE,IAAIN,IAAI,CAACK,IAAI,CAAC,CAACE,kBAAkB,CAACC,SAAS,EAAE;MACjDC,KAAK,EAAEhB,qBAAqB,GAAG,OAAO,GAAG,MAAM;MAC/CiB,GAAG,EAAEjB,qBAAqB,GAAG,SAAS,GAAGe;IAC3C,CAAC,CAAC;IACFG,KAAK,EAAEN,IAAI;IACXO,CAAC,EAAEzB,YAAY,CAAC0B,MAAM,GAAG,EAAE;IAC3BC,MAAM,EAAE,IAAI;IACZC,QAAQ,EAAE;MACRC,QAAQ,EAAE;IACZ,CAAC;IACDC,KAAK,EAAE;MACLC,UAAU,EAAE,WAAW;MACvBC,QAAQ,EAAE,EAAE;MACZC,QAAQ,EAAE,QAAQ;MAClBC,KAAK,EAAE,QAAQ;MACfC,SAAS,EAAE;IACb;EACF,CAAC,CAAC,CAAC;AAAA;AAEP,OAAO,MAAMC,+BAA+B,GAAGA,CAC7CC,SAAiB,EACjBC,OAAe,KACZ;EACH,MAAMC,KAAK,GAAG,IAAI1B,IAAI,CAACwB,SAAS,CAAC;EACjC,MAAMG,KAAK,GAAG,IAAI3B,IAAI,CAACyB,OAAO,CAAC;EAE/B,MAAMG,cAAc,GAAGC,IAAI,CAACC,GAAG,CAACH,KAAK,CAACI,OAAO,CAAC,CAAC,GAAGL,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;EAElE,OAAOH,cAAc,GAAGvC,eAAe,CAAC2C,YAAY;AACtD,CAAC;AAED,OAAO,MAAMC,yBAAyB,GACpCC,WAAwB,IACX;EACb,MAAMC,sBAAqD,GAAG;IAC5D,CAACnD,WAAW,CAACoD,EAAE,GAAGnD,QAAQ,CAACoD,OAAO;IAClC,CAACrD,WAAW,CAACsD,GAAG,GAAGrD,QAAQ,CAACsD,QAAQ;IACpC,CAACvD,WAAW,CAACwD,EAAE,GAAGvD,QAAQ,CAACwD,UAAU;IACrC,CAACzD,WAAW,CAAC0D,EAAE,GAAGzD,QAAQ,CAAC0D;EAC7B,CAAC;EAED,OAAOR,sBAAsB,CAACD,WAAW,CAAC,IAAIjD,QAAQ,CAACoD,OAAO;AAChE,CAAC;AAED,MAAMO,gBAAgB,GAAGA,CACvBC,KAAa,EACbC,UAAkB,EAClBC,WAAmB,KACR;EACX,MAAMC,cAAc,GAAG9D,gBAAgB,CAAC+D,GAAG;EAC3C,MAAMC,YAAY,GAAGhE,gBAAgB,CAACiE,GAAG;EAEzC,MAAMC,UAAU,GAAGtE,MAAM,CACtBuE,KAAK,CAAC,CAACP,UAAU,EAAEC,WAAW,CAAC,CAAC,CAChCO,MAAM,CAAC,CAACN,cAAc,EAAEE,YAAY,CAAC,CAAC,CACtCK,IAAI,CAAC,KAAK,CAAC;EAEd,OAAOH,UAAU,CAACP,KAAK,CAAC,CAACW,GAAG,CAAC,CAAC;AAChC,CAAC;AAED,OAAO,MAAMC,YAAY,GAAIC,SAAiB,IAC5CA,SAAS,GAAG,CAAC,GACTd,gBAAgB,CAACc,SAAS,GAAG,CAAC,CAAC,EAAEtE,SAAS,CAACuE,KAAK,CAAC,CAAC,CAAC,EAAEvE,SAAS,CAACuE,KAAK,CAAC,CAAC,CAAC,CAAC,GACxEf,gBAAgB,CAACc,SAAS,EAAEtE,SAAS,CAACwE,IAAI,CAAC,CAAC,CAAC,EAAExE,SAAS,CAACwE,IAAI,CAAC,CAAC,CAAC,CAAC;AAEvE,OAAO,MAAMC,mBAAmB,GAAGC,KAAA,IAgB7B;EAAA,IAAAC,iBAAA;EAAA,IAhB8B;IAClCC,MAAM;IACNC,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,SAAS;IACTC,QAAQ;IACRC;EASF,CAAC,GAAAR,KAAA;EACC,MAAMjE,GAAG,GAAGmE,MAAmD;EAC/D,IAAI,CAACnE,GAAG,IAAI,CAAC0E,KAAK,CAACC,OAAO,CAAC3E,GAAG,CAAC,IAAIA,GAAG,CAAC4E,MAAM,KAAK,CAAC,EAAE;IACnD,OAAOjE,SAAS;EAClB;EACA,MAAMkE,WAAW,GAAG7E,GAAG,CAAC,CAAC,CAGxB;EACD,MAAM8E,UAAU,GAAG9E,GAAG,CAAC,CAAC,CAAwC;EAChE,MAAM+E,IAAI,GAAG,IAAI5E,IAAI,CAAC0E,WAAW,CAACG,SAAmB,CAAC;EAEtD,MAAMC,UAAU,GAAGJ,WAAW,CAAC7B,KAAK;EACpC,MAAMkC,SAAS,IAAAhB,iBAAA,GAAGY,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAE9B,KAAK,cAAAkB,iBAAA,cAAAA,iBAAA,GAAI,EAAE;EACzC,MAAMiB,YAAY,GAAGD,SAAS,CAAC,CAAC,CAAC;EACjC,MAAME,eAAe,GAAGhB,OAAO,CAACe,YAAY,CAAC;EAE7C,MAAME,aAAa,GAAGD,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEE,IAAI,CACzCC,KAAA;IAAA,IAAC;MAAEC;IAAM,CAAC,GAAAD,KAAA;IAAA,OAAKjB,aAAa,IAAIkB,KAAK,IAAIlB,aAAa,GAAGkB,KAAK,GAAGnB,WAAW;EAAA,CAC9E,CAAC;EACD,MAAMoB,WAAW,GACf,CAAC,CAACR,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAACA,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAACA,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAACA,UAAU,CAAC,CAAC,CAAC;EAE1E,IAAI,CAACQ,WAAW,IAAI,CAACJ,aAAa,EAAE;IAClC,OAAO1E,SAAS;EAClB;EAEA,aAAA+E,MAAA,CAAaX,IAAI,CAACY,cAAc,CAAChF,SAAS,EAAE;IAC1CiF,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,IAAI,EAAE,SAAS;IACfjF,GAAG,EAAE,SAAS;IACdD,KAAK,EAAE,SAAS;IAChBmF,YAAY,EAAE;EAChB,CAAC,CAAC,kBAAAL,MAAA,CAEFD,WAAW,YAAAC,MAAA,CACEjB,aAAa,CAAC,QAAQ,CAAC,oBAAAiB,MAAA,CACjCjB,aAAa,CAAC,YAAY,CAAC,QAAAiB,MAAA,CAAKT,UAAU,CAAC,CAAC,CAAC,gBAAAS,MAAA,CAC7CjB,aAAa,CAAC,aAAa,CAAC,QAAAiB,MAAA,CAAKT,UAAU,CAAC,CAAC,CAAC,gBAAAS,MAAA,CAC9CjB,aAAa,CAAC,KAAK,CAAC,QAAAiB,MAAA,CAAKT,UAAU,CAAC,CAAC,CAAC,gBAAAS,MAAA,CACtCjB,aAAa,CAAC,MAAM,CAAC,QAAAiB,MAAA,CAAKT,UAAU,CAAC,CAAC,CAAC,eAEtC,EAAE,QAAAS,MAAA,CAGNL,aAAa,kBAAAK,MAAA,CACMjB,aAAa,CAACD,QAAQ,KAAKtF,QAAQ,CAAC8G,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC,oBAAAN,MAAA,CACnFjB,aAAa,CAAC,aAAa,CAAC,QAAAiB,MAAA,CAAKL,aAAa,CAACG,KAAK,CAACS,OAAO,CAAC1B,SAAS,GAAG,CAAC,CAAC,SAAAmB,MAAA,CAAMQ,MAAM,CAACb,aAAa,CAACG,KAAK,GAAGnB,WAAW,CAAC,CAAC4B,OAAO,CAAC1B,SAAS,GAAG,CAAC,CAAC,gBAAAmB,MAAA,CAE9IL,aAAa,CAACxB,SAAS,GAAG,CAAC,GACvBY,aAAa,CACXD,QAAQ,KAAKtF,QAAQ,CAAC8G,KAAK,GAAG,gBAAgB,GAAG,iBACnD,CAAC,GACDvB,aAAa,CACXD,QAAQ,KAAKtF,QAAQ,CAAC8G,KAAK,GAAG,eAAe,GAAG,gBAClD,CAAC,QAAAN,MAAA,CACF1D,IAAI,CAACC,GAAG,CAACoD,aAAa,CAACxB,SAAS,CAAC,cACtC,EAAE;AAER,CAAC;AAED,OAAO,MAAMsC,gBAAgB,GAAGA,CAC9BnD,KAAc,EACdpD,qBAA8B,KAC3B;EACH,MAAMwG,IAAI,GAAG,IAAIjG,IAAI,CAAC6C,KAAe,CAAC;EACtC,OAAOpD,qBAAqB,MAAA8F,MAAA,CACrBU,IAAI,CAACC,kBAAkB,CAAC1F,SAAS,EAAE;IACpCiF,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC,CAAC,OAAAH,MAAA,CACCpG,YAAY,CAACgH,mBAAmB,EAAAZ,MAAA,CAAGU,IAAI,CAAC1F,kBAAkB,CAACC,SAAS,EAAE;IACvEE,GAAG,EAAE;EACP,CAAC,CAAC,EAAA6E,MAAA,CAAGpG,YAAY,CAACgH,mBAAmB,CAAE;AAC7C,CAAC","ignoreList":[]}
+{"version":3,"file":"chartUtils.js","names":["chroma","BookType","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","isDark","colorPalette","dark","light","short","long","getTooltipFormatter","_ref2","_booksParam$value","params","buckets","bucketWidth","selectedPrice","precision","bookType","labelCallback","Array","isArray","length","candleParam","booksParam","time","axisValue","candleData","booksData","bucketsIndex","selectedBuckets","matchedBucket","find","_ref3","price","showCandles","concat","toLocaleString","hour","minute","year","timeZoneName","Order","toFixed","Number","formatXAxisLabel","date","toLocaleTimeString","X_AXIS_DATE_PADDING"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n  BOOKS_THRESHOLDS,\n  CHART_CONFIG,\n  COLOR_MAP,\n  TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { Bucket, 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, isDark: boolean) => {\n  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;\n\n  return sentiment < 0\n    ? getGradientColor(\n        sentiment * -1,\n        colorPalette.short[0],\n        colorPalette.short[1]\n      )\n    : getGradientColor(sentiment, colorPalette.long[0], colorPalette.long[1]);\n};\n\nexport const getTooltipFormatter = ({\n  params,\n  buckets,\n  bucketWidth,\n  selectedPrice,\n  precision,\n  bookType,\n  labelCallback,\n}: {\n  params: unknown;\n  buckets: Bucket[][];\n  bucketWidth: number;\n  selectedPrice: number;\n  precision: number;\n  bookType: BookType;\n  labelCallback: (key: string) => string;\n}) => {\n  const arr = params as unknown as Array<Record<string, unknown>>;\n  if (!arr || !Array.isArray(arr) || arr.length === 0) {\n    return undefined;\n  }\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  if (!showCandles && !matchedBucket) {\n    return undefined;\n  }\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(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>\n<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>\n<p>${\n        matchedBucket.sentiment < 0\n          ? labelCallback(\n              bookType === BookType.Order\n                ? 'sell_overbalance'\n                : 'short_overbalance'\n            )\n          : labelCallback(\n              bookType === BookType.Order\n                ? 'buy_overbalance'\n                : 'long_overbalance'\n            )\n      }: ${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

@@ -7,18 +7,21 @@ export const Legend = _ref => {
   let {
     longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
     shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
-    bookType
+    bookType,
+    isDark
   } = _ref;
   const {
     lang
   } = useLocale();
   return React.createElement("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"
+    className: "lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl"
   }, React.createElement(LegendBar, {
+    isDark: isDark,
     label: lang(bookType === BookType.Order ? 'buy' : 'long'),
     type: "long",
     values: longValues
   }), React.createElement(LegendBar, {
+    isDark: isDark,
     label: lang(bookType === BookType.Order ? 'sell' : 'short'),
     type: "short",
     values: shortValues

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","names":["useLocale","React","BookType","BOOKS_THRESHOLDS","LegendBar","Legend","_ref","longValues","MIN","MAX","shortValues","bookType","lang","createElement","className","label","Order","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues?: [number, number];\n  shortValues?: [number, number];\n  bookType: BookType;\n}\n\nexport const Legend = ({\n  longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n  shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n  bookType,\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\n        label={lang(bookType === BookType.Order ? 'buy' : 'long')}\n        type=\"long\"\n        values={longValues}\n      />\n      <LegendBar\n        label={lang(bookType === BookType.Order ? 'sell' : 'short')}\n        type=\"short\"\n        values={shortValues}\n      />\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,SAAS,QAAQ,aAAa;AAQvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAIH;EAAA,IAJI;IACrBC,UAAU,GAAG,CAACJ,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IACzDC,WAAW,GAAG,CAACP,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IAC1DE;EACW,CAAC,GAAAL,IAAA;EACZ,MAAM;IAAEM;EAAK,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAC;EAA6G,GAC1Hb,KAAA,CAAAY,aAAA,CAACT,SAAS;IACRW,KAAK,EAAEH,IAAI,CAACD,QAAQ,KAAKT,QAAQ,CAACc,KAAK,GAAG,KAAK,GAAG,MAAM,CAAE;IAC1DC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAEX;EAAW,CACpB,CAAC,EACFN,KAAA,CAAAY,aAAA,CAACT,SAAS;IACRW,KAAK,EAAEH,IAAI,CAACD,QAAQ,KAAKT,QAAQ,CAACc,KAAK,GAAG,MAAM,GAAG,OAAO,CAAE;IAC5DC,IAAI,EAAC,OAAO;IACZC,MAAM,EAAER;EAAY,CACrB,CACE,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"Legend.js","names":["useLocale","React","BookType","BOOKS_THRESHOLDS","LegendBar","Legend","_ref","longValues","MIN","MAX","shortValues","bookType","isDark","lang","createElement","className","label","Order","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues?: [number, number];\n  shortValues?: [number, number];\n  bookType: BookType;\n  isDark: boolean;\n}\n\nexport const Legend = ({\n  longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n  shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n  bookType,\n  isDark,\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-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl\">\n      <LegendBar\n        isDark={isDark}\n        label={lang(bookType === BookType.Order ? 'buy' : 'long')}\n        type=\"long\"\n        values={longValues}\n      />\n      <LegendBar\n        isDark={isDark}\n        label={lang(bookType === BookType.Order ? 'sell' : 'short')}\n        type=\"short\"\n        values={shortValues}\n      />\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,SAAS,QAAQ,aAAa;AASvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAKH;EAAA,IALI;IACrBC,UAAU,GAAG,CAACJ,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IACzDC,WAAW,GAAG,CAACP,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IAC1DE,QAAQ;IACRC;EACW,CAAC,GAAAN,IAAA;EACZ,MAAM;IAAEO;EAAK,CAAC,GAAGb,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAqH,GAClId,KAAA,CAAAa,aAAA,CAACV,SAAS;IACRQ,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAEH,IAAI,CAACF,QAAQ,KAAKT,QAAQ,CAACe,KAAK,GAAG,KAAK,GAAG,MAAM,CAAE;IAC1DC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAEZ;EAAW,CACpB,CAAC,EACFN,KAAA,CAAAa,aAAA,CAACV,SAAS;IACRQ,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAEH,IAAI,CAACF,QAAQ,KAAKT,QAAQ,CAACe,KAAK,GAAG,MAAM,GAAG,OAAO,CAAE;IAC5DC,IAAI,EAAC,OAAO;IACZC,MAAM,EAAET;EAAY,CACrB,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -4,12 +4,16 @@ export const LegendBar = _ref => {
   let {
     values,
     type,
-    label
+    label,
+    isDark
   } = _ref;
-  const colors = COLOR_MAP[type];
+  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+  const colors = type === 'long' ? colorPalette.long : colorPalette.short;
   return React.createElement("div", {
     className: "lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary"
-  }, React.createElement("div", {
+  }, React.createElement("span", {
+    className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
+  }, label), React.createElement("div", {
     className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary"
   }, React.createElement("div", {
     className: "lw-h-full lw-flex-1",
@@ -21,8 +25,8 @@ export const LegendBar = _ref => {
     className: "lw-flex lw-w-full lw-justify-between"
   }, React.createElement("span", {
     className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
-  }, values[0].toFixed(2), "% ", label), React.createElement("span", {
+  }, values[0].toFixed(2), "%"), React.createElement("span", {
     className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
-  }, values[1].toFixed(2), "% ", label)));
+  }, "\u2264 ".concat(values[1].toFixed(2)), "%")));
 };
 //# sourceMappingURL=LegendBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LegendBar.js","names":["React","COLOR_MAP","LegendBar","_ref","values","type","label","colors","createElement","className","style","background","concat","toFixed"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n  values: number[];\n  type: LegendType;\n  label: string;\n}\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n  const colors = COLOR_MAP[type];\n\n  return (\n    <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n      <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n        <div\n          className=\"lw-h-full lw-flex-1\"\n          data-testid=\"legend-bar-segment\"\n          style={{\n            background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,\n          }}\n        />\n      </div>\n\n      <div className=\"lw-flex lw-w-full lw-justify-between\">\n        <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n          {values[0].toFixed(2)}% {label}\n        </span>\n        <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n          {values[1].toFixed(2)}% {label}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,iBAAiB;AAU3C,OAAO,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAH,IAAA;EAC/D,MAAMI,MAAM,GAAGN,SAAS,CAACI,IAAI,CAAC;EAE9B,OACEL,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAqE,GAClFT,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAgF,GAC7FT,KAAA,CAAAQ,aAAA;IACEC,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,2BAAAC,MAAA,CAA2BL,MAAM,CAAC,CAAC,CAAC,WAAAK,MAAA,CAAQL,MAAM,CAAC,CAAC,CAAC;IACjE;EAAE,CACH,CACE,CAAC,EAENP,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAsC,GACnDT,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFL,MAAM,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,CAAC,CAAC,EAAC,IAAE,EAACP,KACrB,CAAC,EACPN,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFL,MAAM,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,CAAC,CAAC,EAAC,IAAE,EAACP,KACrB,CACH,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"LegendBar.js","names":["React","COLOR_MAP","LegendBar","_ref","values","type","label","isDark","colorPalette","dark","light","colors","long","short","createElement","className","style","background","concat","toFixed"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n  values: number[];\n  type: LegendType;\n  label: string;\n  isDark: boolean;\n}\n\nexport const LegendBar = ({ values, type, label, isDark }: LegendBarProps) => {\n  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;\n  const colors = type === 'long' ? colorPalette.long : colorPalette.short;\n\n  return (\n    <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n      <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n        {label}\n      </span>\n      <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n        <div\n          className=\"lw-h-full lw-flex-1\"\n          data-testid=\"legend-bar-segment\"\n          style={{\n            background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,\n          }}\n        />\n      </div>\n\n      <div className=\"lw-flex lw-w-full lw-justify-between\">\n        <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n          {values[0].toFixed(2)}%\n        </span>\n        <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n          {`≤ ${values[1].toFixed(2)}`}%\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,iBAAiB;AAW3C,OAAO,MAAMC,SAAS,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EAAuB,CAAC,GAAAJ,IAAA;EACvE,MAAMK,YAAY,GAAGD,MAAM,GAAGN,SAAS,CAACQ,IAAI,GAAGR,SAAS,CAACS,KAAK;EAC9D,MAAMC,MAAM,GAAGN,IAAI,KAAK,MAAM,GAAGG,YAAY,CAACI,IAAI,GAAGJ,YAAY,CAACK,KAAK;EAEvE,OACEb,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAC;EAAqE,GAClFf,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFT,KACG,CAAC,EACPN,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAC;EAAgF,GAC7Ff,KAAA,CAAAc,aAAA;IACEC,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,2BAAAC,MAAA,CAA2BP,MAAM,CAAC,CAAC,CAAC,WAAAO,MAAA,CAAQP,MAAM,CAAC,CAAC,CAAC;IACjE;EAAE,CACH,CACE,CAAC,EAENX,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAC;EAAsC,GACnDf,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFX,MAAM,CAAC,CAAC,CAAC,CAACe,OAAO,CAAC,CAAC,CAAC,EAAC,GAClB,CAAC,EACPnB,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAC;EAAmE,aAAAG,MAAA,CAC3Ed,MAAM,CAAC,CAAC,CAAC,CAACe,OAAO,CAAC,CAAC,CAAC,GAAG,GACzB,CACH,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/module/CrowdViewWidget/constants.js

@@ -1,3 +1,4 @@
+import { colorPalette } from '@oanda/labs-widget-common';
 import { InstrumentId } from './types';
 export const BOOKS_THRESHOLDS = {
   MIN: 0.15,
@@ -15,13 +16,20 @@ export const CHART_CONFIG = {
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
+  Y_LABEL_SIZE_MOBILE: 40,
   INITIAL_START_ZOOM: 80,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        '
 };
 export const COLOR_MAP = {
-  long: ['#eaf5fa', '#83c4e0'],
-  short: ['#fef7e7', '#fcd171']
+  dark: {
+    long: [colorPalette.darkBlue10, colorPalette.darkBlue90],
+    short: [colorPalette.darkYellow10, colorPalette.darkYellow90]
+  },
+  light: {
+    long: [colorPalette.lightBlue10, colorPalette.lightBlue90],
+    short: [colorPalette.lightYellow10, colorPalette.lightYellow90]
+  }
 };
 export const INSTRUMENTS_CONFIG = {
   [InstrumentId.EUR_AUD]: {

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["InstrumentId","BOOKS_THRESHOLDS","MIN","MAX","BUCKET_CONFIG","MULTIPLIER","PRICE_PADDING_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","INITIAL_START_ZOOM","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","COLOR_MAP","long","short","INSTRUMENTS_CONFIG","EUR_AUD","mt5name","v20name","precision","defaultBucketWidth","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","XAU_USD","XAG_USD"],"sources":["../../../src/CrowdViewWidget/constants.ts"],"sourcesContent":["import { InstrumentId } from './types';\n\nexport const BOOKS_THRESHOLDS = {\n  MIN: 0.15,\n  MAX: 0.55,\n} as const;\n\nexport const BUCKET_CONFIG = {\n  MULTIPLIER: 4,\n  PRICE_PADDING_MULTIPLIER: 2,\n} as const;\n\nexport const TIME_THRESHOLDS = {\n  TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,\n} as const;\n\nexport const CHART_CONFIG = {\n  HEIGHT: 425,\n  WIDTH: 9999,\n  X_LABEL_SIZE: 40,\n  Y_LABEL_SIZE_DESKTOP: 60,\n  INITIAL_START_ZOOM: 80,\n  INITIAL_END_ZOOM: 100,\n  X_AXIS_DATE_PADDING: '        ',\n} as const;\n\nexport const COLOR_MAP = {\n  long: ['#eaf5fa', '#83c4e0'],\n  short: ['#fef7e7', '#fcd171'],\n} as const;\n\nexport const INSTRUMENTS_CONFIG: Record<\n  InstrumentId,\n  {\n    precision: number;\n    defaultBucketWidth: number;\n    v20name: string;\n    mt5name: string;\n  }\n> = {\n  [InstrumentId.EUR_AUD]: {\n    mt5name: 'EURAUD',\n    v20name: 'EUR_AUD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.EUR_GBP]: {\n    mt5name: 'EURGBP',\n    v20name: 'EUR_GBP',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.EUR_JPY]: {\n    mt5name: 'EURJPY',\n    v20name: 'EUR_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.EUR_USD]: {\n    mt5name: 'EURUSD',\n    v20name: 'EUR_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.EUR_CHF]: {\n    mt5name: 'EURCHF',\n    v20name: 'EUR_CHF',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.USD_CHF]: {\n    mt5name: 'USDCHF',\n    v20name: 'USD_CHF',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.USD_JPY]: {\n    mt5name: 'USDJPY',\n    v20name: 'USD_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.USD_CAD]: {\n    mt5name: 'USDCAD',\n    v20name: 'USD_CAD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.GBP_USD]: {\n    mt5name: 'GBPUSD',\n    v20name: 'GBP_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.GBP_JPY]: {\n    mt5name: 'GBPJPY',\n    v20name: 'GBP_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.GBP_CHF]: {\n    mt5name: 'GBPCHF',\n    v20name: 'GBP_CHF',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.AUD_JPY]: {\n    mt5name: 'AUDJPY',\n    v20name: 'AUD_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.AUD_USD]: {\n    mt5name: 'AUDUSD',\n    v20name: 'AUD_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.NZD_USD]: {\n    mt5name: 'NZDUSD',\n    v20name: 'NZD_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.XAU_USD]: {\n    mt5name: 'XAUUSD',\n    v20name: 'XAU_USD',\n    precision: 3,\n    defaultBucketWidth: 0.5,\n  },\n  [InstrumentId.XAG_USD]: {\n    mt5name: 'XAGUSD',\n    v20name: 'XAG_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["colorPalette","InstrumentId","BOOKS_THRESHOLDS","MIN","MAX","BUCKET_CONFIG","MULTIPLIER","PRICE_PADDING_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","INITIAL_START_ZOOM","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","COLOR_MAP","dark","long","darkBlue10","darkBlue90","short","darkYellow10","darkYellow90","light","lightBlue10","lightBlue90","lightYellow10","lightYellow90","INSTRUMENTS_CONFIG","EUR_AUD","mt5name","v20name","precision","defaultBucketWidth","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","XAU_USD","XAG_USD"],"sources":["../../../src/CrowdViewWidget/constants.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nimport { InstrumentId } from './types';\n\nexport const BOOKS_THRESHOLDS = {\n  MIN: 0.15,\n  MAX: 0.55,\n} as const;\n\nexport const BUCKET_CONFIG = {\n  MULTIPLIER: 4,\n  PRICE_PADDING_MULTIPLIER: 2,\n} as const;\n\nexport const TIME_THRESHOLDS = {\n  TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,\n} as const;\n\nexport const CHART_CONFIG = {\n  HEIGHT: 425,\n  WIDTH: 9999,\n  X_LABEL_SIZE: 40,\n  Y_LABEL_SIZE_DESKTOP: 60,\n  Y_LABEL_SIZE_MOBILE: 40,\n  INITIAL_START_ZOOM: 80,\n  INITIAL_END_ZOOM: 100,\n  X_AXIS_DATE_PADDING: '        ',\n} as const;\n\nexport const COLOR_MAP = {\n  dark: {\n    long: [colorPalette.darkBlue10, colorPalette.darkBlue90],\n    short: [colorPalette.darkYellow10, colorPalette.darkYellow90],\n  },\n  light: {\n    long: [colorPalette.lightBlue10, colorPalette.lightBlue90],\n    short: [colorPalette.lightYellow10, colorPalette.lightYellow90],\n  },\n} as const;\n\nexport const INSTRUMENTS_CONFIG: Record<\n  InstrumentId,\n  {\n    precision: number;\n    defaultBucketWidth: number;\n    v20name: string;\n    mt5name: string;\n  }\n> = {\n  [InstrumentId.EUR_AUD]: {\n    mt5name: 'EURAUD',\n    v20name: 'EUR_AUD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.EUR_GBP]: {\n    mt5name: 'EURGBP',\n    v20name: 'EUR_GBP',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.EUR_JPY]: {\n    mt5name: 'EURJPY',\n    v20name: 'EUR_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.EUR_USD]: {\n    mt5name: 'EURUSD',\n    v20name: 'EUR_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.EUR_CHF]: {\n    mt5name: 'EURCHF',\n    v20name: 'EUR_CHF',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.USD_CHF]: {\n    mt5name: 'USDCHF',\n    v20name: 'USD_CHF',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.USD_JPY]: {\n    mt5name: 'USDJPY',\n    v20name: 'USD_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.USD_CAD]: {\n    mt5name: 'USDCAD',\n    v20name: 'USD_CAD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.GBP_USD]: {\n    mt5name: 'GBPUSD',\n    v20name: 'GBP_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.GBP_JPY]: {\n    mt5name: 'GBPJPY',\n    v20name: 'GBP_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.GBP_CHF]: {\n    mt5name: 'GBPCHF',\n    v20name: 'GBP_CHF',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.AUD_JPY]: {\n    mt5name: 'AUDJPY',\n    v20name: 'AUD_JPY',\n    precision: 3,\n    defaultBucketWidth: 0.05,\n  },\n  [InstrumentId.AUD_USD]: {\n    mt5name: 'AUDUSD',\n    v20name: 'AUD_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.NZD_USD]: {\n    mt5name: 'NZDUSD',\n    v20name: 'NZD_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n  [InstrumentId.XAU_USD]: {\n    mt5name: 'XAUUSD',\n    v20name: 'XAU_USD',\n    precision: 3,\n    defaultBucketWidth: 0.5,\n  },\n  [InstrumentId.XAG_USD]: {\n    mt5name: 'XAGUSD',\n    v20name: 'XAG_USD',\n    precision: 5,\n    defaultBucketWidth: 0.0005,\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/translations/sources/en.json

@@ -3,7 +3,7 @@
   "15_minutes": "15 minutes",
   "4_hours": "4 hours",
   "5_minutes": "5 minutes",
-  "buy_advantage": "Buy advantage",
+  "buy_overbalance": "Buy overbalance",
   "buy": "Buy",
   "candle": "Candle",
   "close_price": "Close price",
@@ -11,7 +11,7 @@
   "granularity": "Granularity",
   "high": "High",
   "instrument": "Instrument",
-  "long_advantage": "Sell advantage",
+  "long_overbalance": "Long overbalance",
   "long": "Long",
   "low": "Low",
   "no_matching_results": "No matching results",
@@ -23,9 +23,9 @@
   "positions": "Positions",
   "price_range": "Price range",
   "search": "Search",
-  "sell_advantage": "Sell advantage",
+  "sell_overbalance": "Sell overbalance",
   "sell": "Sell",
   "sentiment": "Sentiment",
-  "short_advantage": "Buy advantage",
+  "short_overbalance": "Short overbalance",
   "short": "Short"
 }

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ChartProps } from './types';
-declare const Chart: ({ data }: ChartProps) => React.JSX.Element;
+declare const Chart: ({ data, isDesktop }: ChartProps) => React.JSX.Element;
 export { Chart };

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

@@ -25,9 +25,10 @@ export interface UseCrowdViewDataReturn {
     loading: boolean;
     error: boolean;
 }
-export type GetOptionType = (props: CrowdViewData, isDark: boolean, labelCallback: (key: string, params?: Record<string, unknown>) => string) => EChartsOption;
+export type GetOptionType = (props: CrowdViewData, isDark: boolean, isDesktop: boolean, labelCallback: (key: string, params?: Record<string, unknown>) => string) => EChartsOption;
 export interface ChartProps {
     data: CrowdViewData;
+    isDesktop: boolean;
 }
 export interface ChartWithDataProps {
     bookType: BookType;

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

@@ -18,7 +18,7 @@ export declare const getLabelData: ({ xAxisData, isGreaterThanTwoWeeks, }: GetLa
 }[];
 export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;
 export declare const getTimeSpanForGranularity: (granularity: Granularity) => TimeSpan;
-export declare const getRectColor: (sentiment: number) => string;
+export declare const getRectColor: (sentiment: number, isDark: boolean) => string;
 export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, precision, bookType, labelCallback, }: {
     params: unknown;
     buckets: Bucket[][];

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

@@ -4,6 +4,7 @@ interface LegendProps {
     longValues?: [number, number];
     shortValues?: [number, number];
     bookType: BookType;
+    isDark: boolean;
 }
-export declare const Legend: ({ longValues, shortValues, bookType, }: LegendProps) => React.JSX.Element;
+export declare const Legend: ({ longValues, shortValues, bookType, isDark, }: LegendProps) => React.JSX.Element;
 export {};

package/dist/types/CrowdViewWidget/components/Legend/LegendBar.d.ts

@@ -4,6 +4,7 @@ interface LegendBarProps {
     values: number[];
     type: LegendType;
     label: string;
+    isDark: boolean;
 }
-export declare const LegendBar: ({ values, type, label }: LegendBarProps) => React.JSX.Element;
+export declare const LegendBar: ({ values, type, label, isDark }: LegendBarProps) => React.JSX.Element;
 export {};

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

@@ -15,13 +15,20 @@ export declare const CHART_CONFIG: {
     readonly WIDTH: 9999;
     readonly X_LABEL_SIZE: 40;
     readonly Y_LABEL_SIZE_DESKTOP: 60;
+    readonly Y_LABEL_SIZE_MOBILE: 40;
     readonly INITIAL_START_ZOOM: 80;
     readonly INITIAL_END_ZOOM: 100;
     readonly X_AXIS_DATE_PADDING: "        ";
 };
 export declare const COLOR_MAP: {
-    readonly long: readonly ["#eaf5fa", "#83c4e0"];
-    readonly short: readonly ["#fef7e7", "#fcd171"];
+    readonly dark: {
+        readonly long: readonly [string, string];
+        readonly short: readonly [string, string];
+    };
+    readonly light: {
+        readonly long: readonly [string, string];
+        readonly short: readonly [string, string];
+    };
 };
 export declare const INSTRUMENTS_CONFIG: Record<InstrumentId, {
     precision: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.228",
+    "@oanda/labs-widget-common": "^1.0.230",
     "@oanda/mono-i18n": "10.0.1",
     "chroma-js": "^3.1.2",
     "decimal.js": "^10.6.0",
@@ -24,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@types/chroma-js": "^3.1.2"
   },
-  "gitHead": "8e6597b98667ce51cc5610dddc94f020a2a82908"
+  "gitHead": "4632567df9699ae24253e6610ad5510a57621d2c"
 }