@oanda/labs-value-at-risk-widget 1.0.65 → 1.0.67

package/src/ValueAtRiskWidget/Tool.tsx

@@ -1,42 +1,58 @@
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import {
-  Select, SelectOption, Size, useLayoutProvider,
-} from '@oanda/labs-widget-common';
+import type { SelectOption } from '@oanda/labs-widget-common';
+import { Select, Size, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';
-import { ToolProps } from './types';
-import { ValueAtRiskDuration, ValueAtRiskBars } from '../gql/types/graphql';
+import classnames from 'classnames';
+import React, { useState } from 'react';
+
+import { ValueAtRiskBars, ValueAtRiskDuration } from '../gql/types/graphql';
 import { ChartWithData } from './ChartWithData';
+import type { ToolProps } from './types';
+import { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';
 
 const Tool = ({ data, division }: ToolProps) => {
   const { lang } = useLocale();
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const assetClassesOptions = getAssetClassesList(data!.valueAtRiskAssetClasses!);
+  const assetClassesOptions = getAssetClassesList(
+    data!.valueAtRiskAssetClasses!
+  );
   const initInstrumentsOptions = getInstrumentsByAssetClassId(
     data!.valueAtRiskAssetClasses!,
-    assetClassesOptions[0].id,
+    assetClassesOptions[0].id
   );
 
-  const holdTimeOptions = Object.values(ValueAtRiskDuration).map((duration) => ({ id: duration as string, label: lang('day', { count: +duration.substring(1) }) }));
-  const calculationPeriodOptions = Object.values(ValueAtRiskBars).map((bars) => ({ id: bars as string, label: lang('day', { count: +bars.substring(1) }) }));
+  const holdTimeOptions = Object.values(ValueAtRiskDuration).map(
+    (duration) => ({
+      id: duration as string,
+      label: lang('day', { count: +duration.substring(1) }),
+    })
+  );
+  const calculationPeriodOptions = Object.values(ValueAtRiskBars).map(
+    (bars) => ({
+      id: bars as string,
+      label: lang('day', { count: +bars.substring(1) }),
+    })
+  );
 
   const [selectedAssetClass, setSelectedAssetClass] = useState(
-    assetClassesOptions[0],
+    assetClassesOptions[0]
+  );
+  const [instrumentsList, setInstrumentsList] = useState(
+    initInstrumentsOptions
+  );
+  const [selectedInstrument, setSelectedInstrument] = useState(
+    initInstrumentsOptions[0]
   );
-  const [instrumentsList, setInstrumentsList] = useState(initInstrumentsOptions);
-  const [selectedInstrument, setSelectedInstrument] = useState(initInstrumentsOptions[0]);
   const [selectedHoldTime, setSelectedHoldTime] = useState(holdTimeOptions[0]);
   const [selectedCalculationPeriod, setSelectedCalculationPeriod] = useState(
-    calculationPeriodOptions[0],
+    calculationPeriodOptions[0]
   );
 
   const handleAssetClassSelect = (selectedOption: SelectOption) => {
     const list = getInstrumentsByAssetClassId(
       data!.valueAtRiskAssetClasses!,
-      selectedOption.id,
+      selectedOption.id
     );
 
     setSelectedAssetClass(selectedOption);
@@ -48,51 +64,49 @@ const Tool = ({ data, division }: ToolProps) => {
 
   return (
     <div
-      data-testid="value-at-risk-tool-wrapper"
       className="lw-relative lw-text-sm lw-tracking-normal"
+      data-testid="value-at-risk-tool-wrapper"
     >
-      <div className={classnames(
-        'lw-mb-8 lw-grid',
-        {
+      <div
+        className={classnames('lw-mb-8 lw-grid', {
           'lw-grid-cols-4 lw-gap-2': isDesktop && showAssetClassesSelect,
           'lw-grid-cols-3 lw-gap-2.5': isDesktop && !showAssetClassesSelect,
           'lw-grid-cols-1 lw-gap-4': !isDesktop,
-        },
-      )}
+        })}
       >
         {showAssetClassesSelect ? (
           <Select
-            selectLabel={lang('instrument_type')}
             options={assetClassesOptions}
+            selectLabel={lang('instrument_type')}
             selectedOption={selectedAssetClass}
             setSelectedOption={handleAssetClassSelect}
           />
         ) : null}
         <Select
+          options={instrumentsList}
           searchPlaceholder={lang('search')}
           selectLabel={lang('instrument')}
-          options={instrumentsList}
           selectedOption={selectedInstrument}
           setSelectedOption={setSelectedInstrument}
         />
         <Select
-          selectLabel={lang('hold_time')}
           options={holdTimeOptions}
+          selectLabel={lang('hold_time')}
           selectedOption={selectedHoldTime}
           setSelectedOption={setSelectedHoldTime}
         />
         <Select
-          selectLabel={lang('calculation_period')}
           options={calculationPeriodOptions}
+          selectLabel={lang('calculation_period')}
           selectedOption={selectedCalculationPeriod}
           setSelectedOption={setSelectedCalculationPeriod}
         />
       </div>
       <ChartWithData
         bars={selectedCalculationPeriod.id as ValueAtRiskBars}
+        division={division}
         duration={selectedHoldTime.id as ValueAtRiskDuration}
         instrument={selectedInstrument.id}
-        division={division}
       />
     </div>
   );

package/src/ValueAtRiskWidget/ToolWithData.tsx

@@ -1,20 +1,28 @@
-import React from 'react';
-import classnames from 'classnames';
+import { useQuery } from '@apollo/client';
 import {
-  ChartError, Size, Spinner, SpinnerSize, useLayoutProvider,
+  ChartError,
+  Size,
+  Spinner,
+  SpinnerSize,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import { useQuery } from '@apollo/client';
+import classnames from 'classnames';
+import React from 'react';
+
 import { getValueAtRiskAssetClasses } from '../gql/getValueAtRiskAssetClasses';
+import type {
+  GetValueAtRiskAssetClassesQuery,
+  GetValueAtRiskAssetClassesQueryVariables,
+} from '../gql/types/graphql';
 import { Tool } from './Tool';
-import { ToolWithDataProps } from './types';
-import { GetValueAtRiskAssetClassesQuery, GetValueAtRiskAssetClassesQueryVariables } from '../gql/types/graphql';
+import type { ToolWithDataProps } from './types';
 
 const ToolWithData = ({ division }: ToolWithDataProps) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { loading, data, error } = useQuery<
-  GetValueAtRiskAssetClassesQuery,
-  GetValueAtRiskAssetClassesQueryVariables
+    GetValueAtRiskAssetClassesQuery,
+    GetValueAtRiskAssetClassesQueryVariables
   >(getValueAtRiskAssetClasses, {
     variables: {
       division,
@@ -24,22 +32,20 @@ const ToolWithData = ({ division }: ToolWithDataProps) => {
 
   return (
     <div data-testid="value-at-risk-wrapper">
-      {(loading || !size)
-      && (
-      <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {
-        'lw-h-[566px]': isDesktop,
-        'lw-h-[840px]': !isDesktop,
-      })}
-      >
-        <Spinner size={SpinnerSize.lg} />
-      </div>
-      )}
-      {!loading && data && (
-        <Tool
-          data={data}
-          division={division}
-        />
+      {(loading || !size) && (
+        <div
+          className={classnames(
+            'lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary',
+            {
+              'lw-h-[566px]': isDesktop,
+              'lw-h-[840px]': !isDesktop,
+            }
+          )}
+        >
+          <Spinner size={SpinnerSize.lg} />
+        </div>
       )}
+      {!loading && data && <Tool data={data} division={division} />}
       {!loading && error && (
         <div className="lw-flex lw-h-[500px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
           <ChartError />

package/src/ValueAtRiskWidget/ValueAtRiskWidget.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import React from 'react';
 
-import { ValueAtRiskConfig } from './types';
 import { translations } from '../translations';
 import { ToolWithData } from './ToolWithData';
+import type { ValueAtRiskConfig } from './types';
 import { Widget } from './Widget';
 
 const ValueAtRiskWidget = ({
@@ -26,26 +26,26 @@ const ValueAtRiskWidget = ({
 
   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}
       >
-        {
-          isWidget ? (
-            <Widget
-              division={division}
-              instrument={instrument}
-              duration={duration}
-              bars={bars}
-            />
-          ) : <ToolWithData division={division} />
-        }
+        {isWidget ? (
+          <Widget
+            bars={bars}
+            division={division}
+            duration={duration}
+            instrument={instrument}
+          />
+        ) : (
+          <ToolWithData division={division} />
+        )}
       </WidgetWrapper>
     </WidgetProvider>
   );

package/src/ValueAtRiskWidget/Widget.tsx

@@ -1,24 +1,20 @@
-import React from 'react';
-import classnames from 'classnames';
 import { Size, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { WidgetProps } from './types';
+import classnames from 'classnames';
+import React from 'react';
+
 import { ChartWithData } from './ChartWithData';
+import type { WidgetProps } from './types';
 
-const Widget = ({
-  division,
-  instrument,
-  duration,
-  bars,
-}: WidgetProps) => {
+const Widget = ({ division, instrument, duration, bars }: WidgetProps) => {
   const { lang } = useLocale();
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   return (
     <div
-      data-testid="value-at-risk-widget-wrapper"
       className="lw-relative lw-text-sm lw-tracking-normal"
+      data-testid="value-at-risk-widget-wrapper"
     >
       {size && (
         <>
@@ -33,9 +29,9 @@ const Widget = ({
           </div>
           <ChartWithData
             bars={bars}
+            division={division}
             duration={duration}
             instrument={instrument}
-            division={division}
           />
         </>
       )}

package/src/ValueAtRiskWidget/components/Chart/Chart.tsx

@@ -1,28 +1,29 @@
-import React from 'react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import * as echarts from 'echarts/core';
-import { LineChart, CustomChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
 import {
-  GridSimpleComponent,
+  getChartTheme,
+  Size,
+  Theme,
+  useLayoutProvider,
+} from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import { CustomChart, LineChart } from 'echarts/charts';
+import {
+  AxisPointerComponent,
+  DatasetComponent,
   GraphicComponent,
+  GridSimpleComponent,
+  MarkLineComponent,
   MarkPointComponent,
   TitleComponent,
-  DatasetComponent,
   VisualMapComponent,
-  MarkLineComponent,
-  AxisPointerComponent,
 } from 'echarts/components';
-import { useLocale } from '@oanda/mono-i18n';
-import {
-  Size,
-  Theme,
-  useLayoutProvider,
-  getChartTheme,
-} from '@oanda/labs-widget-common';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import React from 'react';
+
 import { CHART_HEIGHT } from './constants';
 import { getOption } from './getOption';
-import { ChartProps } from './types';
+import type { ChartProps } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -49,12 +50,12 @@ const Chart = ({ values }: ChartProps) => {
   return (
     <ReactEChartsCore
       echarts={echarts}
-      theme={isDark ? 'dark_theme' : 'light_theme'}
+      option={getOption(values, lang, isDark, isDesktop)}
       style={{
         height: `${CHART_HEIGHT}px`,
         width: '100%',
       }}
-      option={getOption(values, lang, isDark, isDesktop)}
+      theme={isDark ? 'dark_theme' : 'light_theme'}
     />
   );
 };

package/src/ValueAtRiskWidget/components/Chart/getOption.ts

@@ -5,16 +5,17 @@ import {
   getLineCommons,
   lightTheme,
 } from '@oanda/labs-widget-common';
+
 import {
-  CHART_WIDTH,
   CHART_HEIGHT,
+  CHART_WIDTH,
+  TITLE_HEIGHT,
   X_LABEL_SIZE,
   Y_LABEL_SIZE_DESKTOP,
-  TITLE_HEIGHT,
   Y_LABEL_SIZE_MOBILE,
 } from './constants';
-import { GetOptionType } from './types';
 import { getPercentValueByPips } from './getPercentValueByPips';
+import type { GetOptionType } from './types';
 
 export const getOption: GetOptionType = (values, lang, isDark, isDesktop) => {
   const gridLines = getGridLines({
@@ -88,7 +89,6 @@ export const getOption: GetOptionType = (values, lang, isDark, isDesktop) => {
           },
         },
         formatter: (value, index) => (index ? `${value}%` : `{a|${value}%}`),
-
       },
       axisPointer: {
         label: {

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

@@ -1,5 +1,6 @@
-import { EChartsOption } from 'echarts';
-import { GetValueAtRiskChartQuery } from '../../../gql/types/graphql';
+import type { EChartsOption } from 'echarts';
+
+import type { GetValueAtRiskChartQuery } from '../../../gql/types/graphql';
 
 export interface ChartProps {
   values: GetValueAtRiskChartQuery;
@@ -9,5 +10,5 @@ export type GetOptionType = (
   values: GetValueAtRiskChartQuery,
   lang: (label: string) => string,
   isDark: boolean,
-  isDesktop: boolean,
+  isDesktop: boolean
 ) => EChartsOption;

package/src/ValueAtRiskWidget/components/Legend/DashedLine.tsx

@@ -1,18 +1,28 @@
-import React from 'react';
 import { colorPalette } from '@oanda/labs-widget-common';
-import {
-  DashedLineProps,
-} from './types';
+import React from 'react';
 
-const DashedLine = ({ strokeDasharray, width = '30', isDark }: DashedLineProps) => (
-  <svg className="lw-inline" width={width} height="2" viewBox={`0 0 ${width} 2`} fill="none" xmlns="http://www.w3.org/2000/svg">
+import type { DashedLineProps } from './types';
+
+const DashedLine = ({
+  strokeDasharray,
+  width = '30',
+  isDark,
+}: DashedLineProps) => (
+  <svg
+    className="lw-inline"
+    fill="none"
+    height="2"
+    viewBox={`0 0 ${width} 2`}
+    width={width}
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <line
       stroke={isDark ? colorPalette.white : colorPalette.bottleGreenDark}
+      strokeDasharray={strokeDasharray}
       x1="0"
-      y1="1"
       x2={width}
+      y1="1"
       y2="1"
-      strokeDasharray={strokeDasharray}
     />
   </svg>
 );

package/src/ValueAtRiskWidget/components/Legend/DesktopLegend.tsx

@@ -1,37 +1,46 @@
-import React from 'react';
 import classnames from 'classnames';
-import { DataNames, DesktopLegendProps } from './types';
-import { DashedLine } from './DashedLine';
+import React from 'react';
+
 import { lineTypes } from './constants';
+import { DashedLine } from './DashedLine';
+import type { DesktopLegendProps } from './types';
+import { DataNames } from './types';
 
 const DesktopLegend = ({ data, lang, isDark }: DesktopLegendProps) => (
-  <div className={classnames('lw-pointer-events-none lw-absolute lw-top-[50px] lw-z-10  lw-p-2 lw-text-xs', {
-    'lw-left-[6px]': data[0].value < 0,
-    'lw-right-[66px]': data[0].value > 0,
-    'lw-bg-border-primary': isDark,
-    'lw-bg-bg-primary lw-shadow': !isDark,
-  })}
+  <div
+    className={classnames(
+      'lw-pointer-events-none lw-absolute lw-top-[50px] lw-z-10  lw-p-2 lw-text-xs',
+      {
+        'lw-left-[6px]': data[0].value < 0,
+        'lw-right-[66px]': data[0].value > 0,
+        'lw-bg-border-primary': isDark,
+        'lw-bg-bg-primary lw-shadow': !isDark,
+      }
+    )}
   >
     {data.map((item) => (
       <div
         key={item.id}
         className={classnames('lw-flex lw-items-center', {
-          '[&_line]:lw-stroke-border-disabled': item.id === DataNames.MAX || item.id === DataNames.MIN,
+          '[&_line]:lw-stroke-border-disabled':
+            item.id === DataNames.MAX || item.id === DataNames.MIN,
         })}
       >
         <DashedLine isDark={isDark} strokeDasharray={lineTypes[item.id]} />
         {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (
-          <div className={classnames('lw-ml-[-8px] lw-h-[8px] lw-w-[8px] lw-border-[1px] lw-border-white lw-bg-gold', {
-            'lw-rounded-full': item.value < 0,
-            'lw-bg-gold': item.id === DataNames.AVERAGE,
-            'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,
-            'lw-bg-violet-light': item.id === DataNames.THRESHOLD,
-          })}
+          <div
+            className={classnames(
+              'lw-ml-[-8px] lw-h-[8px] lw-w-[8px] lw-border-[1px] lw-border-white lw-bg-gold',
+              {
+                'lw-rounded-full': item.value < 0,
+                'lw-bg-gold': item.id === DataNames.AVERAGE,
+                'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,
+                'lw-bg-violet-light': item.id === DataNames.THRESHOLD,
+              }
+            )}
           />
         )}
-        <span className="lw-px-2">
-          {`${item.label}:`}
-        </span>
+        <span className="lw-px-2">{`${item.label}:`}</span>
         <span className="lw-grow lw-text-right">
           {`${item.value.toFixed()} ${lang('pips')}`}
         </span>

package/src/ValueAtRiskWidget/components/Legend/Legend.tsx

@@ -1,14 +1,11 @@
-import React from 'react';
-import {
-  Size,
-  useLayoutProvider,
-} from '@oanda/labs-widget-common';
+import { Size, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import {
-  DataNames, LegendProps,
-} from './types';
+import React from 'react';
+
 import { DesktopLegend } from './DesktopLegend';
 import { MobileLegend } from './MobileLegend';
+import type { LegendProps } from './types';
+import { DataNames } from './types';
 
 const Legend = ({ data }: LegendProps) => {
   const { size, isDark } = useLayoutProvider();
@@ -20,8 +17,6 @@ const Legend = ({ data }: LegendProps) => {
       {isDesktop ? (
         <>
           <DesktopLegend
-            isDark={isDark}
-            lang={lang}
             data={[
               {
                 id: DataNames.AVERAGE,
@@ -44,10 +39,10 @@ const Legend = ({ data }: LegendProps) => {
                 value: data.valueAtRiskChart!.down.max,
               },
             ]}
-          />
-          <DesktopLegend
             isDark={isDark}
             lang={lang}
+          />
+          <DesktopLegend
             data={[
               {
                 id: DataNames.AVERAGE,
@@ -70,12 +65,12 @@ const Legend = ({ data }: LegendProps) => {
                 value: data.valueAtRiskChart!.up.max,
               },
             ]}
+            isDark={isDark}
+            lang={lang}
           />
         </>
       ) : (
         <MobileLegend
-          isDark={isDark}
-          lang={lang}
           data={[
             {
               id: DataNames.AVERAGE,
@@ -102,6 +97,8 @@ const Legend = ({ data }: LegendProps) => {
               valueUp: data.valueAtRiskChart!.up.max,
             },
           ]}
+          isDark={isDark}
+          lang={lang}
         />
       )}
     </>

package/src/ValueAtRiskWidget/components/Legend/MobileLegend.tsx

@@ -1,44 +1,62 @@
-import React from 'react';
 import classnames from 'classnames';
-import { DataNames, MobileLegendProps } from './types';
-import { DashedLine } from './DashedLine';
+import React from 'react';
+
 import { lineTypes } from './constants';
+import { DashedLine } from './DashedLine';
+import type { MobileLegendProps } from './types';
+import { DataNames } from './types';
 
 const MobileLegend = ({ data, isDark, lang }: MobileLegendProps) => (
-  <div className={classnames('lw-mb-6 lw-p-2 lw-text-xs', {
-    'lw-bg-border-primary': isDark,
-    'lw-border lw-border-solid lw-border-border-primary': !isDark,
-  })}
+  <div
+    className={classnames('lw-mb-6 lw-p-2 lw-text-xs', {
+      'lw-bg-border-primary': isDark,
+      'lw-border lw-border-solid lw-border-border-primary': !isDark,
+    })}
   >
     {data.map((item) => (
       <div
         key={item.id}
         className={classnames('lw-flex lw-items-center lw-justify-between', {
-          '[&_line]:lw-stroke-border-disabled': item.id === DataNames.MAX || item.id === DataNames.MIN,
+          '[&_line]:lw-stroke-border-disabled':
+            item.id === DataNames.MAX || item.id === DataNames.MIN,
         })}
       >
         <div className="lw-mr-2 lw-flex lw-w-10 lw-items-center">
           {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (
-            <div className={classnames('lw-h-[8px] lw-w-[8px] lw-rounded-full lw-border-[1px] lw-border-white lw-bg-gold', {
-              'lw-bg-gold': item.id === DataNames.AVERAGE,
-              'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,
-              'lw-bg-violet-light': item.id === DataNames.THRESHOLD,
-            })}
+            <div
+              className={classnames(
+                'lw-h-[8px] lw-w-[8px] lw-rounded-full lw-border-[1px] lw-border-white lw-bg-gold',
+                {
+                  'lw-bg-gold': item.id === DataNames.AVERAGE,
+                  'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,
+                  'lw-bg-violet-light': item.id === DataNames.THRESHOLD,
+                }
+              )}
             />
           )}
-          <DashedLine isDark={isDark} width={(item.id === DataNames.MAX || item.id === DataNames.MIN) ? '38' : undefined} strokeDasharray={lineTypes[item.id]} />
+          <DashedLine
+            isDark={isDark}
+            strokeDasharray={lineTypes[item.id]}
+            width={
+              item.id === DataNames.MAX || item.id === DataNames.MIN
+                ? '38'
+                : undefined
+            }
+          />
           {item.id !== DataNames.MAX && item.id !== DataNames.MIN && (
-            <div className={classnames('lw-ml-[-8px] lw-h-[8px] lw-w-[8px] lw-border-[1px] lw-border-white lw-bg-gold', {
-              'lw-bg-gold': item.id === DataNames.AVERAGE,
-              'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,
-              'lw-bg-violet-light': item.id === DataNames.THRESHOLD,
-            })}
+            <div
+              className={classnames(
+                'lw-ml-[-8px] lw-h-[8px] lw-w-[8px] lw-border-[1px] lw-border-white lw-bg-gold',
+                {
+                  'lw-bg-gold': item.id === DataNames.AVERAGE,
+                  'lw-bg-turquoise-light': item.id === DataNames.MEDIAN,
+                  'lw-bg-violet-light': item.id === DataNames.THRESHOLD,
+                }
+              )}
             />
           )}
         </div>
-        <span className="lw-flex-1 lw-px-2">
-          {`${item.label}:`}
-        </span>
+        <span className="lw-flex-1 lw-px-2">{`${item.label}:`}</span>
         <span className="lw-flex-1 lw-text-right">
           {`${item.valueDown.toFixed()} ${lang('pips')}`}
         </span>