@oanda/labs-live-rates-table-widget 1.0.39 → 1.0.40

package/src/LiveRatesTableWidget/components/CardWithData/CardWithData.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
 import {
+  ArrowPosition,
   Card,
   CardHeader,
   CardRow,
-  Price,
-  ArrowPosition,
   LineChartSize,
+  Price,
   Truncate,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { ColumnsNames, CardWithDataProps } from '../../types';
-import { LineChartWithData } from '../LineChartWithData';
-import { useRecords } from '../../utils';
+import React from 'react';
+
 import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import type { CardWithDataProps } from '../../types';
+import { ColumnsNames } from '../../types';
+import { useRecords } from '../../utils';
+import { LineChartWithData } from '../LineChartWithData';
 
 const CardWithData = ({
   isLoading,
@@ -23,26 +25,35 @@ const CardWithData = ({
   division,
   isLast,
 }: CardWithDataProps) => {
-  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);
+  const { updatedRecord, error, ref } = useRecords(
+    record,
+    record.instrument ? target : null
+  );
   const { lang } = useLocale();
 
-  const checkLoading = (id: string) => isLoading || (!error && updatedRecord?.[id] === undefined);
+  const checkLoading = (id: string) =>
+    isLoading || (!error && updatedRecord?.[id] === undefined);
 
   return (
     <Card ref={ref} data-testid="card" withoutBottomBorder={!isLast}>
       <CardHeader
         isLoading={isLoading}
         number={index}
-        title={<Truncate text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />}
+        title={
+          <Truncate
+            text={record.displayName}
+            tooltipId={INSTRUMENT_TOOLTIP_ID}
+          />
+        }
       >
         {activeColumns.includes(ColumnsNames.CHART) && (
-        <LineChartWithData
-          division={division}
-          isLoading={checkLoading('instrument')}
-          size={LineChartSize.xs}
-          padding={4}
-          record={updatedRecord}
-        />
+          <LineChartWithData
+            division={division}
+            isLoading={checkLoading('instrument')}
+            padding={4}
+            record={updatedRecord}
+            size={LineChartSize.xs}
+          />
         )}
       </CardHeader>
       {activeColumns.map((item) => {
@@ -50,16 +61,18 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.SELL}
-              label={lang('sell_price')}
-              isLoading={checkLoading(ColumnsNames.SELL)}
               isError={!!error}
+              isLoading={checkLoading(ColumnsNames.SELL)}
+              label={lang('sell_price')}
             >
               <Price
                 arrowPosition={ArrowPosition.left}
-                priceMovement={updatedRecord.sellPriceMovement}
                 movementIndicator="arrow"
+                priceMovement={updatedRecord.sellPriceMovement}
               >
-                <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>
+                <span>
+                  {updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}
+                </span>
               </Price>
             </CardRow>
           );
@@ -69,16 +82,18 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.BUY}
-              label={lang('buy_price')}
-              isLoading={checkLoading(ColumnsNames.BUY)}
               isError={!!error}
+              isLoading={checkLoading(ColumnsNames.BUY)}
+              label={lang('buy_price')}
             >
               <Price
                 arrowPosition={ArrowPosition.left}
-                priceMovement={updatedRecord.buyPriceMovement}
                 movementIndicator="arrow"
+                priceMovement={updatedRecord.buyPriceMovement}
               >
-                <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>
+                <span>
+                  {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
+                </span>
               </Price>
             </CardRow>
           );
@@ -88,9 +103,9 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.DAILY_CHANGE}
-              label={lang('daily_percent_change')}
-              isLoading={checkLoading('dailyPercentChange')}
               isError={!!error}
+              isLoading={checkLoading('dailyPercentChange')}
+              label={lang('daily_percent_change')}
             >
               <span>{updatedRecord.dailyPercentChange}</span>
             </CardRow>
@@ -101,9 +116,9 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.SPREAD}
-              label={lang('spread')}
-              isLoading={checkLoading(ColumnsNames.SPREAD)}
               isError={!!error}
+              isLoading={checkLoading(ColumnsNames.SPREAD)}
+              label={lang('spread')}
             >
               <span>{updatedRecord.spread}</span>
             </CardRow>

package/src/LiveRatesTableWidget/components/Cards/Cards.tsx

@@ -1,10 +1,17 @@
-import React from 'react';
 import { Card, ChartError } from '@oanda/labs-widget-common';
+import React from 'react';
+
 import { CardWithData } from '../CardWithData/CardWithData';
-import { CardsProps } from './types';
+import type { CardsProps } from './types';
 
 const Cards = ({
-  records, target, columns, isError, isLoading, division, startIndex = 0,
+  records,
+  target,
+  columns,
+  isError,
+  isLoading,
+  division,
+  startIndex = 0,
 }: CardsProps) => (
   <>
     {isError ? (
@@ -18,14 +25,14 @@ const Cards = ({
         {records.map((record, index) => (
           <div key={`card_${startIndex + index}`}>
             <CardWithData
-              index={startIndex + index + 1}
-              division={division}
-              record={record}
-              target={target}
               activeColumns={columns}
+              division={division}
+              index={startIndex + index + 1}
               isError={isError}
-              isLoading={isLoading}
               isLast={index + 1 === records.length}
+              isLoading={isLoading}
+              record={record}
+              target={target}
             />
           </div>
         ))}

package/src/LiveRatesTableWidget/components/Cards/types.tsx

@@ -1,5 +1,5 @@
-import { Division } from '../../../gql/types/graphql';
-import { ColumnsNames, DataRecord } from '../../types';
+import type { Division } from '../../../gql/types/graphql';
+import type { ColumnsNames, DataRecord } from '../../types';
 
 export interface CardsProps {
   startIndex?: number;

package/src/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
-import {
-  LineChart, Loader, LoaderSize,
-} from '@oanda/labs-widget-common';
-import { LineChartWithDataProps } from './types';
+import { LineChart, Loader, LoaderSize } from '@oanda/labs-widget-common';
+import React from 'react';
+
 import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
-import { GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables } from '../../../gql/types/graphql';
+import type {
+  GetInstrumentsChartQuery,
+  GetInstrumentsChartQueryVariables,
+} from '../../../gql/types/graphql';
+import type { LineChartWithDataProps } from './types';
 import { getChartColor } from './utils';
 
 const LineChartWithData = ({
@@ -17,8 +19,8 @@ const LineChartWithData = ({
   isDarkMode = false,
 }: LineChartWithDataProps) => {
   const { loading, data } = useQuery<
-  GetInstrumentsChartQuery,
-  GetInstrumentsChartQueryVariables
+    GetInstrumentsChartQuery,
+    GetInstrumentsChartQueryVariables
   >(getInstrumentsChart, {
     variables: {
       instruments: [record.instrument],
@@ -38,10 +40,10 @@ const LineChartWithData = ({
       {showLoader && <Loader size={LoaderSize.md} />}
       {!showLoader && (
         <LineChart
-          padding={padding}
-          size={size}
           color={chartColor}
           data={chart}
+          padding={padding}
+          size={size}
         />
       )}
     </>

package/src/LiveRatesTableWidget/components/LineChartWithData/types.tsx

@@ -1,6 +1,7 @@
-import { LineChartSize } from '@oanda/labs-widget-common';
-import { DataRecord } from '../../types';
-import { Division } from '../../../gql/types/graphql';
+import type { LineChartSize } from '@oanda/labs-widget-common';
+
+import type { Division } from '../../../gql/types/graphql';
+import type { DataRecord } from '../../types';
 
 export interface LineChartWithDataProps {
   padding?: number;

package/src/LiveRatesTableWidget/components/LineChartWithData/utils.ts

@@ -1,4 +1,4 @@
-import { lightTheme, darkTheme } from '@oanda/labs-widget-common';
+import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
 
 export const getChartColor = (dailyChange?: string, isDarkMode?: boolean) => {
   const theme = isDarkMode ? darkTheme : lightTheme;

package/src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx

@@ -1,12 +1,19 @@
-import React from 'react';
-import classnames from 'classnames';
 import {
-  TableCell, TableRow, Price, LoaderSize, Truncate, useLayoutProvider,
+  LoaderSize,
+  Price,
+  TableCell,
+  TableRow,
+  Truncate,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import { ColumnsNames, RowWithDataProps } from '../../types';
-import { LineChartWithData } from '../LineChartWithData';
-import { useRecords } from '../../utils';
+import classnames from 'classnames';
+import React from 'react';
+
 import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import type { RowWithDataProps } from '../../types';
+import { ColumnsNames } from '../../types';
+import { useRecords } from '../../utils';
+import { LineChartWithData } from '../LineChartWithData';
 
 const RowWithData = ({
   loading,
@@ -18,37 +25,54 @@ const RowWithData = ({
   isScrolled,
 }: RowWithDataProps) => {
   const { isDark } = useLayoutProvider();
-  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);
+  const { updatedRecord, error, ref } = useRecords(
+    record,
+    record.instrument ? target : null
+  );
 
-  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);
+  const checkLoading = (id: string) =>
+    loading || (!error && updatedRecord?.[id] === undefined);
 
   return (
-    <TableRow ref={ref} isScrolled={isScrolled} hasBackgroundColor={hasBackgroundColor}>
+    <TableRow
+      ref={ref}
+      hasBackgroundColor={hasBackgroundColor}
+      isScrolled={isScrolled}
+    >
       <>
         <TableCell
-          type="text"
-          classNames={classnames(
-            'lw-font-bold',
-            {
-              '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled,
-            },
-          )}
           key={ColumnsNames.INSTRUMENT}
+          classNames={classnames('lw-font-bold', {
+            '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary':
+              isDark && isScrolled,
+          })}
           isLoading={checkLoading(ColumnsNames.INSTRUMENT)}
+          type="text"
         >
-          <Truncate maxWidth={130} text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />
+          <Truncate
+            maxWidth={130}
+            text={record.displayName}
+            tooltipId={INSTRUMENT_TOOLTIP_ID}
+          />
         </TableCell>
         {activeColumns.map((item) => {
           if (item === ColumnsNames.SELL) {
             return (
               <TableCell
                 key={ColumnsNames.SELL}
-                isLoading={checkLoading(ColumnsNames.SELL)}
-                isError={!!error}
                 additionalPaddingRight
+                isError={!!error}
+                isLoading={checkLoading(ColumnsNames.SELL)}
               >
-                <Price priceMovement={updatedRecord.sellPriceMovement} movementIndicator="arrow">
-                  <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>
+                <Price
+                  movementIndicator="arrow"
+                  priceMovement={updatedRecord.sellPriceMovement}
+                >
+                  <span>
+                    {updatedRecord.sell?.toFixed(
+                      updatedRecord.displayPrecision
+                    )}
+                  </span>
                 </Price>
               </TableCell>
             );
@@ -58,12 +82,17 @@ const RowWithData = ({
             return (
               <TableCell
                 key={ColumnsNames.BUY}
-                isLoading={checkLoading(ColumnsNames.BUY)}
-                isError={!!error}
                 additionalPaddingRight
+                isError={!!error}
+                isLoading={checkLoading(ColumnsNames.BUY)}
               >
-                <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator="arrow">
-                  <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>
+                <Price
+                  movementIndicator="arrow"
+                  priceMovement={updatedRecord.buyPriceMovement}
+                >
+                  <span>
+                    {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
+                  </span>
                 </Price>
               </TableCell>
             );
@@ -73,8 +102,8 @@ const RowWithData = ({
             return (
               <TableCell
                 key={ColumnsNames.DAILY_CHANGE}
-                isLoading={checkLoading('dailyPercentChange')}
                 isError={!!error}
+                isLoading={checkLoading('dailyPercentChange')}
               >
                 <span>{updatedRecord.dailyPercentChange}</span>
               </TableCell>
@@ -83,12 +112,16 @@ const RowWithData = ({
 
           if (item === ColumnsNames.CHART) {
             return (
-              <td data-testid="chart-table-cell" className="lw-relative lw-px-3 lw-py-0 lw-text-right" key={ColumnsNames.CHART}>
+              <td
+                key={ColumnsNames.CHART}
+                className="lw-relative lw-px-3 lw-py-0 lw-text-right"
+                data-testid="chart-table-cell"
+              >
                 <div className="lw-flex lw-justify-center">
                   <LineChartWithData
-                    record={updatedRecord}
-                    isLoading={checkLoading('instrument')}
                     division={division}
+                    isLoading={checkLoading('instrument')}
+                    record={updatedRecord}
                   />
                 </div>
               </td>
@@ -99,8 +132,8 @@ const RowWithData = ({
             return (
               <TableCell
                 key={ColumnsNames.SPREAD}
-                isLoading={checkLoading(ColumnsNames.SPREAD)}
                 isError={!!error}
+                isLoading={checkLoading(ColumnsNames.SPREAD)}
                 loaderSize={LoaderSize.sm}
               >
                 <span>{updatedRecord.spread}</span>

package/src/LiveRatesTableWidget/components/index.ts

@@ -1,4 +1,4 @@
+export * from './Cards';
 export * from './CardWithData';
-export * from './RowWithData';
 export * from './LineChartWithData';
-export * from './Cards';
+export * from './RowWithData';

package/src/LiveRatesTableWidget/config.ts

@@ -1,4 +1,5 @@
 import { Size } from '@oanda/labs-widget-common';
+
 import { ColumnsNames, View } from './types';
 
 const headerConfig = {
@@ -33,7 +34,4 @@ const sizeConfig = {
   [View.TABLE]: Size.DESKTOP,
 };
 
-export {
-  headerConfig,
-  sizeConfig,
-};
+export { headerConfig, sizeConfig };

package/src/LiveRatesTableWidget/constant.ts

@@ -15,5 +15,8 @@ const DEFAULT_COLUMNS = [
 const INSTRUMENT_TOOLTIP_ID = 'instrument_tooltip_id';
 
 export {
-  DEFAULT_COUNT, DEFAULT_COLUMNS, DEFAULT_TOTAL_COUNT, INSTRUMENT_TOOLTIP_ID,
+  DEFAULT_COLUMNS,
+  DEFAULT_COUNT,
+  DEFAULT_TOTAL_COUNT,
+  INSTRUMENT_TOOLTIP_ID,
 };

package/src/LiveRatesTableWidget/render.tsx

@@ -1,55 +1,73 @@
+import type { Theme } from '@oanda/labs-widget-common';
+import { validateLocale, validateToolParams } from '@oanda/labs-widget-common';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
-import { LiveRatesTableWidget } from './LiveRatesTableWidget';
+
 import { Division } from '../gql/types/graphql';
+import { LiveRatesTableWidget } from './LiveRatesTableWidget';
 
-const {
-  graphqlUrl,
-  liveRatesUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl, liveRatesUrl } = window.widgetsConfig || {};
 
-const liveRatesTableParamsElements = document.querySelectorAll('div[data-live-rates-table-params]');
+const liveRatesTableParamsElements = document.querySelectorAll(
+  'div[data-live-rates-table-params]'
+);
 
 liveRatesTableParamsElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-live-rates-table-params');
   const mode = element.getAttribute('data-mode');
-  const {
-    instruments, columns, division, locale, view,
-  } = JSON.parse(params as string);
+  const { instruments, columns, division, locale, view } = JSON.parse(
+    params as string
+  );
 
-  const isParamError = validateToolParams({
-    division, locale, graphqlUrl, liveRatesUrl, instruments, columns,
-  }, [{
-    name: 'locale',
-    valueCheck: (value) => validateLocale(value),
-  }, {
-    name: 'division',
-    valueCheck: (value) => Object.values(Division).includes(value),
-  }, {
-    name: 'instruments',
-    valueCheck: (value) => (value as string[]).length > 0 && (value as string[]).length <= 10,
-  }, {
-    name: 'columns',
-    valueCheck: (value) => (value as string[]).length > 0,
-  }, {
-    name: 'graphqlUrl',
-  }, {
-    name: 'liveRatesUrl',
-  }]);
+  const isParamError = validateToolParams(
+    {
+      division,
+      locale,
+      graphqlUrl,
+      liveRatesUrl,
+      instruments,
+      columns,
+    },
+    [
+      {
+        name: 'locale',
+        valueCheck: (value: string | undefined) => validateLocale(value),
+      },
+      {
+        name: 'division',
+        valueCheck: (value: Division) =>
+          Object.values(Division).includes(value),
+      },
+      {
+        name: 'instruments',
+        valueCheck: (value) =>
+          (value as string[]).length > 0 && (value as string[]).length <= 10,
+      },
+      {
+        name: 'columns',
+        valueCheck: (value) => (value as string[]).length > 0,
+      },
+      {
+        name: 'graphqlUrl',
+      },
+      {
+        name: 'liveRatesUrl',
+      },
+    ]
+  );
 
   root.render(
     <LiveRatesTableWidget
-      graphqlUrl={graphqlUrl}
-      liveRatesUrl={liveRatesUrl}
+      columns={columns}
       division={division}
+      graphqlUrl={graphqlUrl}
       instruments={instruments}
-      columns={columns}
+      isParamError={isParamError}
+      liveRatesUrl={liveRatesUrl}
       locale={locale}
       theme={mode as Theme}
-      isParamError={isParamError}
       view={view}
-    />,
+    />
   );
 });

package/src/LiveRatesTableWidget/types.tsx

@@ -1,8 +1,9 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { Division } from '../gql/types/graphql';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+
+import type { Division } from '../gql/types/graphql';
 
-export { Locale } from '@oanda/mono-i18n';
 export { Division } from '../gql/types/graphql';
+export { Locale } from '@oanda/mono-i18n';
 
 export enum View {
   TABLE = 'table',
@@ -38,7 +39,7 @@ export interface Sentiment {
   longPercent: number;
 }
 
-export type EmptyRecord = Record<any, never>;
+export type EmptyRecord = Record<string, never>;
 
 export interface DataRecord {
   [key: string]: string | number | undefined;

package/src/LiveRatesTableWidget/utils.ts

@@ -1,21 +1,28 @@
-import { useState, useEffect } from 'react';
-import { HeaderColumns, LiveRatesErrorMessage, useLiveRatesMessage } from '@oanda/labs-widget-common';
+import type {
+  HeaderColumns,
+  LiveRatesErrorMessage,
+} from '@oanda/labs-widget-common';
+import { useLiveRatesMessage } from '@oanda/labs-widget-common';
+import { useEffect, useState } from 'react';
 import { useIntersectionObserver } from 'usehooks-ts';
-import { ColumnsNames, DataRecord, EmptyRecord } from './types';
+
+import type { ValidateInstrumentsQuery } from '../gql/types/graphql';
 import { headerConfig } from './config';
-import { ValidateInstrumentsQuery } from '../gql/types/graphql';
+import type { DataRecord, EmptyRecord } from './types';
+import { ColumnsNames } from './types';
 
-const getRecords = (data: ValidateInstrumentsQuery) => data?.mapInstrumentNames?.map((item) => ({
-  instrument: item?.name || '',
-  displayName: item?.displayName || '',
-}));
+const getRecords = (data: ValidateInstrumentsQuery) =>
+  data?.mapInstrumentNames?.map((item) => ({
+    instrument: item?.name || '',
+    displayName: item?.displayName || '',
+  }));
 
-// eslint-disable-next-line max-len
-const getHeaderConfig = (activeColumns: ColumnsNames[]): HeaderColumns[] => [ColumnsNames.INSTRUMENT, ...activeColumns].map((item) => headerConfig[item]);
+const getHeaderConfig = (activeColumns: ColumnsNames[]): HeaderColumns[] =>
+  [ColumnsNames.INSTRUMENT, ...activeColumns].map((item) => headerConfig[item]);
 
 const useRecords = (
   record: DataRecord | EmptyRecord,
-  target: EventTarget | null,
+  target: EventTarget | null
 ) => {
   const [updatedRecord, setUpdatedRecord] = useState<DataRecord>({
     displayName: record.displayName,
@@ -28,7 +35,7 @@ const useRecords = (
 
   const { update, error: liveRatesError } = useLiveRatesMessage(
     record.instrument,
-    target,
+    target
   );
 
   useEffect(() => {
@@ -56,8 +63,4 @@ const useRecords = (
   };
 };
 
-export {
-  getRecords,
-  getHeaderConfig,
-  useRecords,
-};
+export { getHeaderConfig, getRecords, useRecords };