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

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

@@ -1 +1 @@
-{"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":[]}
+{"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_STATIC","MAIN_HEIGHT_DESKTOP","MAIN_HEIGHT_MOBILE","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_LABEL_SPACE_DESKTOP","TOP_LABEL_SPACE_MOBILE","TOOLTIP_HEIGHT_MOBILE","TOOLTIP_HEIGHT_DESKTOP","TOOLTIP_OFFSET","CHART_CONFIG_CALCULATED","HEIGHT_DESKTOP","HEIGHT_MOBILE","CHART_CONFIG","_objectSpread","COLOR_MAP","dark","long","darkBlue10","shade","hex","darkBlue90","short","darkYellow10","darkYellow90","backgroundColor","black","light","lightBlue10","tint","lightBlue90","lightYellow10","lightYellow90","white","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\nconst CHART_CONFIG_STATIC = {\n  MAIN_HEIGHT_DESKTOP: 410,\n  MAIN_HEIGHT_MOBILE: 330,\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_LABEL_SPACE_DESKTOP: 0,\n  TOP_LABEL_SPACE_MOBILE: 24,\n  TOOLTIP_HEIGHT_MOBILE: 85,\n  TOOLTIP_HEIGHT_DESKTOP: 46,\n  TOOLTIP_OFFSET: 8,\n};\n\nconst CHART_CONFIG_CALCULATED = {\n  HEIGHT_DESKTOP:\n    CHART_CONFIG_STATIC.MAIN_HEIGHT_DESKTOP +\n    CHART_CONFIG_STATIC.TOP_LABEL_SPACE_DESKTOP +\n    CHART_CONFIG_STATIC.X_LABEL_SIZE +\n    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_DESKTOP,\n  HEIGHT_MOBILE:\n    CHART_CONFIG_STATIC.MAIN_HEIGHT_MOBILE +\n    CHART_CONFIG_STATIC.X_LABEL_SIZE +\n    CHART_CONFIG_STATIC.TOP_LABEL_SPACE_MOBILE +\n    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_MOBILE,\n};\nexport const CHART_CONFIG = {\n  ...CHART_CONFIG_STATIC,\n  ...CHART_CONFIG_CALCULATED,\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    backgroundColor: colorPalette.black,\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    backgroundColor: colorPalette.white,\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

@@ -8,6 +8,9 @@ const navigationConfig = [{
   label: 'position_book'
 }];
 const instrumentSelectConfigOC = [{
+  id: InstrumentId.EUR_USD,
+  label: 'EUR/USD'
+}, {
   id: InstrumentId.EUR_AUD,
   label: 'EUR/AUD'
 }, {
@@ -16,9 +19,6 @@ const instrumentSelectConfigOC = [{
 }, {
   id: InstrumentId.EUR_JPY,
   label: 'EUR/JPY'
-}, {
-  id: InstrumentId.EUR_USD,
-  label: 'EUR/USD'
 }, {
   id: InstrumentId.EUR_CHF,
   label: 'EUR/CHF'

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"],"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":[]}
+{"version":3,"file":"selectConfig.js","names":["BookType","Granularity","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfigOC","EUR_USD","EUR_AUD","EUR_GBP","EUR_JPY","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_USD,\n    label: 'EUR/USD',\n  },\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_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

@@ -3,31 +3,33 @@
   "15_minutes": "15 minutes",
   "4_hours": "4 hours",
   "5_minutes": "5 minutes",
-  "buy_overbalance": "Buy overbalance",
   "buy": "Buy",
+  "buy_overbalance": "Buy overbalance",
   "candle": "Candle",
-  "close_price": "Close price",
+  "close": "Close",
   "data_unavailable": "Data unavailable",
+  "even_market_demand": "Even market demand",
   "granularity": "Granularity",
   "high": "High",
   "instrument": "Instrument",
-  "long_overbalance": "Long overbalance",
   "long": "Long",
+  "long_overbalance": "Long overbalance",
   "low": "Low",
   "no_matching_results": "No matching results",
-  "open_price": "Open price",
+  "open": "Open",
   "order_book": "Order book",
   "orders": "Orders",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "position_book": "Position book",
-  "positions": "Positions",
+  "price": "Price",
   "price_range": "Price range",
   "search": "Search",
-  "sell_overbalance": "Sell overbalance",
   "sell": "Sell",
+  "sell_overbalance": "Sell overbalance",
   "sentiment": "Sentiment",
-  "short_overbalance": "Short overbalance",
   "short": "Short",
-  "even_market_demand": "Even market demand",
-  "price": "Price"
+  "short_overbalance": "Short overbalance",
+  "tap_chart_to_see_more_details": "Tap the chart to see more details",
+  "hover_chart_to_see_more_details": "Hover over the chart to see more details",
+  "trades": "Trades"
 }

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

@@ -5,7 +5,6 @@ interface GetTooltipConfigParams {
     bookType: BookType;
     bucketWidth: number;
     buckets: Bucket[][];
-    displayPrecision: number;
     labelCallback: (key: string, params?: Record<string, unknown>) => string;
     selectedPriceRef: {
         current: number;
@@ -13,6 +12,9 @@ interface GetTooltipConfigParams {
     tooltipLinesColor: string;
     sentimentLongs: (number | null)[];
     sentimentShorts: (number | null)[];
+    isDesktop: boolean;
+    isDark: boolean;
+    locale: string;
 }
-export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, sentimentLongs, sentimentShorts, }: GetTooltipConfigParams) => TooltipComponentOption;
+export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, labelCallback, selectedPriceRef, tooltipLinesColor, sentimentLongs, sentimentShorts, isDesktop, isDark, locale, }: GetTooltipConfigParams) => TooltipComponentOption;
 export {};

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

@@ -2,6 +2,8 @@ import type { XAXisComponentOption } from 'echarts';
 interface GetXAxisConfigParams {
     dates: string[];
     isGreaterThanTwoWeeks: boolean;
+    locale: string;
+    isDesktop: boolean;
 }
-export declare const getXAxisConfig: ({ dates, isGreaterThanTwoWeeks, }: GetXAxisConfigParams) => XAXisComponentOption[];
+export declare const getXAxisConfig: ({ dates, isGreaterThanTwoWeeks, locale, isDesktop, }: GetXAxisConfigParams) => XAXisComponentOption[];
 export {};

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

@@ -2,6 +2,9 @@ import type { YAXisComponentOption } from 'echarts';
 interface GetYAxisConfigParams {
     bucketWidth: number;
     displayPrecision: number;
+    selectedPriceRef: {
+        current: number;
+    };
 }
-export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, }: GetYAxisConfigParams) => YAXisComponentOption[];
+export declare const getYAxisConfig: ({ bucketWidth, displayPrecision, selectedPriceRef, }: GetYAxisConfigParams) => YAXisComponentOption[];
 export {};

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

@@ -0,0 +1 @@
+export declare const formatFullDate: (date: Date, locale: string) => string;

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

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

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

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

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

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

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

@@ -1,4 +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;
+export declare const handleLabelUpdate: (instance: EChartsType, mainData: ChartProps["mainData"], labelTimerRef: MutableRefObject<NodeJS.Timeout | null>, isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>, locale: string) => void;

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

@@ -1,3 +1,4 @@
+export * from './formatFullDate';
 export * from './formatXAxisAdditionalLabel';
 export * from './formatXAxisLabel';
 export * from './getChartStyles';
@@ -8,3 +9,4 @@ export * from './getTooltipFormatter';
 export * from './handleLabelUpdate';
 export * from './handleTooltipUpdate';
 export * from './isDifferenceGreaterThanTwoWeeks';
+export * from './normalizeLocale';

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

@@ -0,0 +1 @@
+export declare const normalizeLocale: (locale: string) => string;

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

@@ -46,6 +46,7 @@ interface GetOptionProps {
     isDesktop: boolean;
     isLoading: boolean;
     labelCallback: (key: string, params?: Record<string, unknown>) => string;
+    locale: string;
 }
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
 export interface ChartProps {

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

@@ -0,0 +1,5 @@
+interface UseResizeObserverOptions {
+    debounceDelay?: number;
+}
+export declare const useResizeObserver: (options?: UseResizeObserverOptions) => [React.RefObject<HTMLDivElement>, boolean];
+export {};

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

@@ -10,34 +10,40 @@ export declare const TIME_THRESHOLDS: {
     readonly TWO_WEEKS_MS: number;
 };
 export declare const CHART_CONFIG: {
-    readonly HEIGHT: 440;
-    readonly MAIN_HEIGHT: 400;
-    readonly MARGIN_BETWEEN: 50;
-    readonly SENTIMENT_HEIGHT: 120;
-    readonly WIDTH: 9999;
-    readonly X_LABEL_SIZE: 40;
-    readonly Y_LABEL_SIZE_DESKTOP: 50;
-    readonly Y_LABEL_SIZE_MOBILE: 40;
-    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;
+    readonly HEIGHT_DESKTOP: number;
+    readonly HEIGHT_MOBILE: number;
+    readonly MAIN_HEIGHT_DESKTOP: number;
+    readonly MAIN_HEIGHT_MOBILE: number;
+    readonly MARGIN_BETWEEN: number;
+    readonly SENTIMENT_HEIGHT: number;
+    readonly WIDTH: number;
+    readonly X_LABEL_SIZE: number;
+    readonly Y_LABEL_SIZE_DESKTOP: number;
+    readonly Y_LABEL_SIZE_MOBILE: number;
+    readonly Y_SENTIMENT_LABEL_DESKTOP_SIZE: number;
+    readonly Y_SENTIMENT_LABEL_MOBILE_SIZE: number;
+    readonly INITIAL_START_ZOOM_DESKTOP: number;
+    readonly INITIAL_START_ZOOM_MOBILE: number;
+    readonly INITIAL_END_ZOOM: number;
+    readonly X_AXIS_DATE_PADDING: string;
+    readonly SENTIMENT_MIN: number;
+    readonly SENTIMENT_MAX: number;
+    readonly TOP_LABEL_SPACE_DESKTOP: number;
+    readonly TOP_LABEL_SPACE_MOBILE: number;
+    readonly TOOLTIP_HEIGHT_MOBILE: number;
+    readonly TOOLTIP_HEIGHT_DESKTOP: number;
+    readonly TOOLTIP_OFFSET: number;
 };
 export declare const COLOR_MAP: {
     readonly dark: {
         readonly long: readonly [string, string];
         readonly short: readonly [string, string];
+        readonly backgroundColor: string;
     };
     readonly light: {
         readonly long: readonly [string, string];
         readonly short: readonly [string, string];
+        readonly backgroundColor: string;
     };
 };
 export declare const INSTRUMENTS_CONFIG: Record<InstrumentId, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "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.237",
+    "@oanda/labs-widget-common": "^1.0.239",
     "@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": "c229ff589fb221f71aa5b10c1498b32e4a3b61b3"
+  "gitHead": "a4fa86d785d1359fdb0eba942e26a4e9b99b72f2"
 }

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

@@ -19,13 +19,12 @@ import {
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useMediaQuery } from 'usehooks-ts';
 
 import { CHART_CONFIG } from '../../constants';
 import {
   handleLabelUpdate,
-  handleTooltipUpdate,
   isDifferenceGreaterThanTwoWeeks,
+  normalizeLocale,
 } from './chartUtils';
 import { getOption } from './getOption';
 import type { ChartProps, DataZoomEvent } from './types';
@@ -54,12 +53,9 @@ const Chart = ({
   isLoading,
 }: ChartProps) => {
   const { isDark } = useLayoutProvider();
-  const { lang } = useLocale();
-  const canHover = useMediaQuery('(hover: hover)');
+  const { lang, locale } = useLocale();
   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;
@@ -94,28 +90,33 @@ const Chart = ({
         isDark,
         isDesktop,
         isLoading,
+        locale: normalizeLocale(locale),
         labelCallback: lang,
       }),
-    [mainData, additionalData, isDark, isDesktop, isLoading, lang]
+    [mainData, additionalData, isDark, isDesktop, isLoading, lang, locale]
   );
 
   // 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
+        isGreaterThanTwoWeeksRef,
+        normalizeLocale(locale)
       );
     },
