@oanda/labs-currency-power-balance-widget 1.0.18 → 1.0.19
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 +80 -0
- package/dist/main/CurrencyPowerBalanceWidget/ChartWithData.js +2 -2
- package/dist/main/CurrencyPowerBalanceWidget/ChartWithData.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +2 -2
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +6 -11
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js +2 -2
- package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +2 -2
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +6 -11
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/constants.d.ts +1 -10
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts +1 -1
- package/package.json +3 -3
- package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx +2 -2
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx +3 -3
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts +1 -1
- package/test/responsesMocks.ts +29 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,86 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 1.0.19 (2024-02-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## 1.0.79 (2024-02-05)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## 1.0.78 (2024-01-30)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## 1.0.77 (2024-01-25)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## 1.0.76 (2024-01-25)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## 1.0.75 (2024-01-22)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## 1.0.74 (2024-01-22)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## 1.0.73 (2024-01-22)
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## 1.0.72 (2024-01-19)
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## 1.0.71 (2024-01-18)
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## 1.0.70 (2024-01-17)
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
## 1.0.69 (2024-01-17)
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
## 1.0.68 (2024-01-15)
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
## 1.0.67 (2024-01-15)
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
## 1.0.66 (2024-01-12)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
## 1.0.65 (2024-01-11)
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
## 1.0.64 (2024-01-11)
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
## 1.0.63 (2024-01-11)
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
## 1.0.62 (2024-01-10)
|
|
79
|
+
|
|
80
|
+
**Note:** Version bump only for package @oanda/labs-currency-power-balance-widget
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
6
86
|
## 1.0.18 (2024-02-05)
|
|
7
87
|
|
|
8
88
|
|
|
@@ -33,14 +33,14 @@ const ChartWithData = _ref => {
|
|
|
33
33
|
const showChart = (data === null || data === void 0 ? void 0 : data.currencyPowerBalance) && (data === null || data === void 0 || (_data$currencyPowerBa = data.currencyPowerBalance) === null || _data$currencyPowerBa === void 0 ? void 0 : _data$currencyPowerBa.length) > 0;
|
|
34
34
|
const showError = (data === null || data === void 0 || (_data$currencyPowerBa2 = data.currencyPowerBalance) === null || _data$currencyPowerBa2 === void 0 ? void 0 : _data$currencyPowerBa2.length) === 0 || error;
|
|
35
35
|
return _react.default.createElement(_react.default.Fragment, null, loading && _react.default.createElement("div", {
|
|
36
|
-
className: "lw-flex lw-h-[
|
|
36
|
+
className: "lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary lw-mb-[50px]"
|
|
37
37
|
}, _react.default.createElement(_labsWidgetCommon.Spinner, {
|
|
38
38
|
size: _labsWidgetCommon.SpinnerSize.lg
|
|
39
39
|
})), !loading && showChart && _react.default.createElement(_Chart.Chart, {
|
|
40
40
|
values: data === null || data === void 0 ? void 0 : data.currencyPowerBalance,
|
|
41
41
|
timeUnit: timeUnit
|
|
42
42
|
}), !loading && showError && _react.default.createElement("div", {
|
|
43
|
-
className: "lw-flex lw-h-[
|
|
43
|
+
className: "lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
|
|
44
44
|
}, _react.default.createElement(_labsWidgetCommon.ChartError, null)), isDesktop && _react.default.createElement(_labsWidgetCommon.Tooltip, {
|
|
45
45
|
id: _constants.CURRENCY_POWER_BALANCE_TOOLTIP_ID
|
|
46
46
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartWithData.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_Chart","_constants","_getCurrencyPowerBalance","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ChartWithData","_ref","_data$currencyPowerBa","_data$currencyPowerBa2","timeUnit","isDesktop","useContext","ThemeContext","loading","data","error","useQuery","getCurrencyPowerBalance","variables","fetchPolicy","showChart","currencyPowerBalance","length","showError","createElement","Fragment","className","Spinner","size","SpinnerSize","lg","Chart","values","ChartError","Tooltip","id","CURRENCY_POWER_BALANCE_TOOLTIP_ID","exports"],"sources":["../../../src/CurrencyPowerBalanceWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Spinner, SpinnerSize, ThemeContext, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';\nimport { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';\nimport { ChartWithDataProps } from './types';\nimport { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';\n\nconst ChartWithData = ({ timeUnit }: ChartWithDataProps) => {\n const { isDesktop } = useContext(ThemeContext);\n const { loading, data, error } = useQuery<\n GetCurrencyPowerBalanceQuery,\n GetCurrencyPowerBalanceQueryVariables\n >(getCurrencyPowerBalance, {\n variables: {\n timeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;\n const showError = data?.currencyPowerBalance?.length === 0 || error;\n\n return (\n <>\n {loading\n && (\n <div className=\"lw-flex lw-h-[
|
|
1
|
+
{"version":3,"file":"ChartWithData.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_Chart","_constants","_getCurrencyPowerBalance","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ChartWithData","_ref","_data$currencyPowerBa","_data$currencyPowerBa2","timeUnit","isDesktop","useContext","ThemeContext","loading","data","error","useQuery","getCurrencyPowerBalance","variables","fetchPolicy","showChart","currencyPowerBalance","length","showError","createElement","Fragment","className","Spinner","size","SpinnerSize","lg","Chart","values","ChartError","Tooltip","id","CURRENCY_POWER_BALANCE_TOOLTIP_ID","exports"],"sources":["../../../src/CurrencyPowerBalanceWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Spinner, SpinnerSize, ThemeContext, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';\nimport { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';\nimport { ChartWithDataProps } from './types';\nimport { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';\n\nconst ChartWithData = ({ timeUnit }: ChartWithDataProps) => {\n const { isDesktop } = useContext(ThemeContext);\n const { loading, data, error } = useQuery<\n GetCurrencyPowerBalanceQuery,\n GetCurrencyPowerBalanceQueryVariables\n >(getCurrencyPowerBalance, {\n variables: {\n timeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;\n const showError = data?.currencyPowerBalance?.length === 0 || error;\n\n return (\n <>\n {loading\n && (\n <div className=\"lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary lw-mb-[50px]\">\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && showChart && (\n <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />\n )}\n {!loading && showError && (\n <div className=\"lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n {isDesktop && <Tooltip id={CURRENCY_POWER_BALANCE_TOOLTIP_ID} />}\n </>\n );\n};\n\nexport { ChartWithData };\n"],"mappings":"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"}
|
|
@@ -15,12 +15,12 @@ const LEGEND_HEIGHT = exports.LEGEND_HEIGHT = 50;
|
|
|
15
15
|
const LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT_MOBILE = 70;
|
|
16
16
|
const VERTICAL_LINE_COUNT = exports.VERTICAL_LINE_COUNT = 10;
|
|
17
17
|
const COLOR_CONFIG = exports.COLOR_CONFIG = {
|
|
18
|
-
AUD: _labsWidgetCommon.colorPalette.orange,
|
|
19
|
-
JPY: _labsWidgetCommon.colorPalette.raspberryLight,
|
|
20
18
|
USD: _labsWidgetCommon.colorPalette.greenLight,
|
|
21
19
|
EUR: _labsWidgetCommon.colorPalette.turquoiseLight,
|
|
22
20
|
GBP: _labsWidgetCommon.colorPalette.violetLight,
|
|
21
|
+
JPY: _labsWidgetCommon.colorPalette.raspberryLight,
|
|
23
22
|
CHF: _labsWidgetCommon.colorPalette.bottleGreen75Lighter,
|
|
23
|
+
AUD: _labsWidgetCommon.colorPalette.orange,
|
|
24
24
|
CAD: _labsWidgetCommon.colorPalette.midnight75Lighter,
|
|
25
25
|
NZD: _labsWidgetCommon.colorPalette.gold
|
|
26
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","X_LABEL_SIZE","exports","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","COLOR_CONFIG","
|
|
1
|
+
{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","X_LABEL_SIZE","exports","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","COLOR_CONFIG","USD","colorPalette","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\n\nconst COLOR_CONFIG: Record<string, string> = {\n USD: colorPalette.greenLight,\n EUR: colorPalette.turquoiseLight,\n GBP: colorPalette.violetLight,\n JPY: colorPalette.raspberryLight,\n CHF: colorPalette.bottleGreen75Lighter,\n AUD: colorPalette.orange,\n CAD: colorPalette.midnight75Lighter,\n NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n DARK: colorPalette.orange,\n LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n X_LABEL_SIZE,\n X_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE,\n CHART_WIDTH,\n CHART_HEIGHT,\n LEGEND_HEIGHT,\n LEGEND_HEIGHT_MOBILE,\n VERTICAL_LINE_COUNT,\n COLOR_CONFIG,\n TOOLTIP_LINE_COLOR_CONFIG,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAAF,OAAA,CAAAE,mBAAA,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAJ,OAAA,CAAAI,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAAN,OAAA,CAAAM,aAAA,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,EAAE;AAE9B,MAAMC,YAAoC,GAAAT,OAAA,CAAAS,YAAA,GAAG;EAC3CC,GAAG,EAAEC,8BAAY,CAACC,UAAU;EAC5BC,GAAG,EAAEF,8BAAY,CAACG,cAAc;EAChCC,GAAG,EAAEJ,8BAAY,CAACK,WAAW;EAC7BC,GAAG,EAAEN,8BAAY,CAACO,cAAc;EAChCC,GAAG,EAAER,8BAAY,CAACS,oBAAoB;EACtCC,GAAG,EAAEV,8BAAY,CAACW,MAAM;EACxBC,GAAG,EAAEZ,8BAAY,CAACa,iBAAiB;EACnCC,GAAG,EAAEd,8BAAY,CAACe;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAA3B,OAAA,CAAA2B,yBAAA,GAAG;EAChCC,IAAI,EAAEjB,8BAAY,CAACW,MAAM;EACzBO,KAAK,EAAElB,8BAAY,CAACmB;AACtB,CAAC"}
|
|
@@ -32,17 +32,12 @@ const getOption = (values, timeUnit, isDark) => {
|
|
|
32
32
|
})
|
|
33
33
|
};
|
|
34
34
|
});
|
|
35
|
-
const legendData =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
itemStyle: {
|
|
42
|
-
color: _constants.COLOR_CONFIG[currency]
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
});
|
|
35
|
+
const legendData = Object.keys(_constants.COLOR_CONFIG).map(currency => ({
|
|
36
|
+
name: currency,
|
|
37
|
+
itemStyle: {
|
|
38
|
+
color: _constants.COLOR_CONFIG[currency]
|
|
39
|
+
}
|
|
40
|
+
}));
|
|
46
41
|
return {
|
|
47
42
|
animation: false,
|
|
48
43
|
legend: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","
|
|
1
|
+
{"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","Object","keys","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","formatter","tooltipFormatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","margin","showMinLabel","rotate","interval","Math","round","length","VERTICAL_LINE_COUNT","label","xAxisLabelFormatter","yAxis","position","splitNumber","boundaryGap","showMaxLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';\nimport { tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n values: CurrencyPowerBalance[],\n timeUnit: CurrencyPowerBalanceTimeUnit,\n isDark: boolean,\n) => {\n const seriesData = values.map(({ currency, power }) => ({\n name: currency,\n type: 'line',\n symbol: 'circle',\n showSymbol: false,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n lineStyle: {\n color: COLOR_CONFIG[currency],\n },\n data: power.map(({ point, price }) => [point, price]),\n }));\n\n const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n\n return {\n animation: false,\n legend: {\n data: legendData,\n bottom: 10,\n icon: 'circle',\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n axis: 'x',\n z: 0,\n lineStyle: {\n color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n },\n },\n formatter: tooltipFormatter,\n extraCssText: 'z-index: 1',\n },\n xAxis: {\n type: 'category',\n axisTick: {\n show: false,\n },\n axisLine: { show: false },\n splitLine: {\n show: true,\n },\n axisLabel: {\n margin: 10,\n showMinLabel: false,\n rotate: -45,\n interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),\n formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n splitNumber: 5,\n axisLine: { show: false },\n axisTick: { show: false },\n boundaryGap: ['10%', '10%'],\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n },\n },\n series: seriesData,\n };\n};\n\nexport { getOption };\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAGA,MAAME,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDS,SAAS,EAAE;QACTF,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDU,IAAI,EAAET,KAAK,CAACH,GAAG,CAACa,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAI,CAACR,uBAAY,CAAC,CAACV,GAAG,CAAEE,QAAQ,KAAM;IAC9DE,IAAI,EAAEF,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;EAEH,OAAO;IACLiB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNR,IAAI,EAAEI,UAAU;MAChBK,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJhB,SAAS,EAAE;UACTF,KAAK,EAAEX,MAAM,GAAG8B,oCAAyB,CAACC,IAAI,GAAGD,oCAAyB,CAACE;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEC,4BAAgB;MAC3BC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL7B,IAAI,EAAE,UAAU;MAChB8B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,KAAK;QACnBC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEC,IAAI,CAACC,KAAK,CAAC9C,UAAU,CAAC,CAAC,CAAC,CAACa,IAAI,CAACkC,MAAM,GAAGC,8BAAmB,CAAC;QACrEhB,SAAS,EAAGiB,KAAa,IAAK,IAAAC,+BAAmB,EAACD,KAAK,EAAEnD,QAAQ;MACnE;IACF,CAAC;IACDqD,KAAK,EAAE;MACL7C,IAAI,EAAE,OAAO;MACb8C,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdf,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBiB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3Bd,SAAS,EAAE;QACTe,YAAY,EAAE,KAAK;QACnBb,YAAY,EAAE;MAChB;IACF,CAAC;IACDc,MAAM,EAAExD;EACV,CAAC;AACH,CAAC;AAACyD,OAAA,CAAA7D,SAAA,GAAAA,SAAA"}
|
|
@@ -25,14 +25,14 @@ const ChartWithData = _ref => {
|
|
|
25
25
|
const showChart = (data === null || data === void 0 ? void 0 : data.currencyPowerBalance) && (data === null || data === void 0 || (_data$currencyPowerBa = data.currencyPowerBalance) === null || _data$currencyPowerBa === void 0 ? void 0 : _data$currencyPowerBa.length) > 0;
|
|
26
26
|
const showError = (data === null || data === void 0 || (_data$currencyPowerBa2 = data.currencyPowerBalance) === null || _data$currencyPowerBa2 === void 0 ? void 0 : _data$currencyPowerBa2.length) === 0 || error;
|
|
27
27
|
return React.createElement(React.Fragment, null, loading && React.createElement("div", {
|
|
28
|
-
className: "lw-flex lw-h-[
|
|
28
|
+
className: "lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary lw-mb-[50px]"
|
|
29
29
|
}, React.createElement(Spinner, {
|
|
30
30
|
size: SpinnerSize.lg
|
|
31
31
|
})), !loading && showChart && React.createElement(Chart, {
|
|
32
32
|
values: data === null || data === void 0 ? void 0 : data.currencyPowerBalance,
|
|
33
33
|
timeUnit: timeUnit
|
|
34
34
|
}), !loading && showError && React.createElement("div", {
|
|
35
|
-
className: "lw-flex lw-h-[
|
|
35
|
+
className: "lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
|
|
36
36
|
}, React.createElement(ChartError, null)), isDesktop && React.createElement(Tooltip, {
|
|
37
37
|
id: CURRENCY_POWER_BALANCE_TOOLTIP_ID
|
|
38
38
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartWithData.js","names":["React","useContext","useQuery","ChartError","Spinner","SpinnerSize","ThemeContext","Tooltip","Chart","CURRENCY_POWER_BALANCE_TOOLTIP_ID","getCurrencyPowerBalance","ChartWithData","_ref","_data$currencyPowerBa","_data$currencyPowerBa2","timeUnit","isDesktop","loading","data","error","variables","fetchPolicy","showChart","currencyPowerBalance","length","showError","createElement","Fragment","className","size","lg","values","id"],"sources":["../../../src/CurrencyPowerBalanceWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Spinner, SpinnerSize, ThemeContext, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';\nimport { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';\nimport { ChartWithDataProps } from './types';\nimport { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';\n\nconst ChartWithData = ({ timeUnit }: ChartWithDataProps) => {\n const { isDesktop } = useContext(ThemeContext);\n const { loading, data, error } = useQuery<\n GetCurrencyPowerBalanceQuery,\n GetCurrencyPowerBalanceQueryVariables\n >(getCurrencyPowerBalance, {\n variables: {\n timeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;\n const showError = data?.currencyPowerBalance?.length === 0 || error;\n\n return (\n <>\n {loading\n && (\n <div className=\"lw-flex lw-h-[
|
|
1
|
+
{"version":3,"file":"ChartWithData.js","names":["React","useContext","useQuery","ChartError","Spinner","SpinnerSize","ThemeContext","Tooltip","Chart","CURRENCY_POWER_BALANCE_TOOLTIP_ID","getCurrencyPowerBalance","ChartWithData","_ref","_data$currencyPowerBa","_data$currencyPowerBa2","timeUnit","isDesktop","loading","data","error","variables","fetchPolicy","showChart","currencyPowerBalance","length","showError","createElement","Fragment","className","size","lg","values","id"],"sources":["../../../src/CurrencyPowerBalanceWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Spinner, SpinnerSize, ThemeContext, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';\nimport { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';\nimport { ChartWithDataProps } from './types';\nimport { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';\n\nconst ChartWithData = ({ timeUnit }: ChartWithDataProps) => {\n const { isDesktop } = useContext(ThemeContext);\n const { loading, data, error } = useQuery<\n GetCurrencyPowerBalanceQuery,\n GetCurrencyPowerBalanceQueryVariables\n >(getCurrencyPowerBalance, {\n variables: {\n timeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;\n const showError = data?.currencyPowerBalance?.length === 0 || error;\n\n return (\n <>\n {loading\n && (\n <div className=\"lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary lw-mb-[50px]\">\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && showChart && (\n <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />\n )}\n {!loading && showError && (\n <div className=\"lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n {isDesktop && <Tooltip id={CURRENCY_POWER_BALANCE_TOOLTIP_ID} />}\n </>\n );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,QAClD,2BAA2B;AAClC,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,iCAAiC,QAAQ,aAAa;AAC/D,SAASC,uBAAuB,QAAQ,gCAAgC;AAIxE,MAAMC,aAAa,GAAGC,IAAA,IAAsC;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EAAA,IAArC;IAAEC;EAA6B,CAAC,GAAAH,IAAA;EACrD,MAAM;IAAEI;EAAU,CAAC,GAAGf,UAAU,CAACK,YAAY,CAAC;EAC9C,MAAM;IAAEW,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGjB,QAAQ,CAGvCQ,uBAAuB,EAAE;IACzBU,SAAS,EAAE;MACTL;IACF,CAAC;IACDM,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,CAAAJ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,oBAAoB,KAAI,CAAAL,IAAI,aAAJA,IAAI,gBAAAL,qBAAA,GAAJK,IAAI,CAAEK,oBAAoB,cAAAV,qBAAA,uBAA1BA,qBAAA,CAA4BW,MAAM,IAAG,CAAC;EACtF,MAAMC,SAAS,GAAG,CAAAP,IAAI,aAAJA,IAAI,gBAAAJ,sBAAA,GAAJI,IAAI,CAAEK,oBAAoB,cAAAT,sBAAA,uBAA1BA,sBAAA,CAA4BU,MAAM,MAAK,CAAC,IAAIL,KAAK;EAEnE,OACEnB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,QACGV,OAAO,IAERjB,KAAA,CAAA0B,aAAA;IAAKE,SAAS,EAAC;EAAgH,GAC7H5B,KAAA,CAAA0B,aAAA,CAACtB,OAAO;IAACyB,IAAI,EAAExB,WAAW,CAACyB;EAAG,CAAE,CAC7B,CACJ,EACA,CAACb,OAAO,IAAIK,SAAS,IACpBtB,KAAA,CAAA0B,aAAA,CAAClB,KAAK;IAACuB,MAAM,EAAEb,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,oBAAsB;IAACR,QAAQ,EAAEA;EAAS,CAAE,CAClE,EACA,CAACE,OAAO,IAAIQ,SAAS,IACpBzB,KAAA,CAAA0B,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH5B,KAAA,CAAA0B,aAAA,CAACvB,UAAU,MAAE,CACV,CACN,EACAa,SAAS,IAAIhB,KAAA,CAAA0B,aAAA,CAACnB,OAAO;IAACyB,EAAE,EAAEvB;EAAkC,CAAE,CAC/D,CAAC;AAEP,CAAC;AAED,SAASE,aAAa"}
|
|
@@ -9,12 +9,12 @@ const LEGEND_HEIGHT = 50;
|
|
|
9
9
|
const LEGEND_HEIGHT_MOBILE = 70;
|
|
10
10
|
const VERTICAL_LINE_COUNT = 10;
|
|
11
11
|
const COLOR_CONFIG = {
|
|
12
|
-
AUD: colorPalette.orange,
|
|
13
|
-
JPY: colorPalette.raspberryLight,
|
|
14
12
|
USD: colorPalette.greenLight,
|
|
15
13
|
EUR: colorPalette.turquoiseLight,
|
|
16
14
|
GBP: colorPalette.violetLight,
|
|
15
|
+
JPY: colorPalette.raspberryLight,
|
|
17
16
|
CHF: colorPalette.bottleGreen75Lighter,
|
|
17
|
+
AUD: colorPalette.orange,
|
|
18
18
|
CAD: colorPalette.midnight75Lighter,
|
|
19
19
|
NZD: colorPalette.gold
|
|
20
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","names":["colorPalette","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","COLOR_CONFIG","
|
|
1
|
+
{"version":3,"file":"constants.js","names":["colorPalette","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\n\nconst COLOR_CONFIG: Record<string, string> = {\n USD: colorPalette.greenLight,\n EUR: colorPalette.turquoiseLight,\n GBP: colorPalette.violetLight,\n JPY: colorPalette.raspberryLight,\n CHF: colorPalette.bottleGreen75Lighter,\n AUD: colorPalette.orange,\n CAD: colorPalette.midnight75Lighter,\n NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n DARK: colorPalette.orange,\n LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n X_LABEL_SIZE,\n X_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE,\n CHART_WIDTH,\n CHART_HEIGHT,\n LEGEND_HEIGHT,\n LEGEND_HEIGHT_MOBILE,\n VERTICAL_LINE_COUNT,\n COLOR_CONFIG,\n TOOLTIP_LINE_COLOR_CONFIG,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AAExD,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAE9B,MAAMC,YAAoC,GAAG;EAC3CC,GAAG,EAAEX,YAAY,CAACY,UAAU;EAC5BC,GAAG,EAAEb,YAAY,CAACc,cAAc;EAChCC,GAAG,EAAEf,YAAY,CAACgB,WAAW;EAC7BC,GAAG,EAAEjB,YAAY,CAACkB,cAAc;EAChCC,GAAG,EAAEnB,YAAY,CAACoB,oBAAoB;EACtCC,GAAG,EAAErB,YAAY,CAACsB,MAAM;EACxBC,GAAG,EAAEvB,YAAY,CAACwB,iBAAiB;EACnCC,GAAG,EAAEzB,YAAY,CAAC0B;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAE5B,YAAY,CAACsB,MAAM;EACzBO,KAAK,EAAE7B,YAAY,CAAC8B;AACtB,CAAC;AAED,SACE7B,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,EACnBC,YAAY,EACZiB,yBAAyB"}
|
|
@@ -26,17 +26,12 @@ const getOption = (values, timeUnit, isDark) => {
|
|
|
26
26
|
})
|
|
27
27
|
};
|
|
28
28
|
});
|
|
29
|
-
const legendData =
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
itemStyle: {
|
|
36
|
-
color: COLOR_CONFIG[currency]
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
});
|
|
29
|
+
const legendData = Object.keys(COLOR_CONFIG).map(currency => ({
|
|
30
|
+
name: currency,
|
|
31
|
+
itemStyle: {
|
|
32
|
+
color: COLOR_CONFIG[currency]
|
|
33
|
+
}
|
|
34
|
+
}));
|
|
40
35
|
return {
|
|
41
36
|
animation: false,
|
|
42
37
|
legend: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","VERTICAL_LINE_COUNT","tooltipFormatter","xAxisLabelFormatter","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","
|
|
1
|
+
{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","VERTICAL_LINE_COUNT","tooltipFormatter","xAxisLabelFormatter","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","Object","keys","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","margin","showMinLabel","rotate","interval","Math","round","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';\nimport { tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n values: CurrencyPowerBalance[],\n timeUnit: CurrencyPowerBalanceTimeUnit,\n isDark: boolean,\n) => {\n const seriesData = values.map(({ currency, power }) => ({\n name: currency,\n type: 'line',\n symbol: 'circle',\n showSymbol: false,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n lineStyle: {\n color: COLOR_CONFIG[currency],\n },\n data: power.map(({ point, price }) => [point, price]),\n }));\n\n const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n\n return {\n animation: false,\n legend: {\n data: legendData,\n bottom: 10,\n icon: 'circle',\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n axis: 'x',\n z: 0,\n lineStyle: {\n color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n },\n },\n formatter: tooltipFormatter,\n extraCssText: 'z-index: 1',\n },\n xAxis: {\n type: 'category',\n axisTick: {\n show: false,\n },\n axisLine: { show: false },\n splitLine: {\n show: true,\n },\n axisLabel: {\n margin: 10,\n showMinLabel: false,\n rotate: -45,\n interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),\n formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n splitNumber: 5,\n axisLine: { show: false },\n axisTick: { show: false },\n boundaryGap: ['10%', '10%'],\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n },\n },\n series: seriesData,\n };\n};\n\nexport { getOption };\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,yBAAyB,EAAEC,mBAAmB,QAAQ,aAAa;AAC1F,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAGpE,MAAMC,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B,CAAC;MACDQ,SAAS,EAAE;QACTD,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B,CAAC;MACDS,IAAI,EAAER,KAAK,CAACH,GAAG,CAACY,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAI,CAAC3B,YAAY,CAAC,CAACU,GAAG,CAAEE,QAAQ,KAAM;IAC9DE,IAAI,EAAEF,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;EAEH,OAAO;IACLgB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNR,IAAI,EAAEI,UAAU;MAChBK,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJhB,SAAS,EAAE;UACTD,KAAK,EAAEX,MAAM,GAAGP,yBAAyB,CAACoC,IAAI,GAAGpC,yBAAyB,CAACqC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEpC,gBAAgB;MAC3BqC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL1B,IAAI,EAAE,UAAU;MAChB2B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,KAAK;QACnBC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEC,IAAI,CAACC,KAAK,CAAC3C,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAACgC,MAAM,GAAGnD,mBAAmB,CAAC;QACrEqC,SAAS,EAAGe,KAAa,IAAKlD,mBAAmB,CAACkD,KAAK,EAAE/C,QAAQ;MACnE;IACF,CAAC;IACDgD,KAAK,EAAE;MACLxC,IAAI,EAAE,OAAO;MACbyC,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdb,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBe,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3BZ,SAAS,EAAE;QACTa,YAAY,EAAE,KAAK;QACnBX,YAAY,EAAE;MAChB;IACF,CAAC;IACDY,MAAM,EAAEnD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS"}
|
|
@@ -7,16 +7,7 @@ declare const CHART_HEIGHT = 425;
|
|
|
7
7
|
declare const LEGEND_HEIGHT = 50;
|
|
8
8
|
declare const LEGEND_HEIGHT_MOBILE = 70;
|
|
9
9
|
declare const VERTICAL_LINE_COUNT = 10;
|
|
10
|
-
declare const COLOR_CONFIG:
|
|
11
|
-
AUD: string;
|
|
12
|
-
JPY: string;
|
|
13
|
-
USD: string;
|
|
14
|
-
EUR: string;
|
|
15
|
-
GBP: string;
|
|
16
|
-
CHF: string;
|
|
17
|
-
CAD: string;
|
|
18
|
-
NZD: string;
|
|
19
|
-
};
|
|
10
|
+
declare const COLOR_CONFIG: Record<string, string>;
|
|
20
11
|
declare const TOOLTIP_LINE_COLOR_CONFIG: {
|
|
21
12
|
DARK: string;
|
|
22
13
|
LIGHT: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-currency-power-balance-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "Labs Currency Power Balance 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.80",
|
|
17
17
|
"@oanda/mono-i18n": "9.0.0",
|
|
18
18
|
"echarts": "5.4.3",
|
|
19
19
|
"echarts-for-react": "3.0.2",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"@graphql-codegen/cli": "5.0.0",
|
|
25
25
|
"@graphql-codegen/client-preset": "4.1.0"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "100e58167e14b5a864c62f895ac00f8dd7e8cdc2"
|
|
28
28
|
}
|
|
@@ -28,7 +28,7 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
|
|
|
28
28
|
<>
|
|
29
29
|
{loading
|
|
30
30
|
&& (
|
|
31
|
-
<div className="lw-flex lw-h-[
|
|
31
|
+
<div className="lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary lw-mb-[50px]">
|
|
32
32
|
<Spinner size={SpinnerSize.lg} />
|
|
33
33
|
</div>
|
|
34
34
|
)}
|
|
@@ -36,7 +36,7 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
|
|
|
36
36
|
<Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />
|
|
37
37
|
)}
|
|
38
38
|
{!loading && showError && (
|
|
39
|
-
<div className="lw-flex lw-h-[
|
|
39
|
+
<div className="lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
|
|
40
40
|
<ChartError />
|
|
41
41
|
</div>
|
|
42
42
|
)}
|
|
@@ -10,13 +10,13 @@ const LEGEND_HEIGHT = 50;
|
|
|
10
10
|
const LEGEND_HEIGHT_MOBILE = 70;
|
|
11
11
|
const VERTICAL_LINE_COUNT = 10;
|
|
12
12
|
|
|
13
|
-
const COLOR_CONFIG = {
|
|
14
|
-
AUD: colorPalette.orange,
|
|
15
|
-
JPY: colorPalette.raspberryLight,
|
|
13
|
+
const COLOR_CONFIG: Record<string, string> = {
|
|
16
14
|
USD: colorPalette.greenLight,
|
|
17
15
|
EUR: colorPalette.turquoiseLight,
|
|
18
16
|
GBP: colorPalette.violetLight,
|
|
17
|
+
JPY: colorPalette.raspberryLight,
|
|
19
18
|
CHF: colorPalette.bottleGreen75Lighter,
|
|
19
|
+
AUD: colorPalette.orange,
|
|
20
20
|
CAD: colorPalette.midnight75Lighter,
|
|
21
21
|
NZD: colorPalette.gold,
|
|
22
22
|
};
|
|
@@ -21,7 +21,7 @@ const getOption = (
|
|
|
21
21
|
data: power.map(({ point, price }) => [point, price]),
|
|
22
22
|
}));
|
|
23
23
|
|
|
24
|
-
const legendData =
|
|
24
|
+
const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({
|
|
25
25
|
name: currency,
|
|
26
26
|
itemStyle: {
|
|
27
27
|
color: COLOR_CONFIG[currency],
|
package/test/responsesMocks.ts
CHANGED
|
@@ -213,6 +213,35 @@ const mockResponse = [{
|
|
|
213
213
|
},
|
|
214
214
|
],
|
|
215
215
|
},
|
|
216
|
+
{
|
|
217
|
+
currency: 'GBP',
|
|
218
|
+
power: [
|
|
219
|
+
{
|
|
220
|
+
point: '2023-10-26T22:00:00Z',
|
|
221
|
+
price: 1.8,
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
point: '2023-10-27T02:00:00Z',
|
|
225
|
+
price: 1.08,
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
point: '2023-10-27T06:00:00Z',
|
|
229
|
+
price: 1.37,
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
point: '2023-10-27T10:00:00Z',
|
|
233
|
+
price: 1.51,
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
point: '2023-10-27T14:00:00Z',
|
|
237
|
+
price: 1.91,
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
point: '2023-10-27T18:00:00Z',
|
|
241
|
+
price: 1.31,
|
|
242
|
+
},
|
|
243
|
+
],
|
|
244
|
+
},
|
|
216
245
|
],
|
|
217
246
|
},
|
|
218
247
|
},
|