@oanda/labs-crowd-view-widget 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.4 (2025-04-10)
+
+
+
+## 1.0.185 (2025-04-09)
+
+
+
+## 1.0.184 (2025-04-08)
+
+
+
+## 1.0.183 (2025-04-04)
+
+**Note:** Version bump only for package @oanda/labs-crowd-view-widget
+
+
+
+
+
 ## 1.0.3 (2025-04-09)
 
 

package/dist/main/CrowdViewWidget/Main.js

@@ -8,6 +8,7 @@ var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _monoI18n = require("@oanda/mono-i18n");
 var _react = _interopRequireWildcard(require("react"));
 var _graphql = require("../gql/types/graphql");
+var _components = require("./components");
 var _config = require("./config");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -59,7 +60,10 @@ const Main = _ref => {
     selectLabel: lang('granularity'),
     selectedOption: granularity,
     setSelectedOption: val => setGranularity(val)
-  }))), _react.default.createElement(_labsWidgetCommon.WidgetError, null)));
+  }))), _react.default.createElement(_labsWidgetCommon.WidgetError, null), _react.default.createElement(_components.Legend, {
+    longValues: [0.15, 0.25, 0.4, 0.55],
+    shortValues: [0.15, 0.25, 0.4, 0.55]
+  })));
 };
 exports.Main = Main;
 //# sourceMappingURL=Main.js.map