-    [mainData, canHover]
+    [mainData, locale]
   );
 
+  const chartHeight = isDesktop
+    ? CHART_CONFIG.HEIGHT_DESKTOP
+    : CHART_CONFIG.HEIGHT_MOBILE;
+
   return (
     <BaseChart
-      chartHeight={CHART_CONFIG.HEIGHT}
+      chartHeight={chartHeight}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}

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

@@ -8,9 +8,11 @@ import {
 import React, { useEffect, useState } from 'react';
 import { useDebounceCallback } from 'usehooks-ts';
 
+import { CHART_CONFIG } from '../../constants';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { useCrowdViewData } from './useCrowdViewData';
+import { useResizeObserver } from './useResizeObserver';
 
 const ChartWithData = ({
   instrument,
@@ -20,6 +22,7 @@ const ChartWithData = ({
 }: ChartWithDataProps) => {
   const { size } = useLayoutProvider();
   const [debouncedLoading, setDebouncedLoading] = useState(true);
+  const [containerRef, isResizing] = useResizeObserver({ debounceDelay: 150 });
   const isDesktop = size === Size.DESKTOP;
 
   const { mainData, additionalData, loading, priceCandlesLoading, error } =
@@ -44,15 +47,31 @@ const ChartWithData = ({
     }
   }, [loading, hideLoading]);
 
+  const showChart =
+    !priceCandlesLoading &&
+    !error &&
+    !!mainData &&
+    !!additionalData &&
+    !isResizing;
+  const showLoader = loading || isResizing;
+
+  const chartHeight = isDesktop
+    ? CHART_CONFIG.HEIGHT_DESKTOP
+    : CHART_CONFIG.HEIGHT_MOBILE;
+
   return (
     <>
-      <div className="lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden">
+      <div
+        ref={containerRef}
+        className="lw-relative lw-w-full lw-overflow-hidden"
+        style={{ height: chartHeight }}
+      >
         {error && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <ChartError />
           </div>
         )}
-        {!priceCandlesLoading && !error && !!mainData && !!additionalData && (
+        {showChart && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
             <Chart
               additionalData={additionalData}
@@ -62,7 +81,7 @@ const ChartWithData = ({
             />
           </div>
         )}
-        {loading && (
+        {showLoader && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-bg-bg-transparent-50">
             <Spinner size={SpinnerSize.lg} />
           </div>

package/src/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.ts

@@ -8,22 +8,38 @@ interface GetGridConfigParams {
 
 export const getGridConfig = ({
   isDesktop,
-}: GetGridConfigParams): GridComponentOption[] => [
-  {
-    id: 'main-grid',
-    name: 'main-grid',
-    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,
-    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
-    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
-    bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
-    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
-  },
-  {
-    id: 'sentiment-grid',
-    name: 'sentiment-grid',
-    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,
-    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
-    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
-    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
-  },
-];
+}: GetGridConfigParams): GridComponentOption[] => {
+  const {
+    Y_SENTIMENT_LABEL_DESKTOP_SIZE,
+    Y_SENTIMENT_LABEL_MOBILE_SIZE,
+    Y_LABEL_SIZE_DESKTOP,
+    Y_LABEL_SIZE_MOBILE,
+    TOP_LABEL_SPACE_DESKTOP,
+    TOP_LABEL_SPACE_MOBILE,
+    MAIN_HEIGHT_DESKTOP,
+    MAIN_HEIGHT_MOBILE,
+    TOOLTIP_HEIGHT_MOBILE,
+    TOOLTIP_HEIGHT_DESKTOP,
+  } = CHART_CONFIG;
+
+  const mainHeight = isDesktop ? MAIN_HEIGHT_DESKTOP : MAIN_HEIGHT_MOBILE;
+
+  const position = {
+    left: `${isDesktop ? Y_SENTIMENT_LABEL_DESKTOP_SIZE : Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,
+    right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,
+    top: `${isDesktop ? TOP_LABEL_SPACE_DESKTOP + TOOLTIP_HEIGHT_DESKTOP : TOP_LABEL_SPACE_MOBILE + TOOLTIP_HEIGHT_MOBILE}px`,
+    height: `${mainHeight}px`,
+  };
+  return [
+    {
+      id: 'main-grid',
+      name: 'main-grid',
+      ...position,
+    },
+    {
+      id: 'sentiment-grid',
+      name: 'sentiment-grid',
+      ...position,
+    },
+  ];
+};

package/src/CrowdViewWidget/components/Chart/chartOptions/getGridLines.ts

@@ -12,16 +12,34 @@ export const getGridLines = ({
   isDark,
   isDesktop,
 }: GetGridLinesParams): GraphicComponentOption[] => {
-  const { WIDTH, MAIN_HEIGHT, X_LABEL_SIZE } = CHART_CONFIG;
+  const {
+    WIDTH,
+    MAIN_HEIGHT_DESKTOP,
+    MAIN_HEIGHT_MOBILE,
+    X_LABEL_SIZE,
+    TOOLTIP_HEIGHT_MOBILE,
+    TOOLTIP_HEIGHT_DESKTOP,
+    Y_SENTIMENT_LABEL_DESKTOP_SIZE,
+    Y_SENTIMENT_LABEL_MOBILE_SIZE,
+    Y_LABEL_SIZE_DESKTOP,
+    Y_LABEL_SIZE_MOBILE,
+    TOP_LABEL_SPACE_MOBILE,
+  } = CHART_CONFIG;
+
+  const mainHeight = isDesktop ? MAIN_HEIGHT_DESKTOP : MAIN_HEIGHT_MOBILE;
   const ySentimentLabelSize = isDesktop
-    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE
-    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;
+    ? Y_SENTIMENT_LABEL_DESKTOP_SIZE
+    : Y_SENTIMENT_LABEL_MOBILE_SIZE;
+
+  const yLabelSize = isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE;
 
-  const yLabelSize = isDesktop
-    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
-    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+  const topMargin = isDesktop
+    ? CHART_CONFIG.TOP_LABEL_SPACE_DESKTOP + TOOLTIP_HEIGHT_DESKTOP
+    : TOP_LABEL_SPACE_MOBILE + TOOLTIP_HEIGHT_MOBILE;
 
-  const topMargin = isDesktop ? 0 : CHART_CONFIG.TOP_MARGIN_MOBILE;
+  const tooltipHeight = isDesktop
+    ? TOOLTIP_HEIGHT_DESKTOP
+    : TOOLTIP_HEIGHT_MOBILE;
 
   return [
     // Top
@@ -44,7 +62,7 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+        y2: mainHeight + topMargin + X_LABEL_SIZE + 2,
       },
       z: 30,
     },
@@ -68,7 +86,7 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+        y2: mainHeight + X_LABEL_SIZE + topMargin + 2,
       },
       z: 30,
     },
@@ -81,7 +99,7 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT - topMargin,
+        y2: mainHeight,
       },
       z: 30,
     },
@@ -94,7 +112,7 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT - topMargin,
+        y2: mainHeight,
       },
       z: 30,
     },
@@ -122,5 +140,17 @@ export const getGridLines = ({
       },
       z: 30,
     },
+    // Mobile tooltip,
+    {
+      ...getLineCommons(isDark),
+      top: tooltipHeight - 3,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+      z: 30,
+    },
   ];
 };