@oanda/labs-value-at-risk-widget 1.0.26 → 1.0.28

package/dist/module/ValueAtRiskWidget/components/Legend/MobileLegend.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileLegend.js","names":["React","classnames","DataNames","DashedLine","lineTypes","MobileLegend","_ref","data","isDark","lang","createElement","className","map","item","key","id","MAX","MIN","AVERAGE","MEDIAN","THRESHOLD","width","undefined","strokeDasharray","concat","label","valueDown","toFixed","valueUp"],"sources":["../../../../../src/ValueAtRiskWidget/components/Legend/MobileLegend.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { DataNames, MobileLegendProps } from './types';\nimport { DashedLine } from './DashedLine';\nimport { lineTypes } from './constants';\n\nconst MobileLegend = ({ data, isDark, lang }: MobileLegendProps) => (\n  <div className={classnames('lw-mb-6 lw-p-2 lw-text-xs', {\n    'lw-bg-border-primary': isDark,\n    'lw-border lw-border-solid lw-border-border-primary': !isDark,\n  })}\n  >\n    {data.map((item) => (\n      <div\n        key={item.id}\n        className={classnames('lw-flex lw-items-center lw-justify-between', {\n          '[&_line]:lw-stroke-border-disabled': item.id === DataNames.MAX || item.id === DataNames.MIN,\n        })}\n      >\n        <div className=\"lw-mr-2 lw-flex lw-w-10 lw-items-center\">\n          {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (\n            <div className={classnames('lw-h-[8px] lw-w-[8px] lw-rounded-full lw-border-[1px] lw-border-white lw-bg-gold', {\n              'lw-bg-gold': item.id === DataNames.AVERAGE,\n              'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,\n              'lw-bg-violet-light': item.id === DataNames.THRESHOLD,\n            })}\n            />\n          )}\n          <DashedLine isDark={isDark} width={(item.id === DataNames.MAX || item.id === DataNames.MIN) ? '38' : undefined} strokeDasharray={lineTypes[item.id]} />\n          {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (\n            <div className={classnames('lw-ml-[-8px] lw-h-[8px] lw-w-[8px] lw-border-[1px] lw-border-white lw-bg-gold', {\n              'lw-bg-gold': item.id === DataNames.AVERAGE,\n              'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,\n              'lw-bg-violet-light': item.id === DataNames.THRESHOLD,\n            })}\n            />\n          )}\n        </div>\n        <span className=\"lw-flex-1 lw-px-2\">\n          {`${item.label}:`}\n        </span>\n        <span className=\"lw-flex-1 lw-text-right\">\n          {`${item.valueDown.toFixed()} ${lang('pips')}`}\n        </span>\n        <span className=\"lw-flex-1 lw-text-right\">\n          {`${item.valueUp.toFixed()} ${lang('pips')}`}\n        </span>\n      </div>\n    ))}\n  </div>\n);\n\nexport { MobileLegend };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,SAAS,QAA2B,SAAS;AACtD,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,YAAY,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAwB,CAAC,GAAAH,IAAA;EAAA,OAC7DN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,2BAA2B,EAAE;MACtD,sBAAsB,EAAEO,MAAM;MAC9B,oDAAoD,EAAE,CAACA;IACzD,CAAC;EAAE,GAEAD,IAAI,CAACK,GAAG,CAAEC,IAAI,IACbb,KAAA,CAAAU,aAAA;IACEI,GAAG,EAAED,IAAI,CAACE,EAAG;IACbJ,SAAS,EAAEV,UAAU,CAAC,4CAA4C,EAAE;MAClE,oCAAoC,EAAEY,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe;IAC3F,CAAC;EAAE,GAEHjB,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAyC,GACrDE,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe,GAAG,IACrDjB,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,kFAAkF,EAAE;MAC7G,YAAY,EAAEY,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACgB,OAAO;MAC3C,uBAAuB,EAAEL,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACiB,MAAM;MACrD,oBAAoB,EAAEN,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACkB;IAC9C,CAAC;EAAE,CACF,CACF,EACDpB,KAAA,CAAAU,aAAA,CAACP,UAAU;IAACK,MAAM,EAAEA,MAAO;IAACa,KAAK,EAAGR,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe,GAAG,GAAI,IAAI,GAAGK,SAAU;IAACC,eAAe,EAAEnB,SAAS,CAACS,IAAI,CAACE,EAAE;EAAE,CAAE,CAAC,EACtJF,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe,GAAG,IACrDjB,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,+EAA+E,EAAE;MAC1G,YAAY,EAAEY,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACgB,OAAO;MAC3C,uBAAuB,EAAEL,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACiB,MAAM;MACrD,oBAAoB,EAAEN,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACkB;IAC9C,CAAC;EAAE,CACF,CAEA,CAAC,EACNpB,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAmB,MAAAa,MAAA,CAC7BX,IAAI,CAACY,KAAK,MACV,CAAC,EACPzB,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAyB,MAAAa,MAAA,CACnCX,IAAI,CAACa,SAAS,CAACC,OAAO,CAAC,CAAC,OAAAH,MAAA,CAAIf,IAAI,CAAC,MAAM,CAAC,CACxC,CAAC,EACPT,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAyB,MAAAa,MAAA,CACnCX,IAAI,CAACe,OAAO,CAACD,OAAO,CAAC,CAAC,OAAAH,MAAA,CAAIf,IAAI,CAAC,MAAM,CAAC,CACtC,CACH,CACN,CACE,CAAC;AAAA,CACP;AAED,SAASJ,YAAY","ignoreList":[]}
+{"version":3,"file":"MobileLegend.js","names":["React","classnames","DataNames","DashedLine","lineTypes","MobileLegend","_ref","data","isDark","lang","createElement","className","map","item","key","id","MAX","MIN","AVERAGE","MEDIAN","THRESHOLD","width","undefined","strokeDasharray","label","valueDown","toFixed","valueUp"],"sources":["../../../../../src/ValueAtRiskWidget/components/Legend/MobileLegend.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { DataNames, MobileLegendProps } from './types';\nimport { DashedLine } from './DashedLine';\nimport { lineTypes } from './constants';\n\nconst MobileLegend = ({ data, isDark, lang }: MobileLegendProps) => (\n  <div className={classnames('lw-mb-6 lw-p-2 lw-text-xs', {\n    'lw-bg-border-primary': isDark,\n    'lw-border lw-border-solid lw-border-border-primary': !isDark,\n  })}\n  >\n    {data.map((item) => (\n      <div\n        key={item.id}\n        className={classnames('lw-flex lw-items-center lw-justify-between', {\n          '[&_line]:lw-stroke-border-disabled': item.id === DataNames.MAX || item.id === DataNames.MIN,\n        })}\n      >\n        <div className=\"lw-mr-2 lw-flex lw-w-10 lw-items-center\">\n          {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (\n            <div className={classnames('lw-h-[8px] lw-w-[8px] lw-rounded-full lw-border-[1px] lw-border-white lw-bg-gold', {\n              'lw-bg-gold': item.id === DataNames.AVERAGE,\n              'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,\n              'lw-bg-violet-light': item.id === DataNames.THRESHOLD,\n            })}\n            />\n          )}\n          <DashedLine isDark={isDark} width={(item.id === DataNames.MAX || item.id === DataNames.MIN) ? '38' : undefined} strokeDasharray={lineTypes[item.id]} />\n          {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (\n            <div className={classnames('lw-ml-[-8px] lw-h-[8px] lw-w-[8px] lw-border-[1px] lw-border-white lw-bg-gold', {\n              'lw-bg-gold': item.id === DataNames.AVERAGE,\n              'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,\n              'lw-bg-violet-light': item.id === DataNames.THRESHOLD,\n            })}\n            />\n          )}\n        </div>\n        <span className=\"lw-flex-1 lw-px-2\">\n          {`${item.label}:`}\n        </span>\n        <span className=\"lw-flex-1 lw-text-right\">\n          {`${item.valueDown.toFixed()} ${lang('pips')}`}\n        </span>\n        <span className=\"lw-flex-1 lw-text-right\">\n          {`${item.valueUp.toFixed()} ${lang('pips')}`}\n        </span>\n      </div>\n    ))}\n  </div>\n);\n\nexport { MobileLegend };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,SAAS,QAA2B,SAAS;AACtD,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,YAAY,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAwB,CAAC,GAAAH,IAAA;EAAA,OAC7DN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,2BAA2B,EAAE;MACtD,sBAAsB,EAAEO,MAAM;MAC9B,oDAAoD,EAAE,CAACA;IACzD,CAAC;EAAE,GAEAD,IAAI,CAACK,GAAG,CAAEC,IAAI,IACbb,KAAA,CAAAU,aAAA;IACEI,GAAG,EAAED,IAAI,CAACE,EAAG;IACbJ,SAAS,EAAEV,UAAU,CAAC,4CAA4C,EAAE;MAClE,oCAAoC,EAAEY,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe;IAC3F,CAAC;EAAE,GAEHjB,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAyC,GACrDE,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe,GAAG,IACrDjB,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,kFAAkF,EAAE;MAC7G,YAAY,EAAEY,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACgB,OAAO;MAC3C,uBAAuB,EAAEL,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACiB,MAAM;MACrD,oBAAoB,EAAEN,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACkB;IAC9C,CAAC;EAAE,CACF,CACF,EACDpB,KAAA,CAAAU,aAAA,CAACP,UAAU;IAACK,MAAM,EAAEA,MAAO;IAACa,KAAK,EAAGR,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe,GAAG,GAAI,IAAI,GAAGK,SAAU;IAACC,eAAe,EAAEnB,SAAS,CAACS,IAAI,CAACE,EAAE;EAAE,CAAE,CAAC,EACtJF,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACc,GAAG,IAAIH,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACe,GAAG,IACrDjB,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,+EAA+E,EAAE;MAC1G,YAAY,EAAEY,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACgB,OAAO;MAC3C,uBAAuB,EAAEL,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACiB,MAAM;MACrD,oBAAoB,EAAEN,IAAI,CAACE,EAAE,KAAKb,SAAS,CAACkB;IAC9C,CAAC;EAAE,CACF,CAEA,CAAC,EACNpB,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAmB,GAChC,GAAGE,IAAI,CAACW,KAAK,GACV,CAAC,EACPxB,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAyB,GACtC,GAAGE,IAAI,CAACY,SAAS,CAACC,OAAO,CAAC,CAAC,IAAIjB,IAAI,CAAC,MAAM,CAAC,EACxC,CAAC,EACPT,KAAA,CAAAU,aAAA;IAAMC,SAAS,EAAC;EAAyB,GACtC,GAAGE,IAAI,CAACc,OAAO,CAACD,OAAO,CAAC,CAAC,IAAIjB,IAAI,CAAC,MAAM,CAAC,EACtC,CACH,CACN,CACE,CAAC;AAAA,CACP;AAED,SAASJ,YAAY","ignoreList":[]}

package/dist/module/ValueAtRiskWidget/render.js

@@ -13,7 +13,10 @@ volatilityChartParamsElements.forEach(element => {
   const mode = element.getAttribute('data-mode');
   const {
     division,
-    locale
+    locale,
+    instrument,
+    duration,
+    bars
   } = JSON.parse(params);
   const isParamError = validateToolParams({
     locale,
@@ -33,7 +36,10 @@ volatilityChartParamsElements.forEach(element => {
     locale: locale,
     division: division,
     theme: mode,
-    isParamError: isParamError
+    isParamError: isParamError,
+    instrument: instrument,
+    duration: duration,
+    bars: bars
   }));
 });
 //# sourceMappingURL=render.js.map

package/dist/module/ValueAtRiskWidget/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","createRoot","validateLocale","validateToolParams","ValueAtRiskWidget","Division","graphqlUrl","window","widgetsConfig","volatilityChartParamsElements","document","querySelectorAll","forEach","element","root","params","getAttribute","mode","division","locale","JSON","parse","isParamError","name","valueCheck","value","Object","values","includes","render","createElement","theme"],"sources":["../../../src/ValueAtRiskWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';\nimport { ValueAtRiskWidget } from './ValueAtRiskWidget';\nimport { Division } from '../gql/types/graphql';\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst volatilityChartParamsElements = document.querySelectorAll('div[data-value-at-risk-params]');\n\nvolatilityChartParamsElements.forEach((element) => {\n  const root = createRoot(element);\n  const params = element.getAttribute('data-value-at-risk-params');\n  const mode = element.getAttribute('data-mode');\n  const { division, locale } = JSON.parse(params as string);\n\n  const isParamError = validateToolParams({ locale, division, graphqlUrl }, [\n    {\n      name: 'locale',\n      valueCheck: (value) => validateLocale(value),\n    },\n    {\n      name: 'division',\n      valueCheck: (value) => Object.values(Division).includes(value),\n    },\n    {\n      name: 'graphqlUrl',\n    }]);\n\n  root.render(\n    <ValueAtRiskWidget\n      graphqlUrl={graphqlUrl}\n      locale={locale}\n      division={division}\n      theme={mode as Theme}\n      isParamError={isParamError}\n    />,\n  );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAgBC,cAAc,EAAEC,kBAAkB,QAAQ,2BAA2B;AACrF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,MAAM;EACJC;AACF,CAAC,GAAGC,MAAM,CAACC,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,6BAA6B,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,gCAAgC,CAAC;AAEjGF,6BAA6B,CAACG,OAAO,CAAEC,OAAO,IAAK;EACjD,MAAMC,IAAI,GAAGb,UAAU,CAACY,OAAO,CAAC;EAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,2BAA2B,CAAC;EAChE,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;EAC9C,MAAM;IAAEE,QAAQ;IAAEC;EAAO,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACN,MAAgB,CAAC;EAEzD,MAAMO,YAAY,GAAGnB,kBAAkB,CAAC;IAAEgB,MAAM;IAAED,QAAQ;IAAEZ;EAAW,CAAC,EAAE,CACxE;IACEiB,IAAI,EAAE,QAAQ;IACdC,UAAU,EAAGC,KAAK,IAAKvB,cAAc,CAACuB,KAAK;EAC7C,CAAC,EACD;IACEF,IAAI,EAAE,UAAU;IAChBC,UAAU,EAAGC,KAAK,IAAKC,MAAM,CAACC,MAAM,CAACtB,QAAQ,CAAC,CAACuB,QAAQ,CAACH,KAAK;EAC/D,CAAC,EACD;IACEF,IAAI,EAAE;EACR,CAAC,CAAC,CAAC;EAELT,IAAI,CAACe,MAAM,CACT7B,KAAA,CAAA8B,aAAA,CAAC1B,iBAAiB;IAChBE,UAAU,EAAEA,UAAW;IACvBa,MAAM,EAAEA,MAAO;IACfD,QAAQ,EAAEA,QAAS;IACnBa,KAAK,EAAEd,IAAc;IACrBK,YAAY,EAAEA;EAAa,CAC5B,CACH,CAAC;AACH,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"render.js","names":["React","createRoot","validateLocale","validateToolParams","ValueAtRiskWidget","Division","graphqlUrl","window","widgetsConfig","volatilityChartParamsElements","document","querySelectorAll","forEach","element","root","params","getAttribute","mode","division","locale","instrument","duration","bars","JSON","parse","isParamError","name","valueCheck","value","Object","values","includes","render","createElement","theme"],"sources":["../../../src/ValueAtRiskWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';\nimport { ValueAtRiskWidget } from './ValueAtRiskWidget';\nimport { Division } from '../gql/types/graphql';\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst volatilityChartParamsElements = document.querySelectorAll('div[data-value-at-risk-params]');\n\nvolatilityChartParamsElements.forEach((element) => {\n  const root = createRoot(element);\n  const params = element.getAttribute('data-value-at-risk-params');\n  const mode = element.getAttribute('data-mode');\n  const {\n    division,\n    locale,\n    instrument,\n    duration,\n    bars,\n  } = JSON.parse(params as string);\n\n  const isParamError = validateToolParams({ locale, division, graphqlUrl }, [\n    {\n      name: 'locale',\n      valueCheck: (value) => validateLocale(value),\n    },\n    {\n      name: 'division',\n      valueCheck: (value) => Object.values(Division).includes(value),\n    },\n    {\n      name: 'graphqlUrl',\n    }]);\n\n  root.render(\n    <ValueAtRiskWidget\n      graphqlUrl={graphqlUrl}\n      locale={locale}\n      division={division}\n      theme={mode as Theme}\n      isParamError={isParamError}\n      instrument={instrument}\n      duration={duration}\n      bars={bars}\n    />,\n  );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAgBC,cAAc,EAAEC,kBAAkB,QAAQ,2BAA2B;AACrF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,MAAM;EACJC;AACF,CAAC,GAAGC,MAAM,CAACC,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,6BAA6B,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,gCAAgC,CAAC;AAEjGF,6BAA6B,CAACG,OAAO,CAAEC,OAAO,IAAK;EACjD,MAAMC,IAAI,GAAGb,UAAU,CAACY,OAAO,CAAC;EAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,2BAA2B,CAAC;EAChE,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;EAC9C,MAAM;IACJE,QAAQ;IACRC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC;EACF,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACT,MAAgB,CAAC;EAEhC,MAAMU,YAAY,GAAGtB,kBAAkB,CAAC;IAAEgB,MAAM;IAAED,QAAQ;IAAEZ;EAAW,CAAC,EAAE,CACxE;IACEoB,IAAI,EAAE,QAAQ;IACdC,UAAU,EAAGC,KAAK,IAAK1B,cAAc,CAAC0B,KAAK;EAC7C,CAAC,EACD;IACEF,IAAI,EAAE,UAAU;IAChBC,UAAU,EAAGC,KAAK,IAAKC,MAAM,CAACC,MAAM,CAACzB,QAAQ,CAAC,CAAC0B,QAAQ,CAACH,KAAK;EAC/D,CAAC,EACD;IACEF,IAAI,EAAE;EACR,CAAC,CAAC,CAAC;EAELZ,IAAI,CAACkB,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC7B,iBAAiB;IAChBE,UAAU,EAAEA,UAAW;IACvBa,MAAM,EAAEA,MAAO;IACfD,QAAQ,EAAEA,QAAS;IACnBgB,KAAK,EAAEjB,IAAc;IACrBQ,YAAY,EAAEA,YAAa;IAC3BL,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,IAAI,EAAEA;EAAK,CACZ,CACH,CAAC;AACH,CAAC,CAAC","ignoreList":[]}

package/dist/module/ValueAtRiskWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/ValueAtRiskWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport {\n  Division, GetValueAtRiskAssetClassesQuery, ValueAtRiskBars, ValueAtRiskDuration,\n} from '../gql/types/graphql';\n\nexport interface ValueAtRiskConfig {\n  graphqlUrl: string;\n  division: Division;\n  locale: Locale;\n  theme?: Theme;\n  isParamError?: boolean;\n}\n\nexport interface ValueAtRiskWrapperConfig extends ValueAtRiskConfig {\n  renderElementId: string;\n}\n\nexport interface MainProps {\n  data: GetValueAtRiskAssetClassesQuery;\n  division: Division;\n}\n\nexport interface MainWithDataProps {\n  division: Division;\n}\n\nexport interface ChartWithDataProps {\n  instrument: string;\n  duration: ValueAtRiskDuration;\n  bars: ValueAtRiskBars;\n  division: Division;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/ValueAtRiskWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport {\n  Division, GetValueAtRiskAssetClassesQuery, ValueAtRiskBars, ValueAtRiskDuration,\n} from '../gql/types/graphql';\n\nexport interface ValueAtRiskConfig {\n  graphqlUrl: string;\n  division: Division;\n  locale: Locale;\n  theme?: Theme;\n  isParamError?: boolean;\n  instrument?: string;\n  duration?: ValueAtRiskDuration;\n  bars?: ValueAtRiskBars;\n}\n\nexport interface ValueAtRiskWrapperConfig extends ValueAtRiskConfig {\n  renderElementId: string;\n}\n\nexport interface WidgetProps {\n  instrument: string;\n  duration: ValueAtRiskDuration;\n  bars: ValueAtRiskBars;\n  division: Division;\n}\n\nexport interface ToolProps {\n  data: GetValueAtRiskAssetClassesQuery;\n  division: Division;\n}\n\nexport interface ToolWithDataProps {\n  division: Division;\n}\n\nexport interface ChartWithDataProps {\n  instrument: string;\n  duration: ValueAtRiskDuration;\n  bars: ValueAtRiskBars;\n  division: Division;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/module/ValueAtRiskWidget/utils.js

@@ -1,4 +1,4 @@
-const capitalize = name => "".concat(name[0].toUpperCase()).concat(name.substring(1));
+const capitalize = name => `${name[0].toUpperCase()}${name.substring(1)}`;
 function sortAlphabetically(paramName, items) {
   return [...items].sort((itemA, itemB) => itemA[paramName].localeCompare(itemB[paramName], 'en', {
     sensitivity: 'base'

package/dist/module/ValueAtRiskWidget/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["capitalize","name","concat","toUpperCase","substring","sortAlphabetically","paramName","items","sort","itemA","itemB","localeCompare","sensitivity","getAssetClassesList","data","list","map","_ref","id","toLowerCase","label","mapInstrumentsList","_ref2","displayName","getInstrumentsByAssetClassId","instruments","filter","_ref3"],"sources":["../../../src/ValueAtRiskWidget/utils.ts"],"sourcesContent":["import { AssetClass, Instrument } from '../gql/types/graphql';\n\nconst capitalize = (name: string) => `${name[0].toUpperCase()}${name.substring(1)}`;\n\nfunction sortAlphabetically<T extends Record<string, string>>(\n  paramName: keyof T,\n  items: T[],\n): T[] {\n  return [...items]\n    .sort((itemA, itemB) => itemA[paramName].localeCompare(itemB[paramName], 'en', { sensitivity: 'base' }));\n}\n\nconst getAssetClassesList = (data: AssetClass[]) => {\n  const list = data\n    .map(({ name }) => ({ id: name.toLowerCase(), label: capitalize(name) }));\n\n  return sortAlphabetically('label', list);\n};\n\nconst mapInstrumentsList = (data: Instrument[]) => sortAlphabetically('displayName', data)\n  .map(({ name: id, displayName: label }) => ({ id, label }));\n\nconst getInstrumentsByAssetClassId = (data: AssetClass[], id: string) => {\n  const [{ instruments }] = data.filter(({ name }) => id === name);\n\n  return mapInstrumentsList(instruments);\n};\n\nexport {\n  getAssetClassesList,\n  sortAlphabetically,\n  getInstrumentsByAssetClassId,\n};\n"],"mappings":"AAEA,MAAMA,UAAU,GAAIC,IAAY,OAAAC,MAAA,CAAQD,IAAI,CAAC,CAAC,CAAC,CAACE,WAAW,CAAC,CAAC,EAAAD,MAAA,CAAGD,IAAI,CAACG,SAAS,CAAC,CAAC,CAAC,CAAE;AAEnF,SAASC,kBAAkBA,CACzBC,SAAkB,EAClBC,KAAU,EACL;EACL,OAAO,CAAC,GAAGA,KAAK,CAAC,CACdC,IAAI,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKD,KAAK,CAACH,SAAS,CAAC,CAACK,aAAa,CAACD,KAAK,CAACJ,SAAS,CAAC,EAAE,IAAI,EAAE;IAAEM,WAAW,EAAE;EAAO,CAAC,CAAC,CAAC;AAC5G;AAEA,MAAMC,mBAAmB,GAAIC,IAAkB,IAAK;EAClD,MAAMC,IAAI,GAAGD,IAAI,CACdE,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEhB;IAAK,CAAC,GAAAgB,IAAA;IAAA,OAAM;MAAEC,EAAE,EAAEjB,IAAI,CAACkB,WAAW,CAAC,CAAC;MAAEC,KAAK,EAAEpB,UAAU,CAACC,IAAI;IAAE,CAAC;EAAA,CAAC,CAAC;EAE3E,OAAOI,kBAAkB,CAAC,OAAO,EAAEU,IAAI,CAAC;AAC1C,CAAC;AAED,MAAMM,kBAAkB,GAAIP,IAAkB,IAAKT,kBAAkB,CAAC,aAAa,EAAES,IAAI,CAAC,CACvFE,GAAG,CAACM,KAAA;EAAA,IAAC;IAAErB,IAAI,EAAEiB,EAAE;IAAEK,WAAW,EAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAM;IAAEJ,EAAE;IAAEE;EAAM,CAAC;AAAA,CAAC,CAAC;AAE7D,MAAMI,4BAA4B,GAAGA,CAACV,IAAkB,EAAEI,EAAU,KAAK;EACvE,MAAM,CAAC;IAAEO;EAAY,CAAC,CAAC,GAAGX,IAAI,CAACY,MAAM,CAACC,KAAA;IAAA,IAAC;MAAE1B;IAAK,CAAC,GAAA0B,KAAA;IAAA,OAAKT,EAAE,KAAKjB,IAAI;EAAA,EAAC;EAEhE,OAAOoB,kBAAkB,CAACI,WAAW,CAAC;AACxC,CAAC;AAED,SACEZ,mBAAmB,EACnBR,kBAAkB,EAClBmB,4BAA4B","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["capitalize","name","toUpperCase","substring","sortAlphabetically","paramName","items","sort","itemA","itemB","localeCompare","sensitivity","getAssetClassesList","data","list","map","_ref","id","toLowerCase","label","mapInstrumentsList","_ref2","displayName","getInstrumentsByAssetClassId","instruments","filter","_ref3"],"sources":["../../../src/ValueAtRiskWidget/utils.ts"],"sourcesContent":["import { AssetClass, Instrument } from '../gql/types/graphql';\n\nconst capitalize = (name: string) => `${name[0].toUpperCase()}${name.substring(1)}`;\n\nfunction sortAlphabetically<T extends Record<string, string>>(\n  paramName: keyof T,\n  items: T[],\n): T[] {\n  return [...items]\n    .sort((itemA, itemB) => itemA[paramName].localeCompare(itemB[paramName], 'en', { sensitivity: 'base' }));\n}\n\nconst getAssetClassesList = (data: AssetClass[]) => {\n  const list = data\n    .map(({ name }) => ({ id: name.toLowerCase(), label: capitalize(name) }));\n\n  return sortAlphabetically('label', list);\n};\n\nconst mapInstrumentsList = (data: Instrument[]) => sortAlphabetically('displayName', data)\n  .map(({ name: id, displayName: label }) => ({ id, label }));\n\nconst getInstrumentsByAssetClassId = (data: AssetClass[], id: string) => {\n  const [{ instruments }] = data.filter(({ name }) => id === name);\n\n  return mapInstrumentsList(instruments);\n};\n\nexport {\n  getAssetClassesList,\n  sortAlphabetically,\n  getInstrumentsByAssetClassId,\n};\n"],"mappings":"AAEA,MAAMA,UAAU,GAAIC,IAAY,IAAK,GAAGA,IAAI,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,GAAGD,IAAI,CAACE,SAAS,CAAC,CAAC,CAAC,EAAE;AAEnF,SAASC,kBAAkBA,CACzBC,SAAkB,EAClBC,KAAU,EACL;EACL,OAAO,CAAC,GAAGA,KAAK,CAAC,CACdC,IAAI,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKD,KAAK,CAACH,SAAS,CAAC,CAACK,aAAa,CAACD,KAAK,CAACJ,SAAS,CAAC,EAAE,IAAI,EAAE;IAAEM,WAAW,EAAE;EAAO,CAAC,CAAC,CAAC;AAC5G;AAEA,MAAMC,mBAAmB,GAAIC,IAAkB,IAAK;EAClD,MAAMC,IAAI,GAAGD,IAAI,CACdE,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEf;IAAK,CAAC,GAAAe,IAAA;IAAA,OAAM;MAAEC,EAAE,EAAEhB,IAAI,CAACiB,WAAW,CAAC,CAAC;MAAEC,KAAK,EAAEnB,UAAU,CAACC,IAAI;IAAE,CAAC;EAAA,CAAC,CAAC;EAE3E,OAAOG,kBAAkB,CAAC,OAAO,EAAEU,IAAI,CAAC;AAC1C,CAAC;AAED,MAAMM,kBAAkB,GAAIP,IAAkB,IAAKT,kBAAkB,CAAC,aAAa,EAAES,IAAI,CAAC,CACvFE,GAAG,CAACM,KAAA;EAAA,IAAC;IAAEpB,IAAI,EAAEgB,EAAE;IAAEK,WAAW,EAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAM;IAAEJ,EAAE;IAAEE;EAAM,CAAC;AAAA,CAAC,CAAC;AAE7D,MAAMI,4BAA4B,GAAGA,CAACV,IAAkB,EAAEI,EAAU,KAAK;EACvE,MAAM,CAAC;IAAEO;EAAY,CAAC,CAAC,GAAGX,IAAI,CAACY,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEzB;IAAK,CAAC,GAAAyB,KAAA;IAAA,OAAKT,EAAE,KAAKhB,IAAI;EAAA,EAAC;EAEhE,OAAOmB,kBAAkB,CAACI,WAAW,CAAC;AACxC,CAAC;AAED,SACEZ,mBAAmB,EACnBR,kBAAkB,EAClBmB,4BAA4B","ignoreList":[]}

package/dist/module/gql/getValueAtRiskAssetClasses.js

@@ -1,5 +1,13 @@
-var _templateObject;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { gql } from '@apollo/client';
-export const getValueAtRiskAssetClasses = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n"])));
+export const getValueAtRiskAssetClasses = gql`
+  query GetValueAtRiskAssetClasses($division: Division) {
+      valueAtRiskAssetClasses(division: $division) {
+      name
+      instruments {
+        name
+        displayName
+      }
+    }
+  }
+`;
 //# sourceMappingURL=getValueAtRiskAssetClasses.js.map

package/dist/module/gql/getValueAtRiskAssetClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"getValueAtRiskAssetClasses.js","names":["gql","getValueAtRiskAssetClasses","_templateObject","_taggedTemplateLiteral"],"sources":["../../../src/gql/getValueAtRiskAssetClasses.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const getValueAtRiskAssetClasses = gql`\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n`;\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,0BAA0B,GAAGD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,sBAAA,oNAU5C","ignoreList":[]}
+{"version":3,"file":"getValueAtRiskAssetClasses.js","names":["gql","getValueAtRiskAssetClasses"],"sources":["../../../src/gql/getValueAtRiskAssetClasses.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const getValueAtRiskAssetClasses = gql`\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,0BAA0B,GAAGD,GAAG;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/module/gql/getValueAtRiskChart.js

@@ -1,5 +1,28 @@
-var _templateObject;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { gql } from '@apollo/client';
-export const getValueAtRiskChart = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n"])));
+export const getValueAtRiskChart = gql`
+  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {
+    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {
+      up {
+        points {
+          pips
+          percent
+        }
+        average
+        median
+        max
+        threshold
+      }
+      down {
+        points {
+          pips
+          percent
+        }
+        average
+        median
+        max
+        threshold
+      }
+    }
+  }
+`;
 //# sourceMappingURL=getValueAtRiskChart.js.map

package/dist/module/gql/getValueAtRiskChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"getValueAtRiskChart.js","names":["gql","getValueAtRiskChart","_templateObject","_taggedTemplateLiteral"],"sources":["../../../src/gql/getValueAtRiskChart.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const getValueAtRiskChart = gql`\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n`;\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,mBAAmB,GAAGD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,sBAAA,ijBAyBrC","ignoreList":[]}
+{"version":3,"file":"getValueAtRiskChart.js","names":["gql","getValueAtRiskChart"],"sources":["../../../src/gql/getValueAtRiskChart.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const getValueAtRiskChart = gql`\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,mBAAmB,GAAGD,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/module/gql/types/fragment-masking.js

@@ -5,11 +5,10 @@ export function makeFragmentData(data, _fragment) {
   return data;
 }
 export function isFragmentReady(queryNode, fragmentNode, data) {
-  var _meta__, _fragDef$name;
-  const deferredFields = (_meta__ = queryNode.__meta__) === null || _meta__ === void 0 ? void 0 : _meta__.deferredFields;
+  const deferredFields = queryNode.__meta__?.deferredFields;
   if (!deferredFields) return true;
   const fragDef = fragmentNode.definitions[0];
-  const fragName = fragDef === null || fragDef === void 0 || (_fragDef$name = fragDef.name) === null || _fragDef$name === void 0 ? void 0 : _fragDef$name.value;
+  const fragName = fragDef?.name?.value;
   const fields = fragName && deferredFields[fragName] || [];
   return fields.length > 0 && fields.every(field => data && field in data);
 }

package/dist/module/gql/types/fragment-masking.js.map

@@ -1 +1 @@
-{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","_meta__","_fragDef$name","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\n\nexport type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<\n  infer TType,\n  any\n>\n  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n    ? TKey extends string\n      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n      : never\n    : never\n  : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__\n    ?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every(field => data && field in data);\n}\n"],"mappings":"AAoCA,OAAO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAAmJ,EAClG;EACjD,OAAOA,YAAY;AACrB;AAGA,OAAO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACA,OAAO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAAiF,EACtC;EAAA,IAAAK,OAAA,EAAAC,aAAA;EAC3C,MAAMC,cAAc,IAAAF,OAAA,GAAIF,SAAS,CAAwEK,QAAQ,cAAAH,OAAA,uBAA1FA,OAAA,CACnBE,cAAc;EAElB,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAAuC;EACjF,MAAMC,QAAQ,GAAGF,OAAO,aAAPA,OAAO,gBAAAH,aAAA,GAAPG,OAAO,CAAEG,IAAI,cAAAN,aAAA,uBAAbA,aAAA,CAAeO,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAACC,KAAK,IAAIjB,IAAI,IAAIiB,KAAK,IAAIjB,IAAI,CAAC;AAC1E","ignoreList":[]}
+{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\n\nexport type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<\n  infer TType,\n  any\n>\n  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n    ? TKey extends string\n      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n      : never\n    : never\n  : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__\n    ?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every(field => data && field in data);\n}\n"],"mappings":"AAoCA,OAAO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAAmJ,EAClG;EACjD,OAAOA,YAAY;AACrB;AAGA,OAAO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACA,OAAO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAAiF,EACtC;EAC3C,MAAMK,cAAc,GAAIF,SAAS,CAAwEG,QAAQ,EAC7GD,cAAc;EAElB,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGH,YAAY,CAACI,WAAW,CAAC,CAAC,CAAuC;EACjF,MAAMC,QAAQ,GAAGF,OAAO,EAAEG,IAAI,EAAEC,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAACC,KAAK,IAAIf,IAAI,IAAIe,KAAK,IAAIf,IAAI,CAAC;AAC1E","ignoreList":[]}

package/dist/module/gql/types/gql.js

@@ -4,7 +4,6 @@ const documents = {
   "\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n": types.GetValueAtRiskChartDocument
 };
 export function graphql(source) {
-  var _source;
-  return (_source = documents[source]) !== null && _source !== void 0 ? _source : {};
+  return documents[source] ?? {};
 }
 //# sourceMappingURL=gql.js.map

package/dist/module/gql/types/gql.js.map

@@ -1 +1 @@
-{"version":3,"file":"gql.js","names":["types","documents","GetValueAtRiskAssetClassesDocument","GetValueAtRiskChartDocument","graphql","source","_source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n    \"\\n  query GetValueAtRiskAssetClasses($division: Division) {\\n      valueAtRiskAssetClasses(division: $division) {\\n      name\\n      instruments {\\n        name\\n        displayName\\n      }\\n    }\\n  }\\n\": types.GetValueAtRiskAssetClassesDocument,\n    \"\\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\\n      up {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n      down {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n    }\\n  }\\n\": types.GetValueAtRiskChartDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(source: \"\\n  query GetValueAtRiskAssetClasses($division: Division) {\\n      valueAtRiskAssetClasses(division: $division) {\\n      name\\n      instruments {\\n        name\\n        displayName\\n      }\\n    }\\n  }\\n\"): (typeof documents)[\"\\n  query GetValueAtRiskAssetClasses($division: Division) {\\n      valueAtRiskAssetClasses(division: $division) {\\n      name\\n      instruments {\\n        name\\n        displayName\\n      }\\n    }\\n  }\\n\"];\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(source: \"\\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\\n      up {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n      down {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n    }\\n  }\\n\"): (typeof documents)[\"\\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\\n      up {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n      down {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n    }\\n  }\\n\"];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,WAAW;AAalC,MAAMC,SAAS,GAAG;EACd,8MAA8M,EAAED,KAAK,CAACE,kCAAkC;EACxP,2iBAA2iB,EAAEF,KAAK,CAACG;AACvjB,CAAC;AAyBD,OAAO,SAASC,OAAOA,CAACC,MAAc,EAAE;EAAA,IAAAC,OAAA;EACtC,QAAAA,OAAA,GAAQL,SAAS,CAASI,MAAM,CAAC,cAAAC,OAAA,cAAAA,OAAA,GAAI,CAAC,CAAC;AACzC","ignoreList":[]}
+{"version":3,"file":"gql.js","names":["types","documents","GetValueAtRiskAssetClassesDocument","GetValueAtRiskChartDocument","graphql","source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n    \"\\n  query GetValueAtRiskAssetClasses($division: Division) {\\n      valueAtRiskAssetClasses(division: $division) {\\n      name\\n      instruments {\\n        name\\n        displayName\\n      }\\n    }\\n  }\\n\": types.GetValueAtRiskAssetClassesDocument,\n    \"\\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\\n      up {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n      down {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n    }\\n  }\\n\": types.GetValueAtRiskChartDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(source: \"\\n  query GetValueAtRiskAssetClasses($division: Division) {\\n      valueAtRiskAssetClasses(division: $division) {\\n      name\\n      instruments {\\n        name\\n        displayName\\n      }\\n    }\\n  }\\n\"): (typeof documents)[\"\\n  query GetValueAtRiskAssetClasses($division: Division) {\\n      valueAtRiskAssetClasses(division: $division) {\\n      name\\n      instruments {\\n        name\\n        displayName\\n      }\\n    }\\n  }\\n\"];\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(source: \"\\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\\n      up {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n      down {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n    }\\n  }\\n\"): (typeof documents)[\"\\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\\n      up {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n      down {\\n        points {\\n          pips\\n          percent\\n        }\\n        average\\n        median\\n        max\\n        threshold\\n      }\\n    }\\n  }\\n\"];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,WAAW;AAalC,MAAMC,SAAS,GAAG;EACd,8MAA8M,EAAED,KAAK,CAACE,kCAAkC;EACxP,2iBAA2iB,EAAEF,KAAK,CAACG;AACvjB,CAAC;AAyBD,OAAO,SAASC,OAAOA,CAACC,MAAc,EAAE;EACtC,OAAQJ,SAAS,CAASI,MAAM,CAAC,IAAI,CAAC,CAAC;AACzC","ignoreList":[]}

package/dist/types/ValueAtRiskWidget/Tool.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ToolProps } from './types';
+declare const Tool: ({ data, division }: ToolProps) => React.JSX.Element;
+export { Tool };

package/dist/types/ValueAtRiskWidget/ToolWithData.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ToolWithDataProps } from './types';
+declare const ToolWithData: ({ division }: ToolWithDataProps) => React.JSX.Element;
+export { ToolWithData };

package/dist/types/ValueAtRiskWidget/ValueAtRiskWidget.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ValueAtRiskConfig } from './types';
-declare const ValueAtRiskWidget: ({ graphqlUrl, locale, division, theme, isParamError, }: ValueAtRiskConfig) => React.JSX.Element;
+declare const ValueAtRiskWidget: ({ graphqlUrl, locale, division, theme, isParamError, instrument, duration, bars, }: ValueAtRiskConfig) => React.JSX.Element;
 export { ValueAtRiskWidget };

package/dist/types/ValueAtRiskWidget/Widget.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WidgetProps } from './types';
+declare const Widget: ({ division, instrument, duration, bars, }: WidgetProps) => React.JSX.Element;
+export { Widget };

package/dist/types/ValueAtRiskWidget/types.d.ts

@@ -7,15 +7,24 @@ export interface ValueAtRiskConfig {
     locale: Locale;
     theme?: Theme;
     isParamError?: boolean;
+    instrument?: string;
+    duration?: ValueAtRiskDuration;
+    bars?: ValueAtRiskBars;
 }
 export interface ValueAtRiskWrapperConfig extends ValueAtRiskConfig {
     renderElementId: string;
 }
-export interface MainProps {
+export interface WidgetProps {
+    instrument: string;
+    duration: ValueAtRiskDuration;
+    bars: ValueAtRiskBars;
+    division: Division;
+}
+export interface ToolProps {
     data: GetValueAtRiskAssetClassesQuery;
     division: Division;
 }
-export interface MainWithDataProps {
+export interface ToolWithDataProps {
     division: Division;
 }
 export interface ChartWithDataProps {

package/dist/types/gql/types/gql.d.ts

@@ -12,10 +12,10 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 declare const documents: {
     "\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n": DocumentNode<types.GetValueAtRiskAssetClassesQuery, types.Exact<{
-        division?: types.InputMaybe<types.Division> | undefined;
+        division?: types.InputMaybe<types.Division>;
     }>>;
     "\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n": DocumentNode<types.GetValueAtRiskChartQuery, types.Exact<{
-        instrument: string;
+        instrument: types.Scalars["String"]["input"];
         division: types.Division;
         duration: types.ValueAtRiskDuration;
         bars: types.ValueAtRiskBars;

package/dist/types/gql/types/graphql.d.ts

@@ -416,12 +416,5 @@ export type GetValueAtRiskChartQuery = {
         };
     } | null;
 };
-export declare const GetValueAtRiskAssetClassesDocument: DocumentNode<GetValueAtRiskAssetClassesQuery, Exact<{
-    division?: InputMaybe<Division> | undefined;
-}>>;
-export declare const GetValueAtRiskChartDocument: DocumentNode<GetValueAtRiskChartQuery, Exact<{
-    instrument: Scalars['String']['input'];
-    division: Division;
-    duration: ValueAtRiskDuration;
-    bars: ValueAtRiskBars;
-}>>;
+export declare const GetValueAtRiskAssetClassesDocument: DocumentNode<GetValueAtRiskAssetClassesQuery, GetValueAtRiskAssetClassesQueryVariables>;
+export declare const GetValueAtRiskChartDocument: DocumentNode<GetValueAtRiskChartQuery, GetValueAtRiskChartQueryVariables>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-value-at-risk-widget",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Labs Value At Risk Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.134",
+    "@oanda/labs-widget-common": "^1.0.136",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -24,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "772668c0d4a12ed160d9093358c23022a15fe984"
+  "gitHead": "755c0af24a58c228b0a54f2716b4fec5bee7b58d"
 }

package/src/ValueAtRiskWidget/{Main.tsx → Tool.tsx}

@@ -5,11 +5,11 @@ import {
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';
-import { MainProps } from './types';
+import { ToolProps } from './types';
 import { ValueAtRiskDuration, ValueAtRiskBars } from '../gql/types/graphql';
 import { ChartWithData } from './ChartWithData';
 
-const Main = ({ data, division }: MainProps) => {
+const Tool = ({ data, division }: ToolProps) => {
   const { lang } = useLocale();
   const { size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
@@ -99,4 +99,4 @@ const Main = ({ data, division }: MainProps) => {
   );
 };
 
-export { Main };
+export { Tool };

package/src/ValueAtRiskWidget/{MainWithData.tsx → ToolWithData.tsx}

@@ -5,11 +5,11 @@ import {
 } from '@oanda/labs-widget-common';
 import { useQuery } from '@apollo/client';
 import { getValueAtRiskAssetClasses } from '../gql/getValueAtRiskAssetClasses';
-import { Main } from './Main';
-import { MainWithDataProps } from './types';
+import { Tool } from './Tool';
+import { ToolWithDataProps } from './types';
 import { GetValueAtRiskAssetClassesQuery, GetValueAtRiskAssetClassesQueryVariables } from '../gql/types/graphql';
 
-const MainWithData = ({ division }: MainWithDataProps) => {
+const ToolWithData = ({ division }: ToolWithDataProps) => {
   const { size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const { loading, data, error } = useQuery<
@@ -35,7 +35,7 @@ const MainWithData = ({ division }: MainWithDataProps) => {
       </div>
       )}
       {!loading && data && (
-        <Main
+        <Tool
           data={data}
           division={division}
         />
@@ -49,4 +49,4 @@ const MainWithData = ({ division }: MainWithDataProps) => {
   );
 };
 
-export { MainWithData };
+export { ToolWithData };

package/src/ValueAtRiskWidget/ValueAtRiskWidget.tsx

@@ -4,25 +4,43 @@ import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';
 import { ValueAtRiskConfig } from './types';
 import { translations } from '../translations';
-import { MainWithData } from './MainWithData';
+import { ToolWithData } from './ToolWithData';
+import { Widget } from './Widget';
 
 const ValueAtRiskWidget = ({
-  graphqlUrl, locale, division, theme, isParamError,
+  graphqlUrl,
+  locale,
+  division,
+  theme,
+  isParamError,
+  instrument,
+  duration,
+  bars,
 }: ValueAtRiskConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
     cache: new InMemoryCache(),
   });
+  const isWidget = !!instrument && !!duration && !!bars;
 
   return (
     <ThemeProvider theme={theme}>
       <LocaleProvider locale={getLocale(locale)} translations={translations}>
         <ApolloProvider client={client}>
-          {isParamError ? (
+          {isParamError && (
             <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
               <ChartError />
             </div>
-          ) : <MainWithData division={division} />}
+          )}
+          {!isParamError && !isWidget && <ToolWithData division={division} />}
+          {!isParamError && isWidget && (
+            <Widget
+              division={division}
+              instrument={instrument}
+              duration={duration}
+              bars={bars}
+            />
+          )}
         </ApolloProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/ValueAtRiskWidget/Widget.tsx

@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import { WidgetProps } from './types';
+import { ChartWithData } from './ChartWithData';
+
+const Widget = ({
+  division,
+  instrument,
+  duration,
+  bars,
+}: WidgetProps) => {
+  const { lang } = useLocale();
+  const { size } = useContext(ThemeContext);
+  const isDesktop = size === Size.DESKTOP;
+
+  return (
+    <div
+      data-testid="value-at-risk-widget-wrapper"
+      className="lw-relative lw-text-sm lw-tracking-normal"
+    >
+      {size && (
+        <>
+          <div
+            className={classnames('lw-font-bold', {
+              'lw-mb-11 lw-text-center lw-text-xl': isDesktop,
+              'lw-mb-6 lw-text-lg': !isDesktop,
+            })}
+          >
+            <div>{`${lang('hold_time')}: ${lang('day', { count: +duration.substring(1) })}`}</div>
+            <div>{`${lang('calculation_period')}: ${lang('day', { count: +bars.substring(1) })}`}</div>
+          </div>
+          <ChartWithData
+            bars={bars}
+            duration={duration}
+            instrument={instrument}
+            division={division}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export { Widget };

package/src/ValueAtRiskWidget/render.tsx

@@ -14,7 +14,13 @@ volatilityChartParamsElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-value-at-risk-params');
   const mode = element.getAttribute('data-mode');
-  const { division, locale } = JSON.parse(params as string);
+  const {
+    division,
+    locale,
+    instrument,
+    duration,
+    bars,
+  } = JSON.parse(params as string);
 
   const isParamError = validateToolParams({ locale, division, graphqlUrl }, [
     {
@@ -36,6 +42,9 @@ volatilityChartParamsElements.forEach((element) => {
       division={division}
       theme={mode as Theme}
       isParamError={isParamError}
+      instrument={instrument}
+      duration={duration}
+      bars={bars}
     />,
   );
 });

package/src/ValueAtRiskWidget/types.ts

@@ -10,18 +10,28 @@ export interface ValueAtRiskConfig {
   locale: Locale;
   theme?: Theme;
   isParamError?: boolean;
+  instrument?: string;
+  duration?: ValueAtRiskDuration;
+  bars?: ValueAtRiskBars;
 }
 
 export interface ValueAtRiskWrapperConfig extends ValueAtRiskConfig {
   renderElementId: string;
 }
 
-export interface MainProps {
+export interface WidgetProps {
+  instrument: string;
+  duration: ValueAtRiskDuration;
+  bars: ValueAtRiskBars;
+  division: Division;
+}
+
+export interface ToolProps {
   data: GetValueAtRiskAssetClassesQuery;
   division: Division;
 }
 
-export interface MainWithDataProps {
+export interface ToolWithDataProps {
   division: Division;
 }
 

package/test/{Main.test.tsx → Tool.test.tsx}

@@ -5,7 +5,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { ThemeContext, Size } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
-import { Main } from '../src/ValueAtRiskWidget/Main';
+import { Tool } from '../src/ValueAtRiskWidget/Tool';
 import { assetClassesMock, getValueAtRiskChartMock } from './mocks';
 import { Division } from '../src/gql/types/graphql';
 
@@ -13,12 +13,12 @@ const data = {
   valueAtRiskAssetClasses: assetClassesMock,
 };
 
-describe('Main component', () => {
+describe('Tool component', () => {
   it('should render tool view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Main
+          <Tool
             data={data}
             division={Division.Oc}
           />
@@ -32,7 +32,7 @@ describe('Main component', () => {
     const { container, getByTestId } = render(
       <MockedProvider mocks={[...getValueAtRiskChartMock('AUD_USD'), ...getValueAtRiskChartMock('AUS200')]}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Main
+          <Tool
             data={data}
             division={Division.Oc}
           />

package/test/{MainWithData.test.tsx → ToolWithData.test.tsx}

@@ -5,7 +5,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { Size, ThemeContext } from '@oanda/labs-widget-common';
-import { MainWithData } from '../src/ValueAtRiskWidget/MainWithData';
+import { ToolWithData } from '../src/ValueAtRiskWidget/ToolWithData';
 import { Division } from '../src/gql/types/graphql';
 import { getValueAtRiskAssetClassesMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
 
@@ -14,7 +14,7 @@ describe('Main component', () => {
     const { findByTestId } = render(
       <MockedProvider mocks={[...getValueAtRiskAssetClassesMock, ...getValueAtRiskChartMock()]}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
-          <MainWithData division={Division.Oc} />
+          <ToolWithData division={Division.Oc} />
         </ThemeContext.Provider>
       </MockedProvider>,
     );