@oanda/labs-currency-power-balance-widget 1.0.112 → 1.0.114

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CurrencyPowerBalanceConfig } from './types';
+import type { CurrencyPowerBalanceConfig } from './types';
 declare const CurrencyPowerBalance: ({ graphqlUrl, theme, locale, timeUnit, currencies, isParamError, logoLink, }: CurrencyPowerBalanceConfig) => React.JSX.Element;
 export { CurrencyPowerBalance };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { MainProps } from './types';
+import type { MainProps } from './types';
 declare const Main: ({ timeUnit, currencies }: MainProps) => React.JSX.Element;
 export { Main };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ChartProps } from './types';
+import type { ChartProps } from './types';
 declare const Chart: ({ values, timeUnit, currencies }: ChartProps) => React.JSX.Element;
 export { Chart };

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/constants.d.ts

@@ -26,4 +26,4 @@ declare const TOOLTIP_LINE_COLOR_CONFIG: {
     DARK: string;
     LIGHT: string;
 };
-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, CURRENCIES_ORDER, WEEKEND_DURATION, };
+export { CANDLE_MINUTE, CANDLE_NUMBER_HOUR, CHART_HEIGHT, CHART_WIDTH, COLOR_CONFIG, CURRENCIES_ORDER, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT, WEEKEND_DURATION, X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, Y_LABEL_SIZE_MOBILE, };

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/formatters.d.ts

@@ -1,5 +1,6 @@
-import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { TooltipFormatterParams } from './types';
+import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import type { TooltipFormatterParams } from './types';
 declare const isMonthWeek: (timeUnit: CurrencyPowerBalanceTimeUnit) => timeUnit is CurrencyPowerBalanceTimeUnit.M1 | CurrencyPowerBalanceTimeUnit.M3 | CurrencyPowerBalanceTimeUnit.W1;
 declare const xAxisLabelFormatter: (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => string;
 declare const intervalFormatter: (dataLength: number) => number;
@@ -10,4 +11,4 @@ declare const formatLegendData: (values: CurrencyPowerBalance[]) => {
         color: string;
     };
 }[];
-export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter, formatLegendData, };
+export { formatLegendData, intervalFormatter, isMonthWeek, tooltipFormatter, xAxisLabelFormatter, };

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts

