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

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,
 };

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

@@ -1,25 +1,33 @@
 import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
+
+import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
 import {
-  intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,
+  formatLegendData,
+  intervalFormatter,
+  tooltipFormatter,
+  xAxisLabelFormatter,
 } from './formatters';
-import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 import { findLastIndexesBeforeWeekend } from './utils';
 
 const getOption = (
   chartData: CurrencyPowerBalance[],
   timeUnit: CurrencyPowerBalanceTimeUnit,
   isDark: boolean,
-  lang: (key: string) => string,
+  lang: (key: string) => string
 ) => {
   const currentTheme = isDark ? darkTheme : lightTheme;
-  const dataTimestamps = chartData[0].power.map((x) => new Date(x.point).getTime());
+  const dataTimestamps = chartData[0].power.map((x) =>
+    new Date(x.point).getTime()
+  );
   const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);
-  const disableWeekendsIndicator = [
-    CurrencyPowerBalanceTimeUnit.CurrentDay,
-    CurrencyPowerBalanceTimeUnit.PreviousDay,
-    CurrencyPowerBalanceTimeUnit.M3,
-  ].includes(timeUnit) || weekendsIndexes.length === 0;
+  const disableWeekendsIndicator =
+    [
+      CurrencyPowerBalanceTimeUnit.CurrentDay,
+      CurrencyPowerBalanceTimeUnit.PreviousDay,
+      CurrencyPowerBalanceTimeUnit.M3,
+    ].includes(timeUnit) || weekendsIndexes.length === 0;
 
   const weekendsMarks = weekendsIndexes.map((item) => ({
     xAxis: item,
@@ -37,40 +45,45 @@ const getOption = (
       color: COLOR_CONFIG[currency],
     },
     data: power.map(({ point, price }) => [point, price]),
-    markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {
-      label: {
-        show: false,
-        position: 'end',
-        align: 'center',
-        distance: -32,
-        padding: [8, 8],
-        fontSize: 12,
-        shadowBlur: 24,
-        shadowOffsetX: 0,
-        shadowOffsetY: 6,
-        borderWidth: 0,
-        color: currentTheme.textPrimary,
-        shadowColor: 'rgba(0,0,0,0.1)',
-        borderRadius: 4,
-        backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary,
-      },
-      show: false,
-      emphasis: {
-        label: {
-          show: true,
-        },
-        lineStyle: {
-          width: 1,
-          opacity: 0,
-          color: currentTheme.borderPrimary,
-        },
-      },
-      symbol: ['none', 'none'],
-      itemStyle: {
-        color: currentTheme.borderPrimary,
-      },
-      data: weekendsMarks,
-    } : undefined,
+    markLine:
+      index === chartData.length - 1 && !disableWeekendsIndicator
+        ? {
+            label: {
+              show: false,
+              position: 'end',
+              align: 'center',
+              distance: -32,
+              padding: [8, 8],
+              fontSize: 12,
+              shadowBlur: 24,
+              shadowOffsetX: 0,
+              shadowOffsetY: 6,
+              borderWidth: 0,
+              color: currentTheme.textPrimary,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              borderRadius: 4,
+              backgroundColor: isDark
+                ? currentTheme.borderPrimary
+                : currentTheme.backgroundSecondary,
+            },
+            show: false,
+            emphasis: {
+              label: {
+                show: true,
+              },
+              lineStyle: {
+                width: 1,
+                opacity: 0,
+                color: currentTheme.borderPrimary,
+              },
+            },
+            symbol: ['none', 'none'],
+            itemStyle: {
+              color: currentTheme.borderPrimary,
+            },
+            data: weekendsMarks,
+          }
+        : undefined,
   }));
 
   const legendData = formatLegendData(chartData);
@@ -88,7 +101,9 @@ const getOption = (
         axis: 'x',
         z: 0,
         lineStyle: {
-          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,
+          color: isDark
+            ? TOOLTIP_LINE_COLOR_CONFIG.DARK
+            : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,
         },
       },
       formatter: tooltipFormatter,

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

@@ -1,4 +1,5 @@
 import { getGridLines } from '@oanda/labs-widget-common';
+
 import {
   CHART_HEIGHT,
   CHART_WIDTH,
@@ -10,7 +11,11 @@ import {
   Y_LABEL_SIZE_MOBILE,
 } from './constants';
 
-const getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: boolean) => {
+const getResponsiveOption = (
+  isDesktop: boolean,
+  isMobile: boolean,
+  isDark: boolean
+) => {
   const baseGridLines = getGridLines({
     isDark,
     chartWidth: CHART_WIDTH,
@@ -36,9 +41,7 @@ const getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: bool
         bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,
       },
     ],
-    graphic: [
-      ...baseGridLines,
-    ],
+    graphic: [...baseGridLines],
   };
 };
 

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

@@ -1,5 +1,5 @@
 export interface TooltipFormatterParams {
   marker: string;
   seriesName: string;
-  value: string[]
+  value: string[];
 }

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

@@ -1,12 +1,13 @@
 import { WEEKEND_DURATION } from './constants';
 
