@oanda/labs-crowd-view-widget 1.0.54 → 1.0.55

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

@@ -1 +1 @@
-{"version":3,"file":"LegendBar.js","names":["React","COLOR_MAP","LegendBar","_ref","type","isDark","colorPalette","dark","light","startColor","long","short","endColor","createElement","className","style","background","concat"],"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  type: LegendType;\n  isDark: boolean;\n}\n\nexport const LegendBar = ({ type, isDark }: LegendBarProps) => {\n  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;\n  const startColor =\n    type === 'long' ? colorPalette.long[1] : colorPalette.short[0];\n  const endColor =\n    type === 'long' ? colorPalette.long[0] : colorPalette.short[1];\n\n  return (\n    <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden\">\n      <div\n        className=\"lw-h-full lw-flex-1\"\n        data-testid=\"legend-bar-segment\"\n        style={{\n          background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,iBAAiB;AAS3C,OAAO,MAAMC,SAAS,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,IAAI;IAAEC;EAAuB,CAAC,GAAAF,IAAA;EACxD,MAAMG,YAAY,GAAGD,MAAM,GAAGJ,SAAS,CAACM,IAAI,GAAGN,SAAS,CAACO,KAAK;EAC9D,MAAMC,UAAU,GACdL,IAAI,KAAK,MAAM,GAAGE,YAAY,CAACI,IAAI,CAAC,CAAC,CAAC,GAAGJ,YAAY,CAACK,KAAK,CAAC,CAAC,CAAC;EAChE,MAAMC,QAAQ,GACZR,IAAI,KAAK,MAAM,GAAGE,YAAY,CAACI,IAAI,CAAC,CAAC,CAAC,GAAGJ,YAAY,CAACK,KAAK,CAAC,CAAC,CAAC;EAEhE,OACEX,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAA6C,GAC1Dd,KAAA,CAAAa,aAAA;IACEC,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,2BAAAC,MAAA,CAA2BR,UAAU,WAAAQ,MAAA,CAAQL,QAAQ;IACjE;EAAE,CACH,CACE,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"LegendBar.js","names":["cn","React","COLOR_MAP","LegendBar","_ref","type","isDark","colorPalette","dark","light","startColor","long","short","endColor","endGradient","concat","createElement","className","style","background"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import { cn } from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n  type: LegendType;\n  isDark: boolean;\n}\n\nexport const LegendBar = ({ type, isDark }: LegendBarProps) => {\n  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;\n  const startColor =\n    type === 'long' ? colorPalette.long[1] : colorPalette.short[0];\n  const endColor =\n    type === 'long' ? colorPalette.long[0] : colorPalette.short[1];\n  const endGradient =\n    type === 'long'\n      ? `linear-gradient(90deg,${endColor} 0%, transparent 100%)`\n      : `linear-gradient(270deg,${startColor} 0%, transparent 100%)`;\n\n  return (\n    <div\n      className={cn('lw-flex lw-h-2 lw-w-full lw-overflow-hidden', {\n        'lw-flex-row-reverse': type === 'short',\n      })}\n    >\n      <div\n        className=\"lw-h-full lw-flex-1\"\n        data-testid=\"legend-bar-segment\"\n        style={{\n          background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,\n        }}\n      />\n      <div\n        className=\"lw-h-full lw-w-[10px]\"\n        data-testid=\"legend-bar-segment\"\n        style={{\n          background: endGradient,\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,EAAE,QAAQ,2BAA2B;AAC9C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,iBAAiB;AAS3C,OAAO,MAAMC,SAAS,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,IAAI;IAAEC;EAAuB,CAAC,GAAAF,IAAA;EACxD,MAAMG,YAAY,GAAGD,MAAM,GAAGJ,SAAS,CAACM,IAAI,GAAGN,SAAS,CAACO,KAAK;EAC9D,MAAMC,UAAU,GACdL,IAAI,KAAK,MAAM,GAAGE,YAAY,CAACI,IAAI,CAAC,CAAC,CAAC,GAAGJ,YAAY,CAACK,KAAK,CAAC,CAAC,CAAC;EAChE,MAAMC,QAAQ,GACZR,IAAI,KAAK,MAAM,GAAGE,YAAY,CAACI,IAAI,CAAC,CAAC,CAAC,GAAGJ,YAAY,CAACK,KAAK,CAAC,CAAC,CAAC;EAChE,MAAME,WAAW,GACfT,IAAI,KAAK,MAAM,4BAAAU,MAAA,CACcF,QAAQ,wDAAAE,MAAA,CACPL,UAAU,2BAAwB;EAElE,OACET,KAAA,CAAAe,aAAA;IACEC,SAAS,EAAEjB,EAAE,CAAC,6CAA6C,EAAE;MAC3D,qBAAqB,EAAEK,IAAI,KAAK;IAClC,CAAC;EAAE,GAEHJ,KAAA,CAAAe,aAAA;IACEC,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,2BAAAJ,MAAA,CAA2BL,UAAU,WAAAK,MAAA,CAAQF,QAAQ;IACjE;EAAE,CACH,CAAC,EACFZ,KAAA,CAAAe,aAAA;IACEC,SAAS,EAAC,uBAAuB;IACjC,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,EAAEL;IACd;EAAE,CACH,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/module/CrowdViewWidget/constants.js

@@ -2,7 +2,10 @@ import { colorPalette } from '@oanda/labs-widget-common';
 import chroma from 'chroma-js';
 import { InstrumentId } from './types';
 export const BUCKET_CONFIG = {
-  MULTIPLIER: 4,
+  MULTIPLIER_5M: 1,
+  MULTIPLIER_15M: 1,
+  MULTIPLIER_1H: 2,
+  MULTIPLIER_4H: 4,
   PRICE_MARGIN_MULTIPLIER: 2
 };
 export const TIME_THRESHOLDS = {
@@ -15,14 +18,19 @@ export const CHART_CONFIG = {
   SENTIMENT_HEIGHT: 120,
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
-  Y_LABEL_SIZE_DESKTOP: 60,
+  Y_LABEL_SIZE_DESKTOP: 50,
   Y_LABEL_SIZE_MOBILE: 40,
-  Y_SENTIMENT_LABEL_SIZE: 40,
-  INITIAL_START_ZOOM: 90,
+  Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40,
+  Y_SENTIMENT_LABEL_MOBILE_SIZE: 30,
+  INITIAL_START_ZOOM_DESKTOP: 70,
+  INITIAL_START_ZOOM_MOBILE: 85,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
-  SENTIMENT_MAX: 100
+  SENTIMENT_MAX: 100,
+  TOP_MARGIN_DESKTOP: 0,
+  TOP_MARGIN_MOBILE: 30,
+  TOOLTIP_OFFSET: 5
 };
 export const COLOR_MAP = {
   dark: {

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["colorPalette","chroma","InstrumentId","BUCKET_CONFIG","MULTIPLIER","PRICE_MARGIN_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","HEIGHT","MAIN_HEIGHT","MARGIN_BETWEEN","SENTIMENT_HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","Y_SENTIMENT_LABEL_SIZE","INITIAL_START_ZOOM","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","SENTIMENT_MIN","SENTIMENT_MAX","COLOR_MAP","dark","long","darkBlue10","shade","hex","darkBlue90","short","darkYellow10","darkYellow90","light","lightBlue10","tint","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';\nimport chroma from 'chroma-js';\n\nimport { InstrumentId } from './types';\n\nexport const BUCKET_CONFIG = {\n  MULTIPLIER: 4,\n  PRICE_MARGIN_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: 440,\n  MAIN_HEIGHT: 400,\n  MARGIN_BETWEEN: 50,\n  SENTIMENT_HEIGHT: 120,\n  WIDTH: 9999,\n  X_LABEL_SIZE: 40,\n  Y_LABEL_SIZE_DESKTOP: 60,\n  Y_LABEL_SIZE_MOBILE: 40,\n  Y_SENTIMENT_LABEL_SIZE: 40,\n  INITIAL_START_ZOOM: 90,\n  INITIAL_END_ZOOM: 100,\n  X_AXIS_DATE_PADDING: '        ',\n  SENTIMENT_MIN: 0,\n  SENTIMENT_MAX: 100,\n} as const;\n\nexport const COLOR_MAP = {\n  dark: {\n    long: [\n      chroma(colorPalette.darkBlue10).shade(0.5).hex(),\n      chroma(colorPalette.darkBlue90).shade(0.5).hex(),\n    ],\n    short: [\n      chroma(colorPalette.darkYellow10).shade(0.5).hex(),\n      chroma(colorPalette.darkYellow90).shade(0.5).hex(),\n    ],\n  },\n  light: {\n    long: [\n      chroma(colorPalette.lightBlue10).tint(0.5).hex(),\n      chroma(colorPalette.lightBlue90).tint(0.5).hex(),\n    ],\n    short: [\n      chroma(colorPalette.lightYellow10).tint(0.5).hex(),\n      chroma(colorPalette.lightYellow90).tint(0.5).hex(),\n    ],\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":[]}
+{"version":3,"file":"constants.js","names":["colorPalette","chroma","InstrumentId","BUCKET_CONFIG","MULTIPLIER_5M","MULTIPLIER_15M","MULTIPLIER_1H","MULTIPLIER_4H","PRICE_MARGIN_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","HEIGHT","MAIN_HEIGHT","MARGIN_BETWEEN","SENTIMENT_HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","SENTIMENT_MIN","SENTIMENT_MAX","TOP_MARGIN_DESKTOP","TOP_MARGIN_MOBILE","TOOLTIP_OFFSET","COLOR_MAP","dark","long","darkBlue10","shade","hex","darkBlue90","short","darkYellow10","darkYellow90","light","lightBlue10","tint","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';\nimport chroma from 'chroma-js';\n\nimport { InstrumentId } from './types';\n\nexport const BUCKET_CONFIG = {\n  MULTIPLIER_5M: 1,\n  MULTIPLIER_15M: 1,\n  MULTIPLIER_1H: 2,\n  MULTIPLIER_4H: 4,\n  PRICE_MARGIN_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: 440,\n  MAIN_HEIGHT: 400,\n  MARGIN_BETWEEN: 50,\n  SENTIMENT_HEIGHT: 120,\n  WIDTH: 9999,\n  X_LABEL_SIZE: 40,\n  Y_LABEL_SIZE_DESKTOP: 50,\n  Y_LABEL_SIZE_MOBILE: 40,\n  Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40,\n  Y_SENTIMENT_LABEL_MOBILE_SIZE: 30,\n  INITIAL_START_ZOOM_DESKTOP: 70,\n  INITIAL_START_ZOOM_MOBILE: 85,\n  INITIAL_END_ZOOM: 100,\n  X_AXIS_DATE_PADDING: '        ',\n  SENTIMENT_MIN: 0,\n  SENTIMENT_MAX: 100,\n  TOP_MARGIN_DESKTOP: 0,\n  TOP_MARGIN_MOBILE: 30,\n  TOOLTIP_OFFSET: 5,\n} as const;\n\nexport const COLOR_MAP = {\n  dark: {\n    long: [\n      chroma(colorPalette.darkBlue10).shade(0.5).hex(),\n      chroma(colorPalette.darkBlue90).shade(0.5).hex(),\n    ],\n    short: [\n      chroma(colorPalette.darkYellow10).shade(0.5).hex(),\n      chroma(colorPalette.darkYellow90).shade(0.5).hex(),\n    ],\n  },\n  light: {\n    long: [\n      chroma(colorPalette.lightBlue10).tint(0.5).hex(),\n      chroma(colorPalette.lightBlue90).tint(0.5).hex(),\n    ],\n    short: [\n      chroma(colorPalette.lightYellow10).tint(0.5).hex(),\n      chroma(colorPalette.lightYellow90).tint(0.5).hex(),\n    ],\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/CrowdViewWidget/selectConfig.js

@@ -63,12 +63,6 @@ const granularitySelectConfig = [{
 }, {
   id: Granularity.H4,
   label: '4_hours'
-}, {
-  id: Granularity.M5,
-  label: '5_minutes'
-}, {
-  id: Granularity.M15,
-  label: '15_minutes'
 }];
 export { granularitySelectConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig };
 //# sourceMappingURL=selectConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"selectConfig.js","names":["BookType","Granularity","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_AUD","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","instrumentSelectConfig","XAU_USD","XAG_USD","granularitySelectConfig","H1","H4","M5","M15"],"sources":["../../../src/CrowdViewWidget/selectConfig.ts"],"sourcesContent":["import { BookType, Granularity } from '../gql/types/graphql';\nimport { InstrumentId } from './types';\n\nconst navigationConfig = [\n  {\n    id: BookType.Order,\n    label: 'order_book',\n  },\n  {\n    id: BookType.Position,\n    label: 'position_book',\n  },\n];\n\nconst instrumentSelectConfigOC = [\n  {\n    id: InstrumentId.EUR_AUD,\n    label: 'EUR/AUD',\n  },\n  {\n    id: InstrumentId.EUR_GBP,\n    label: 'EUR/GBP',\n  },\n  {\n    id: InstrumentId.EUR_JPY,\n    label: 'EUR/JPY',\n  },\n  {\n    id: InstrumentId.EUR_USD,\n    label: 'EUR/USD',\n  },\n  {\n    id: InstrumentId.EUR_CHF,\n    label: 'EUR/CHF',\n  },\n  {\n    id: InstrumentId.USD_CHF,\n    label: 'USD/CHF',\n  },\n  {\n    id: InstrumentId.USD_JPY,\n    label: 'USD/JPY',\n  },\n  {\n    id: InstrumentId.USD_CAD,\n    label: 'USD/CAD',\n  },\n  {\n    id: InstrumentId.GBP_USD,\n    label: 'GBP/USD',\n  },\n  {\n    id: InstrumentId.GBP_JPY,\n    label: 'GBP/JPY',\n  },\n  {\n    id: InstrumentId.GBP_CHF,\n    label: 'GBP/CHF',\n  },\n  {\n    id: InstrumentId.AUD_JPY,\n    label: 'AUD/JPY',\n  },\n  {\n    id: InstrumentId.AUD_USD,\n    label: 'AUD/USD',\n  },\n  {\n    id: InstrumentId.NZD_USD,\n    label: 'NZD/USD',\n  },\n];\n\nconst instrumentSelectConfig = [\n  ...instrumentSelectConfigOC,\n  {\n    id: InstrumentId.XAU_USD,\n    label: 'XAU/USD',\n  },\n  {\n    id: InstrumentId.XAG_USD,\n    label: 'XAG/USD',\n  },\n];\n\nconst granularitySelectConfig = [\n  {\n    id: Granularity.H1,\n    label: '1_hour',\n  },\n  {\n    id: Granularity.H4,\n    label: '4_hours',\n  },\n  {\n    id: Granularity.M5,\n    label: '5_minutes',\n  },\n  {\n    id: Granularity.M15,\n    label: '15_minutes',\n  },\n];\n\nexport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n};\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,sBAAsB;AAC5D,SAASC,YAAY,QAAQ,SAAS;AAEtC,MAAMC,gBAAgB,GAAG,CACvB;EACEC,EAAE,EAAEJ,QAAQ,CAACK,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEJ,QAAQ,CAACO,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAME,wBAAwB,GAAG,CAC/B;EACEJ,EAAE,EAAEF,YAAY,CAACO,OAAO;EACxBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACQ,OAAO;EACxBJ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACS,OAAO;EACxBL,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACU,OAAO;EACxBN,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACW,OAAO;EACxBP,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACY,OAAO;EACxBR,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACa,OAAO;EACxBT,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACc,OAAO;EACxBV,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACe,OAAO;EACxBX,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACgB,OAAO;EACxBZ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACiB,OAAO;EACxBb,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACkB,OAAO;EACxBd,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACmB,OAAO;EACxBf,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACoB,OAAO;EACxBhB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMiB,sBAAsB,GAAG,CAC7B,GAAGf,wBAAwB,EAC3B;EACEJ,EAAE,EAAEF,YAAY,CAACsB,OAAO;EACxBlB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACuB,OAAO;EACxBnB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMoB,uBAAuB,GAAG,CAC9B;EACEtB,EAAE,EAAEH,WAAW,CAAC0B,EAAE;EAClBrB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC2B,EAAE;EAClBtB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC4B,EAAE;EAClBvB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC6B,GAAG;EACnBxB,KAAK,EAAE;AACT,CAAC,CACF;AAED,SACEoB,uBAAuB,EACvBH,sBAAsB,EACtBf,wBAAwB,EACxBL,gBAAgB","ignoreList":[]}
+{"version":3,"file":"selectConfig.js","names":["BookType","Granularity","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_AUD","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","instrumentSelectConfig","XAU_USD","XAG_USD","granularitySelectConfig","H1","H4"],"sources":["../../../src/CrowdViewWidget/selectConfig.ts"],"sourcesContent":["import { BookType, Granularity } from '../gql/types/graphql';\nimport { InstrumentId } from './types';\n\nconst navigationConfig = [\n  {\n    id: BookType.Order,\n    label: 'order_book',\n  },\n  {\n    id: BookType.Position,\n    label: 'position_book',\n  },\n];\n\nconst instrumentSelectConfigOC = [\n  {\n    id: InstrumentId.EUR_AUD,\n    label: 'EUR/AUD',\n  },\n  {\n    id: InstrumentId.EUR_GBP,\n    label: 'EUR/GBP',\n  },\n  {\n    id: InstrumentId.EUR_JPY,\n    label: 'EUR/JPY',\n  },\n  {\n    id: InstrumentId.EUR_USD,\n    label: 'EUR/USD',\n  },\n  {\n    id: InstrumentId.EUR_CHF,\n    label: 'EUR/CHF',\n  },\n  {\n    id: InstrumentId.USD_CHF,\n    label: 'USD/CHF',\n  },\n  {\n    id: InstrumentId.USD_JPY,\n    label: 'USD/JPY',\n  },\n  {\n    id: InstrumentId.USD_CAD,\n    label: 'USD/CAD',\n  },\n  {\n    id: InstrumentId.GBP_USD,\n    label: 'GBP/USD',\n  },\n  {\n    id: InstrumentId.GBP_JPY,\n    label: 'GBP/JPY',\n  },\n  {\n    id: InstrumentId.GBP_CHF,\n    label: 'GBP/CHF',\n  },\n  {\n    id: InstrumentId.AUD_JPY,\n    label: 'AUD/JPY',\n  },\n  {\n    id: InstrumentId.AUD_USD,\n    label: 'AUD/USD',\n  },\n  {\n    id: InstrumentId.NZD_USD,\n    label: 'NZD/USD',\n  },\n];\n\nconst instrumentSelectConfig = [\n  ...instrumentSelectConfigOC,\n  {\n    id: InstrumentId.XAU_USD,\n    label: 'XAU/USD',\n  },\n  {\n    id: InstrumentId.XAG_USD,\n    label: 'XAG/USD',\n  },\n];\n\nconst granularitySelectConfig = [\n  {\n    id: Granularity.H1,\n    label: '1_hour',\n  },\n  {\n    id: Granularity.H4,\n    label: '4_hours',\n  },\n];\n\nexport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n};\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,sBAAsB;AAC5D,SAASC,YAAY,QAAQ,SAAS;AAEtC,MAAMC,gBAAgB,GAAG,CACvB;EACEC,EAAE,EAAEJ,QAAQ,CAACK,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEJ,QAAQ,CAACO,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAME,wBAAwB,GAAG,CAC/B;EACEJ,EAAE,EAAEF,YAAY,CAACO,OAAO;EACxBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACQ,OAAO;EACxBJ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACS,OAAO;EACxBL,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACU,OAAO;EACxBN,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACW,OAAO;EACxBP,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACY,OAAO;EACxBR,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACa,OAAO;EACxBT,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACc,OAAO;EACxBV,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACe,OAAO;EACxBX,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACgB,OAAO;EACxBZ,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACiB,OAAO;EACxBb,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACkB,OAAO;EACxBd,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACmB,OAAO;EACxBf,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACoB,OAAO;EACxBhB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMiB,sBAAsB,GAAG,CAC7B,GAAGf,wBAAwB,EAC3B;EACEJ,EAAE,EAAEF,YAAY,CAACsB,OAAO;EACxBlB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEF,YAAY,CAACuB,OAAO;EACxBnB,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMoB,uBAAuB,GAAG,CAC9B;EACEtB,EAAE,EAAEH,WAAW,CAAC0B,EAAE;EAClBrB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC2B,EAAE;EAClBtB,KAAK,EAAE;AACT,CAAC,CACF;AAED,SACEoB,uBAAuB,EACvBH,sBAAsB,EACtBf,wBAAwB,EACxBL,gBAAgB","ignoreList":[]}

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

@@ -28,5 +28,6 @@
   "sentiment": "Sentiment",
   "short_overbalance": "Short overbalance",
   "short": "Short",
-  "even_market_demand": "Even market demand"
+  "even_market_demand": "Even market demand",
+  "price": "Price"
 }

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: ({ mainData, additionalData, isDesktop }: ChartProps) => React.JSX.Element;
+declare const Chart: ({ mainData, additionalData, isDesktop, isLoading, }: ChartProps) => React.JSX.Element;
 export { Chart };

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

@@ -1,2 +1,6 @@
 import type { DataZoomComponentOption } from 'echarts';
-export declare const getDataZoomConfig: () => DataZoomComponentOption;
+interface GetDataZoomConfigParams {
+    isDesktop: boolean;
+}
+export declare const getDataZoomConfig: ({ isDesktop, }: GetDataZoomConfigParams) => DataZoomComponentOption;
+export {};

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

@@ -1,6 +1,7 @@
 import type { GraphicComponentOption } from 'echarts';
 interface GetGridLinesParams {
     isDark: boolean;
+    isDesktop: boolean;
 }
-export declare const getGridLines: ({ isDark, }: GetGridLinesParams) => GraphicComponentOption[];
+export declare const getGridLines: ({ isDark, isDesktop, }: GetGridLinesParams) => GraphicComponentOption[];
 export {};

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

@@ -0,0 +1,8 @@
+import type { GraphicComponentOption } from 'echarts';
+interface getLabelsConfigParams {
+    isDark: boolean;
+    isDesktop: boolean;
+    labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+export declare const getLabelsConfig: ({ isDark, isDesktop, labelCallback, }: getLabelsConfigParams) => GraphicComponentOption[];
+export {};

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

@@ -1,9 +1,8 @@
 import type { CandlestickSeriesOption } from 'echarts';
 import type { ChartStyles } from '../chartUtils/getChartStyles';
 interface GetSeriesCandlestickConfigParams {
-    dates: string[];
-    isGreaterThanTwoWeeks: boolean;
     styles: ChartStyles;
+    isLoading: boolean;
 }
-export declare const getSeriesCandlestickConfig: ({ dates, isGreaterThanTwoWeeks, styles, }: GetSeriesCandlestickConfigParams) => CandlestickSeriesOption;
+export declare const getSeriesCandlestickConfig: ({ styles, isLoading, }: GetSeriesCandlestickConfigParams) => CandlestickSeriesOption;
 export {};

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

@@ -6,6 +6,7 @@ interface GetSeriesHeatmapConfigParams {
     isDark: boolean;
     sentimentThresholdMax: number;
     sentimentThresholdMin: number;
+    isLoading: boolean;
 }
-export declare const getSeriesHeatmapConfig: ({ bucketWidth, buckets, isDark, sentimentThresholdMax, sentimentThresholdMin, }: GetSeriesHeatmapConfigParams) => CustomSeriesOption;
+export declare const getSeriesHeatmapConfig: ({ bucketWidth, buckets, isDark, sentimentThresholdMax, sentimentThresholdMin, isLoading, }: GetSeriesHeatmapConfigParams) => CustomSeriesOption;
 export {};

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

@@ -2,6 +2,7 @@ import type { LineSeriesOption } from 'echarts';
 import type { ChartStyles } from '../chartUtils';
 interface GetSeriesSentimentConfigParams {
     styles: ChartStyles;
+    isLoading: boolean;
 }
-export declare const getSeriesSentimentConfig: ({ styles, }: GetSeriesSentimentConfigParams) => LineSeriesOption;
+export declare const getSeriesSentimentConfig: ({ styles, isLoading, }: GetSeriesSentimentConfigParams) => LineSeriesOption;
 export {};

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

@@ -11,6 +11,8 @@ interface GetTooltipConfigParams {
         current: number;
     };
     tooltipLinesColor: string;
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
 }
-export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, }: GetTooltipConfigParams) => TooltipComponentOption;
+export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, sentimentLongs, sentimentShorts, }: GetTooltipConfigParams) => TooltipComponentOption;
 export {};

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

@@ -2,8 +2,6 @@ import type { YAXisComponentOption } from 'echarts';
 interface GetYAxisConfigParams {
     bucketWidth: number;
     displayPrecision: number;
-    isDesktop: boolean;
-    labelCallback: (key: string, params?: Record<string, unknown>) => string;
 }
-export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, isDesktop, labelCallback, }: GetYAxisConfigParams) => YAXisComponentOption[];
+export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, }: GetYAxisConfigParams) => YAXisComponentOption[];
 export {};

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

