@oanda/labs-value-at-risk-widget 1.0.27 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +236 -0
- package/dist/main/ValueAtRiskWidget/ChartWithData.js +2 -1
- package/dist/main/ValueAtRiskWidget/ChartWithData.js.map +1 -1
- package/dist/main/ValueAtRiskWidget/{Main.js → Tool.js} +4 -4
- package/dist/main/ValueAtRiskWidget/{Main.js.map → Tool.js.map} +1 -1
- package/dist/main/ValueAtRiskWidget/{MainWithData.js → ToolWithData.js} +6 -6
- package/dist/main/ValueAtRiskWidget/{MainWithData.js.map → ToolWithData.js.map} +1 -1
- package/dist/main/ValueAtRiskWidget/ValueAtRiskWidget.js +14 -4
- package/dist/main/ValueAtRiskWidget/ValueAtRiskWidget.js.map +1 -1
- package/dist/main/ValueAtRiskWidget/Widget.js +49 -0
- package/dist/main/ValueAtRiskWidget/Widget.js.map +1 -0
- package/dist/main/ValueAtRiskWidget/render.js +8 -2
- package/dist/main/ValueAtRiskWidget/render.js.map +1 -1
- package/dist/main/ValueAtRiskWidget/types.js.map +1 -1
- package/dist/module/ValueAtRiskWidget/ChartWithData.js +2 -1
- package/dist/module/ValueAtRiskWidget/ChartWithData.js.map +1 -1
- package/dist/module/ValueAtRiskWidget/{Main.js → Tool.js} +3 -3
- package/dist/module/ValueAtRiskWidget/{Main.js.map → Tool.js.map} +1 -1
- package/dist/module/ValueAtRiskWidget/{MainWithData.js → ToolWithData.js} +5 -5
- package/dist/module/ValueAtRiskWidget/{MainWithData.js.map → ToolWithData.js.map} +1 -1
- package/dist/module/ValueAtRiskWidget/ValueAtRiskWidget.js +14 -4
- package/dist/module/ValueAtRiskWidget/ValueAtRiskWidget.js.map +1 -1
- package/dist/module/ValueAtRiskWidget/Widget.js +40 -0
- package/dist/module/ValueAtRiskWidget/Widget.js.map +1 -0
- package/dist/module/ValueAtRiskWidget/render.js +8 -2
- package/dist/module/ValueAtRiskWidget/render.js.map +1 -1
- package/dist/module/ValueAtRiskWidget/types.js.map +1 -1
- package/dist/types/ValueAtRiskWidget/Tool.d.ts +4 -0
- package/dist/types/ValueAtRiskWidget/ToolWithData.d.ts +4 -0
- package/dist/types/ValueAtRiskWidget/ValueAtRiskWidget.d.ts +1 -1
- package/dist/types/ValueAtRiskWidget/Widget.d.ts +4 -0
- package/dist/types/ValueAtRiskWidget/types.d.ts +11 -2
- package/package.json +3 -3
- package/src/ValueAtRiskWidget/ChartWithData.tsx +3 -1
- package/src/ValueAtRiskWidget/{Main.tsx → Tool.tsx} +3 -3
- package/src/ValueAtRiskWidget/{MainWithData.tsx → ToolWithData.tsx} +5 -5
- package/src/ValueAtRiskWidget/ValueAtRiskWidget.tsx +22 -4
- package/src/ValueAtRiskWidget/Widget.tsx +46 -0
- package/src/ValueAtRiskWidget/render.tsx +10 -1
- package/src/ValueAtRiskWidget/types.ts +12 -2
- package/test/{Main.test.tsx → Tool.test.tsx} +4 -4
- package/test/{MainWithData.test.tsx → ToolWithData.test.tsx} +2 -2
- package/test/Widget.test.tsx +29 -0
- package/dist/types/ValueAtRiskWidget/Main.d.ts +0 -4
- package/dist/types/ValueAtRiskWidget/MainWithData.d.ts +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartWithData.js","names":["React","useContext","classnames","useQuery","ChartError","Size","Spinner","SpinnerSize","ThemeContext","Chart","getValueAtRiskChart","Legend","ChartWithData","_ref","instrument","duration","bars","division","size","isDesktop","DESKTOP","loading","data","error","variables","fetchPolicy","skip","showChart","valueAtRiskChart","down","points","length","up","createElement","Fragment","className","lg","values"],"sources":["../../../src/ValueAtRiskWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Size, Spinner, SpinnerSize,\n ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { getValueAtRiskChart } from '../gql/getValueAtRiskChart';\nimport { ChartWithDataProps } from './types';\nimport { GetValueAtRiskChartQuery, GetValueAtRiskChartQueryVariables } from '../gql/types/graphql';\nimport { Legend } from './components/Legend';\n\nconst ChartWithData = ({\n instrument, duration, bars, division,\n}: ChartWithDataProps) => {\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n\n const { loading, data, error } = useQuery<\n GetValueAtRiskChartQuery, GetValueAtRiskChartQueryVariables>(getValueAtRiskChart, {\n variables: {\n instrument, division, duration, bars,\n },\n fetchPolicy: 'cache-and-network',\n skip: !instrument,\n });\n\n const showChart = data?.valueAtRiskChart?.down?.points\n && data.valueAtRiskChart.down.points.length > 0\n && data?.valueAtRiskChart?.up?.points\n && data.valueAtRiskChart.up.points.length > 0;\n\n return (\n <>\n {(loading || !instrument)\n && (\n <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n 'lw-h-[460px]': isDesktop,\n 'lw-h-[566px]': !isDesktop,\n })}\n >\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && showChart && (\n <div data-testid=\"value-at-risk-chart\" className=\"lw-relative\">\n <Legend data={data} />\n <Chart values={data} />\n </div>\n )}\n {
|
|
1
|
+
{"version":3,"file":"ChartWithData.js","names":["React","useContext","classnames","useQuery","ChartError","Size","Spinner","SpinnerSize","ThemeContext","Chart","getValueAtRiskChart","Legend","ChartWithData","_ref","instrument","duration","bars","division","size","isDesktop","DESKTOP","loading","data","error","variables","fetchPolicy","skip","showChart","valueAtRiskChart","down","points","length","up","showError","createElement","Fragment","className","lg","values"],"sources":["../../../src/ValueAtRiskWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Size, Spinner, SpinnerSize,\n ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { getValueAtRiskChart } from '../gql/getValueAtRiskChart';\nimport { ChartWithDataProps } from './types';\nimport { GetValueAtRiskChartQuery, GetValueAtRiskChartQueryVariables } from '../gql/types/graphql';\nimport { Legend } from './components/Legend';\n\nconst ChartWithData = ({\n instrument, duration, bars, division,\n}: ChartWithDataProps) => {\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n\n const { loading, data, error } = useQuery<\n GetValueAtRiskChartQuery, GetValueAtRiskChartQueryVariables>(getValueAtRiskChart, {\n variables: {\n instrument, division, duration, bars,\n },\n fetchPolicy: 'cache-and-network',\n skip: !instrument,\n });\n\n const showChart = data?.valueAtRiskChart?.down?.points\n && data.valueAtRiskChart.down.points.length > 0\n && data?.valueAtRiskChart?.up?.points\n && data.valueAtRiskChart.up.points.length > 0;\n\n const showError = !!error || (!loading && !showChart);\n\n return (\n <>\n {(loading || !instrument)\n && (\n <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n 'lw-h-[460px]': isDesktop,\n 'lw-h-[566px]': !isDesktop,\n })}\n >\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && showChart && (\n <div data-testid=\"value-at-risk-chart\" className=\"lw-relative\">\n <Legend data={data} />\n <Chart values={data} />\n </div>\n )}\n {showError && (\n <div className=\"lw-flex lw-h-[460px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n </>\n );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EACtCC,YAAY,QACP,2BAA2B;AAClC,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,mBAAmB,QAAQ,4BAA4B;AAGhE,SAASC,MAAM,QAAQ,qBAAqB;AAE5C,MAAMC,aAAa,GAAGC,IAAA,IAEI;EAAA,IAFH;IACrBC,UAAU;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EACV,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAGjB,UAAU,CAACO,YAAY,CAAC;EACzC,MAAMW,SAAS,GAAGD,IAAI,KAAKb,IAAI,CAACe,OAAO;EAEvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CACoBO,mBAAmB,EAAE;IAChFc,SAAS,EAAE;MACTV,UAAU;MAAEG,QAAQ;MAAEF,QAAQ;MAAEC;IAClC,CAAC;IACDS,WAAW,EAAE,mBAAmB;IAChCC,IAAI,EAAE,CAACZ;EACT,CAAC,CAAC;EAEF,MAAMa,SAAS,GAAGL,IAAI,EAAEM,gBAAgB,EAAEC,IAAI,EAAEC,MAAM,IACjDR,IAAI,CAACM,gBAAgB,CAACC,IAAI,CAACC,MAAM,CAACC,MAAM,GAAG,CAAC,IAC5CT,IAAI,EAAEM,gBAAgB,EAAEI,EAAE,EAAEF,MAAM,IAClCR,IAAI,CAACM,gBAAgB,CAACI,EAAE,CAACF,MAAM,CAACC,MAAM,GAAG,CAAC;EAE/C,MAAME,SAAS,GAAG,CAAC,CAACV,KAAK,IAAK,CAACF,OAAO,IAAI,CAACM,SAAU;EAErD,OACE3B,KAAA,CAAAkC,aAAA,CAAAlC,KAAA,CAAAmC,QAAA,QACG,CAACd,OAAO,IAAI,CAACP,UAAU,KAExBd,KAAA,CAAAkC,aAAA;IAAKE,SAAS,EAAElC,UAAU,CAAC,sFAAsF,EAAE;MACjH,cAAc,EAAEiB,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEDnB,KAAA,CAAAkC,aAAA,CAAC5B,OAAO;IAACY,IAAI,EAAEX,WAAW,CAAC8B;EAAG,CAAE,CAC7B,CACJ,EACA,CAAChB,OAAO,IAAIM,SAAS,IACtB3B,KAAA,CAAAkC,aAAA;IAAK,eAAY,qBAAqB;IAACE,SAAS,EAAC;EAAa,GAC5DpC,KAAA,CAAAkC,aAAA,CAACvB,MAAM;IAACW,IAAI,EAAEA;EAAK,CAAE,CAAC,EACtBtB,KAAA,CAAAkC,aAAA,CAACzB,KAAK;IAAC6B,MAAM,EAAEhB;EAAK,CAAE,CACnB,CACJ,EACAW,SAAS,IACRjC,KAAA,CAAAkC,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChHpC,KAAA,CAAAkC,aAAA,CAAC9B,UAAU,MAAE,CACV,CAEP,CAAC;AAEP,CAAC;AAED,SAASQ,aAAa","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ import { useLocale } from '@oanda/mono-i18n';
|
|
|
5
5
|
import { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';
|
|
6
6
|
import { ValueAtRiskDuration, ValueAtRiskBars } from '../gql/types/graphql';
|
|
7
7
|
import { ChartWithData } from './ChartWithData';
|
|
8
|
-
const
|
|
8
|
+
const Tool = _ref => {
|
|
9
9
|
let {
|
|
10
10
|
data,
|
|
11
11
|
division
|
|
@@ -81,5 +81,5 @@ const Main = _ref => {
|
|
|
81
81
|
division: division
|
|
82
82
|
}));
|
|
83
83
|
};
|
|
84
|
-
export {
|
|
85
|
-
//# sourceMappingURL=
|
|
84
|
+
export { Tool };
|
|
85
|
+
//# sourceMappingURL=Tool.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"Tool.js","names":["React","useState","useContext","classnames","Select","Size","ThemeContext","useLocale","getAssetClassesList","getInstrumentsByAssetClassId","ValueAtRiskDuration","ValueAtRiskBars","ChartWithData","Tool","_ref","data","division","lang","size","isDesktop","DESKTOP","assetClassesOptions","valueAtRiskAssetClasses","initInstrumentsOptions","id","holdTimeOptions","Object","values","map","duration","label","count","substring","calculationPeriodOptions","bars","selectedAssetClass","setSelectedAssetClass","instrumentsList","setInstrumentsList","selectedInstrument","setSelectedInstrument","selectedHoldTime","setSelectedHoldTime","selectedCalculationPeriod","setSelectedCalculationPeriod","handleAssetClassSelect","selectedOption","list","showAssetClassesSelect","length","createElement","className","selectLabel","options","setSelectedOption","withSearch","searchPlaceholder","instrument"],"sources":["../../../src/ValueAtRiskWidget/Tool.tsx"],"sourcesContent":["import React, { useState, useContext } from 'react';\nimport classnames from 'classnames';\nimport {\n Select, SelectOption, Size, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';\nimport { ToolProps } from './types';\nimport { ValueAtRiskDuration, ValueAtRiskBars } from '../gql/types/graphql';\nimport { ChartWithData } from './ChartWithData';\n\nconst Tool = ({ data, division }: ToolProps) => {\n const { lang } = useLocale();\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n\n const assetClassesOptions = getAssetClassesList(data!.valueAtRiskAssetClasses!);\n const initInstrumentsOptions = getInstrumentsByAssetClassId(\n data!.valueAtRiskAssetClasses!,\n assetClassesOptions[0].id,\n );\n\n const holdTimeOptions = Object.values(ValueAtRiskDuration).map((duration) => ({ id: duration as string, label: lang('day', { count: +duration.substring(1) }) }));\n const calculationPeriodOptions = Object.values(ValueAtRiskBars).map((bars) => ({ id: bars as string, label: lang('day', { count: +bars.substring(1) }) }));\n\n const [selectedAssetClass, setSelectedAssetClass] = useState(\n assetClassesOptions[0],\n );\n const [instrumentsList, setInstrumentsList] = useState(initInstrumentsOptions);\n const [selectedInstrument, setSelectedInstrument] = useState(initInstrumentsOptions[0]);\n const [selectedHoldTime, setSelectedHoldTime] = useState(holdTimeOptions[0]);\n const [selectedCalculationPeriod, setSelectedCalculationPeriod] = useState(\n calculationPeriodOptions[0],\n );\n\n const handleAssetClassSelect = (selectedOption: SelectOption) => {\n const list = getInstrumentsByAssetClassId(\n data!.valueAtRiskAssetClasses!,\n selectedOption.id,\n );\n\n setSelectedAssetClass(selectedOption);\n setInstrumentsList(list);\n setSelectedInstrument(list[0]);\n };\n\n const showAssetClassesSelect = assetClassesOptions.length > 1;\n\n return (\n <div\n data-testid=\"value-at-risk-tool-wrapper\"\n className=\"lw-relative lw-text-sm lw-tracking-normal\"\n >\n <div className={classnames(\n 'lw-mb-8 lw-grid',\n {\n 'lw-grid-cols-4 lw-gap-2': isDesktop && showAssetClassesSelect,\n 'lw-grid-cols-3 lw-gap-2.5': isDesktop && !showAssetClassesSelect,\n 'lw-grid-cols-1 lw-gap-4': !isDesktop,\n },\n )}\n >\n {showAssetClassesSelect ? (\n <Select\n selectLabel={lang('instrument_type')}\n options={assetClassesOptions}\n selectedOption={selectedAssetClass}\n setSelectedOption={handleAssetClassSelect}\n />\n ) : null}\n <Select\n withSearch\n searchPlaceholder={lang('search')}\n selectLabel={lang('instrument')}\n options={instrumentsList}\n selectedOption={selectedInstrument}\n setSelectedOption={setSelectedInstrument}\n />\n <Select\n selectLabel={lang('hold_time')}\n options={holdTimeOptions}\n selectedOption={selectedHoldTime}\n setSelectedOption={setSelectedHoldTime}\n />\n <Select\n selectLabel={lang('calculation_period')}\n options={calculationPeriodOptions}\n selectedOption={selectedCalculationPeriod}\n setSelectedOption={setSelectedCalculationPeriod}\n />\n </div>\n <ChartWithData\n bars={selectedCalculationPeriod.id as ValueAtRiskBars}\n duration={selectedHoldTime.id as ValueAtRiskDuration}\n instrument={selectedInstrument.id}\n division={division}\n />\n </div>\n );\n};\n\nexport { Tool };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,8 +3,8 @@ import classnames from 'classnames';
|
|
|
3
3
|
import { ChartError, Size, Spinner, SpinnerSize, ThemeContext } from '@oanda/labs-widget-common';
|
|
4
4
|
import { useQuery } from '@apollo/client';
|
|
5
5
|
import { getValueAtRiskAssetClasses } from '../gql/getValueAtRiskAssetClasses';
|
|
6
|
-
import {
|
|
7
|
-
const
|
|
6
|
+
import { Tool } from './Tool';
|
|
7
|
+
const ToolWithData = _ref => {
|
|
8
8
|
let {
|
|
9
9
|
division
|
|
10
10
|
} = _ref;
|
|
@@ -31,12 +31,12 @@ const MainWithData = _ref => {
|
|
|
31
31
|
})
|
|
32
32
|
}, React.createElement(Spinner, {
|
|
33
33
|
size: SpinnerSize.lg
|
|
34
|
-
})), !loading && data && React.createElement(
|
|
34
|
+
})), !loading && data && React.createElement(Tool, {
|
|
35
35
|
data: data,
|
|
36
36
|
division: division
|
|
37
37
|
}), !loading && error && React.createElement("div", {
|
|
38
38
|
className: "lw-flex lw-h-[500px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
|
|
39
39
|
}, React.createElement(ChartError, null)));
|
|
40
40
|
};
|
|
41
|
-
export {
|
|
42
|
-
//# sourceMappingURL=
|
|
41
|
+
export { ToolWithData };
|
|
42
|
+
//# sourceMappingURL=ToolWithData.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"ToolWithData.js","names":["React","useContext","classnames","ChartError","Size","Spinner","SpinnerSize","ThemeContext","useQuery","getValueAtRiskAssetClasses","Tool","ToolWithData","_ref","division","size","isDesktop","DESKTOP","loading","data","error","variables","fetchPolicy","createElement","className","lg"],"sources":["../../../src/ValueAtRiskWidget/ToolWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport {\n ChartError, Size, Spinner, SpinnerSize, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { getValueAtRiskAssetClasses } from '../gql/getValueAtRiskAssetClasses';\nimport { Tool } from './Tool';\nimport { ToolWithDataProps } from './types';\nimport { GetValueAtRiskAssetClassesQuery, GetValueAtRiskAssetClassesQueryVariables } from '../gql/types/graphql';\n\nconst ToolWithData = ({ division }: ToolWithDataProps) => {\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n const { loading, data, error } = useQuery<\n GetValueAtRiskAssetClassesQuery,\n GetValueAtRiskAssetClassesQueryVariables\n >(getValueAtRiskAssetClasses, {\n variables: {\n division,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n return (\n <div data-testid=\"value-at-risk-wrapper\">\n {(loading || !size)\n && (\n <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n 'lw-h-[566px]': isDesktop,\n 'lw-h-[840px]': !isDesktop,\n })}\n >\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && data && (\n <Tool\n data={data}\n division={division}\n />\n )}\n {!loading && error && (\n <div className=\"lw-flex lw-h-[500px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n </div>\n );\n};\n\nexport { ToolWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,UAAU,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EAAEC,YAAY,QAC/C,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,0BAA0B,QAAQ,mCAAmC;AAC9E,SAASC,IAAI,QAAQ,QAAQ;AAI7B,MAAMC,YAAY,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EACnD,MAAM;IAAEE;EAAK,CAAC,GAAGb,UAAU,CAACM,YAAY,CAAC;EACzC,MAAMQ,SAAS,GAAGD,IAAI,KAAKV,IAAI,CAACY,OAAO;EACvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGX,QAAQ,CAGvCC,0BAA0B,EAAE;IAC5BW,SAAS,EAAE;MACTP;IACF,CAAC;IACDQ,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,OACErB,KAAA,CAAAsB,aAAA;IAAK,eAAY;EAAuB,GACrC,CAACL,OAAO,IAAI,CAACH,IAAI,KAElBd,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAErB,UAAU,CAAC,sFAAsF,EAAE;MACjH,cAAc,EAAEa,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEDf,KAAA,CAAAsB,aAAA,CAACjB,OAAO;IAACS,IAAI,EAAER,WAAW,CAACkB;EAAG,CAAE,CAC7B,CACJ,EACA,CAACP,OAAO,IAAIC,IAAI,IACflB,KAAA,CAAAsB,aAAA,CAACZ,IAAI;IACHQ,IAAI,EAAEA,IAAK;IACXL,QAAQ,EAAEA;EAAS,CACpB,CACF,EACA,CAACI,OAAO,IAAIE,KAAK,IAChBnB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAmG,GAChHvB,KAAA,CAAAsB,aAAA,CAACnB,UAAU,MAAE,CACV,CAEJ,CAAC;AAEV,CAAC;AAED,SAASQ,YAAY","ignoreList":[]}
|
|
@@ -3,19 +3,24 @@ import { LocaleProvider } from '@oanda/mono-i18n';
|
|
|
3
3
|
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
|
|
4
4
|
import { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';
|
|
5
5
|
import { translations } from '../translations';
|
|
6
|
-
import {
|
|
6
|
+
import { ToolWithData } from './ToolWithData';
|
|
7
|
+
import { Widget } from './Widget';
|
|
7
8
|
const ValueAtRiskWidget = _ref => {
|
|
8
9
|
let {
|
|
9
10
|
graphqlUrl,
|
|
10
11
|
locale,
|
|
11
12
|
division,
|
|
12
13
|
theme,
|
|
13
|
-
isParamError
|
|
14
|
+
isParamError,
|
|
15
|
+
instrument,
|
|
16
|
+
duration,
|
|
17
|
+
bars
|
|
14
18
|
} = _ref;
|
|
15
19
|
const client = new ApolloClient({
|
|
16
20
|
uri: graphqlUrl,
|
|
17
21
|
cache: new InMemoryCache()
|
|
18
22
|
});
|
|
23
|
+
const isWidget = !!instrument && !!duration && !!bars;
|
|
19
24
|
return React.createElement(ThemeProvider, {
|
|
20
25
|
theme: theme
|
|
21
26
|
}, React.createElement(LocaleProvider, {
|
|
@@ -23,10 +28,15 @@ const ValueAtRiskWidget = _ref => {
|
|
|
23
28
|
translations: translations
|
|
24
29
|
}, React.createElement(ApolloProvider, {
|
|
25
30
|
client: client
|
|
26
|
-
}, isParamError
|
|
31
|
+
}, isParamError && React.createElement("div", {
|
|
27
32
|
className: "lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
|
|
28
|
-
}, React.createElement(ChartError, null))
|
|
33
|
+
}, React.createElement(ChartError, null)), !isParamError && !isWidget && React.createElement(ToolWithData, {
|
|
29
34
|
division: division
|
|
35
|
+
}), !isParamError && isWidget && React.createElement(Widget, {
|
|
36
|
+
division: division,
|
|
37
|
+
instrument: instrument,
|
|
38
|
+
duration: duration,
|
|
39
|
+
bars: bars
|
|
30
40
|
}))));
|
|
31
41
|
};
|
|
32
42
|
export { ValueAtRiskWidget };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValueAtRiskWidget.js","names":["React","LocaleProvider","ApolloClient","InMemoryCache","ApolloProvider","ChartError","ThemeProvider","getLocale","translations","
|
|
1
|
+
{"version":3,"file":"ValueAtRiskWidget.js","names":["React","LocaleProvider","ApolloClient","InMemoryCache","ApolloProvider","ChartError","ThemeProvider","getLocale","translations","ToolWithData","Widget","ValueAtRiskWidget","_ref","graphqlUrl","locale","division","theme","isParamError","instrument","duration","bars","client","uri","cache","isWidget","createElement","className"],"sources":["../../../src/ValueAtRiskWidget/ValueAtRiskWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { ValueAtRiskConfig } from './types';\nimport { translations } from '../translations';\nimport { ToolWithData } from './ToolWithData';\nimport { Widget } from './Widget';\n\nconst ValueAtRiskWidget = ({\n graphqlUrl,\n locale,\n division,\n theme,\n isParamError,\n instrument,\n duration,\n bars,\n}: ValueAtRiskConfig) => {\n const client = new ApolloClient({\n uri: graphqlUrl,\n cache: new InMemoryCache(),\n });\n const isWidget = !!instrument && !!duration && !!bars;\n\n return (\n <ThemeProvider theme={theme}>\n <LocaleProvider locale={getLocale(locale)} translations={translations}>\n <ApolloProvider client={client}>\n {isParamError && (\n <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n {!isParamError && !isWidget && <ToolWithData division={division} />}\n {!isParamError && isWidget && (\n <Widget\n division={division}\n instrument={instrument}\n duration={duration}\n bars={bars}\n />\n )}\n </ApolloProvider>\n </LocaleProvider>\n </ThemeProvider>\n );\n};\n\nexport { ValueAtRiskWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,UAAU,EAAEC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AAEhF,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,MAAM,QAAQ,UAAU;AAEjC,MAAMC,iBAAiB,GAAGC,IAAA,IASD;EAAA,IATE;IACzBC,UAAU;IACVC,MAAM;IACNC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC;EACiB,CAAC,GAAAR,IAAA;EAClB,MAAMS,MAAM,GAAG,IAAInB,YAAY,CAAC;IAC9BoB,GAAG,EAAET,UAAU;IACfU,KAAK,EAAE,IAAIpB,aAAa,CAAC;EAC3B,CAAC,CAAC;EACF,MAAMqB,QAAQ,GAAG,CAAC,CAACN,UAAU,IAAI,CAAC,CAACC,QAAQ,IAAI,CAAC,CAACC,IAAI;EAErD,OACEpB,KAAA,CAAAyB,aAAA,CAACnB,aAAa;IAACU,KAAK,EAAEA;EAAM,GAC1BhB,KAAA,CAAAyB,aAAA,CAACxB,cAAc;IAACa,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAACN,YAAY,EAAEA;EAAa,GACpER,KAAA,CAAAyB,aAAA,CAACrB,cAAc;IAACiB,MAAM,EAAEA;EAAO,GAC5BJ,YAAY,IACXjB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAmG,GAChH1B,KAAA,CAAAyB,aAAA,CAACpB,UAAU,MAAE,CACV,CACN,EACA,CAACY,YAAY,IAAI,CAACO,QAAQ,IAAIxB,KAAA,CAAAyB,aAAA,CAAChB,YAAY;IAACM,QAAQ,EAAEA;EAAS,CAAE,CAAC,EAClE,CAACE,YAAY,IAAIO,QAAQ,IACxBxB,KAAA,CAAAyB,aAAA,CAACf,MAAM;IACLK,QAAQ,EAAEA,QAAS;IACnBG,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,IAAI,EAAEA;EAAK,CACZ,CAEW,CACF,CACH,CAAC;AAEpB,CAAC;AAED,SAAST,iBAAiB","ignoreList":[]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
import classnames from 'classnames';
|
|
3
|
+
import { Size, ThemeContext } from '@oanda/labs-widget-common';
|
|
4
|
+
import { useLocale } from '@oanda/mono-i18n';
|
|
5
|
+
import { ChartWithData } from './ChartWithData';
|
|
6
|
+
const Widget = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
division,
|
|
9
|
+
instrument,
|
|
10
|
+
duration,
|
|
11
|
+
bars
|
|
12
|
+
} = _ref;
|
|
13
|
+
const {
|
|
14
|
+
lang
|
|
15
|
+
} = useLocale();
|
|
16
|
+
const {
|
|
17
|
+
size
|
|
18
|
+
} = useContext(ThemeContext);
|
|
19
|
+
const isDesktop = size === Size.DESKTOP;
|
|
20
|
+
return React.createElement("div", {
|
|
21
|
+
"data-testid": "value-at-risk-widget-wrapper",
|
|
22
|
+
className: "lw-relative lw-text-sm lw-tracking-normal"
|
|
23
|
+
}, size && React.createElement(React.Fragment, null, React.createElement("div", {
|
|
24
|
+
className: classnames('lw-font-bold', {
|
|
25
|
+
'lw-mb-11 lw-text-center lw-text-xl': isDesktop,
|
|
26
|
+
'lw-mb-6 lw-text-lg': !isDesktop
|
|
27
|
+
})
|
|
28
|
+
}, React.createElement("div", null, `${lang('hold_time')}: ${lang('day', {
|
|
29
|
+
count: +duration.substring(1)
|
|
30
|
+
})}`), React.createElement("div", null, `${lang('calculation_period')}: ${lang('day', {
|
|
31
|
+
count: +bars.substring(1)
|
|
32
|
+
})}`)), React.createElement(ChartWithData, {
|
|
33
|
+
bars: bars,
|
|
34
|
+
duration: duration,
|
|
35
|
+
instrument: instrument,
|
|
36
|
+
division: division
|
|
37
|
+
})));
|
|
38
|
+
};
|
|
39
|
+
export { Widget };
|
|
40
|
+
//# sourceMappingURL=Widget.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Widget.js","names":["React","useContext","classnames","Size","ThemeContext","useLocale","ChartWithData","Widget","_ref","division","instrument","duration","bars","lang","size","isDesktop","DESKTOP","createElement","className","Fragment","count","substring"],"sources":["../../../src/ValueAtRiskWidget/Widget.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { Size, ThemeContext } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { WidgetProps } from './types';\nimport { ChartWithData } from './ChartWithData';\n\nconst Widget = ({\n division,\n instrument,\n duration,\n bars,\n}: WidgetProps) => {\n const { lang } = useLocale();\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n\n return (\n <div\n data-testid=\"value-at-risk-widget-wrapper\"\n className=\"lw-relative lw-text-sm lw-tracking-normal\"\n >\n {size && (\n <>\n <div\n className={classnames('lw-font-bold', {\n 'lw-mb-11 lw-text-center lw-text-xl': isDesktop,\n 'lw-mb-6 lw-text-lg': !isDesktop,\n })}\n >\n <div>{`${lang('hold_time')}: ${lang('day', { count: +duration.substring(1) })}`}</div>\n <div>{`${lang('calculation_period')}: ${lang('day', { count: +bars.substring(1) })}`}</div>\n </div>\n <ChartWithData\n bars={bars}\n duration={duration}\n instrument={instrument}\n division={division}\n />\n </>\n )}\n </div>\n );\n};\n\nexport { Widget };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,IAAI,EAAEC,YAAY,QAAQ,2BAA2B;AAC9D,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,MAAMC,MAAM,GAAGC,IAAA,IAKI;EAAA,IALH;IACdC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC;EACW,CAAC,GAAAJ,IAAA;EACZ,MAAM;IAAEK;EAAK,CAAC,GAAGR,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAES;EAAK,CAAC,GAAGb,UAAU,CAACG,YAAY,CAAC;EACzC,MAAMW,SAAS,GAAGD,IAAI,KAAKX,IAAI,CAACa,OAAO;EAEvC,OACEhB,KAAA,CAAAiB,aAAA;IACE,eAAY,8BAA8B;IAC1CC,SAAS,EAAC;EAA2C,GAEpDJ,IAAI,IACHd,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAmB,QAAA,QACEnB,KAAA,CAAAiB,aAAA;IACEC,SAAS,EAAEhB,UAAU,CAAC,cAAc,EAAE;MACpC,oCAAoC,EAAEa,SAAS;MAC/C,oBAAoB,EAAE,CAACA;IACzB,CAAC;EAAE,GAEHf,KAAA,CAAAiB,aAAA,cAAM,GAAGJ,IAAI,CAAC,WAAW,CAAC,KAAKA,IAAI,CAAC,KAAK,EAAE;IAAEO,KAAK,EAAE,CAACT,QAAQ,CAACU,SAAS,CAAC,CAAC;EAAE,CAAC,CAAC,EAAQ,CAAC,EACtFrB,KAAA,CAAAiB,aAAA,cAAM,GAAGJ,IAAI,CAAC,oBAAoB,CAAC,KAAKA,IAAI,CAAC,KAAK,EAAE;IAAEO,KAAK,EAAE,CAACR,IAAI,CAACS,SAAS,CAAC,CAAC;EAAE,CAAC,CAAC,EAAQ,CACvF,CAAC,EACNrB,KAAA,CAAAiB,aAAA,CAACX,aAAa;IACZM,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBD,UAAU,EAAEA,UAAW;IACvBD,QAAQ,EAAEA;EAAS,CACpB,CACD,CAED,CAAC;AAEV,CAAC;AAED,SAASF,MAAM","ignoreList":[]}
|
|
@@ -13,7 +13,10 @@ volatilityChartParamsElements.forEach(element => {
|
|
|
13
13
|
const mode = element.getAttribute('data-mode');
|
|
14
14
|
const {
|
|
15
15
|
division,
|
|
16
|
-
locale
|
|
16
|
+
locale,
|
|
17
|
+
instrument,
|
|
18
|
+
duration,
|
|
19
|
+
bars
|
|
17
20
|
} = JSON.parse(params);
|
|
18
21
|
const isParamError = validateToolParams({
|
|
19
22
|
locale,
|
|
@@ -33,7 +36,10 @@ volatilityChartParamsElements.forEach(element => {
|
|
|
33
36
|
locale: locale,
|
|
34
37
|
division: division,
|
|
35
38
|
theme: mode,
|
|
36
|
-
isParamError: isParamError
|
|
39
|
+
isParamError: isParamError,
|
|
40
|
+
instrument: instrument,
|
|
41
|
+
duration: duration,
|
|
42
|
+
bars: bars
|
|
37
43
|
}));
|
|
38
44
|
});
|
|
39
45
|
//# sourceMappingURL=render.js.map
|
|
@@ -1 +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 {
|
|
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","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":[]}
|
|
@@ -1 +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
|
|
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 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":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ValueAtRiskConfig } from './types';
|
|
3
|
-
declare const ValueAtRiskWidget: ({ graphqlUrl, locale, division, theme, isParamError, }: ValueAtRiskConfig) => React.JSX.Element;
|
|
3
|
+
declare const ValueAtRiskWidget: ({ graphqlUrl, locale, division, theme, isParamError, instrument, duration, bars, }: ValueAtRiskConfig) => React.JSX.Element;
|
|
4
4
|
export { ValueAtRiskWidget };
|
|
@@ -7,15 +7,24 @@ export interface ValueAtRiskConfig {
|
|
|
7
7
|
locale: Locale;
|
|
8
8
|
theme?: Theme;
|
|
9
9
|
isParamError?: boolean;
|
|
10
|
+
instrument?: string;
|
|
11
|
+
duration?: ValueAtRiskDuration;
|
|
12
|
+
bars?: ValueAtRiskBars;
|
|
10
13
|
}
|
|
11
14
|
export interface ValueAtRiskWrapperConfig extends ValueAtRiskConfig {
|
|
12
15
|
renderElementId: string;
|
|
13
16
|
}
|
|
14
|
-
export interface
|
|
17
|
+
export interface WidgetProps {
|
|
18
|
+
instrument: string;
|
|
19
|
+
duration: ValueAtRiskDuration;
|
|
20
|
+
bars: ValueAtRiskBars;
|
|
21
|
+
division: Division;
|
|
22
|
+
}
|
|
23
|
+
export interface ToolProps {
|
|
15
24
|
data: GetValueAtRiskAssetClassesQuery;
|
|
16
25
|
division: Division;
|
|
17
26
|
}
|
|
18
|
-
export interface
|
|
27
|
+
export interface ToolWithDataProps {
|
|
19
28
|
division: Division;
|
|
20
29
|
}
|
|
21
30
|
export interface ChartWithDataProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-value-at-risk-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.29",
|
|
4
4
|
"description": "Labs Value At Risk Widget",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"license": "UNLICENSED",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@apollo/client": "3.7.17",
|
|
16
|
-
"@oanda/labs-widget-common": "^1.0.
|
|
16
|
+
"@oanda/labs-widget-common": "^1.0.137",
|
|
17
17
|
"@oanda/mono-i18n": "10.0.1",
|
|
18
18
|
"echarts": "5.5.0",
|
|
19
19
|
"echarts-for-react": "3.0.2",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"@graphql-codegen/client-preset": "4.1.0",
|
|
25
25
|
"@graphql-codegen/typescript": "4.0.1"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "6e5bed1a4bc82e3a66d48d167ad3179f0ac23819"
|
|
28
28
|
}
|
|
@@ -31,6 +31,8 @@ const ChartWithData = ({
|
|
|
31
31
|
&& data?.valueAtRiskChart?.up?.points
|
|
32
32
|
&& data.valueAtRiskChart.up.points.length > 0;
|
|
33
33
|
|
|
34
|
+
const showError = !!error || (!loading && !showChart);
|
|
35
|
+
|
|
34
36
|
return (
|
|
35
37
|
<>
|
|
36
38
|
{(loading || !instrument)
|
|
@@ -49,7 +51,7 @@ const ChartWithData = ({
|
|
|
49
51
|
<Chart values={data} />
|
|
50
52
|
</div>
|
|
51
53
|
)}
|
|
52
|
-
{
|
|
54
|
+
{showError && (
|
|
53
55
|
<div className="lw-flex lw-h-[460px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
|
|
54
56
|
<ChartError />
|
|
55
57
|
</div>
|
|
@@ -5,11 +5,11 @@ import {
|
|
|
5
5
|
} from '@oanda/labs-widget-common';
|
|
6
6
|
import { useLocale } from '@oanda/mono-i18n';
|
|
7
7
|
import { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';
|
|
8
|
-
import {
|
|
8
|
+
import { ToolProps } from './types';
|
|
9
9
|
import { ValueAtRiskDuration, ValueAtRiskBars } from '../gql/types/graphql';
|
|
10
10
|
import { ChartWithData } from './ChartWithData';
|
|
11
11
|
|
|
12
|
-
const
|
|
12
|
+
const Tool = ({ data, division }: ToolProps) => {
|
|
13
13
|
const { lang } = useLocale();
|
|
14
14
|
const { size } = useContext(ThemeContext);
|
|
15
15
|
const isDesktop = size === Size.DESKTOP;
|
|
@@ -99,4 +99,4 @@ const Main = ({ data, division }: MainProps) => {
|
|
|
99
99
|
);
|
|
100
100
|
};
|
|
101
101
|
|
|
102
|
-
export {
|
|
102
|
+
export { Tool };
|
|
@@ -5,11 +5,11 @@ import {
|
|
|
5
5
|
} from '@oanda/labs-widget-common';
|
|
6
6
|
import { useQuery } from '@apollo/client';
|
|
7
7
|
import { getValueAtRiskAssetClasses } from '../gql/getValueAtRiskAssetClasses';
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { Tool } from './Tool';
|
|
9
|
+
import { ToolWithDataProps } from './types';
|
|
10
10
|
import { GetValueAtRiskAssetClassesQuery, GetValueAtRiskAssetClassesQueryVariables } from '../gql/types/graphql';
|
|
11
11
|
|
|
12
|
-
const
|
|
12
|
+
const ToolWithData = ({ division }: ToolWithDataProps) => {
|
|
13
13
|
const { size } = useContext(ThemeContext);
|
|
14
14
|
const isDesktop = size === Size.DESKTOP;
|
|
15
15
|
const { loading, data, error } = useQuery<
|
|
@@ -35,7 +35,7 @@ const MainWithData = ({ division }: MainWithDataProps) => {
|
|
|
35
35
|
</div>
|
|
36
36
|
)}
|
|
37
37
|
{!loading && data && (
|
|
38
|
-
<
|
|
38
|
+
<Tool
|
|
39
39
|
data={data}
|
|
40
40
|
division={division}
|
|
41
41
|
/>
|
|
@@ -49,4 +49,4 @@ const MainWithData = ({ division }: MainWithDataProps) => {
|
|
|
49
49
|
);
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
export {
|
|
52
|
+
export { ToolWithData };
|
|
@@ -4,25 +4,43 @@ import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
|
|
|
4
4
|
import { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';
|
|
5
5
|
import { ValueAtRiskConfig } from './types';
|
|
6
6
|
import { translations } from '../translations';
|
|
7
|
-
import {
|
|
7
|
+
import { ToolWithData } from './ToolWithData';
|
|
8
|
+
import { Widget } from './Widget';
|
|
8
9
|
|
|
9
10
|
const ValueAtRiskWidget = ({
|
|
10
|
-
graphqlUrl,
|
|
11
|
+
graphqlUrl,
|
|
12
|
+
locale,
|
|
13
|
+
division,
|
|
14
|
+
theme,
|
|
15
|
+
isParamError,
|
|
16
|
+
instrument,
|
|
17
|
+
duration,
|
|
18
|
+
bars,
|
|
11
19
|
}: ValueAtRiskConfig) => {
|
|
12
20
|
const client = new ApolloClient({
|
|
13
21
|
uri: graphqlUrl,
|
|
14
22
|
cache: new InMemoryCache(),
|
|
15
23
|
});
|
|
24
|
+
const isWidget = !!instrument && !!duration && !!bars;
|
|
16
25
|
|
|
17
26
|
return (
|
|
18
27
|
<ThemeProvider theme={theme}>
|
|
19
28
|
<LocaleProvider locale={getLocale(locale)} translations={translations}>
|
|
20
29
|
<ApolloProvider client={client}>
|
|
21
|
-
{isParamError
|
|
30
|
+
{isParamError && (
|
|
22
31
|
<div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
|
|
23
32
|
<ChartError />
|
|
24
33
|
</div>
|
|
25
|
-
)
|
|
34
|
+
)}
|
|
35
|
+
{!isParamError && !isWidget && <ToolWithData division={division} />}
|
|
36
|
+
{!isParamError && isWidget && (
|
|
37
|
+
<Widget
|
|
38
|
+
division={division}
|
|
39
|
+
instrument={instrument}
|
|
40
|
+
duration={duration}
|
|
41
|
+
bars={bars}
|
|
42
|
+
/>
|
|
43
|
+
)}
|
|
26
44
|
</ApolloProvider>
|
|
27
45
|
</LocaleProvider>
|
|
28
46
|
</ThemeProvider>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
import classnames from 'classnames';
|
|
3
|
+
import { Size, ThemeContext } from '@oanda/labs-widget-common';
|
|
4
|
+
import { useLocale } from '@oanda/mono-i18n';
|
|
5
|
+
import { WidgetProps } from './types';
|
|
6
|
+
import { ChartWithData } from './ChartWithData';
|
|
7
|
+
|
|
8
|
+
const Widget = ({
|
|
9
|
+
division,
|
|
10
|
+
instrument,
|
|
11
|
+
duration,
|
|
12
|
+
bars,
|
|
13
|
+
}: WidgetProps) => {
|
|
14
|
+
const { lang } = useLocale();
|
|
15
|
+
const { size } = useContext(ThemeContext);
|
|
16
|
+
const isDesktop = size === Size.DESKTOP;
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div
|
|
20
|
+
data-testid="value-at-risk-widget-wrapper"
|
|
21
|
+
className="lw-relative lw-text-sm lw-tracking-normal"
|
|
22
|
+
>
|
|
23
|
+
{size && (
|
|
24
|
+
<>
|
|
25
|
+
<div
|
|
26
|
+
className={classnames('lw-font-bold', {
|
|
27
|
+
'lw-mb-11 lw-text-center lw-text-xl': isDesktop,
|
|
28
|
+
'lw-mb-6 lw-text-lg': !isDesktop,
|
|
29
|
+
})}
|
|
30
|
+
>
|
|
31
|
+
<div>{`${lang('hold_time')}: ${lang('day', { count: +duration.substring(1) })}`}</div>
|
|
32
|
+
<div>{`${lang('calculation_period')}: ${lang('day', { count: +bars.substring(1) })}`}</div>
|
|
33
|
+
</div>
|
|
34
|
+
<ChartWithData
|
|
35
|
+
bars={bars}
|
|
36
|
+
duration={duration}
|
|
37
|
+
instrument={instrument}
|
|
38
|
+
division={division}
|
|
39
|
+
/>
|
|
40
|
+
</>
|
|
41
|
+
)}
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export { Widget };
|
|
@@ -14,7 +14,13 @@ volatilityChartParamsElements.forEach((element) => {
|
|
|
14
14
|
const root = createRoot(element);
|
|
15
15
|
const params = element.getAttribute('data-value-at-risk-params');
|
|
16
16
|
const mode = element.getAttribute('data-mode');
|
|
17
|
-
const {
|
|
17
|
+
const {
|
|
18
|
+
division,
|
|
19
|
+
locale,
|
|
20
|
+
instrument,
|
|
21
|
+
duration,
|
|
22
|
+
bars,
|
|
23
|
+
} = JSON.parse(params as string);
|
|
18
24
|
|
|
19
25
|
const isParamError = validateToolParams({ locale, division, graphqlUrl }, [
|
|
20
26
|
{
|
|
@@ -36,6 +42,9 @@ volatilityChartParamsElements.forEach((element) => {
|
|
|
36
42
|
division={division}
|
|
37
43
|
theme={mode as Theme}
|
|
38
44
|
isParamError={isParamError}
|
|
45
|
+
instrument={instrument}
|
|
46
|
+
duration={duration}
|
|
47
|
+
bars={bars}
|
|
39
48
|
/>,
|
|
40
49
|
);
|
|
41
50
|
});
|
|
@@ -10,18 +10,28 @@ export interface ValueAtRiskConfig {
|
|
|
10
10
|
locale: Locale;
|
|
11
11
|
theme?: Theme;
|
|
12
12
|
isParamError?: boolean;
|
|
13
|
+
instrument?: string;
|
|
14
|
+
duration?: ValueAtRiskDuration;
|
|
15
|
+
bars?: ValueAtRiskBars;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
export interface ValueAtRiskWrapperConfig extends ValueAtRiskConfig {
|
|
16
19
|
renderElementId: string;
|
|
17
20
|
}
|
|
18
21
|
|
|
19
|
-
export interface
|
|
22
|
+
export interface WidgetProps {
|
|
23
|
+
instrument: string;
|
|
24
|
+
duration: ValueAtRiskDuration;
|
|
25
|
+
bars: ValueAtRiskBars;
|
|
26
|
+
division: Division;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export interface ToolProps {
|
|
20
30
|
data: GetValueAtRiskAssetClassesQuery;
|
|
21
31
|
division: Division;
|
|
22
32
|
}
|
|
23
33
|
|
|
24
|
-
export interface
|
|
34
|
+
export interface ToolWithDataProps {
|
|
25
35
|
division: Division;
|
|
26
36
|
}
|
|
27
37
|
|