@oanda/labs-currency-power-balance-widget 1.0.49 → 1.0.50

package/dist/types/CurrencyPowerBalanceWidget/types.d.ts

@@ -6,11 +6,18 @@ export interface CurrencyPowerBalanceConfig {
     locale: Locale;
     theme?: Theme;
     isParamError?: boolean;
+    timeUnit?: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
 }
 export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
     renderElementId: string;
     locale: Locale;
 }
+export interface MainProps {
+    timeUnit?: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
+}
 export interface ChartWithDataProps {
     timeUnit: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "description": "Labs Currency Power Balance Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.9.9",
-    "@oanda/labs-widget-common": "^1.0.110",
+    "@oanda/labs-widget-common": "^1.0.111",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "293a770c716eb10f57d43eb20a4c8ab5cfda3370"
+  "gitHead": "c7fa803d57db4fba74eb2952073e8f099ad935cf"
 }

package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx

@@ -9,7 +9,7 @@ import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
 import { ChartWithDataProps } from './types';
 import { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';
 
-const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
+const ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {
   const { size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const { loading, data, error } = useQuery<
@@ -22,8 +22,8 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
     fetchPolicy: 'cache-and-network',
   });
 
-  const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;
-  const showError = data?.currencyPowerBalance?.length === 0 || error;
+  const showError = data?.currencyPowerBalance?.length === 0 || error
+    || (currencies && (currencies.length === 0 || currencies.length === 1));
 
   return (
     <>
@@ -33,8 +33,8 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
         <Spinner size={SpinnerSize.lg} />
       </div>
       )}