@@ -1,6 +1,7 @@
 export * from './getDataZoomConfig';
 export * from './getGridConfig';
 export * from './getGridLines';
+export * from './getLabelsConfig';
 export * from './getSeriesCandlestickConfig';
 export * from './getSeriesHeatmapConfig';
 export * from './getSeriesSentimentConfig';

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

@@ -0,0 +1 @@
+export declare const formatXAxisAdditionalLabel: (value: unknown, isGreaterThanTwoWeeks: boolean) => string;

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

@@ -1,17 +1,2 @@
 import type { GetLabelsDataProps } from '../types';
-export declare const getLabelData: ({ dates, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => {
-    readonly name: string;
-    readonly xAxis: string;
-    readonly y: number;
-    readonly silent: true;
-    readonly emphasis: {
-        readonly disabled: true;
-    };
-    readonly label: {
-        readonly fontFamily: "Sofia W03";
-        readonly fontSize: 10;
-        readonly position: "bottom";
-        readonly align: "center";
-        readonly formatter: "{b}";
-    };
-}[];
+export declare const getLabelData: ({ dates, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => string[];

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

@@ -1,10 +1,12 @@
 import { BookType } from '../../../../gql/types/graphql';
 import type { Bucket, TooltipParam } from '../types';
-export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, bookType, labelCallback, }: {
+export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, bookType, labelCallback, sentimentLongs, sentimentShorts, }: {
     params: TooltipParam[];
     buckets: Bucket[][];
     bucketWidth: number;
     selectedPrice: number;
     bookType: BookType;
     labelCallback: (key: string) => string;
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
 }) => string;

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

@@ -0,0 +1,4 @@
+import type { EChartsType } from 'echarts';
+import type { MutableRefObject } from 'react';
+import type { ChartProps } from '../types';
+export declare const handleLabelUpdate: (instance: EChartsType, mainData: ChartProps["mainData"], labelTimerRef: MutableRefObject<NodeJS.Timeout | null>, isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>) => void;

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

@@ -0,0 +1,3 @@
+import type { EChartsType } from 'echarts';
+import type { MutableRefObject } from 'react';
+export declare const handleTooltipUpdate: (instance: EChartsType, zoomTimerRef: MutableRefObject<NodeJS.Timeout | null>, tooltipVisibleRef: MutableRefObject<boolean>, canHover: boolean) => void;

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

@@ -1,7 +1,10 @@
+export * from './formatXAxisAdditionalLabel';
 export * from './formatXAxisLabel';
 export * from './getChartStyles';
 export * from './getGradientColor';
 export * from './getLabelData';
 export * from './getRectColor';
 export * from './getTooltipFormatter';
+export * from './handleLabelUpdate';
+export * from './handleTooltipUpdate';
 export * from './isDifferenceGreaterThanTwoWeeks';

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

@@ -0,0 +1,2 @@
+import { Granularity } from '../../../../gql/types/graphql';
+export declare const getMultiplayerForTimeSpan: (granularity: Granularity) => number;

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

@@ -1,4 +1,5 @@
 export * from './getInstrumentConfigForDivision';
+export * from './getMultiplayerForTimeSpan';
 export * from './getTimeSpanForGranularity';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';

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

@@ -34,6 +34,9 @@ export interface UseCrowdViewDataReturn {
     mainData?: CrowdViewMainData | null;
     additionalData?: CrowdViewAdditionalData | null;
     loading: boolean;
+    priceCandlesLoading: boolean;
+    orderPositionLoading: boolean;
+    sentimentsLoading: boolean;
     error: boolean;
 }
 interface GetOptionProps {
@@ -41,6 +44,7 @@ interface GetOptionProps {
     additionalData: CrowdViewAdditionalData;
     isDark: boolean;
     isDesktop: boolean;
+    isLoading: boolean;
     labelCallback: (key: string, params?: Record<string, unknown>) => string;
 }
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
@@ -48,6 +52,7 @@ export interface ChartProps {
     mainData: CrowdViewMainData;
     additionalData: CrowdViewAdditionalData;
     isDesktop: boolean;
+    isLoading: boolean;
 }
 export interface ChartWithDataProps {
     bookType: BookType;

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

@@ -1,6 +1,9 @@
 import { InstrumentId } from './types';
 export declare const BUCKET_CONFIG: {
-    readonly MULTIPLIER: 4;
+    readonly MULTIPLIER_5M: 1;
+    readonly MULTIPLIER_15M: 1;
+    readonly MULTIPLIER_1H: 2;
+    readonly MULTIPLIER_4H: 4;
     readonly PRICE_MARGIN_MULTIPLIER: 2;
 };
 export declare const TIME_THRESHOLDS: {
@@ -13,14 +16,19 @@ export declare const CHART_CONFIG: {
     readonly SENTIMENT_HEIGHT: 120;
     readonly WIDTH: 9999;
     readonly X_LABEL_SIZE: 40;
-    readonly Y_LABEL_SIZE_DESKTOP: 60;
+    readonly Y_LABEL_SIZE_DESKTOP: 50;
     readonly Y_LABEL_SIZE_MOBILE: 40;
-    readonly Y_SENTIMENT_LABEL_SIZE: 40;
-    readonly INITIAL_START_ZOOM: 90;
+    readonly Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40;
+    readonly Y_SENTIMENT_LABEL_MOBILE_SIZE: 30;
+    readonly INITIAL_START_ZOOM_DESKTOP: 70;
+    readonly INITIAL_START_ZOOM_MOBILE: 85;
     readonly INITIAL_END_ZOOM: 100;
     readonly X_AXIS_DATE_PADDING: "        ";
     readonly SENTIMENT_MIN: 0;
     readonly SENTIMENT_MAX: 100;
+    readonly TOP_MARGIN_DESKTOP: 0;
+    readonly TOP_MARGIN_MOBILE: 30;
+    readonly TOOLTIP_OFFSET: 5;
 };
 export declare const COLOR_MAP: {
     readonly dark: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "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.236",
+    "@oanda/labs-widget-common": "^1.0.237",
     "@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": "f04c026db9ec11a1d0ac934dd66146c877b01570"
+  "gitHead": "c229ff589fb221f71aa5b10c1498b32e4a3b61b3"
 }

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

@@ -18,21 +18,17 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { CHART_CONFIG } from '../../constants';
 import {
-  formatXAxisLabel,
-  getLabelData,
+  handleLabelUpdate,
+  handleTooltipUpdate,
   isDifferenceGreaterThanTwoWeeks,
 } from './chartUtils';
 import { getOption } from './getOption';
-import type {
-  ChartProps,
-  DataZoomArray,
-  DataZoomEvent,
-  XAxisArray,
-} from './types';
+import type { ChartProps, DataZoomEvent } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -51,9 +47,71 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
+const Chart = ({
+  mainData,
+  additionalData,
+  isDesktop,
+  isLoading,
+}: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
+  const canHover = useMediaQuery('(hover: hover)');
+  const labelTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const isGreaterThanTwoWeeksRef = useRef<boolean | null>(null);
+  const zoomTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const tooltipVisibleRef = useRef<boolean>(true);
+
+  const initialIsGreaterThanTwoWeeks = useMemo(() => {
+    const { dates } = mainData;
+    const initialStartZoom = isDesktop
+      ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP
+      : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;
+
+    const visibleXAxisData = dates.slice(
+      (dates.length * initialStartZoom) / 100,
+      (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+    );
+
+    if (visibleXAxisData.length === 0) {
+      return false;
+    }
+
+    return isDifferenceGreaterThanTwoWeeks(
+      visibleXAxisData[0],
+      visibleXAxisData[visibleXAxisData.length - 1]
+    );
+  }, [mainData, isDesktop]);
+
+  useEffect(() => {
+    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;
+  }, [initialIsGreaterThanTwoWeeks]);
+
+  const chartOption = useMemo(
+    () =>
+      getOption({
+        mainData,
+        additionalData,
+        isDark,
+        isDesktop,
+        isLoading,
+        labelCallback: lang,
+      }),
+    [mainData, additionalData, isDark, isDesktop, isLoading, lang]
+  );
+
+  // Memoize event handler to prevent unnecessary re-renders
+  const handleDataZoom = useCallback(
+    (_params: DataZoomEvent, instance: EChartsType) => {
+      handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);
+      handleLabelUpdate(
+        instance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+    },
+    [mainData, canHover]
+  );
 
   return (
     <BaseChart
@@ -61,77 +119,10 @@ const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption({
-        mainData,
-        additionalData,
-        isDark,
-        isDesktop,
-        labelCallback: lang,
-      })}
+      option={chartOption}
       opts={{ renderer: 'canvas' }}
       onEvents={{
-        datazoom: (params: DataZoomEvent, instance: EChartsType) => {
-          if (!params.batch?.[0]) {
-            return;
-          }
-
-          const { dates } = mainData;
-
-          const { dataZoom, xAxis } = instance.getOption();
-          if (
-            !Array.isArray(dataZoom) ||
-            dataZoom.length === 0 ||
-            !dataZoom[0] ||
-            typeof dataZoom[0].startValue !== 'number' ||
-            typeof dataZoom[0].endValue !== 'number'
-          ) {
-            return;
-          }
-
-          const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];
-
-          if (!dates[startValue] || !dates[endValue]) {
-            return;
-          }
-
-          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-            dates[startValue],
-            dates[endValue]
-          );
-
-          const wasGreaterThanTwoWeeks =
-            Array.isArray(xAxis) &&
-            xAxis.length > 0 &&
-            (xAxis as XAxisArray)[0]?.name === 'xAxis-greater-than-two-weeks';
-
-          if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
-            const labelsData = getLabelData({
-              dates,
-              isGreaterThanTwoWeeks,
-            });
-
-            instance.setOption({
-              xAxis: {
-                id: 'main-xAxis',
-                name: isGreaterThanTwoWeeks
-                  ? 'xAxis-greater-than-two-weeks'
-                  : 'xAxis-less-than-two-weeks',
-                axisLabel: {
-                  formatter: (value: string) =>
-                    formatXAxisLabel(value, isGreaterThanTwoWeeks),
-                },
-              },
-              series: [
-                {
-                  id: 'candlestick',
-                  markPoint: {
-                    data: labelsData,
-                  },
-                },
-              ],
-            });
-          }
-        },
+        datazoom: handleDataZoom,
       }}
     />
   );