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

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

@@ -1,29 +1,32 @@
+import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import React from 'react';
 import { BookType } from '../../../gql/types/graphql';
 import { LegendBar } from './LegendBar';
 export const Legend = _ref => {
   let {
-    longValues,
-    shortValues,
-    bookType,
-    isDark
+    bookType
   } = _ref;
+  const {
+    isDark
+  } = useLayoutProvider();
   const {
     lang
   } = useLocale();
   return React.createElement("div", {
-    className: "lw-mx-auto lw-mt-4 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"
+    className: "lw-my-4 lw-w-full"
+  }, React.createElement("div", {
+    className: "lw-mb-1 lw-flex lw-w-full lw-flex-row lw-justify-between"
   }, React.createElement(LegendBar, {
     isDark: isDark,
-    label: lang(bookType === BookType.Order ? 'buy' : 'long'),
-    type: "long",
-    values: longValues
+    type: "long"
+  }), React.createElement("div", {
+    className: "lw-w-[250px]"
   }), React.createElement(LegendBar, {
     isDark: isDark,
-    label: lang(bookType === BookType.Order ? 'sell' : 'short'),
-    type: "short",
-    values: shortValues
-  }));
+    type: "short"
+  })), React.createElement("div", {
+    className: "lw-flex lw-w-full lw-flex-row lw-justify-between lw-pb-2 lw-font-sans lw-text-xs lw-text-text-primary"
+  }, React.createElement("span", null, lang(bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance')), React.createElement("span", null, lang('even_market_demand')), React.createElement("span", null, lang(bookType === BookType.Order ? 'sell_overbalance' : 'short_overbalance'))));
 };
 //# sourceMappingURL=Legend.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","names":["useLocale","React","BookType","LegendBar","Legend","_ref","longValues","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 { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues: (number | undefined)[];\n  shortValues: (number | undefined)[];\n  bookType: BookType;\n  isDark: boolean;\n}\n\nexport const Legend = ({\n  longValues,\n  shortValues,\n  bookType,\n  isDark,\n}: LegendProps) => {\n  const { lang } = useLocale();\n\n  return (\n    <div className=\"lw-mx-auto lw-mt-4 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,SAAS,QAAQ,aAAa;AASvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAKH;EAAA,IALI;IACrBC,UAAU;IACVC,WAAW;IACXC,QAAQ;IACRC;EACW,CAAC,GAAAJ,IAAA;EACZ,MAAM;IAAEK;EAAK,CAAC,GAAGV,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAA6H,GAC1IX,KAAA,CAAAU,aAAA,CAACR,SAAS;IACRM,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAEH,IAAI,CAACF,QAAQ,KAAKN,QAAQ,CAACY,KAAK,GAAG,KAAK,GAAG,MAAM,CAAE;IAC1DC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAEV;EAAW,CACpB,CAAC,EACFL,KAAA,CAAAU,aAAA,CAACR,SAAS;IACRM,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAEH,IAAI,CAACF,QAAQ,KAAKN,QAAQ,CAACY,KAAK,GAAG,MAAM,GAAG,OAAO,CAAE;IAC5DC,IAAI,EAAC,OAAO;IACZC,MAAM,EAAET;EAAY,CACrB,CACE,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"Legend.js","names":["useLayoutProvider","useLocale","React","BookType","LegendBar","Legend","_ref","bookType","isDark","lang","createElement","className","type","Order"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLayoutProvider } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  bookType: BookType;\n}\n\nexport const Legend = ({ bookType }: LegendProps) => {\n  const { isDark } = useLayoutProvider();\n  const { lang } = useLocale();\n\n  return (\n    <div className=\"lw-my-4 lw-w-full\">\n      <div className=\"lw-mb-1 lw-flex lw-w-full lw-flex-row lw-justify-between\">\n        <LegendBar isDark={isDark} type=\"long\" />\n        <div className=\"lw-w-[250px]\" />\n        <LegendBar isDark={isDark} type=\"short\" />\n      </div>\n      <div className=\"lw-flex lw-w-full lw-flex-row lw-justify-between lw-pb-2 lw-font-sans lw-text-xs lw-text-text-primary\">\n        <span>\n          {lang(\n            bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance'\n          )}\n        </span>\n        <span>{lang('even_market_demand')}</span>\n        <span>\n          {lang(\n            bookType === BookType.Order\n              ? 'sell_overbalance'\n              : 'short_overbalance'\n          )}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,SAAS,QAAQ,aAAa;AAMvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAC9C,MAAM;IAAEE;EAAO,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAES;EAAK,CAAC,GAAGR,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAChCT,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAA0D,GACvET,KAAA,CAAAQ,aAAA,CAACN,SAAS;IAACI,MAAM,EAAEA,MAAO;IAACI,IAAI,EAAC;EAAM,CAAE,CAAC,EACzCV,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAc,CAAE,CAAC,EAChCT,KAAA,CAAAQ,aAAA,CAACN,SAAS;IAACI,MAAM,EAAEA,MAAO;IAACI,IAAI,EAAC;EAAO,CAAE,CACtC,CAAC,EACNV,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAuG,GACpHT,KAAA,CAAAQ,aAAA,eACGD,IAAI,CACHF,QAAQ,KAAKJ,QAAQ,CAACU,KAAK,GAAG,iBAAiB,GAAG,kBACpD,CACI,CAAC,EACPX,KAAA,CAAAQ,aAAA,eAAOD,IAAI,CAAC,oBAAoB,CAAQ,CAAC,EACzCP,KAAA,CAAAQ,aAAA,eACGD,IAAI,CACHF,QAAQ,KAAKJ,QAAQ,CAACU,KAAK,GACvB,kBAAkB,GAClB,mBACN,CACI,CACH,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -2,31 +2,20 @@ import React from 'react';
 import { COLOR_MAP } from '../../constants';
 export const LegendBar = _ref => {
   let {
-    values,
     type,
-    label,
     isDark
   } = _ref;
   const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
-  const colors = type === 'long' ? colorPalette.long : colorPalette.short;
+  const startColor = type === 'long' ? colorPalette.long[1] : colorPalette.short[0];
+  const endColor = type === 'long' ? colorPalette.long[0] : colorPalette.short[1];
   return React.createElement("div", {
-    className: "lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary"
-  }, React.createElement("span", {
-    className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
-  }, label), React.createElement("div", {
-    className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary"
+    className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden"
   }, React.createElement("div", {
     className: "lw-h-full lw-flex-1",
     "data-testid": "legend-bar-segment",
     style: {
-      background: "linear-gradient(90deg,".concat(colors[0], " 0%, ").concat(colors[1], " 100%)")
+      background: "linear-gradient(90deg,".concat(startColor, " 0%, ").concat(endColor, " 100%)")
     }
-  })), React.createElement("div", {
-    className: "lw-flex lw-w-full lw-justify-between"
-  }, React.createElement("span", {
-    className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
-  }, values[0] ? "".concat(values[0].toFixed(2), "%") : '—'), React.createElement("span", {
-    className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
-  }, values[1] ? "\u2264 ".concat(values[1].toFixed(2), "%") : '—')));
+  }));
 };
 //# sourceMappingURL=LegendBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LegendBar.js","names":["React","COLOR_MAP","LegendBar","_ref","values","type","label","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 | undefined)[];\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] ? `${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] ? `≤ ${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,MAAAc,MAAA,CAAMd,MAAM,CAAC,CAAC,CAAC,CAACe,OAAO,CAAC,CAAC,CAAC,SAAM,GACtC,CAAC,EACPnB,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFX,MAAM,CAAC,CAAC,CAAC,aAAAc,MAAA,CAAQd,MAAM,CAAC,CAAC,CAAC,CAACe,OAAO,CAAC,CAAC,CAAC,SAAM,GACxC,CACH,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"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":[]}