@@ -1,4 +1,5 @@
-import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean, lang: (key: string) => string) => {
     animation: boolean;
     legend: {

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/utils.d.ts

@@ -1,2 +1,2 @@
 declare const findLastIndexesBeforeWeekend: (timestamps: number[]) => number[];
-export { findLastIndexesBeforeWeekend, };
+export { findLastIndexesBeforeWeekend };

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

@@ -1,4 +1,4 @@
-import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+import type { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
 export interface ChartProps {
     values: CurrencyPowerBalance[];
     timeUnit: CurrencyPowerBalanceTimeUnit;

package/dist/types/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TimeUnitSwitchProps } from './types';
+import type { TimeUnitSwitchProps } from './types';
 declare const TimeUnitSelect: ({ selected, options, callback, }: TimeUnitSwitchProps) => React.JSX.Element;
 export { TimeUnitSelect };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TimeUnitSwitchProps } from './types';
+import type { TimeUnitSwitchProps } from './types';
 declare const TimeUnitSwitch: ({ selected, options, callback, }: TimeUnitSwitchProps) => React.JSX.Element;
 export { TimeUnitSwitch };

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

@@ -1,4 +1,4 @@
-import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+import type { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
 export interface TimeUnitOption {
     value: CurrencyPowerBalanceTimeUnit;
     label: string;
@@ -9,8 +9,8 @@ export interface TimeUnitSwitchProps {
     options: TimeUnitOption[];
     callback: (value: CurrencyPowerBalanceTimeUnit) => void;
 }
-type TooltipLabel = {
+interface TooltipLabel {
     translationKey: string;
     count: number;
-};
+}
 export {};

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

@@ -1,5 +1,5 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+import type { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
 export interface CurrencyPowerBalanceConfig extends WidgetConfig {
     timeUnit?: CurrencyPowerBalanceTimeUnit;
     currencies?: string[];

package/dist/types/gql/types/gql.d.ts

@@ -11,7 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare const documents: {
-    "\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n      updatedAt\n    }\n  }\n": DocumentNode<types.GetCurrencyPowerBalanceQuery, types.Exact<{
+    '\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n      updatedAt\n    }\n  }\n': DocumentNode<types.GetCurrencyPowerBalanceQuery, types.Exact<{
         timeUnit: types.CurrencyPowerBalanceTimeUnit;
     }>>;
 };
@@ -31,6 +31,6 @@ export declare function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n      updatedAt\n    }\n  }\n"];
+export declare function graphql(source: '\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n      updatedAt\n    }\n  }\n'): (typeof documents)['\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n      updatedAt\n    }\n  }\n'];
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

package/dist/types/gql/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./fragment-masking";
-export * from "./gql";
+export * from './fragment-masking';
+export * from './gql';

package/dist/types/translations/index.d.ts

@@ -1,4 +1,4 @@
-import { Translations } from '@oanda/mono-i18n';
-import { defaultTranslations } from './translations';
+import type { Translations } from '@oanda/mono-i18n';
+import type { defaultTranslations } from './translations';
 export type TranslationKey = keyof typeof defaultTranslations;
 export declare const translations: Translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.112",
+  "version": "1.0.114",
   "description": "Labs Currency Power Balance Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.173",
+    "@oanda/labs-widget-common": "^1.0.175",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -22,5 +22,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
+  "gitHead": "ffe302e74b4bdf5fb28f1f7be09cfd2cb7672eb3"
 }

package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx

@@ -1,23 +1,32 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
-import { useLocale } from '@oanda/mono-i18n';
 import {
-  ChartError, Spinner, SpinnerSize, useLayoutProvider, Tooltip, Size,
+  ChartError,
   LastUpdated,
+  Size,
+  Spinner,
+  SpinnerSize,
+  Tooltip,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+
+import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
+import type {
+  GetCurrencyPowerBalanceQuery,
+  GetCurrencyPowerBalanceQueryVariables,
+} from '../gql/types/graphql';
 import { Chart } from './components/Chart';
 import { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';
-import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
-import { ChartWithDataProps } from './types';
-import { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';
+import type { ChartWithDataProps } from './types';
 
 const ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { lang } = useLocale();
   const { loading, data, error } = useQuery<
-  GetCurrencyPowerBalanceQuery,
-  GetCurrencyPowerBalanceQueryVariables
+    GetCurrencyPowerBalanceQuery,
+    GetCurrencyPowerBalanceQueryVariables
   >(getCurrencyPowerBalance, {
     variables: {
       timeUnit,
@@ -25,19 +34,24 @@ const ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {
     fetchPolicy: 'cache-and-network',
   });
 
-  const showError = data?.currencyPowerBalance?.length === 0 || error
-    || (currencies && (currencies.length === 0 || currencies.length === 1));
+  const showError =
+    data?.currencyPowerBalance?.length === 0 ||
+    error ||
+    (currencies && (currencies.length === 0 || currencies.length === 1));
 
   return (
     <>
-      {loading
-      && (
-      <div className="lw-mb-[50px] lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
-        <Spinner size={SpinnerSize.lg} />
-      </div>
+      {loading && (
+        <div className="lw-mb-[50px] lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+          <Spinner size={SpinnerSize.lg} />
+        </div>
       )}
       {!loading && !showError && (
-        <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} currencies={currencies} />
+        <Chart
+          currencies={currencies}
+          timeUnit={timeUnit}
+          values={data?.currencyPowerBalance!}
+        />
       )}
       {!loading && showError && (
         <div className="lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
@@ -48,8 +62,8 @@ const ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {
       <div className="lw-mt-2 lw-h-8">
         {!loading && !showError && (
           <LastUpdated
-            timestamp={data?.currencyPowerBalance![0]?.updatedAt}
             labelCallback={lang}
+            timestamp={data?.currencyPowerBalance![0]?.updatedAt}
           />
         )}
       </div>

package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx

@@ -1,12 +1,19 @@
-import React from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
-import { Main } from './Main';
-import { CurrencyPowerBalanceConfig } from './types';
+import React from 'react';
+
 import { translations } from '../translations';
+import { Main } from './Main';
+import type { CurrencyPowerBalanceConfig } from './types';
 
 const CurrencyPowerBalance = ({
-  graphqlUrl, theme, locale, timeUnit, currencies, isParamError, logoLink,
+  graphqlUrl,
+  theme,
+  locale,
+  timeUnit,
+  currencies,
+  isParamError,
+  logoLink,
 }: CurrencyPowerBalanceConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -15,17 +22,17 @@ const CurrencyPowerBalance = ({
 
   return (
     <WidgetProvider
-      locale={locale}
-      translations={translations}
       client={client}
+      locale={locale}
       theme={theme}
+      translations={translations}
     >
       <WidgetWrapper
-        logoLink={logoLink}
-        linkArea="logo"
         isParamError={isParamError}
+        linkArea="logo"
+        logoLink={logoLink}
       >
-        <Main timeUnit={timeUnit} currencies={currencies} />
+        <Main currencies={currencies} timeUnit={timeUnit} />
       </WidgetWrapper>
     </WidgetProvider>
   );

package/src/CurrencyPowerBalanceWidget/Main.tsx

@@ -1,45 +1,54 @@
-import React, { useState } from 'react';
 import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
+import React, { useState } from 'react';
+
 import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+import { ChartWithData } from './ChartWithData';
 import { TimeUnitSwitch } from './components/TimeUnitSwitch';
 import { timeUnitConfig } from './config';
-import { ChartWithData } from './ChartWithData';
-import { MainProps } from './types';
+import type { MainProps } from './types';
 
 const Main = ({ timeUnit, currencies }: MainProps) => {
   const { size } = useLayoutProvider();
   const { lang } = useLocale();
   const [selectedTimeUnit, setSelectedTimeUnit] = useState(
-    timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay,
+    timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay
   );
   return (
     <>
       {size && (
         <div
-          data-testid="currency-power-balance-wrapper"
           className="lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
+          data-testid="currency-power-balance-wrapper"
         >
           {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
+                    key={label}
+                    className="lw-mb-6 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold"
+                    data-testid="time-unit-label"
+                  >
+                    {tooltipLabel ? (
+                      <span>{`${lang(tooltipLabel!.translationKey, { count: tooltipLabel!.count })}`}</span>
+                    ) : (
+                      <span>{`${lang(label)}`}</span>
+                    )}
                   </div>
                 ))}
             </>
           ) : (
             <TimeUnitSwitch
-              selected={selectedTimeUnit}
               callback={setSelectedTimeUnit}
               options={timeUnitConfig}
+              selected={selectedTimeUnit}
             />
           )}
           <ChartWithData
-            timeUnit={selectedTimeUnit}
             currencies={timeUnit && currencies}
+            timeUnit={selectedTimeUnit}
           />
         </div>
       )}

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

@@ -1,20 +1,26 @@
-import React, { useRef, useEffect } from 'react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import * as echarts from 'echarts/core';
-import { LineChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-import {
-  GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent,
-} from 'echarts/components';
 import {
-  Theme, useLayoutProvider, getChartTheme, Size,
+  getChartTheme,
+  Size,
+  Theme,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
+import { LineChart } from 'echarts/charts';
 import {
-  CHART_HEIGHT,
-} from './options/constants';
-import { getResponsiveOption, getOption } from './options';
-import { ChartProps } from './types';
+  GraphicComponent,
+  GridSimpleComponent,
+  LegendPlainComponent,
+  MarkLineComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import React, { useEffect, useRef } from 'react';
+
+import { getOption, getResponsiveOption } from './options';
+import { CHART_HEIGHT } from './options/constants';
+import type { ChartProps } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -35,7 +41,7 @@ const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
 
-  const echartRef = useRef(null);
+  const echartRef = useRef<ReactEChartsCore | null>(null);
 
   const chartData = currencies
     ? values.filter(({ currency }) => currencies.includes(currency))
@@ -43,25 +49,24 @@ const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
 
   useEffect(() => {
     if (echartRef.current) {
-      // @ts-ignore
-      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;
+      const echartInstance = echartRef.current.getEchartsInstance();
 
       echartInstance.setOption(
-        getResponsiveOption(isDesktop, isMobile, isDark),
+        getResponsiveOption(isDesktop, isMobile, isDark)
       );
     }
   }, [echartRef, isDesktop, isMobile, isDark]);
 
   return (
     <ReactEChartsCore
-      echarts={echarts}
       ref={echartRef}
-      theme={isDark ? 'dark_theme' : 'light_theme'}
+      echarts={echarts}
+      option={getOption(chartData, timeUnit, isDark, lang)}
       style={{
         height: `${CHART_HEIGHT}px`,
         width: '100%',
       }}
-      option={getOption(chartData, timeUnit, isDark, lang)}
+      theme={isDark ? 'dark_theme' : 'light_theme'}
     />
   );
 };

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

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+
 import { CurrencyName } from '../../../../gql/types/graphql';
 
 const WEEKEND_DURATION = 172800000;
@@ -43,19 +44,19 @@ const TOOLTIP_LINE_COLOR_CONFIG = {
 };
 
 export {
-  X_LABEL_SIZE,
-  X_LABEL_SIZE_MOBILE,
-  Y_LABEL_SIZE_MOBILE,
-  Y_LABEL_SIZE,
-  CHART_WIDTH,
+  CANDLE_MINUTE,
+  CANDLE_NUMBER_HOUR,
   CHART_HEIGHT,
+  CHART_WIDTH,
+  COLOR_CONFIG,
+  CURRENCIES_ORDER,
   LEGEND_HEIGHT,
   LEGEND_HEIGHT_MOBILE,
-  VERTICAL_LINE_COUNT,
-  COLOR_CONFIG,
   TOOLTIP_LINE_COLOR_CONFIG,
-  CANDLE_NUMBER_HOUR,
-  CANDLE_MINUTE,
-  CURRENCIES_ORDER,
+  VERTICAL_LINE_COUNT,
   WEEKEND_DURATION,
+  X_LABEL_SIZE,
+  X_LABEL_SIZE_MOBILE,
+  Y_LABEL_SIZE,
+  Y_LABEL_SIZE_MOBILE,
 };

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

@@ -1,6 +1,11 @@
-import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { VERTICAL_LINE_COUNT, CURRENCIES_ORDER, COLOR_CONFIG } from './constants';
-import { TooltipFormatterParams } from './types';
+import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import {
+  COLOR_CONFIG,
+  CURRENCIES_ORDER,
+  VERTICAL_LINE_COUNT,
+} from './constants';
+import type { TooltipFormatterParams } from './types';
 
 const getDateAndTime = (param: string) => {
   const dateAndTime = param.split('T');
@@ -11,39 +16,51 @@ const getDateAndTime = (param: string) => {
   };
 };
 
-const dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;
+const dateFormat = (date: string) =>
+  `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;
 
-const dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;
+const dateTimeFormat = ({ date, time }: { date: string; time: string }) =>
+  `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;
 
-const isMonthWeek = (
-  timeUnit: CurrencyPowerBalanceTimeUnit,
-) => timeUnit === CurrencyPowerBalanceTimeUnit.M3
-  || timeUnit === CurrencyPowerBalanceTimeUnit.M1
-  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;
+const isMonthWeek = (timeUnit: CurrencyPowerBalanceTimeUnit) =>
+  timeUnit === CurrencyPowerBalanceTimeUnit.M3 ||
+  timeUnit === CurrencyPowerBalanceTimeUnit.M1 ||
+  timeUnit === CurrencyPowerBalanceTimeUnit.W1;
 
-const xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {
+const xAxisLabelFormatter = (
+  label: string,
+  timeUnit: CurrencyPowerBalanceTimeUnit
+) => {
   const { date, time } = getDateAndTime(label);
   const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
 
   return isDateFormat ? dateFormat(date) : time;
 };
 
-const intervalFormatter = (
-  dataLength: number,
-) => Math.round(dataLength / VERTICAL_LINE_COUNT);
+const intervalFormatter = (dataLength: number) =>
+  Math.round(dataLength / VERTICAL_LINE_COUNT);
 
 const tooltipFormatter = (values: TooltipFormatterParams[]) => {
   const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
 
   const row = values
-    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))
-    .map(({ marker, seriesName, value }) => `<div style="display:flex;align-items:center;">
+    .sort(
+      ({ value: valueA }, { value: valueB }) =>
+        Number(valueB[1]) - Number(valueA[1])
+    )
+    .map(
+      ({
+        marker,
+        seriesName,
+        value,
+      }) => `<div style="display:flex;align-items:center;">
       <div style="display:flex;align-items:center;width:50px;margin-right:10px;">
         ${marker}
         <span>${seriesName}</span>
       </div>
       <span>${value[1]}</span>
-    </div>`);
+    </div>`
+    );
 
   return `<div style="display:flex; flex-direction:column;">
     <span style="margin-bottom:5px;">${date}</span>
@@ -54,9 +71,12 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
 const formatLegendData = (values: CurrencyPowerBalance[]) => {
   const dataCurrencies = values.map(({ currency }) => currency);
 
-  const list = dataCurrencies.length === CURRENCIES_ORDER.length
-    ? CURRENCIES_ORDER
-    : CURRENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));
+  const list =
+    dataCurrencies.length === CURRENCIES_ORDER.length
+      ? CURRENCIES_ORDER
+      : CURRENCIES_ORDER.filter((currency) =>
+          dataCurrencies.includes(currency)
+        );
 
   return list.map((currency) => ({
     name: currency,
@@ -67,9 +87,9 @@ const formatLegendData = (values: CurrencyPowerBalance[]) => {
 };
 
 export {
+  formatLegendData,
+  intervalFormatter,
   isMonthWeek,
   tooltipFormatter,
   xAxisLabelFormatter,
-  intervalFormatter,
-  formatLegendData,
 };