@oanda/labs-currency-power-balance-widget 1.0.48 → 1.0.50
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 +404 -0
- package/dist/main/CurrencyPowerBalanceWidget/ChartWithData.js +7 -6
- package/dist/main/CurrencyPowerBalanceWidget/ChartWithData.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js +6 -1
- package/dist/main/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/Main.js +42 -3
- package/dist/main/CurrencyPowerBalanceWidget/Main.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/Chart.js +9 -2
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/Chart.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +3 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js +17 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +3 -8
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/types.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/render.js +5 -1
- package/dist/main/CurrencyPowerBalanceWidget/render.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/types.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js +7 -6
- package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js +6 -1
- package/dist/module/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/Main.js +43 -4
- package/dist/module/CurrencyPowerBalanceWidget/Main.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/Chart.js +9 -2
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/Chart.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +3 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js +17 -2
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +4 -9
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/types.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/render.js +5 -1
- package/dist/module/CurrencyPowerBalanceWidget/render.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/types.js.map +1 -1
- package/dist/types/CurrencyPowerBalanceWidget/ChartWithData.d.ts +1 -1
- package/dist/types/CurrencyPowerBalanceWidget/CurrencyPowerBalance.d.ts +1 -1
- package/dist/types/CurrencyPowerBalanceWidget/Main.d.ts +2 -1
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/Chart.d.ts +1 -1
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/constants.d.ts +13 -2
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/formatters.d.ts +8 -2
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts +2 -2
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/types.d.ts +1 -0
- package/dist/types/CurrencyPowerBalanceWidget/types.d.ts +7 -0
- package/package.json +4 -4
- package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx +5 -5
- package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx +2 -2
- package/src/CurrencyPowerBalanceWidget/Main.tsx +40 -4
- package/src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx +6 -2
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx +14 -1
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts +18 -2
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts +6 -9
- package/src/CurrencyPowerBalanceWidget/components/Chart/types.ts +1 -0
- package/src/CurrencyPowerBalanceWidget/render.tsx +3 -1
- package/src/CurrencyPowerBalanceWidget/types.ts +8 -0
- package/test/Main.test.tsx +56 -2
- package/dist/main/CurrencyPowerBalanceWidget/Tool.js +0 -28
- package/dist/main/CurrencyPowerBalanceWidget/Tool.js.map +0 -1
- package/dist/module/CurrencyPowerBalanceWidget/Tool.js +0 -20
- package/dist/module/CurrencyPowerBalanceWidget/Tool.js.map +0 -1
- package/dist/types/CurrencyPowerBalanceWidget/Tool.d.ts +0 -3
- package/src/CurrencyPowerBalanceWidget/Tool.tsx +0 -27
|
@@ -17,6 +17,8 @@ if (currencyPowerBalanceParamsElements.length > 0) {
|
|
|
17
17
|
const params = element.getAttribute('data-currency-power-balance-params');
|
|
18
18
|
const mode = element.getAttribute('data-mode');
|
|
19
19
|
const {
|
|
20
|
+
timeUnit,
|
|
21
|
+
currencies,
|
|
20
22
|
locale
|
|
21
23
|
} = JSON.parse(params);
|
|
22
24
|
const isParamError = validateToolParams({
|
|
@@ -32,7 +34,9 @@ if (currencyPowerBalanceParamsElements.length > 0) {
|
|
|
32
34
|
graphqlUrl: graphqlUrl,
|
|
33
35
|
locale: locale,
|
|
34
36
|
theme: mode,
|
|
35
|
-
isParamError: isParamError
|
|
37
|
+
isParamError: isParamError,
|
|
38
|
+
timeUnit: timeUnit,
|
|
39
|
+
currencies: currencies
|
|
36
40
|
}));
|
|
37
41
|
});
|
|
38
42
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.js","names":["React","createRoot","validateToolParams","CurrencyPowerBalance","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","JSON","parse","isParamError","name","valueCheck","value","split","render","createElement","theme","container","getElementById"],"sources":["../../../src/CurrencyPowerBalanceWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { Theme, validateToolParams } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalance } from './CurrencyPowerBalance';\n\nconst {\n graphqlUrl: configGraphQl,\n renderElementId: configRenderElementId,\n locale: configLocale,\n} = window.currencyPowerBalanceWidgetConfig || {};\n\nconst {\n graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-currency-power-balance-params]');\n\nif (currencyPowerBalanceParamsElements.length > 0) {\n currencyPowerBalanceParamsElements.forEach((element) => {\n const root = createRoot(element);\n const params = element.getAttribute('data-currency-power-balance-params');\n const mode = element.getAttribute('data-mode');\n const { locale } = JSON.parse(params as string);\n\n const isParamError = validateToolParams({ locale, graphqlUrl }, [\n {\n name: 'locale',\n valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n }, {\n name: 'graphqlUrl',\n }]);\n root.render(\n <CurrencyPowerBalance\n graphqlUrl={graphqlUrl}\n locale={locale}\n theme={mode as Theme}\n isParamError={isParamError}\n />,\n );\n });\n} else {\n const container = document.getElementById(configRenderElementId);\n const root = createRoot(container!);\n\n root.render(\n <CurrencyPowerBalance\n locale={configLocale}\n graphqlUrl={configGraphQl}\n />,\n );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAAgBC,kBAAkB,QAAQ,2BAA2B;AACrE,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,gCAAgC,IAAI,CAAC,CAAC;AAEjD,MAAM;EACJP;AACF,CAAC,GAAGM,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,kCAAkC,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,yCAAyC,CAAC;AAE/G,IAAIF,kCAAkC,CAACG,MAAM,GAAG,CAAC,EAAE;EACjDH,kCAAkC,CAACI,OAAO,CAAEC,OAAO,IAAK;IACtD,MAAMC,IAAI,GAAGlB,UAAU,CAACiB,OAAO,CAAC;IAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;
|
|
1
|
+
{"version":3,"file":"render.js","names":["React","createRoot","validateToolParams","CurrencyPowerBalance","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","timeUnit","currencies","JSON","parse","isParamError","name","valueCheck","value","split","render","createElement","theme","container","getElementById"],"sources":["../../../src/CurrencyPowerBalanceWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { Theme, validateToolParams } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalance } from './CurrencyPowerBalance';\n\nconst {\n graphqlUrl: configGraphQl,\n renderElementId: configRenderElementId,\n locale: configLocale,\n} = window.currencyPowerBalanceWidgetConfig || {};\n\nconst {\n graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-currency-power-balance-params]');\n\nif (currencyPowerBalanceParamsElements.length > 0) {\n currencyPowerBalanceParamsElements.forEach((element) => {\n const root = createRoot(element);\n const params = element.getAttribute('data-currency-power-balance-params');\n const mode = element.getAttribute('data-mode');\n const { timeUnit, currencies, locale } = JSON.parse(params as string);\n\n const isParamError = validateToolParams({ locale, graphqlUrl }, [\n {\n name: 'locale',\n valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n }, {\n name: 'graphqlUrl',\n }]);\n root.render(\n <CurrencyPowerBalance\n graphqlUrl={graphqlUrl}\n locale={locale}\n theme={mode as Theme}\n isParamError={isParamError}\n timeUnit={timeUnit}\n currencies={currencies}\n />,\n );\n });\n} else {\n const container = document.getElementById(configRenderElementId);\n const root = createRoot(container!);\n\n root.render(\n <CurrencyPowerBalance\n locale={configLocale}\n graphqlUrl={configGraphQl}\n />,\n );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAAgBC,kBAAkB,QAAQ,2BAA2B;AACrE,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,gCAAgC,IAAI,CAAC,CAAC;AAEjD,MAAM;EACJP;AACF,CAAC,GAAGM,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,kCAAkC,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,yCAAyC,CAAC;AAE/G,IAAIF,kCAAkC,CAACG,MAAM,GAAG,CAAC,EAAE;EACjDH,kCAAkC,CAACI,OAAO,CAAEC,OAAO,IAAK;IACtD,MAAMC,IAAI,GAAGlB,UAAU,CAACiB,OAAO,CAAC;IAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEE,QAAQ;MAAEC,UAAU;MAAEhB;IAAO,CAAC,GAAGiB,IAAI,CAACC,KAAK,CAACN,MAAgB,CAAC;IAErE,MAAMO,YAAY,GAAGzB,kBAAkB,CAAC;MAAEM,MAAM;MAAEJ;IAAW,CAAC,EAAE,CAC9D;MACEwB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACLT,IAAI,CAACa,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC9B,oBAAoB;MACnBC,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACf0B,KAAK,EAAEZ,IAAc;MACrBK,YAAY,EAAEA,YAAa;MAC3BJ,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA;IAAW,CACxB,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMW,SAAS,GAAGrB,QAAQ,CAACsB,cAAc,CAAC7B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAGlB,UAAU,CAACkC,SAAU,CAAC;EAEnChB,IAAI,CAACa,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC9B,oBAAoB;IACnBK,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CACH,CAAC;AACH","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../src/CurrencyPowerBalanceWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nexport interface CurrencyPowerBalanceConfig {\n graphqlUrl: string;\n locale: Locale;\n theme?: Theme;\n isParamError?: boolean;\n}\n\nexport interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {\n renderElementId: string;\n locale: Locale;\n}\n\nexport interface ChartWithDataProps {\n timeUnit: CurrencyPowerBalanceTimeUnit;\n}\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/CurrencyPowerBalanceWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nexport interface CurrencyPowerBalanceConfig {\n graphqlUrl: string;\n locale: Locale;\n theme?: Theme;\n isParamError?: boolean;\n timeUnit?: CurrencyPowerBalanceTimeUnit;\n currencies?: string[];\n}\n\nexport interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {\n renderElementId: string;\n locale: Locale;\n}\n\nexport interface MainProps {\n timeUnit?: CurrencyPowerBalanceTimeUnit;\n currencies?: string[];\n}\n\nexport interface ChartWithDataProps {\n timeUnit: CurrencyPowerBalanceTimeUnit;\n currencies?: string[];\n}\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ChartWithDataProps } from './types';
|
|
3
|
-
declare const ChartWithData: ({ timeUnit }: ChartWithDataProps) => React.JSX.Element;
|
|
3
|
+
declare const ChartWithData: ({ timeUnit, currencies }: ChartWithDataProps) => React.JSX.Element;
|
|
4
4
|
export { ChartWithData };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CurrencyPowerBalanceConfig } from './types';
|
|
3
|
-
declare const CurrencyPowerBalance: ({ graphqlUrl, theme, locale, isParamError, }: CurrencyPowerBalanceConfig) => React.JSX.Element;
|
|
3
|
+
declare const CurrencyPowerBalance: ({ graphqlUrl, theme, locale, timeUnit, currencies, isParamError, }: CurrencyPowerBalanceConfig) => React.JSX.Element;
|
|
4
4
|
export { CurrencyPowerBalance };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { CurrencyName } from '../../../../gql/types/graphql';
|
|
1
2
|
declare const X_LABEL_SIZE = 90;
|
|
2
3
|
declare const X_LABEL_SIZE_MOBILE = 110;
|
|
3
4
|
declare const Y_LABEL_SIZE_MOBILE = 35;
|
|
@@ -9,9 +10,19 @@ declare const LEGEND_HEIGHT_MOBILE = 70;
|
|
|
9
10
|
declare const VERTICAL_LINE_COUNT = 10;
|
|
10
11
|
declare const CANDLE_NUMBER_HOUR = 12;
|
|
11
12
|
declare const CANDLE_MINUTE = 5;
|
|
12
|
-
declare const
|
|
13
|
+
declare const CURENCIES_ORDER: CurrencyName[];
|
|
14
|
+
declare const COLOR_CONFIG: {
|
|
15
|
+
USD: string;
|
|
16
|
+
EUR: string;
|
|
17
|
+
GBP: string;
|
|
18
|
+
JPY: string;
|
|
19
|
+
CHF: string;
|
|
20
|
+
AUD: string;
|
|
21
|
+
CAD: string;
|
|
22
|
+
NZD: string;
|
|
23
|
+
};
|
|
13
24
|
declare const TOOLTIP_LINE_COLOR_CONFIG: {
|
|
14
25
|
DARK: string;
|
|
15
26
|
LIGHT: string;
|
|
16
27
|
};
|
|
17
|
-
export { 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, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, };
|
|
28
|
+
export { 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, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, CURENCIES_ORDER, };
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
1
|
+
import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
2
|
import { TooltipFormatterParams } from './types';
|
|
3
3
|
declare const isMonthWeek: (timeUnit: CurrencyPowerBalanceTimeUnit) => boolean;
|
|
4
4
|
declare const xAxisLabelFormatter: (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => string;
|
|
5
5
|
declare const intervalFormatter: (dataLength: number) => number;
|
|
6
6
|
declare const tooltipFormatter: (values: TooltipFormatterParams[]) => string;
|
|
7
|
-
|
|
7
|
+
declare const formatLegendData: (values: CurrencyPowerBalance[]) => {
|
|
8
|
+
name: import("../../../../gql/types/graphql").CurrencyName;
|
|
9
|
+
itemStyle: {
|
|
10
|
+
color: string;
|
|
11
|
+
};
|
|
12
|
+
}[];
|
|
13
|
+
export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter, formatLegendData, };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
|
-
declare const getOption: (
|
|
2
|
+
declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
|
|
3
3
|
animation: boolean;
|
|
4
4
|
legend: {
|
|
5
5
|
data: {
|
|
6
|
-
name:
|
|
6
|
+
name: import("../../../../gql/types/graphql").CurrencyName;
|
|
7
7
|
itemStyle: {
|
|
8
8
|
color: string;
|
|
9
9
|
};
|
|
@@ -6,11 +6,18 @@ export interface CurrencyPowerBalanceConfig {
|
|
|
6
6
|
locale: Locale;
|
|
7
7
|
theme?: Theme;
|
|
8
8
|
isParamError?: boolean;
|
|
9
|
+
timeUnit?: CurrencyPowerBalanceTimeUnit;
|
|
10
|
+
currencies?: string[];
|
|
9
11
|
}
|
|
10
12
|
export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
|
|
11
13
|
renderElementId: string;
|
|
12
14
|
locale: Locale;
|
|
13
15
|
}
|
|
16
|
+
export interface MainProps {
|
|
17
|
+
timeUnit?: CurrencyPowerBalanceTimeUnit;
|
|
18
|
+
currencies?: string[];
|
|
19
|
+
}
|
|
14
20
|
export interface ChartWithDataProps {
|
|
15
21
|
timeUnit: CurrencyPowerBalanceTimeUnit;
|
|
22
|
+
currencies?: string[];
|
|
16
23
|
}
|
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.50",
|
|
4
4
|
"description": "Labs Currency Power Balance Widget",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"license": "UNLICENSED",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@apollo/client": "3.9.9",
|
|
16
|
-
"@oanda/labs-widget-common": "^1.0.
|
|
17
|
-
"@oanda/mono-i18n": "
|
|
16
|
+
"@oanda/labs-widget-common": "^1.0.111",
|
|
17
|
+
"@oanda/mono-i18n": "10.0.1",
|
|
18
18
|
"echarts": "5.5.0",
|
|
19
19
|
"echarts-for-react": "3.0.2",
|
|
20
20
|
"graphql": "16.8.1"
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"@graphql-codegen/cli": "5.0.0",
|
|
24
24
|
"@graphql-codegen/client-preset": "4.1.0"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "c7fa803d57db4fba74eb2952073e8f099ad935cf"
|
|
27
27
|
}
|
|
@@ -9,7 +9,7 @@ import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
|
|
|
9
9
|
import { ChartWithDataProps } from './types';
|
|
10
10
|
import { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';
|
|
11
11
|
|
|
12
|
-
const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
|
|
12
|
+
const ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {
|
|
13
13
|
const { size } = useContext(ThemeContext);
|
|
14
14
|
const isDesktop = size === Size.DESKTOP;
|
|
15
15
|
const { loading, data, error } = useQuery<
|
|
@@ -22,8 +22,8 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
|
|
|
22
22
|
fetchPolicy: 'cache-and-network',
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
-
const
|
|
26
|
-
|
|
25
|
+
const showError = data?.currencyPowerBalance?.length === 0 || error
|
|
26
|
+
|| (currencies && (currencies.length === 0 || currencies.length === 1));
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
29
|
<>
|
|
@@ -33,8 +33,8 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
|
|
|
33
33
|
<Spinner size={SpinnerSize.lg} />
|
|
34
34
|
</div>
|
|
35
35
|
)}
|
|
36
|
-
{!loading &&
|
|
37
|
-
<Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />
|
|
36
|
+
{!loading && !showError && (
|
|
37
|
+
<Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} currencies={currencies} />
|
|
38
38
|
)}
|
|
39
39
|
{!loading && showError && (
|
|
40
40
|
<div className="lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
|
|
@@ -7,7 +7,7 @@ import { CurrencyPowerBalanceConfig } from './types';
|
|
|
7
7
|
import { translations } from '../translations';
|
|
8
8
|
|
|
9
9
|
const CurrencyPowerBalance = ({
|
|
10
|
-
graphqlUrl, theme, locale, isParamError,
|
|
10
|
+
graphqlUrl, theme, locale, timeUnit, currencies, isParamError,
|
|
11
11
|
}: CurrencyPowerBalanceConfig) => {
|
|
12
12
|
const client = new ApolloClient({
|
|
13
13
|
uri: graphqlUrl,
|
|
@@ -22,7 +22,7 @@ const CurrencyPowerBalance = ({
|
|
|
22
22
|
<div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
|
|
23
23
|
<ChartError />
|
|
24
24
|
</div>
|
|
25
|
-
) : <Main />}
|
|
25
|
+
) : <Main timeUnit={timeUnit} currencies={currencies} />}
|
|
26
26
|
</ApolloProvider>
|
|
27
27
|
</LocaleProvider>
|
|
28
28
|
</ThemeProvider>
|
|
@@ -1,12 +1,48 @@
|
|
|
1
|
-
import React, { useContext } from 'react';
|
|
1
|
+
import React, { useContext, useState } from 'react';
|
|
2
2
|
import { ThemeContext } from '@oanda/labs-widget-common';
|
|
3
|
-
import {
|
|
3
|
+
import { useLocale } from '@oanda/mono-i18n';
|
|
4
|
+
import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
|
|
5
|
+
import { TimeUnitSwitch } from './components/TimeUnitSwitch';
|
|
6
|
+
import { timeUnitConfig } from './config';
|
|
7
|
+
import { ChartWithData } from './ChartWithData';
|
|
8
|
+
import { MainProps } from './types';
|
|
4
9
|
|
|
5
|
-
const Main = () => {
|
|
10
|
+
const Main = ({ timeUnit, currencies }: MainProps) => {
|
|
6
11
|
const { size } = useContext(ThemeContext);
|
|
12
|
+
const { lang } = useLocale();
|
|
13
|
+
const [selectedTimeUnit, setSelectedTimeUnit] = useState(
|
|
14
|
+
timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay,
|
|
15
|
+
);
|
|
7
16
|
return (
|
|
8
17
|
<>
|
|
9
|
-
{size &&
|
|
18
|
+
{size && (
|
|
19
|
+
<div
|
|
20
|
+
data-testid="currency-power-balance-wrapper"
|
|
21
|
+
className="lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
|
|
22
|
+
>
|
|
23
|
+
{timeUnit && currencies ? (
|
|
24
|
+
<>
|
|
25
|
+
{timeUnitConfig
|
|
26
|
+
.filter(({ value }) => value === selectedTimeUnit)
|
|
27
|
+
.map(({ tooltipLabel, label }) => (
|
|
28
|
+
<div data-testid="time-unit-label" key={label} className="lw-mb-6 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold">
|
|
29
|
+
{tooltipLabel ? <span>{`${lang(tooltipLabel!.translationKey, { count: tooltipLabel!.count })}`}</span> : <span>{`${lang(label)}`}</span>}
|
|
30
|
+
</div>
|
|
31
|
+
))}
|
|
32
|
+
</>
|
|
33
|
+
) : (
|
|
34
|
+
<TimeUnitSwitch
|
|
35
|
+
selected={selectedTimeUnit}
|
|
36
|
+
callback={setSelectedTimeUnit}
|
|
37
|
+
options={timeUnitConfig}
|
|
38
|
+
/>
|
|
39
|
+
)}
|
|
40
|
+
<ChartWithData
|
|
41
|
+
timeUnit={selectedTimeUnit}
|
|
42
|
+
currencies={timeUnit && currencies}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
)}
|
|
10
46
|
</>
|
|
11
47
|
);
|
|
12
48
|
};
|
|
@@ -27,13 +27,17 @@ echarts.use([
|
|
|
27
27
|
echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
|
|
28
28
|
echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
|
|
29
29
|
|
|
30
|
-
const Chart = ({ values, timeUnit }: ChartProps) => {
|
|
30
|
+
const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
|
|
31
31
|
const { isDark, size } = useContext(ThemeContext);
|
|
32
32
|
const isDesktop = size === Size.DESKTOP;
|
|
33
33
|
const isMobile = size === Size.MOBILE;
|
|
34
34
|
|
|
35
35
|
const echartRef = useRef(null);
|
|
36
36
|
|
|
37
|
+
const chartData = currencies
|
|
38
|
+
? values.filter(({ currency }) => currencies.includes(currency))
|
|
39
|
+
: values;
|
|
40
|
+
|
|
37
41
|
useEffect(() => {
|
|
38
42
|
if (echartRef.current) {
|
|
39
43
|
// @ts-ignore
|
|
@@ -54,7 +58,7 @@ const Chart = ({ values, timeUnit }: ChartProps) => {
|
|
|
54
58
|
height: `${CHART_HEIGHT}px`,
|
|
55
59
|
width: '100%',
|
|
56
60
|
}}
|
|
57
|
-
option={getOption(
|
|
61
|
+
option={getOption(chartData, timeUnit, isDark)}
|
|
58
62
|
/>
|
|
59
63
|
);
|
|
60
64
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { colorPalette } from '@oanda/labs-widget-common';
|
|
2
|
+
import { CurrencyName } from '../../../../gql/types/graphql';
|
|
2
3
|
|
|
3
4
|
const X_LABEL_SIZE = 90;
|
|
4
5
|
const X_LABEL_SIZE_MOBILE = 110;
|
|
@@ -12,7 +13,18 @@ const VERTICAL_LINE_COUNT = 10;
|
|
|
12
13
|
const CANDLE_NUMBER_HOUR = 12;
|
|
13
14
|
const CANDLE_MINUTE = 5;
|
|
14
15
|
|
|
15
|
-
const
|
|
16
|
+
const CURENCIES_ORDER: CurrencyName[] = [
|
|
17
|
+
CurrencyName.Usd,
|
|
18
|
+
CurrencyName.Eur,
|
|
19
|
+
CurrencyName.Gbp,
|
|
20
|
+
CurrencyName.Jpy,
|
|
21
|
+
CurrencyName.Chf,
|
|
22
|
+
CurrencyName.Aud,
|
|
23
|
+
CurrencyName.Cad,
|
|
24
|
+
CurrencyName.Nzd,
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
const COLOR_CONFIG = {
|
|
16
28
|
USD: colorPalette.greenLight,
|
|
17
29
|
EUR: colorPalette.turquoiseLight,
|
|
18
30
|
GBP: colorPalette.violetLight,
|
|
@@ -42,4 +54,5 @@ export {
|
|
|
42
54
|
TOOLTIP_LINE_COLOR_CONFIG,
|
|
43
55
|
CANDLE_NUMBER_HOUR,
|
|
44
56
|
CANDLE_MINUTE,
|
|
57
|
+
CURENCIES_ORDER,
|
|
45
58
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
|
-
import { VERTICAL_LINE_COUNT } from './constants';
|
|
1
|
+
import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
|
+
import { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';
|
|
3
3
|
import { TooltipFormatterParams } from './types';
|
|
4
4
|
|
|
5
5
|
const getDateAndTime = (param: string) => {
|
|
@@ -51,9 +51,25 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
|
|
|
51
51
|
</div>`;
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
+
const formatLegendData = (values: CurrencyPowerBalance[]) => {
|
|
55
|
+
const dataCurrencies = values.map(({ currency }) => currency);
|
|
56
|
+
|
|
57
|
+
const list = dataCurrencies.length === CURENCIES_ORDER.length
|
|
58
|
+
? CURENCIES_ORDER
|
|
59
|
+
: CURENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));
|
|
60
|
+
|
|
61
|
+
return list.map((currency) => ({
|
|
62
|
+
name: currency,
|
|
63
|
+
itemStyle: {
|
|
64
|
+
color: COLOR_CONFIG[currency],
|
|
65
|
+
},
|
|
66
|
+
}));
|
|
67
|
+
};
|
|
68
|
+
|
|
54
69
|
export {
|
|
55
70
|
isMonthWeek,
|
|
56
71
|
tooltipFormatter,
|
|
57
72
|
xAxisLabelFormatter,
|
|
58
73
|
intervalFormatter,
|
|
74
|
+
formatLegendData,
|
|
59
75
|
};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,
|
|
4
|
+
} from './formatters';
|
|
3
5
|
import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
4
6
|
|
|
5
7
|
const getOption = (
|
|
6
|
-
|
|
8
|
+
chartData: CurrencyPowerBalance[],
|
|
7
9
|
timeUnit: CurrencyPowerBalanceTimeUnit,
|
|
8
10
|
isDark: boolean,
|
|
9
11
|
) => {
|
|
10
|
-
const seriesData =
|
|
12
|
+
const seriesData = chartData.map(({ currency, power }) => ({
|
|
11
13
|
name: currency,
|
|
12
14
|
type: 'line',
|
|
13
15
|
symbol: 'circle',
|
|
@@ -21,12 +23,7 @@ const getOption = (
|
|
|
21
23
|
data: power.map(({ point, price }) => [point, price]),
|
|
22
24
|
}));
|
|
23
25
|
|
|
24
|
-
const legendData =
|
|
25
|
-
name: currency,
|
|
26
|
-
itemStyle: {
|
|
27
|
-
color: COLOR_CONFIG[currency],
|
|
28
|
-
},
|
|
29
|
-
}));
|
|
26
|
+
const legendData = formatLegendData(chartData);
|
|
30
27
|
|
|
31
28
|
return {
|
|
32
29
|
animation: false,
|
|
@@ -21,7 +21,7 @@ if (currencyPowerBalanceParamsElements.length > 0) {
|
|
|
21
21
|
const root = createRoot(element);
|
|
22
22
|
const params = element.getAttribute('data-currency-power-balance-params');
|
|
23
23
|
const mode = element.getAttribute('data-mode');
|
|
24
|
-
const { locale } = JSON.parse(params as string);
|
|
24
|
+
const { timeUnit, currencies, locale } = JSON.parse(params as string);
|
|
25
25
|
|
|
26
26
|
const isParamError = validateToolParams({ locale, graphqlUrl }, [
|
|
27
27
|
{
|
|
@@ -36,6 +36,8 @@ if (currencyPowerBalanceParamsElements.length > 0) {
|
|
|
36
36
|
locale={locale}
|
|
37
37
|
theme={mode as Theme}
|
|
38
38
|
isParamError={isParamError}
|
|
39
|
+
timeUnit={timeUnit}
|
|
40
|
+
currencies={currencies}
|
|
39
41
|
/>,
|
|
40
42
|
);
|
|
41
43
|
});
|
|
@@ -7,6 +7,8 @@ export interface CurrencyPowerBalanceConfig {
|
|
|
7
7
|
locale: Locale;
|
|
8
8
|
theme?: Theme;
|
|
9
9
|
isParamError?: boolean;
|
|
10
|
+
timeUnit?: CurrencyPowerBalanceTimeUnit;
|
|
11
|
+
currencies?: string[];
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
|
|
@@ -14,6 +16,12 @@ export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceC
|
|
|
14
16
|
locale: Locale;
|
|
15
17
|
}
|
|
16
18
|
|
|
19
|
+
export interface MainProps {
|
|
20
|
+
timeUnit?: CurrencyPowerBalanceTimeUnit;
|
|
21
|
+
currencies?: string[];
|
|
22
|
+
}
|
|
23
|
+
|
|
17
24
|
export interface ChartWithDataProps {
|
|
18
25
|
timeUnit: CurrencyPowerBalanceTimeUnit;
|
|
26
|
+
currencies?: string[];
|
|
19
27
|
}
|
package/test/Main.test.tsx
CHANGED
|
@@ -7,10 +7,11 @@ import { MockedProvider } from '@apollo/client/testing';
|
|
|
7
7
|
import { Size, ThemeContext } from '@oanda/labs-widget-common';
|
|
8
8
|
import { Main } from '../src/CurrencyPowerBalanceWidget/Main';
|
|
9
9
|
import { mockResponse } from './responsesMocks';
|
|
10
|
+
import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
|
|
10
11
|
|
|
11
12
|
describe('Main component', () => {
|
|
12
|
-
it('should render tool view', async () => {
|
|
13
|
-
const { findByTestId, getByTestId } = render(
|
|
13
|
+
it('should render tool desktop view', async () => {
|
|
14
|
+
const { findByTestId, getByTestId, queryByTestId } = render(
|
|
14
15
|
<MockedProvider mocks={mockResponse}>
|
|
15
16
|
<ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
|
|
16
17
|
<Main />
|
|
@@ -20,5 +21,58 @@ describe('Main component', () => {
|
|
|
20
21
|
|
|
21
22
|
expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
|
|
22
23
|
expect(getByTestId('time-unit-switch')).toBeInTheDocument();
|
|
24
|
+
expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
|
|
25
|
+
});
|
|
26
|
+
it('should render widget desktop view', async () => {
|
|
27
|
+
const { findByTestId, getByTestId, queryByTestId } = render(
|
|
28
|
+
<MockedProvider mocks={mockResponse}>
|
|
29
|
+
<ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
|
|
30
|
+
<Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} currencies={['USD', 'EUR']} />
|
|
31
|
+
</ThemeContext.Provider>
|
|
32
|
+
</MockedProvider>,
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
|
|
36
|
+
expect(getByTestId('time-unit-label')).toBeInTheDocument();
|
|
37
|
+
expect(queryByTestId('time-unit-switch')).not.toBeInTheDocument();
|
|
38
|
+
});
|
|
39
|
+
it('should render tool desktop view when timeUnit missing for widget', async () => {
|
|
40
|
+
const { findByTestId, getByTestId, queryByTestId } = render(
|
|
41
|
+
<MockedProvider mocks={mockResponse}>
|
|
42
|
+
<ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
|
|
43
|
+
<Main currencies={['USD', 'EUR']} />
|
|
44
|
+
</ThemeContext.Provider>
|
|
45
|
+
</MockedProvider>,
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
|
|
49
|
+
expect(getByTestId('time-unit-switch')).toBeInTheDocument();
|
|
50
|
+
expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
|
|
51
|
+
});
|
|
52
|
+
it('should render tool desktop view when currencies missing for widget', async () => {
|
|
53
|
+
const { findByTestId, getByTestId, queryByTestId } = render(
|
|
54
|
+
<MockedProvider mocks={mockResponse}>
|
|
55
|
+
<ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
|
|
56
|
+
<Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} />
|
|
57
|
+
</ThemeContext.Provider>
|
|
58
|
+
</MockedProvider>,
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
|
|
62
|
+
expect(getByTestId('time-unit-switch')).toBeInTheDocument();
|
|
63
|
+
expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
|
|
64
|
+
});
|
|
65
|
+
it('should render tool mobile view', async () => {
|
|
66
|
+
const { findByTestId, getByTestId, queryByTestId } = render(
|
|
67
|
+
<MockedProvider mocks={mockResponse}>
|
|
68
|
+
<ThemeContext.Provider value={{ size: Size.MOBILE, isDark: true }}>
|
|
69
|
+
<Main />
|
|
70
|
+
</ThemeContext.Provider>
|
|
71
|
+
</MockedProvider>,
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
|
|
75
|
+
expect(getByTestId('time-unit-select')).toBeInTheDocument();
|
|
76
|
+
expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
|
|
23
77
|
});
|
|
24
78
|
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Tool = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _config = require("./config");
|
|
9
|
-
var _TimeUnitSwitch = require("./components/TimeUnitSwitch");
|
|
10
|
-
var _ChartWithData = require("./ChartWithData");
|
|
11
|
-
var _graphql = require("../gql/types/graphql");
|
|
12
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
const Tool = () => {
|
|
15
|
-
const [selectedTimeUnit, setSelectedTimeUnit] = (0, _react.useState)(_graphql.CurrencyPowerBalanceTimeUnit.CurrentDay);
|
|
16
|
-
return _react.default.createElement("div", {
|
|
17
|
-
"data-testid": "currency-power-balance-wrapper",
|
|
18
|
-
className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
|
|
19
|
-
}, _react.default.createElement(_TimeUnitSwitch.TimeUnitSwitch, {
|
|
20
|
-
selected: selectedTimeUnit,
|
|
21
|
-
callback: setSelectedTimeUnit,
|
|
22
|
-
options: _config.timeUnitConfig
|
|
23
|
-
}), _react.default.createElement(_ChartWithData.ChartWithData, {
|
|
24
|
-
timeUnit: selectedTimeUnit
|
|
25
|
-
}));
|
|
26
|
-
};
|
|
27
|
-
exports.Tool = Tool;
|
|
28
|
-
//# sourceMappingURL=Tool.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tool.js","names":["_react","_interopRequireWildcard","require","_config","_TimeUnitSwitch","_ChartWithData","_graphql","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tool","selectedTimeUnit","setSelectedTimeUnit","useState","CurrencyPowerBalanceTimeUnit","CurrentDay","createElement","className","TimeUnitSwitch","selected","callback","options","timeUnitConfig","ChartWithData","timeUnit","exports"],"sources":["../../../src/CurrencyPowerBalanceWidget/Tool.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { timeUnitConfig } from './config';\nimport { TimeUnitSwitch } from './components/TimeUnitSwitch';\nimport { ChartWithData } from './ChartWithData';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nconst Tool = () => {\n const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);\n\n return (\n <div\n data-testid=\"currency-power-balance-wrapper\"\n className=\"lw-flex lw-flex-col lw-text-sm lw-tracking-normal\"\n >\n <TimeUnitSwitch\n selected={selectedTimeUnit}\n callback={setSelectedTimeUnit}\n options={timeUnitConfig}\n />\n <ChartWithData\n timeUnit={selectedTimeUnit}\n />\n </div>\n );\n};\n\nexport { Tool };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAoE,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEpE,MAAMW,IAAI,GAAGA,CAAA,KAAM;EACjB,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAC,eAAQ,EAACC,qCAA4B,CAACC,UAAU,CAAC;EAEjG,OACEhC,MAAA,CAAAa,OAAA,CAAAoB,aAAA;IACE,eAAY,gCAAgC;IAC5CC,SAAS,EAAC;EAAmD,GAE7DlC,MAAA,CAAAa,OAAA,CAAAoB,aAAA,CAAC7B,eAAA,CAAA+B,cAAc;IACbC,QAAQ,EAAER,gBAAiB;IAC3BS,QAAQ,EAAER,mBAAoB;IAC9BS,OAAO,EAAEC;EAAe,CACzB,CAAC,EACFvC,MAAA,CAAAa,OAAA,CAAAoB,aAAA,CAAC5B,cAAA,CAAAmC,aAAa;IACZC,QAAQ,EAAEb;EAAiB,CAC5B,CACE,CAAC;AAEV,CAAC;AAACc,OAAA,CAAAf,IAAA,GAAAA,IAAA","ignoreList":[]}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { timeUnitConfig } from './config';
|
|
3
|
-
import { TimeUnitSwitch } from './components/TimeUnitSwitch';
|
|
4
|
-
import { ChartWithData } from './ChartWithData';
|
|
5
|
-
import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
|
|
6
|
-
const Tool = () => {
|
|
7
|
-
const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);
|
|
8
|
-
return React.createElement("div", {
|
|
9
|
-
"data-testid": "currency-power-balance-wrapper",
|
|
10
|
-
className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
|
|
11
|
-
}, React.createElement(TimeUnitSwitch, {
|
|
12
|
-
selected: selectedTimeUnit,
|
|
13
|
-
callback: setSelectedTimeUnit,
|
|
14
|
-
options: timeUnitConfig
|
|
15
|
-
}), React.createElement(ChartWithData, {
|
|
16
|
-
timeUnit: selectedTimeUnit
|
|
17
|
-
}));
|
|
18
|
-
};
|
|
19
|
-
export { Tool };
|
|
20
|
-
//# sourceMappingURL=Tool.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tool.js","names":["React","useState","timeUnitConfig","TimeUnitSwitch","ChartWithData","CurrencyPowerBalanceTimeUnit","Tool","selectedTimeUnit","setSelectedTimeUnit","CurrentDay","createElement","className","selected","callback","options","timeUnit"],"sources":["../../../src/CurrencyPowerBalanceWidget/Tool.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { timeUnitConfig } from './config';\nimport { TimeUnitSwitch } from './components/TimeUnitSwitch';\nimport { ChartWithData } from './ChartWithData';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nconst Tool = () => {\n const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);\n\n return (\n <div\n data-testid=\"currency-power-balance-wrapper\"\n className=\"lw-flex lw-flex-col lw-text-sm lw-tracking-normal\"\n >\n <TimeUnitSwitch\n selected={selectedTimeUnit}\n callback={setSelectedTimeUnit}\n options={timeUnitConfig}\n />\n <ChartWithData\n timeUnit={selectedTimeUnit}\n />\n </div>\n );\n};\n\nexport { Tool };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,4BAA4B,QAAQ,sBAAsB;AAEnE,MAAMC,IAAI,GAAGA,CAAA,KAAM;EACjB,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGP,QAAQ,CAACI,4BAA4B,CAACI,UAAU,CAAC;EAEjG,OACET,KAAA,CAAAU,aAAA;IACE,eAAY,gCAAgC;IAC5CC,SAAS,EAAC;EAAmD,GAE7DX,KAAA,CAAAU,aAAA,CAACP,cAAc;IACbS,QAAQ,EAAEL,gBAAiB;IAC3BM,QAAQ,EAAEL,mBAAoB;IAC9BM,OAAO,EAAEZ;EAAe,CACzB,CAAC,EACFF,KAAA,CAAAU,aAAA,CAACN,aAAa;IACZW,QAAQ,EAAER;EAAiB,CAC5B,CACE,CAAC;AAEV,CAAC;AAED,SAASD,IAAI","ignoreList":[]}
|