-const findLastIndexesBeforeWeekend = (timestamps: number[]) => timestamps
-  .reduce((acc, timestamp, index) => (
-    timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION
-      ? [...acc, index]
-      : acc
-  ), [] as number[]);
+const findLastIndexesBeforeWeekend = (timestamps: number[]) =>
+  timestamps.reduce(
+    (acc, timestamp, index) =>
+      timestamps.length - 1 !== index &&
+      timestamps[index + 1] - timestamp >= WEEKEND_DURATION
+        ? [...acc, index]
+        : acc,
+    [] as number[]
+  );
 
-export {
-  findLastIndexesBeforeWeekend,
-};
+export { findLastIndexesBeforeWeekend };

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

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

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.tsx

@@ -1,29 +1,35 @@
-import React from 'react';
 import { Select } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { TimeUnitSwitchProps } from './types';
-import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+import React from 'react';
+
+import type { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+import type { TimeUnitSwitchProps } from './types';
 
 const TimeUnitSelect = ({
-  selected, options, callback,
+  selected,
+  options,
+  callback,
 }: TimeUnitSwitchProps) => {
   const { lang } = useLocale();
-  const selectOptions = options
-    .map(({ value: id, label, tooltipLabel }) => ({
-      id,
-      label: tooltipLabel
-        ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })
-        : lang(label),
-    }));
-  const [{ label: selectedLabel }] = selectOptions.filter(({ id }) => id === selected);
+  const selectOptions = options.map(({ value: id, label, tooltipLabel }) => ({
+    id,
+    label: tooltipLabel
+      ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })
+      : lang(label),
+  }));
+  const [{ label: selectedLabel }] = selectOptions.filter(
+    ({ id }) => id === selected
+  );
 
   return (
-    <div data-testid="time-unit-select" className="lw-mb-6 lw-w-full">
+    <div className="lw-mb-6 lw-w-full" data-testid="time-unit-select">
       <Select
-        searchPlaceholder={lang('search')}
         options={selectOptions}
+        searchPlaceholder={lang('search')}
         selectedOption={{ id: selected, label: selectedLabel }}
-        setSelectedOption={({ id }) => callback(id as CurrencyPowerBalanceTimeUnit)}
+        setSelectedOption={({ id }) =>
+          callback(id as CurrencyPowerBalanceTimeUnit)
+        }
       />
     </div>
   );

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSwitch.tsx

@@ -1,15 +1,22 @@
-import React from 'react';
 import {
-  Button, ButtonSize, ButtonVariant, useLayoutProvider, Size,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  Size,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { TimeUnitSwitchProps } from './types';
-import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+import React from 'react';
+
+import type { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
 import { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from '../../constants';
 import { TimeUnitSelect } from './TimeUnitSelect';
+import type { TimeUnitSwitchProps } from './types';
 
 const TimeUnitSwitch = ({
-  selected, options, callback,
+  selected,
+  options,
+  callback,
 }: TimeUnitSwitchProps) => {
   const { lang } = useLocale();
   const { size } = useLayoutProvider();
@@ -21,40 +28,43 @@ const TimeUnitSwitch = ({
 
   return (
     <>
-      {isDesktop
-        ? (
-          <div data-testid="time-unit-switch" className="lw-mb-6 lw-flex lw-gap-1 lw-self-end">
-            {options.map(({ value, label, tooltipLabel }) => {
-              const tooltip = tooltipLabel
-                ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })
-                : tooltipLabel;
-              const buttonLabel = lang(label);
+      {isDesktop ? (
+        <div
+          className="lw-mb-6 lw-flex lw-gap-1 lw-self-end"
+          data-testid="time-unit-switch"
+        >
+          {options.map(({ value, label, tooltipLabel }) => {
+            const tooltip = tooltipLabel
+              ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })
+              : tooltipLabel;
+            const buttonLabel = lang(label);
 
-              return (
-                <Button
-                  key={value}
-                  size={ButtonSize.full}
-                  variant={selected === value
+            return (
+              <Button
+                key={value}
+                data-tooltip-content={tooltip}
+                data-tooltip-id={CURRENCY_POWER_BALANCE_TOOLTIP_ID}
+                size={ButtonSize.full}
+                value={value}
+                variant={
+                  selected === value
                     ? ButtonVariant.primary
-                    : ButtonVariant.secondary}
-                  onClick={handleButtonClick}
-                  value={value}
-                  data-tooltip-id={CURRENCY_POWER_BALANCE_TOOLTIP_ID}
-                  data-tooltip-content={tooltip}
-                >
-                  {buttonLabel}
-                </Button>
-              );
-            })}
-          </div>
-        )
-        : (
-          <TimeUnitSelect
-            selected={selected}
-            callback={callback}
-            options={options}
-          />
-        )}
+                    : ButtonVariant.secondary
+                }
+                onClick={handleButtonClick}
+              >
+                {buttonLabel}
+              </Button>
+            );
+          })}
+        </div>
+      ) : (
+        <TimeUnitSelect
+          callback={callback}
+          options={options}
+          selected={selected}
+        />
+      )}
     </>
   );
 };

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

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