package/dist/main/CrowdViewWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_monoI18n","_react","_interopRequireWildcard","_graphql","_config","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","division","instrumentSelectConfigWithDivision","Division","Oc","instrumentSelectConfigOC","instrumentSelectConfig","size","useLayoutProvider","isDesktop","Size","DESKTOP","bookType","setBookType","useState","BookType","Order","instrument","setInstrument","granularity","setGranularity","granularitySelectConfig","lang","useLocale","createElement","Fragment","className","Tabs","mobileFullWidth","activeTab","handleClick","currentTarget","value","items","navigationConfig","labelCallback","cn","Select","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","WidgetError","exports"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n  WidgetError,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={instrumentSelectConfigWithDivision}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('instrument')}\n                selectedOption={instrument}\n                setSelectedOption={(val) =>\n                  setInstrument(val as { id: InstrumentId; label: string })\n                }\n              />\n            </div>\n            <div\n              className={cn({\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n          <WidgetError />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_monoI18n","_react","_interopRequireWildcard","_graphql","_components","_config","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","division","instrumentSelectConfigWithDivision","Division","Oc","instrumentSelectConfigOC","instrumentSelectConfig","size","useLayoutProvider","isDesktop","Size","DESKTOP","bookType","setBookType","useState","BookType","Order","instrument","setInstrument","granularity","setGranularity","granularitySelectConfig","lang","useLocale","createElement","Fragment","className","Tabs","mobileFullWidth","activeTab","handleClick","currentTarget","value","items","navigationConfig","labelCallback","cn","Select","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","WidgetError","Legend","longValues","shortValues","exports"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n  WidgetError,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport { Legend } from './components';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={instrumentSelectConfigWithDivision}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('instrument')}\n                selectedOption={instrument}\n                setSelectedOption={(val) =>\n                  setInstrument(val as { id: InstrumentId; label: string })\n                }\n              />\n            </div>\n            <div\n              className={cn({\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n          <WidgetError />\n\n          <Legend\n            longValues={[0.15, 0.25, 0.4, 0.55]}\n            shortValues={[0.15, 0.25, 0.4, 0.55]}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Legend = void 0;
+var _monoI18n = require("@oanda/mono-i18n");
+var _react = _interopRequireDefault(require("react"));
+var _LegendBar = require("./LegendBar");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Legend = _ref => {
+  let {
+    longValues,
+    shortValues
+  } = _ref;
+  const {
+    lang
+  } = (0, _monoI18n.useLocale)();
+  return _react.default.createElement("div", {
+    className: "lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl"
+  }, _react.default.createElement(_LegendBar.LegendBar, {
+    label: lang('long'),
+    type: "long",
+    values: longValues
+  }), _react.default.createElement(_LegendBar.LegendBar, {
+    label: lang('short'),
+    type: "short",
+    values: shortValues
+  }));
+};
+exports.Legend = Legend;
+//# sourceMappingURL=Legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.js","names":["_monoI18n","require","_react","_interopRequireDefault","_LegendBar","e","__esModule","default","Legend","_ref","longValues","shortValues","lang","useLocale","createElement","className","LegendBar","label","type","values","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues: number[];\n  shortValues: number[];\n}\n\nexport const Legend = ({ longValues, shortValues }: LegendProps) => {\n  const { lang } = useLocale();\n\n  return (\n    <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl\">\n      <LegendBar label={lang('long')} type=\"long\" values={longValues} />\n      <LegendBar label={lang('short')} type=\"short\" values={shortValues} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AAAwC,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOjC,MAAMG,MAAM,GAAGC,IAAA,IAA8C;EAAA,IAA7C;IAAEC,UAAU;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,OACEX,MAAA,CAAAK,OAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAA6G,GAC1Hb,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAY,SAAS;IAACC,KAAK,EAAEL,IAAI,CAAC,MAAM,CAAE;IAACM,IAAI,EAAC,MAAM;IAACC,MAAM,EAAET;EAAW,CAAE,CAAC,EAClER,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAY,SAAS;IAACC,KAAK,EAAEL,IAAI,CAAC,OAAO,CAAE;IAACM,IAAI,EAAC,OAAO;IAACC,MAAM,EAAER;EAAY,CAAE,CACjE,CAAC;AAEV,CAAC;AAACS,OAAA,CAAAZ,MAAA,GAAAA,MAAA","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegendBar = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const colorMap = {
+  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],
+  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325']
+};
+const LegendBar = _ref => {
+  let {
+    values,
+    type,
+    label
+  } = _ref;
+  const colors = colorMap[type];
+  return _react.default.createElement("div", {
+    className: "lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary"
+  }, _react.default.createElement("div", {
+    className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary"
+  }, values.map((_, index) => _react.default.createElement("div", {
+    key: `${label}_${colors[index]}__color`,
+    className: "lw-h-full lw-flex-1",
+    "data-testid": "legend-bar-segment",
+    style: {
+      backgroundColor: colors[index]
+    }
+  }))), _react.default.createElement("div", {
+    className: "lw-flex lw-w-full"
+  }, values.map(value => _react.default.createElement("div", {
+    key: `${value}_${type}`,
+    className: "lw-flex lw-w-1/4 lw-justify-center"
+  }, _react.default.createElement("span", {
+    className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
+  }, value.toFixed(2), "% ", label)))));
+};
+exports.LegendBar = LegendBar;
+//# sourceMappingURL=LegendBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegendBar.js","names":["_react","_interopRequireDefault","require","e","__esModule","default","colorMap","long","short","LegendBar","_ref","values","type","label","colors","createElement","className","map","_","index","key","style","backgroundColor","value","toFixed","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\ntype LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n  values: number[];\n  type: LegendType;\n  label: string;\n}\n\nconst colorMap: Record<LegendType, string[]> = {\n  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],\n  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],\n};\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n  const colors = colorMap[type];\n\n  return (\n    <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n      <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n        {values.map((_, index) => (\n          <div\n            key={`${label}_${colors[index]}__color`}\n            className=\"lw-h-full lw-flex-1\"\n            data-testid=\"legend-bar-segment\"\n            style={{\n              backgroundColor: colors[index],\n            }}\n          />\n        ))}\n      </div>\n\n      <div className=\"lw-flex lw-w-full\">\n        {values.map((value) => (\n          <div\n            key={`${value}_${type}`}\n            className=\"lw-flex lw-w-1/4 lw-justify-center\"\n          >\n            <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n              {value.toFixed(2)}% {label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAU1B,MAAMG,QAAsC,GAAG;EAC7CC,IAAI,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC;EAC1DC,KAAK,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS;AAC1D,CAAC;AAEM,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAH,IAAA;EAC/D,MAAMI,MAAM,GAAGR,QAAQ,CAACM,IAAI,CAAC;EAE7B,OACEZ,MAAA,CAAAK,OAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAqE,GAClFhB,MAAA,CAAAK,OAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAgF,GAC5FL,MAAM,CAACM,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KACnBnB,MAAA,CAAAK,OAAA,CAAAU,aAAA;IACEK,GAAG,EAAE,GAAGP,KAAK,IAAIC,MAAM,CAACK,KAAK,CAAC,SAAU;IACxCH,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCK,KAAK,EAAE;MACLC,eAAe,EAAER,MAAM,CAACK,KAAK;IAC/B;EAAE,CACH,CACF,CACE,CAAC,EAENnB,MAAA,CAAAK,OAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAC/BL,MAAM,CAACM,GAAG,CAAEM,KAAK,IAChBvB,MAAA,CAAAK,OAAA,CAAAU,aAAA;IACEK,GAAG,EAAE,GAAGG,KAAK,IAAIX,IAAI,EAAG;IACxBI,SAAS,EAAC;EAAoC,GAE9ChB,MAAA,CAAAK,OAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFO,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC,EAAC,IAAE,EAACX,KACjB,CACH,CACN,CACE,CACF,CAAC;AAEV,CAAC;AAACY,OAAA,CAAAhB,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Legend/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Legend = require("./Legend");
+Object.keys(_Legend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Legend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Legend[key];
+    }
+  });
+});
+var _LegendBar = require("./LegendBar");
+Object.keys(_LegendBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LegendBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LegendBar[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/main/CrowdViewWidget/components/Legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Legend","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_LegendBar"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/index.ts"],"sourcesContent":["export * from './Legend';\nexport * from './LegendBar';\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,UAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,UAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,UAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,UAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Legend = require("./Legend");
+Object.keys(_Legend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Legend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Legend[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/main/CrowdViewWidget/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Legend","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/CrowdViewWidget/components/index.ts"],"sourcesContent":["export * from './Legend';\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/module/CrowdViewWidget/Main.js

@@ -2,6 +2,7 @@ import { cn, Select, Size, Tabs, useLayoutProvider, WidgetError } from '@oanda/l
 import { useLocale } from '@oanda/mono-i18n';
 import React, { useState } from 'react';
 import { BookType, Division } from '../gql/types/graphql';
+import { Legend } from './components';
 import { granularitySelectConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig } from './config';
 const Main = _ref => {
   let {
@@ -51,7 +52,10 @@ const Main = _ref => {
     selectLabel: lang('granularity'),
     selectedOption: granularity,
     setSelectedOption: val => setGranularity(val)
-  }))), React.createElement(WidgetError, null)));
+  }))), React.createElement(WidgetError, null), React.createElement(Legend, {
+    longValues: [0.15, 0.25, 0.4, 0.55],
+    shortValues: [0.15, 0.25, 0.4, 0.55]
+  })));
 };
 export { Main };
 //# sourceMappingURL=Main.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","WidgetError","useLocale","React","useState","BookType","Division","granularitySelectConfig","instrumentSelectConfig","instrumentSelectConfigOC","navigationConfig","Main","_ref","division","instrumentSelectConfigWithDivision","Oc","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","lang","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n  WidgetError,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={instrumentSelectConfigWithDivision}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('instrument')}\n                selectedOption={instrument}\n                setSelectedOption={(val) =>\n                  setInstrument(val as { id: InstrumentId; label: string })\n                }\n              />\n            </div>\n            <div\n              className={cn({\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n          <WidgetError />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,SACEA,EAAE,EACFC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,iBAAiB,EACjBC,WAAW,QACN,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,sBAAsB;AACzD,SACEC,uBAAuB,EACvBC,sBAAsB,EACtBC,wBAAwB,EACxBC,gBAAgB,QACX,UAAU;AAGjB,MAAMC,IAAI,GAAGC,IAAA,IAA6B;EAAA,IAA5B;IAAEC;EAAoB,CAAC,GAAAD,IAAA;EACnC,MAAME,kCAAkC,GACtCD,QAAQ,KAAKP,QAAQ,CAACS,EAAE,GACpBN,wBAAwB,GACxBD,sBAAsB;EAE5B,MAAM;IAAEQ;EAAK,CAAC,GAAGhB,iBAAiB,CAAC,CAAC;EACpC,MAAMiB,SAAS,GAAGD,IAAI,KAAKlB,IAAI,CAACoB,OAAO;EACvC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAACC,QAAQ,CAACgB,KAAK,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAC1CU,kCAAkC,CAAC,CAAC,CACtC,CAAC;EACD,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGrB,QAAQ,CAACG,uBAAuB,CAAC,CAAC,CAAC,CAAC;EAC1E,MAAM;IAAEmB;EAAK,CAAC,GAAGxB,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACGZ,IAAI,IACHb,KAAA,CAAAwB,aAAA;IACEE,SAAS,EAAC,+BAA+B;IACzC,eAAY;EAAmB,GAE/B1B,KAAA,CAAAwB,aAAA,CAAC5B,IAAI;IACH+B,eAAe;IACfC,SAAS,EAAEZ,QAAS;IACpBa,WAAW,EAAGC,CAAC,IAAKb,WAAW,CAACa,CAAC,CAACC,aAAa,CAACC,KAAiB,CAAE;IACnEC,KAAK,EAAE1B,gBAAiB;IACxB2B,aAAa,EAAEX;EAAK,CACrB,CAAC,EACFvB,KAAA,CAAAwB,aAAA;IAAKE,SAAS,EAAC;EAA0B,GACvC1B,KAAA,CAAAwB,aAAA;IACEE,SAAS,EAAEjC,EAAE,CAAC,SAAS,EAAE;MACvB,WAAW,EAAE,CAACqB,SAAS;MACvB,cAAc,EAAEA;IAClB,CAAC;EAAE,GAEHd,KAAA,CAAAwB,aAAA,CAAC9B,MAAM;IACLyC,OAAO,EAAExB,kCAAmC;IAC5CyB,iBAAiB,EAAEb,IAAI,CAAC,QAAQ,CAAE;IAClCc,WAAW,EAAEd,IAAI,CAAC,YAAY,CAAE;IAChCe,cAAc,EAAEnB,UAAW;IAC3BoB,iBAAiB,EAAGC,GAAG,IACrBpB,aAAa,CAACoB,GAA0C;EACzD,CACF,CACE,CAAC,EACNxC,KAAA,CAAAwB,aAAA;IACEE,SAAS,EAAEjC,EAAE,CAAC;MACZ,WAAW,EAAE,CAACqB,SAAS;MACvB,cAAc,EAAEA;IAClB,CAAC;EAAE,GAEHd,KAAA,CAAAwB,aAAA,CAAC9B,MAAM;IACLyC,OAAO,EAAE/B,uBAAwB;IACjCgC,iBAAiB,EAAEb,IAAI,CAAC,QAAQ,CAAE;IAClCc,WAAW,EAAEd,IAAI,CAAC,aAAa,CAAE;IACjCe,cAAc,EAAEjB,WAAY;IAC5BkB,iBAAiB,EAAGC,GAAG,IACrBlB,cAAc,CAACkB,GAA2C;EAC3D,CACF,CACE,CACF,CAAC,EACNxC,KAAA,CAAAwB,aAAA,CAAC1B,WAAW,MAAE,CACX,CAEP,CAAC;AAEP,CAAC;AAED,SAASU,IAAI","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","WidgetError","useLocale","React","useState","BookType","Division","Legend","granularitySelectConfig","instrumentSelectConfig","instrumentSelectConfigOC","navigationConfig","Main","_ref","division","instrumentSelectConfigWithDivision","Oc","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","lang","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","longValues","shortValues"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n  WidgetError,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport { Legend } from './components';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={instrumentSelectConfigWithDivision}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('instrument')}\n                selectedOption={instrument}\n                setSelectedOption={(val) =>\n                  setInstrument(val as { id: InstrumentId; label: string })\n                }\n              />\n            </div>\n            <div\n              className={cn({\n                'lw-w-full': !isDesktop,\n                'lw-w-[280px]': isDesktop,\n              })}\n            >\n              <Select\n                options={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n          <WidgetError />\n\n          <Legend\n            longValues={[0.15, 0.25, 0.4, 0.55]}\n            shortValues={[0.15, 0.25, 0.4, 0.55]}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,24 @@