package/dist/module/CrowdViewWidget/constants.js

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 import { InstrumentId } from './types';
 export const BUCKET_CONFIG = {
   MULTIPLIER: 4,
@@ -8,6 +9,7 @@ export const TIME_THRESHOLDS = {
   TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000
 };
 export const CHART_CONFIG = {
+  HEIGHT: 440,
   MAIN_HEIGHT: 400,
   MARGIN_BETWEEN: 50,
   SENTIMENT_HEIGHT: 120,
@@ -15,26 +17,21 @@ export const CHART_CONFIG = {
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
   Y_LABEL_SIZE_MOBILE: 40,
-  INITIAL_START_ZOOM: 80,
+  Y_SENTIMENT_LABEL_SIZE: 40,
+  INITIAL_START_ZOOM: 90,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
-  SENTIMENT_MAX: 100,
-  SENTIMENT_INTERVAL: 25,
-  SENTIMENT_TEXT_OFFSET: 16
-};
-export const CHART_CONFIG_CALCULATED = {
-  FULL_HEIGHT: CHART_CONFIG.MAIN_HEIGHT + CHART_CONFIG.MARGIN_BETWEEN + CHART_CONFIG.SENTIMENT_HEIGHT + CHART_CONFIG.X_LABEL_SIZE,
-  SENTIMENT_TEXT_POSITION: CHART_CONFIG.SENTIMENT_HEIGHT + CHART_CONFIG.SENTIMENT_TEXT_OFFSET
+  SENTIMENT_MAX: 100
 };
 export const COLOR_MAP = {
   dark: {
-    long: [colorPalette.darkBlue10, colorPalette.darkBlue90],
-    short: [colorPalette.darkYellow10, colorPalette.darkYellow90]
+    long: [chroma(colorPalette.darkBlue10).shade(0.5).hex(), chroma(colorPalette.darkBlue90).shade(0.5).hex()],
+    short: [chroma(colorPalette.darkYellow10).shade(0.5).hex(), chroma(colorPalette.darkYellow90).shade(0.5).hex()]
   },
   light: {
-    long: [colorPalette.lightBlue10, colorPalette.lightBlue90],
-    short: [colorPalette.lightYellow10, colorPalette.lightYellow90]
+    long: [chroma(colorPalette.lightBlue10).tint(0.5).hex(), chroma(colorPalette.lightBlue90).tint(0.5).hex()],
+    short: [chroma(colorPalette.lightYellow10).tint(0.5).hex(), chroma(colorPalette.lightYellow90).tint(0.5).hex()]
   }
 };
 export const INSTRUMENTS_CONFIG = {

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["colorPalette","InstrumentId","BUCKET_CONFIG","MULTIPLIER","PRICE_MARGIN_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","MAIN_HEIGHT","MARGIN_BETWEEN","SENTIMENT_HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","INITIAL_START_ZOOM","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","SENTIMENT_MIN","SENTIMENT_MAX","SENTIMENT_INTERVAL","SENTIMENT_TEXT_OFFSET","CHART_CONFIG_CALCULATED","FULL_HEIGHT","SENTIMENT_TEXT_POSITION","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 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  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  INITIAL_START_ZOOM: 80,\n  INITIAL_END_ZOOM: 100,\n  X_AXIS_DATE_PADDING: '        ',\n  SENTIMENT_MIN: 0,\n  SENTIMENT_MAX: 100,\n  SENTIMENT_INTERVAL: 25,\n  SENTIMENT_TEXT_OFFSET: 16,\n} as const;\n\nexport const CHART_CONFIG_CALCULATED = {\n  FULL_HEIGHT:\n    CHART_CONFIG.MAIN_HEIGHT +\n    CHART_CONFIG.MARGIN_BETWEEN +\n    CHART_CONFIG.SENTIMENT_HEIGHT +\n    CHART_CONFIG.X_LABEL_SIZE,\n  SENTIMENT_TEXT_POSITION:\n    CHART_CONFIG.SENTIMENT_HEIGHT + CHART_CONFIG.SENTIMENT_TEXT_OFFSET,\n};\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":[]}
+{"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":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,OAAOC,MAAM,MAAM,WAAW;AAE9B,SAASC,YAAY,QAAQ,SAAS;AAEtC,OAAO,MAAMC,aAAa,GAAG;EAC3BC,UAAU,EAAE,CAAC;EACbC,uBAAuB,EAAE;AAC3B,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,WAAW,EAAE,GAAG;EAChBC,cAAc,EAAE,EAAE;EAClBC,gBAAgB,EAAE,GAAG;EACrBC,KAAK,EAAE,IAAI;EACXC,YAAY,EAAE,EAAE;EAChBC,oBAAoB,EAAE,EAAE;EACxBC,mBAAmB,EAAE,EAAE;EACvBC,sBAAsB,EAAE,EAAE;EAC1BC,kBAAkB,EAAE,EAAE;EACtBC,gBAAgB,EAAE,GAAG;EACrBC,mBAAmB,EAAE,UAAU;EAC/BC,aAAa,EAAE,CAAC;EAChBC,aAAa,EAAE;AACjB,CAAU;AAEV,OAAO,MAAMC,SAAS,GAAG;EACvBC,IAAI,EAAE;IACJC,IAAI,EAAE,CACJxB,MAAM,CAACD,YAAY,CAAC0B,UAAU,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,EAChD3B,MAAM,CAACD,YAAY,CAAC6B,UAAU,CAAC,CAACF,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,CACjD;IACDE,KAAK,EAAE,CACL7B,MAAM,CAACD,YAAY,CAAC+B,YAAY,CAAC,CAACJ,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,EAClD3B,MAAM,CAACD,YAAY,CAACgC,YAAY,CAAC,CAACL,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC;EAEtD,CAAC;EACDK,KAAK,EAAE;IACLR,IAAI,EAAE,CACJxB,MAAM,CAACD,YAAY,CAACkC,WAAW,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAACP,GAAG,CAAC,CAAC,EAChD3B,MAAM,CAACD,YAAY,CAACoC,WAAW,CAAC,CAACD,IAAI,CAAC,GAAG,CAAC,CAACP,GAAG,CAAC,CAAC,CACjD;IACDE,KAAK,EAAE,CACL7B,MAAM,CAACD,YAAY,CAACqC,aAAa,CAAC,CAACF,IAAI,CAAC,GAAG,CAAC,CAACP,GAAG,CAAC,CAAC,EAClD3B,MAAM,CAACD,YAAY,CAACsC,aAAa,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC,CAACP,GAAG,CAAC,CAAC;EAEtD;AACF,CAAU;AAEV,OAAO,MAAMW,kBAQZ,GAAG;EACF,CAACrC,YAAY,CAACsC,OAAO,GAAG;IACtBC,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAAC2C,OAAO,GAAG;IACtBJ,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAAC4C,OAAO,GAAG;IACtBL,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAAC6C,OAAO,GAAG;IACtBN,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAAC8C,OAAO,GAAG;IACtBP,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAAC+C,OAAO,GAAG;IACtBR,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACgD,OAAO,GAAG;IACtBT,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACiD,OAAO,GAAG;IACtBV,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACkD,OAAO,GAAG;IACtBX,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACmD,OAAO,GAAG;IACtBZ,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACoD,OAAO,GAAG;IACtBb,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACqD,OAAO,GAAG;IACtBd,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACsD,OAAO,GAAG;IACtBf,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACuD,OAAO,GAAG;IACtBhB,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACwD,OAAO,GAAG;IACtBjB,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAAC1C,YAAY,CAACyD,OAAO,GAAG;IACtBlB,OAAO,EAAE,QAAQ;IACjBC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,CAAC;IACZC,kBAAkB,EAAE;EACtB;AACF,CAAC","ignoreList":[]}

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

@@ -27,5 +27,6 @@
   "sell": "Sell",
   "sentiment": "Sentiment",
   "short_overbalance": "Short overbalance",
-  "short": "Short"
+  "short": "Short",
+  "even_market_demand": "Even market demand"
 }

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

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

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

@@ -0,0 +1,6 @@
+import type { GridComponentOption } from 'echarts';
+interface GetGridConfigParams {
+    isDesktop: boolean;
+}
+export declare const getGridConfig: ({ isDesktop, }: GetGridConfigParams) => GridComponentOption[];
+export {};

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

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

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

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

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

@@ -0,0 +1,11 @@
+import type { CustomSeriesOption } from 'echarts';
+import type { Bucket } from '../types';
+interface GetSeriesHeatmapConfigParams {
+    bucketWidth: number;
+    buckets: Bucket[][];
+    isDark: boolean;
+    sentimentThresholdMax: number;
+    sentimentThresholdMin: number;
+}
+export declare const getSeriesHeatmapConfig: ({ bucketWidth, buckets, isDark, sentimentThresholdMax, sentimentThresholdMin, }: GetSeriesHeatmapConfigParams) => CustomSeriesOption;
+export {};

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

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

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

@@ -0,0 +1,16 @@
+import type { TooltipComponentOption } from 'echarts';
+import type { BookType } from '../../../../gql/types/graphql';
+import type { Bucket } from '../types';
+interface GetTooltipConfigParams {
+    bookType: BookType;
+    bucketWidth: number;
+    buckets: Bucket[][];
+    displayPrecision: number;
+    labelCallback: (key: string, params?: Record<string, unknown>) => string;
+    selectedPriceRef: {
+        current: number;
+    };
+    tooltipLinesColor: string;
+}
+export declare const getTooltipConfig: ({ bookType, bucketWidth, buckets, displayPrecision, labelCallback, selectedPriceRef, tooltipLinesColor, }: GetTooltipConfigParams) => TooltipComponentOption;
+export {};

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

@@ -0,0 +1,7 @@
+import type { VisualMapComponentOption } from 'echarts';
+interface GetVisualMapConfigParams {
+    sentimentLongColor: string;
+    sentimentShortColor: string;
+}
+export declare const getVisualMapConfig: ({ sentimentLongColor, sentimentShortColor, }: GetVisualMapConfigParams) => VisualMapComponentOption;
+export {};

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

@@ -0,0 +1,7 @@
+import type { XAXisComponentOption } from 'echarts';
+interface GetXAxisConfigParams {
+    dates: string[];
+    isGreaterThanTwoWeeks: boolean;
+}
+export declare const getXAxisConfig: ({ dates, isGreaterThanTwoWeeks, }: GetXAxisConfigParams) => XAXisComponentOption[];
+export {};

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

@@ -0,0 +1,9 @@
+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 {};

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

@@ -0,0 +1,10 @@
+export * from './getDataZoomConfig';
+export * from './getGridConfig';
+export * from './getGridLines';
+export * from './getSeriesCandlestickConfig';
+export * from './getSeriesHeatmapConfig';
+export * from './getSeriesSentimentConfig';
+export * from './getTooltipConfig';
+export * from './getVisualMapConfig';
+export * from './getXAxisConfig';
+export * from './getYAxisConfig';

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

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

package/dist/types/CrowdViewWidget/components/Chart/{utils → chartUtils}/getChartStyles.d.ts

@@ -1,10 +1,10 @@
 export interface ChartStyles {
     sentimentLongColor: string;
     sentimentShortColor: string;
+    sentimentOutlineColor: string;
     candleLongColor: string;
     candleShortColor: string;
-    sentimentAreaOpacity: number;
     tooltipLinesColor: string;
-    sentimentLabelColor: string;
+    sentimentOutlineWidth: number;
 }
 export declare const getChartStyles: (isDark: boolean) => ChartStyles;

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

@@ -0,0 +1 @@
+export declare const getGradientColor: (value: number, startColor: string, targetColor: string, minThreshold: number, maxThreshold: number) => string;

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

@@ -0,0 +1,17 @@
+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}";
+    };
+}[];

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

