@oanda/labs-crowd-view-widget 1.0.47 → 1.0.49

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

@@ -7,7 +7,8 @@ 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
@@ -15,10 +16,12 @@ export const Legend = _ref => {
   return React.createElement("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"
   }, 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-pb-6 lw-pt-0 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;EAAqH,GAClIb,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,9 +4,11 @@ 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("span", {

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      <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;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;IAAMC,SAAS,EAAC;EAAmE,GAChFH,KACG,CAAC,EACPN,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,GAClB,CAAC,EACPb,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,aAAAG,MAAA,CAC3ER,MAAM,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,CAAC,CAAC,GAAG,GACzB,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,
@@ -21,8 +22,14 @@ export const CHART_CONFIG = {
   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","Y_LABEL_SIZE_MOBILE","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  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  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":"AAAA,SAASA,YAAY,QAAQ,SAAS;AAEtC,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,GAAG,EAAE,IAAI;EACTC,GAAG,EAAE;AACP,CAAU;AAEV,OAAO,MAAMC,aAAa,GAAG;EAC3BC,UAAU,EAAE,CAAC;EACbC,wBAAwB,EAAE;AAC5B,CAAU;AAEV,OAAO,MAAMC,eAAe,GAAG;EAC7BC,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;AACpC,CAAU;AAEV,OAAO,MAAMC,YAAY,GAAG;EAC1BC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,IAAI;EACXC,YAAY,EAAE,EAAE;EAChBC,oBAAoB,EAAE,EAAE;EACxBC,mBAAmB,EAAE,EAAE;EACvBC,kBAAkB,EAAE,EAAE;EACtBC,gBAAgB,EAAE,GAAG;EACrBC,mBAAmB,EAAE;AACvB,CAAU;AAEV,OAAO,MAAMC,SAAS,GAAG;EACvBC,IAAI,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;EAC5BC,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS;AAC9B,CAAU;AAEV,OAAO,MAAMC,kBAQZ,GAAG;EACF,CAACrB,YAAY,CAACsB,OAAO,GAAG;IACtBC,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAAC2B,OAAO,GAAG;IACtBJ,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAAC4B,OAAO,GAAG;IACtBL,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAAC6B,OAAO,GAAG;IACtBN,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAAC8B,OAAO,GAAG;IACtBP,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAAC+B,OAAO,GAAG;IACtBR,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACgC,OAAO,GAAG;IACtBT,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACiC,OAAO,GAAG;IACtBV,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACkC,OAAO,GAAG;IACtBX,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACmC,OAAO,GAAG;IACtBZ,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACoC,OAAO,GAAG;IACtBb,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACqC,OAAO,GAAG;IACtBd,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACsC,OAAO,GAAG;IACtBf,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACuC,OAAO,GAAG;IACtBhB,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACwC,OAAO,GAAG;IACtBjB,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1B,YAAY,CAACyC,OAAO,GAAG;IACtBlB,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB;AACF,CAAC","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/CrowdViewWidget/selectConfig.js

@@ -58,17 +58,17 @@ const instrumentSelectConfig = [...instrumentSelectConfigOC, {
   label: 'XAG/USD'
 }];
 const granularitySelectConfig = [{
-  id: Granularity.M5,
-  label: '5_minutes'
-}, {
-  id: Granularity.M15,
-  label: '15_minutes'
-}, {
   id: Granularity.H1,
   label: '1_hour'
 }, {
   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","M5","M15","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.M5,\n    label: '5_minutes',\n  },\n  {\n    id: Granularity.M15,\n    label: '15_minutes',\n  },\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,GAAG;EACnBtB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC4B,EAAE;EAClBvB,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEH,WAAW,CAAC6B,EAAE;EAClBxB,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","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":[]}

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

@@ -21,8 +21,14 @@ export declare const CHART_CONFIG: {
     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.47",
+  "version": "1.0.49",
   "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.229",
+    "@oanda/labs-widget-common": "^1.0.231",
     "@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": "47f304845284328dc8e0889e41df96af97dd683b"
+  "gitHead": "562750cf0dc3afe44417d6563fbca5553c675e7d"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -17,7 +17,7 @@ import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const { lang } = useLocale();
-  const { size } = useLayoutProvider();
+  const { size, isDark } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const [bookType, setBookType] = useState(BookType.Order);
@@ -108,7 +108,7 @@ const Main = ({ division }: MainProps) => {
             instrument={instrument.id}
           />
 
-          <Legend bookType={bookType} />
+          <Legend bookType={bookType} isDark={isDark} />
         </div>
       )}
     </>

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

@@ -2,6 +2,7 @@ import {
   colorPalette,
   getGridLines,
   getLineCommons,
+  themeColors,
 } from '@oanda/labs-widget-common';
 
 import { CHART_CONFIG } from '../../constants';
@@ -71,6 +72,9 @@ export const getOption: GetOptionType = (
       axisPointer: {
         type: 'cross',
         axis: 'x',
+        crossStyle: {
+          color: isDark ? colorPalette.orange : themeColors.borderPrimary.light,
+        },
         label: {
           formatter: (params) => {
             if (params.axisDimension === 'y') {
@@ -137,8 +141,16 @@ export const getOption: GetOptionType = (
         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: {
@@ -175,7 +187,7 @@ export const getOption: GetOptionType = (
                 height: rectHeight,
               },
               style: {
-                fill: getRectColor(sentiment),
+                fill: getRectColor(sentiment, isDark),
               },
               silent: true,
               emphasisDisabled: true,

package/src/CrowdViewWidget/components/Chart/useCrowdViewData.ts

@@ -27,6 +27,10 @@ export const useCrowdViewData = ({
   division,
   granularity,
 }: UseCrowdViewDataProps): UseCrowdViewDataReturn => {
+  const dataSource =
+    division === Division.Ogm || division === Division.Oj
+      ? DataSource.Mt5
+      : DataSource.V20;
   const {
     loading: priceCandlesLoading,
     data: priceCandlesData,
@@ -35,10 +39,10 @@ export const useCrowdViewData = ({
     getPriceCandles,
     {
       variables: {
-        dataSource: division === Division.Ogm ? DataSource.Mt5 : DataSource.V20,
+        dataSource,
         division,
         instrument:
-          division === Division.Ogm
+          dataSource === DataSource.Mt5
             ? INSTRUMENTS_CONFIG[instrument].mt5name
             : INSTRUMENTS_CONFIG[instrument].v20name,
         granularity,

package/src/CrowdViewWidget/components/Chart/utils/chartUtils.ts

@@ -87,10 +87,17 @@ const getGradientColor = (
   return colorScale(value).hex();
 };
 
-export const getRectColor = (sentiment: number) =>
-  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: number, isDark: boolean) => {
+  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 = ({
   params,

package/src/CrowdViewWidget/components/Legend/Legend.tsx

@@ -9,23 +9,27 @@ interface LegendProps {
   longValues?: [number, number];
   shortValues?: [number, number];
   bookType: BookType;
+  isDark: boolean;
 }
 
 export const Legend = ({
   longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
   shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
   bookType,
+  isDark,
 }: LegendProps) => {
   const { lang } = useLocale();
 
   return (
     <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">
       <LegendBar
+        isDark={isDark}
         label={lang(bookType === BookType.Order ? 'buy' : 'long')}
         type="long"
         values={longValues}
       />
       <LegendBar
+        isDark={isDark}
         label={lang(bookType === BookType.Order ? 'sell' : 'short')}
         type="short"
         values={shortValues}

package/src/CrowdViewWidget/components/Legend/LegendBar.tsx

@@ -8,10 +8,12 @@ interface LegendBarProps {
   values: number[];
   type: LegendType;
   label: string;
+  isDark: boolean;
 }
 
-export const LegendBar = ({ values, type, label }: LegendBarProps) => {
-  const colors = COLOR_MAP[type];
+export const LegendBar = ({ values, type, label, isDark }: LegendBarProps) => {
+  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+  const colors = type === 'long' ? colorPalette.long : colorPalette.short;
 
   return (
     <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">

package/src/CrowdViewWidget/constants.ts

@@ -1,3 +1,5 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
 import { InstrumentId } from './types';
 
 export const BOOKS_THRESHOLDS = {
@@ -26,8 +28,14 @@ export const CHART_CONFIG = {
 } as const;
 
 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],
+  },
 } as const;
 
 export const INSTRUMENTS_CONFIG: Record<

package/src/CrowdViewWidget/selectConfig.ts

@@ -84,14 +84,6 @@ const instrumentSelectConfig = [
 ];
 
 const granularitySelectConfig = [
-  {
-    id: Granularity.M5,
-    label: '5_minutes',
-  },
-  {
-    id: Granularity.M15,
-    label: '15_minutes',
-  },
   {
     id: Granularity.H1,
     label: '1_hour',
@@ -100,6 +92,14 @@ const granularitySelectConfig = [
     id: Granularity.H4,
     label: '4_hours',
   },
+  {
+    id: Granularity.M5,
+    label: '5_minutes',
+  },
+  {
+    id: Granularity.M15,
+    label: '15_minutes',
+  },
 ];
 
 export {

package/test/components/Chart/utils/chartUtils.test.ts

@@ -48,20 +48,37 @@ describe('chartUtils', () => {
   });
 
   describe('getRectColor', () => {
-    it('uses long color scale for positive sentiment', () => {
-      const color = getRectColor(BOOKS_THRESHOLDS.MAX);
+    it('uses long color scale for positive sentiment in light mode', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX, false);
       expect(typeof color).toBe('string');
       // At max threshold, should be at or near target color
       expect(color.toLowerCase()).toContain(
-        COLOR_MAP.long[1].slice(1).toLowerCase().substring(0, 3)
+        COLOR_MAP.light.long[1].slice(1).toLowerCase().substring(0, 3)
       );
     });
 
-    it('uses short color scale for negative sentiment', () => {
-      const color = getRectColor(-BOOKS_THRESHOLDS.MAX);
+    it('uses short color scale for negative sentiment in light mode', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, false);
       expect(typeof color).toBe('string');
       expect(color.toLowerCase()).toContain(
-        COLOR_MAP.short[1].slice(1).toLowerCase().substring(0, 3)
+        COLOR_MAP.light.short[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses long color scale for positive sentiment in dark mode', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX, true);
+      expect(typeof color).toBe('string');
+      // At max threshold, should be at or near target color
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.dark.long[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses short color scale for negative sentiment in dark mode', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, true);
+      expect(typeof color).toBe('string');
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.dark.short[1].slice(1).toLowerCase().substring(0, 3)
       );
     });
   });

package/test/components/Legend.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { Legend } from '../../src/CrowdViewWidget/components';
+import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 import { BookType } from '../../src/gql/types/graphql';
 
 describe('Crowd View Widget', () => {
@@ -15,6 +16,7 @@ describe('Crowd View Widget', () => {
         const { getAllByText } = render(
           <Legend
             bookType={BookType.Position}
+            isDark={false}
             longValues={[0.15, 0.55]}
             shortValues={[0.15, 0.55]}
           />
@@ -23,6 +25,48 @@ describe('Crowd View Widget', () => {
         expect(getAllByText(/long/)).toHaveLength(1);
         expect(getAllByText(/short/)).toHaveLength(1);
       });
+
+      it('passes isDark prop to LegendBar components in light mode', () => {
+        const { getAllByTestId } = render(
+          <Legend
+            bookType={BookType.Position}
+            isDark={false}
+            longValues={[0.15, 0.55]}
+            shortValues={[0.15, 0.55]}
+          />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(2);
+        // Check that segments use light mode colors (either long or short)
+        const styles = segments.map((segment) => segment.getAttribute('style'));
+        const hasLightColors = styles.some(
+          (style) =>
+            style?.includes(COLOR_MAP.light.long[0]) ||
+            style?.includes(COLOR_MAP.light.short[0])
+        );
+        expect(hasLightColors).toBe(true);
+      });
+
+      it('passes isDark prop to LegendBar components in dark mode', () => {
+        const { getAllByTestId } = render(
+          <Legend
+            bookType={BookType.Position}
+            isDark={true}
+            longValues={[0.15, 0.55]}
+            shortValues={[0.15, 0.55]}
+          />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(2);
+        // Check that segments use dark mode colors (either long or short)
+        const styles = segments.map((segment) => segment.getAttribute('style'));
+        const hasDarkColors = styles.some(
+          (style) =>
+            style?.includes(COLOR_MAP.dark.long[0]) ||
+            style?.includes(COLOR_MAP.dark.short[0])
+        );
+        expect(hasDarkColors).toBe(true);
+      });
     });
   });
 });