-      {!loading && showChart && (
-        <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />
+      {!loading && !showError && (
+        <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} currencies={currencies} />
       )}
       {!loading && showError && (
         <div className="lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">

package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx

@@ -7,7 +7,7 @@ import { CurrencyPowerBalanceConfig } from './types';
 import { translations } from '../translations';
 
 const CurrencyPowerBalance = ({
-  graphqlUrl, theme, locale, isParamError,
+  graphqlUrl, theme, locale, timeUnit, currencies, isParamError,
 }: CurrencyPowerBalanceConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -22,7 +22,7 @@ const CurrencyPowerBalance = ({
             <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
               <ChartError />
             </div>
-          ) : <Main />}
+          ) : <Main timeUnit={timeUnit} currencies={currencies} />}
         </ApolloProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/CurrencyPowerBalanceWidget/Main.tsx

@@ -1,12 +1,48 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { ThemeContext } from '@oanda/labs-widget-common';
-import { Tool } from './Tool';
+import { useLocale } from '@oanda/mono-i18n';
+import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+import { TimeUnitSwitch } from './components/TimeUnitSwitch';
+import { timeUnitConfig } from './config';
+import { ChartWithData } from './ChartWithData';
+import { MainProps } from './types';
 
-const Main = () => {
+const Main = ({ timeUnit, currencies }: MainProps) => {
   const { size } = useContext(ThemeContext);
+  const { lang } = useLocale();
+  const [selectedTimeUnit, setSelectedTimeUnit] = useState(
+    timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay,
+  );
   return (
     <>
-      {size && <Tool />}
+      {size && (
+        <div
+          data-testid="currency-power-balance-wrapper"
+          className="lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
+        >
+          {timeUnit && currencies ? (
+            <>
+              {timeUnitConfig
+                .filter(({ value }) => value === selectedTimeUnit)
+                .map(({ tooltipLabel, label }) => (
+                  <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">
+                    {tooltipLabel ? <span>{`${lang(tooltipLabel!.translationKey, { count: tooltipLabel!.count })}`}</span> : <span>{`${lang(label)}`}</span>}
+                  </div>
+                ))}
+            </>
+          ) : (
+            <TimeUnitSwitch
+              selected={selectedTimeUnit}
+              callback={setSelectedTimeUnit}
+              options={timeUnitConfig}
+            />
+          )}
+          <ChartWithData
+            timeUnit={selectedTimeUnit}
+            currencies={timeUnit && currencies}
+          />
+        </div>
+      )}
     </>
   );
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx

@@ -27,13 +27,17 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ values, timeUnit }: ChartProps) => {
+const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
   const { isDark, size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
 
   const echartRef = useRef(null);
 
+  const chartData = currencies
+    ? values.filter(({ currency }) => currencies.includes(currency))
+    : values;
+
   useEffect(() => {
     if (echartRef.current) {
       // @ts-ignore
@@ -54,7 +58,7 @@ const Chart = ({ values, timeUnit }: ChartProps) => {
         height: `${CHART_HEIGHT}px`,
         width: '100%',
       }}
-      option={getOption(values, timeUnit, isDark)}
+      option={getOption(chartData, timeUnit, isDark)}
     />
   );
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import { CurrencyName } from '../../../../gql/types/graphql';
 
 const X_LABEL_SIZE = 90;
 const X_LABEL_SIZE_MOBILE = 110;
@@ -12,7 +13,18 @@ const VERTICAL_LINE_COUNT = 10;
 const CANDLE_NUMBER_HOUR = 12;
 const CANDLE_MINUTE = 5;
 
-const COLOR_CONFIG: Record<string, string> = {
+const CURENCIES_ORDER: CurrencyName[] = [
+  CurrencyName.Usd,
+  CurrencyName.Eur,
+  CurrencyName.Gbp,
+  CurrencyName.Jpy,
+  CurrencyName.Chf,
+  CurrencyName.Aud,
+  CurrencyName.Cad,
+  CurrencyName.Nzd,
+];
+
+const COLOR_CONFIG = {
   USD: colorPalette.greenLight,
   EUR: colorPalette.turquoiseLight,
   GBP: colorPalette.violetLight,
@@ -42,4 +54,5 @@ export {
   TOOLTIP_LINE_COLOR_CONFIG,
   CANDLE_NUMBER_HOUR,
   CANDLE_MINUTE,
+  CURENCIES_ORDER,
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts

@@ -1,5 +1,5 @@
-import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { VERTICAL_LINE_COUNT } from './constants';
+import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';
 import { TooltipFormatterParams } from './types';
 
 const getDateAndTime = (param: string) => {
@@ -51,9 +51,25 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
   </div>`;
 };
 
+const formatLegendData = (values: CurrencyPowerBalance[]) => {
+  const dataCurrencies = values.map(({ currency }) => currency);
+
+  const list = dataCurrencies.length === CURENCIES_ORDER.length
+    ? CURENCIES_ORDER
+    : CURENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));
+
+  return list.map((currency) => ({
+    name: currency,
+    itemStyle: {
+      color: COLOR_CONFIG[currency],
+    },
+  }));
+};
+
 export {
   isMonthWeek,
   tooltipFormatter,
   xAxisLabelFormatter,
   intervalFormatter,
+  formatLegendData,
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts

@@ -1,13 +1,15 @@
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
-import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
+import {
+  intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,
+} from './formatters';
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 
 const getOption = (
-  values: CurrencyPowerBalance[],
+  chartData: CurrencyPowerBalance[],
   timeUnit: CurrencyPowerBalanceTimeUnit,
   isDark: boolean,
 ) => {
-  const seriesData = values.map(({ currency, power }) => ({
+  const seriesData = chartData.map(({ currency, power }) => ({
     name: currency,
     type: 'line',
     symbol: 'circle',
@@ -21,12 +23,7 @@ const getOption = (
     data: power.map(({ point, price }) => [point, price]),
   }));
 
-  const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({
-    name: currency,
-    itemStyle: {
-      color: COLOR_CONFIG[currency],
-    },
-  }));
+  const legendData = formatLegendData(chartData);
 
   return {
     animation: false,

package/src/CurrencyPowerBalanceWidget/components/Chart/types.ts

@@ -3,4 +3,5 @@ import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql
 export interface ChartProps {
   values: CurrencyPowerBalance[];
   timeUnit: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
 }

package/src/CurrencyPowerBalanceWidget/render.tsx

@@ -21,7 +21,7 @@ if (currencyPowerBalanceParamsElements.length > 0) {
     const root = createRoot(element);
     const params = element.getAttribute('data-currency-power-balance-params');
     const mode = element.getAttribute('data-mode');
-    const { locale } = JSON.parse(params as string);
+    const { timeUnit, currencies, locale } = JSON.parse(params as string);
 
     const isParamError = validateToolParams({ locale, graphqlUrl }, [
       {
@@ -36,6 +36,8 @@ if (currencyPowerBalanceParamsElements.length > 0) {
         locale={locale}
         theme={mode as Theme}
         isParamError={isParamError}
+        timeUnit={timeUnit}
+        currencies={currencies}
       />,
     );
   });

package/src/CurrencyPowerBalanceWidget/types.ts

@@ -7,6 +7,8 @@ export interface CurrencyPowerBalanceConfig {
   locale: Locale;
   theme?: Theme;
   isParamError?: boolean;
+  timeUnit?: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
 }
 
 export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
@@ -14,6 +16,12 @@ export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceC
   locale: Locale;
 }
 
+export interface MainProps {
+  timeUnit?: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
+}
+
 export interface ChartWithDataProps {
   timeUnit: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
 }

package/test/Main.test.tsx

@@ -7,10 +7,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import { Size, ThemeContext } from '@oanda/labs-widget-common';
 import { Main } from '../src/CurrencyPowerBalanceWidget/Main';
 import { mockResponse } from './responsesMocks';
+import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
 
 describe('Main component', () => {
-  it('should render tool view', async () => {
-    const { findByTestId, getByTestId } = render(
+  it('should render tool desktop view', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
           <Main />
@@ -20,5 +21,58 @@ describe('Main component', () => {
 
     expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
     expect(getByTestId('time-unit-switch')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
+  });
+  it('should render widget desktop view', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} currencies={['USD', 'EUR']} />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-label')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-switch')).not.toBeInTheDocument();
+  });
+  it('should render tool desktop view when timeUnit missing for widget', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main currencies={['USD', 'EUR']} />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-switch')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
+  });
+  it('should render tool desktop view when currencies missing for widget', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-switch')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
+  });
+  it('should render tool mobile view', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.MOBILE, isDark: true }}>
+          <Main />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-select')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
   });
 });

package/dist/main/CurrencyPowerBalanceWidget/Tool.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tool = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _config = require("./config");
-var _TimeUnitSwitch = require("./components/TimeUnitSwitch");
-var _ChartWithData = require("./ChartWithData");
-var _graphql = require("../gql/types/graphql");
-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); }
-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; }
-const Tool = () => {
-  const [selectedTimeUnit, setSelectedTimeUnit] = (0, _react.useState)(_graphql.CurrencyPowerBalanceTimeUnit.CurrentDay);
-  return _react.default.createElement("div", {
-    "data-testid": "currency-power-balance-wrapper",
-    className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
-  }, _react.default.createElement(_TimeUnitSwitch.TimeUnitSwitch, {
-    selected: selectedTimeUnit,
-    callback: setSelectedTimeUnit,
-    options: _config.timeUnitConfig
-  }), _react.default.createElement(_ChartWithData.ChartWithData, {
-    timeUnit: selectedTimeUnit
-  }));
-};
-exports.Tool = Tool;
-//# sourceMappingURL=Tool.js.map

package/dist/main/CurrencyPowerBalanceWidget/Tool.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/dist/module/CurrencyPowerBalanceWidget/Tool.js

@@ -1,20 +0,0 @@
-import React, { useState } from 'react';
-import { timeUnitConfig } from './config';
-import { TimeUnitSwitch } from './components/TimeUnitSwitch';
-import { ChartWithData } from './ChartWithData';
-import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
-const Tool = () => {
-  const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);
-  return React.createElement("div", {
-    "data-testid": "currency-power-balance-wrapper",
-    className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
-  }, React.createElement(TimeUnitSwitch, {
-    selected: selectedTimeUnit,
-    callback: setSelectedTimeUnit,
-    options: timeUnitConfig
-  }), React.createElement(ChartWithData, {
-    timeUnit: selectedTimeUnit
-  }));
-};
-export { Tool };
-//# sourceMappingURL=Tool.js.map

package/dist/module/CurrencyPowerBalanceWidget/Tool.js.map

@@ -1 +0,0 @@
-{"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":[]}

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

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Tool: () => React.JSX.Element;
-export { Tool };

package/src/CurrencyPowerBalanceWidget/Tool.tsx

@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-import { timeUnitConfig } from './config';
-import { TimeUnitSwitch } from './components/TimeUnitSwitch';
-import { ChartWithData } from './ChartWithData';
-import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
-
-const Tool = () => {
-  const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);
-
-  return (
-    <div
-      data-testid="currency-power-balance-wrapper"
-      className="lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
-    >
-      <TimeUnitSwitch
-        selected={selectedTimeUnit}
-        callback={setSelectedTimeUnit}
-        options={timeUnitConfig}
-      />
-      <ChartWithData
-        timeUnit={selectedTimeUnit}
-      />
-    </div>
-  );
-};
-
-export { Tool };