@@ -0,0 +1 @@
+export declare const getRectColor: (sentiment: number, isDark: boolean, minThreshold: number, maxThreshold: number) => string;

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;

package/dist/types/CrowdViewWidget/{utils/instrumentUtils.d.ts → components/Chart/dataUtils/getInstrumentConfigForDivision.d.ts}

@@ -1,5 +1,5 @@
-import { Division } from '../../gql/types/graphql';
+import { Division } from '../../../../gql/types/graphql';
 export declare const getInstrumentConfigForDivision: (division: Division) => {
-    id: import("..").InstrumentId;
+    id: import("../../..").InstrumentId;
     label: string;
 }[];

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

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

package/dist/types/CrowdViewWidget/components/Chart/{utils → dataUtils}/index.d.ts

@@ -1,5 +1,5 @@
-export * from './chartUtils';
-export * from './getChartStyles';
+export * from './getInstrumentConfigForDivision';
+export * from './getTimeSpanForGranularity';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';
 export * from './processSentiments';

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

@@ -1,6 +1,6 @@
 export * from './Chart';
 export * from './chartOptions';
 export * from './ChartWithData';
+export * from './dataUtils';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils';

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { BookType } from '../../../gql/types/graphql';
 interface LegendProps {
-    longValues: (number | undefined)[];
-    shortValues: (number | undefined)[];
     bookType: BookType;
-    isDark: boolean;
 }