+import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+import { LegendBar } from './LegendBar';
+export const Legend = _ref => {
+  let {
+    longValues,
+    shortValues
+  } = _ref;
+  const {
+    lang
+  } = useLocale();
+  return React.createElement("div", {
+    className: "lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl"
+  }, React.createElement(LegendBar, {
+    label: lang('long'),
+    type: "long",
+    values: longValues
+  }), React.createElement(LegendBar, {
+    label: lang('short'),
+    type: "short",
+    values: shortValues
+  }));
+};
+//# sourceMappingURL=Legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.js","names":["useLocale","React","LegendBar","Legend","_ref","longValues","shortValues","lang","createElement","className","label","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n  longValues: number[];\n  shortValues: number[];\n}\n\nexport const Legend = ({ longValues, shortValues }: LegendProps) => {\n  const { lang } = useLocale();\n\n  return (\n    <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl\">\n      <LegendBar label={lang('long')} type=\"long\" values={longValues} />\n      <LegendBar label={lang('short')} type=\"short\" values={shortValues} />\n    </div>\n  );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,aAAa;AAOvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAA8C;EAAA,IAA7C;IAAEC,UAAU;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG;EAAK,CAAC,GAAGP,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAA6G,GAC1HR,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACQ,KAAK,EAAEH,IAAI,CAAC,MAAM,CAAE;IAACI,IAAI,EAAC,MAAM;IAACC,MAAM,EAAEP;EAAW,CAAE,CAAC,EAClEJ,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACQ,KAAK,EAAEH,IAAI,CAAC,OAAO,CAAE;IAACI,IAAI,EAAC,OAAO;IAACC,MAAM,EAAEN;EAAY,CAAE,CACjE,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+const colorMap = {
+  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],
+  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325']
+};
+export const LegendBar = _ref => {
+  let {
+    values,
+    type,
+    label
+  } = _ref;
+  const colors = colorMap[type];
+  return React.createElement("div", {
+    className: "lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary"
+  }, React.createElement("div", {
+    className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary"
+  }, values.map((_, index) => React.createElement("div", {
+    key: `${label}_${colors[index]}__color`,
+    className: "lw-h-full lw-flex-1",
+    "data-testid": "legend-bar-segment",
+    style: {
+      backgroundColor: colors[index]
+    }
+  }))), React.createElement("div", {
+    className: "lw-flex lw-w-full"
+  }, values.map(value => React.createElement("div", {
+    key: `${value}_${type}`,
+    className: "lw-flex lw-w-1/4 lw-justify-center"
+  }, React.createElement("span", {
+    className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
+  }, value.toFixed(2), "% ", label)))));
+};
+//# sourceMappingURL=LegendBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegendBar.js","names":["React","colorMap","long","short","LegendBar","_ref","values","type","label","colors","createElement","className","map","_","index","key","style","backgroundColor","value","toFixed"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\ntype LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n  values: number[];\n  type: LegendType;\n  label: string;\n}\n\nconst colorMap: Record<LegendType, string[]> = {\n  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],\n  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],\n};\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n  const colors = colorMap[type];\n\n  return (\n    <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n      <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n        {values.map((_, index) => (\n          <div\n            key={`${label}_${colors[index]}__color`}\n            className=\"lw-h-full lw-flex-1\"\n            data-testid=\"legend-bar-segment\"\n            style={{\n              backgroundColor: colors[index],\n            }}\n          />\n        ))}\n      </div>\n\n      <div className=\"lw-flex lw-w-full\">\n        {values.map((value) => (\n          <div\n            key={`${value}_${type}`}\n            className=\"lw-flex lw-w-1/4 lw-justify-center\"\n          >\n            <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n              {value.toFixed(2)}% {label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,MAAMC,QAAsC,GAAG;EAC7CC,IAAI,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC;EAC1DC,KAAK,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS;AAC1D,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAH,IAAA;EAC/D,MAAMI,MAAM,GAAGR,QAAQ,CAACM,IAAI,CAAC;EAE7B,OACEP,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAqE,GAClFX,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAgF,GAC5FL,MAAM,CAACM,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KACnBd,KAAA,CAAAU,aAAA;IACEK,GAAG,EAAE,GAAGP,KAAK,IAAIC,MAAM,CAACK,KAAK,CAAC,SAAU;IACxCH,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCK,KAAK,EAAE;MACLC,eAAe,EAAER,MAAM,CAACK,KAAK;IAC/B;EAAE,CACH,CACF,CACE,CAAC,EAENd,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAC/BL,MAAM,CAACM,GAAG,CAAEM,KAAK,IAChBlB,KAAA,CAAAU,aAAA;IACEK,GAAG,EAAE,GAAGG,KAAK,IAAIX,IAAI,EAAG;IACxBI,SAAS,EAAC;EAAoC,GAE9CX,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFO,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC,EAAC,IAAE,EAACX,KACjB,CACH,CACN,CACE,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+export * from './Legend';
+export * from './LegendBar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Legend/index.ts"],"sourcesContent":["export * from './Legend';\nexport * from './LegendBar';\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,aAAa","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export * from './Legend';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/CrowdViewWidget/components/index.ts"],"sourcesContent":["export * from './Legend';\n"],"mappings":"AAAA,cAAc,UAAU","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LegendProps {
+    longValues: number[];
+    shortValues: number[];
+}
+export declare const Legend: ({ longValues, shortValues }: LegendProps) => React.JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,2 @@
+export * from './Legend';
+export * from './LegendBar';

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

