@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.
Files changed (64) hide show
  1. package/CHANGELOG.md +404 -0
  2. package/dist/main/CurrencyPowerBalanceWidget/ChartWithData.js +7 -6
  3. package/dist/main/CurrencyPowerBalanceWidget/ChartWithData.js.map +1 -1
  4. package/dist/main/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js +6 -1
  5. package/dist/main/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js.map +1 -1
  6. package/dist/main/CurrencyPowerBalanceWidget/Main.js +42 -3
  7. package/dist/main/CurrencyPowerBalanceWidget/Main.js.map +1 -1
  8. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/Chart.js +9 -2
  9. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/Chart.js.map +1 -1
  10. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +3 -1
  11. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
  12. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js +17 -1
  13. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map +1 -1
  14. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +3 -8
  15. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
  16. package/dist/main/CurrencyPowerBalanceWidget/components/Chart/types.js.map +1 -1
  17. package/dist/main/CurrencyPowerBalanceWidget/render.js +5 -1
  18. package/dist/main/CurrencyPowerBalanceWidget/render.js.map +1 -1
  19. package/dist/main/CurrencyPowerBalanceWidget/types.js.map +1 -1
  20. package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js +7 -6
  21. package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js.map +1 -1
  22. package/dist/module/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js +6 -1
  23. package/dist/module/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js.map +1 -1
  24. package/dist/module/CurrencyPowerBalanceWidget/Main.js +43 -4
  25. package/dist/module/CurrencyPowerBalanceWidget/Main.js.map +1 -1
  26. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/Chart.js +9 -2
  27. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/Chart.js.map +1 -1
  28. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +3 -1
  29. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
  30. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js +17 -2
  31. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map +1 -1
  32. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +4 -9
  33. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
  34. package/dist/module/CurrencyPowerBalanceWidget/components/Chart/types.js.map +1 -1
  35. package/dist/module/CurrencyPowerBalanceWidget/render.js +5 -1
  36. package/dist/module/CurrencyPowerBalanceWidget/render.js.map +1 -1
  37. package/dist/module/CurrencyPowerBalanceWidget/types.js.map +1 -1
  38. package/dist/types/CurrencyPowerBalanceWidget/ChartWithData.d.ts +1 -1
  39. package/dist/types/CurrencyPowerBalanceWidget/CurrencyPowerBalance.d.ts +1 -1
  40. package/dist/types/CurrencyPowerBalanceWidget/Main.d.ts +2 -1
  41. package/dist/types/CurrencyPowerBalanceWidget/components/Chart/Chart.d.ts +1 -1
  42. package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/constants.d.ts +13 -2
  43. package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/formatters.d.ts +8 -2
  44. package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts +2 -2
  45. package/dist/types/CurrencyPowerBalanceWidget/components/Chart/types.d.ts +1 -0
  46. package/dist/types/CurrencyPowerBalanceWidget/types.d.ts +7 -0
  47. package/package.json +4 -4
  48. package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx +5 -5
  49. package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx +2 -2
  50. package/src/CurrencyPowerBalanceWidget/Main.tsx +40 -4
  51. package/src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx +6 -2
  52. package/src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx +14 -1
  53. package/src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts +18 -2
  54. package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts +6 -9
  55. package/src/CurrencyPowerBalanceWidget/components/Chart/types.ts +1 -0
  56. package/src/CurrencyPowerBalanceWidget/render.tsx +3 -1
  57. package/src/CurrencyPowerBalanceWidget/types.ts +8 -0
  58. package/test/Main.test.tsx +56 -2
  59. package/dist/main/CurrencyPowerBalanceWidget/Tool.js +0 -28
  60. package/dist/main/CurrencyPowerBalanceWidget/Tool.js.map +0 -1
  61. package/dist/module/CurrencyPowerBalanceWidget/Tool.js +0 -20
  62. package/dist/module/CurrencyPowerBalanceWidget/Tool.js.map +0 -1
  63. package/dist/types/CurrencyPowerBalanceWidget/Tool.d.ts +0 -3
  64. 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;MAAEb;IAAO,CAAC,GAAGe,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE/C,MAAMK,YAAY,GAAGvB,kBAAkB,CAAC;MAAEM,MAAM;MAAEJ;IAAW,CAAC,EAAE,CAC9D;MACEsB,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;IACLP,IAAI,CAACW,MAAM,CACT9B,KAAA,CAAA+B,aAAA,CAAC5B,oBAAoB;MACnBC,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACfwB,KAAK,EAAEV,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMQ,SAAS,GAAGnB,QAAQ,CAACoB,cAAc,CAAC3B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAGlB,UAAU,CAACgC,SAAU,CAAC;EAEnCd,IAAI,CAACW,MAAM,CACT9B,KAAA,CAAA+B,aAAA,CAAC5B,oBAAoB;IACnBK,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CACH,CAAC;AACH","ignoreList":[]}
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
1
  import React from 'react';
2
- declare const Main: () => React.JSX.Element;
2
+ import { MainProps } from './types';
3
+ declare const Main: ({ timeUnit, currencies }: MainProps) => React.JSX.Element;
3
4
  export { Main };
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ChartProps } from './types';
3
- declare const Chart: ({ values, timeUnit }: ChartProps) => React.JSX.Element;
3
+ declare const Chart: ({ values, timeUnit, currencies }: ChartProps) => React.JSX.Element;
4
4
  export { Chart };
@@ -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 COLOR_CONFIG: Record<string, string>;
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
- export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter, };
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: (values: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
2
+ declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
3
3
  animation: boolean;
4
4
  legend: {
5
5
  data: {
6
- name: string;
6
+ name: import("../../../../gql/types/graphql").CurrencyName;
7
7
  itemStyle: {
8
8
  color: string;
9
9
  };
@@ -2,4 +2,5 @@ import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql
2
2
  export interface ChartProps {
3
3
  values: CurrencyPowerBalance[];
4
4
  timeUnit: CurrencyPowerBalanceTimeUnit;
5
+ currencies?: string[];
5
6
  }
@@ -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.48",
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.109",
17
- "@oanda/mono-i18n": "9.0.0",
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": "4ca902ac71cf4cffb17055b7d30dbcb2cbde5514"
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 showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;
26
- const showError = data?.currencyPowerBalance?.length === 0 || error;
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 && showChart && (
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 { Tool } from './Tool';
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 && <Tool />}
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(values, timeUnit, isDark)}
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 COLOR_CONFIG: Record<string, string> = {
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 { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
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
- values: CurrencyPowerBalance[],
8
+ chartData: CurrencyPowerBalance[],
7
9
  timeUnit: CurrencyPowerBalanceTimeUnit,
8
10
  isDark: boolean,
9
11
  ) => {
10
- const seriesData = values.map(({ currency, power }) => ({
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 = Object.keys(COLOR_CONFIG).map((currency) => ({
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,
@@ -3,4 +3,5 @@ import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql
3
3
  export interface ChartProps {
4
4
  values: CurrencyPowerBalance[];
5
5
  timeUnit: CurrencyPowerBalanceTimeUnit;
6
+ currencies?: string[];
6
7
  }
@@ -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
  }
@@ -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":[]}
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const Tool: () => React.JSX.Element;
3
- export { Tool };