-export declare const Legend: ({ longValues, shortValues, bookType, isDark, }: LegendProps) => React.JSX.Element;
+export declare const Legend: ({ bookType }: LegendProps) => React.JSX.Element;
 export {};

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

@@ -1,10 +1,8 @@
 import React from 'react';
 export type LegendType = 'long' | 'short';
 interface LegendBarProps {
-    values: (number | undefined)[];
     type: LegendType;
-    label: string;
     isDark: boolean;
 }
-export declare const LegendBar: ({ values, type, label, isDark }: LegendBarProps) => React.JSX.Element;
+export declare const LegendBar: ({ type, isDark }: LegendBarProps) => React.JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ 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;
@@ -14,17 +15,12 @@ export declare const CHART_CONFIG: {
     readonly X_LABEL_SIZE: 40;
     readonly Y_LABEL_SIZE_DESKTOP: 60;
     readonly Y_LABEL_SIZE_MOBILE: 40;
-    readonly INITIAL_START_ZOOM: 80;
+    readonly Y_SENTIMENT_LABEL_SIZE: 40;
+    readonly INITIAL_START_ZOOM: 90;
     readonly INITIAL_END_ZOOM: 100;
     readonly X_AXIS_DATE_PADDING: "        ";
     readonly SENTIMENT_MIN: 0;
     readonly SENTIMENT_MAX: 100;
-    readonly SENTIMENT_INTERVAL: 25;
-    readonly SENTIMENT_TEXT_OFFSET: 16;
-};
-export declare const CHART_CONFIG_CALCULATED: {
-    FULL_HEIGHT: number;
-    SENTIMENT_TEXT_POSITION: number;
 };
 export declare const COLOR_MAP: {
     readonly dark: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "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.235",
+    "@oanda/labs-widget-common": "^1.0.236",
     "@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": "4ee940ddbff3283e2d6e412b0216df56a4eff346"
+  "gitHead": "f04c026db9ec11a1d0ac934dd66146c877b01570"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -10,10 +10,10 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
-import { ChartWithData } from './components';
+import { ChartWithData, Legend } from './components';
+import { getInstrumentConfigForDivision } from './components/Chart/dataUtils/getInstrumentConfigForDivision';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
 import type { InstrumentId, MainProps } from './types';
-import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const { lang } = useLocale();
@@ -107,6 +107,7 @@ const Main = ({ division }: MainProps) => {
             granularity={granularity.id}
             instrument={instrument.id}
           />
+          <Legend bookType={bookType} />
         </div>
       )}
     </>

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