@@ -0,0 +1 @@
+export * from './Legend';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.185",
+    "@oanda/labs-widget-common": "^1.0.186",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "ec2489a54e2b10868edeb392c78d5f6987d03e09"
+  "gitHead": "62a1f7b8fc3926956c1cad4d38b365ad4a42c40a"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -10,6 +10,7 @@ import { useLocale } from '@oanda/mono-i18n';
 import React, { useState } from 'react';
 
 import { BookType, Division } from '../gql/types/graphql';
+import { Legend } from './components';
 import {
   granularitySelectConfig,
   instrumentSelectConfig,
@@ -82,6 +83,11 @@ const Main = ({ division }: MainProps) => {
             </div>
           </div>
           <WidgetError />
+
+          <Legend
+            longValues={[0.15, 0.25, 0.4, 0.55]}
+            shortValues={[0.15, 0.25, 0.4, 0.55]}
+          />
         </div>
       )}
     </>

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

@@ -0,0 +1,20 @@
+import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+
+import { LegendBar } from './LegendBar';
+
+interface LegendProps {
+  longValues: number[];
+  shortValues: number[];
+}
+
+export const Legend = ({ longValues, shortValues }: 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-py-6 sm:lw-max-w-md lg:lw-max-w-xl">
+      <LegendBar label={lang('long')} type="long" values={longValues} />
+      <LegendBar label={lang('short')} type="short" values={shortValues} />
+    </div>
+  );
+};

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+type LegendType = 'long' | 'short';
+
+interface LegendBarProps {
+  values: number[];
+  type: LegendType;
+  label: string;
+}
+
+const colorMap: Record<LegendType, string[]> = {
+  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],
+  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],
+};
+
+export const LegendBar = ({ values, type, label }: LegendBarProps) => {
+  const colors = colorMap[type];
+
+  return (
+    <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">
+      <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary">
+        {values.map((_, index) => (
+          <div
+            key={`${label}_${colors[index]}__color`}
+            className="lw-h-full lw-flex-1"
+            data-testid="legend-bar-segment"
+            style={{
+              backgroundColor: colors[index],
+            }}
+          />
+        ))}
+      </div>
+
+      <div className="lw-flex lw-w-full">
+        {values.map((value) => (
+          <div
+            key={`${value}_${type}`}
+            className="lw-flex lw-w-1/4 lw-justify-center"
+          >
+            <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
+              {value.toFixed(2)}% {label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/CrowdViewWidget/components/Legend/index.ts

@@ -0,0 +1,2 @@
+export * from './Legend';
+export * from './LegendBar';

package/src/CrowdViewWidget/components/index.ts

@@ -0,0 +1 @@
+export * from './Legend';

package/test/components/Legend.test.tsx

@@ -0,0 +1,26 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { Legend } from '../../src/CrowdViewWidget/components';
+
+describe('Crowd View Widget', () => {
+  describe('components', () => {
+    describe('<Legend />', () => {
+      it('renders two LegendBar components', () => {
+        const { getAllByText } = render(
+          <Legend
+            longValues={[0.15, 0.25, 0.4, 0.55]}
+            shortValues={[0.15, 0.25, 0.4, 0.55]}
+          />
+        );
+
+        expect(getAllByText(/long/)).toHaveLength(4);
+        expect(getAllByText(/short/)).toHaveLength(4);
+      });
+    });
+  });
+});

package/test/components/LegendBar.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { LegendBar } from '../../src/CrowdViewWidget/components';
+
+describe('Crowd View Widget', () => {
+  describe('components', () => {
+    describe('<LegendBar />', () => {
+      const mockValues = [0.15, 0.25, 0.4, 0.55];
+
+      it('renders two LegendBar components', () => {
+        const { getByText } = render(
+          <LegendBar label="long" type="long" values={mockValues} />
+        );
+        mockValues.forEach((value) => {
+          const label = `${value.toFixed(2)}% long`;
+          expect(getByText(label)).toBeInTheDocument();
+        });
+      });
+
+      it('renders exactly 4 segments', () => {
+        const { getAllByTestId } = render(
+          <LegendBar label="short" type="short" values={mockValues} />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(4);
+      });
+    });
+  });
+});