@@ -12,8 +12,7 @@ import {
   DataZoomInsideComponent,
   GraphicComponent,
   GridSimpleComponent,
-  MarkAreaComponent,
-  MarkPointComponent,
+  MarkLineComponent,
   TooltipComponent,
   VisualMapComponent,
 } from 'echarts/components';
@@ -21,19 +20,19 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
 
-import { CHART_CONFIG_CALCULATED } from '../../constants';
-import { getOption } from './chartOptions';
+import { CHART_CONFIG } from '../../constants';
+import {
+  formatXAxisLabel,
+  getLabelData,
+  isDifferenceGreaterThanTwoWeeks,
+} from './chartUtils';
+import { getOption } from './getOption';
 import type {
   ChartProps,
   DataZoomArray,
   DataZoomEvent,
   XAxisArray,
 } from './types';
-import {
-  formatXAxisLabel,
-  getLabelData,
-  isDifferenceGreaterThanTwoWeeks,
-} from './utils/chartUtils';
 
 echarts.use([
   GridSimpleComponent,
@@ -43,8 +42,7 @@ echarts.use([
   CustomChart,
   TooltipComponent,
   CandlestickChart,
-  MarkPointComponent,
-  MarkAreaComponent,
+  MarkLineComponent,
   LineChart,
   VisualMapComponent,
   DatasetComponent,
@@ -59,7 +57,7 @@ const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
 
   return (
     <BaseChart
-      chartHeight={CHART_CONFIG_CALCULATED.FULL_HEIGHT}
+      chartHeight={CHART_CONFIG.HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
@@ -78,8 +76,6 @@ const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
           }
 
           const { dates } = mainData;
-          const batchItem = params.batch[0];
-          const { start, end } = batchItem;
 
           const { dataZoom, xAxis } = instance.getOption();
           if (
@@ -94,26 +90,6 @@ const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
 
           const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];
 
-          if (batchItem.dataZoomId === 'main') {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              dataZoomId: 'sentiment',
-              start,
-              end,
-              filterMode: 'none',
-            });
-          }
-
-          if (batchItem.dataZoomId === 'sentiment') {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              dataZoomId: 'main',
-              start,
-              end,
-              filterMode: 'filter',
-            });
-          }
-
           if (!dates[startValue] || !dates[endValue]) {
             return;
           }