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

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

package/src/gql/types/fragment-masking.ts

@@ -1,18 +1,21 @@
-import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+  ResultOf,
+  DocumentTypeDecoration,
+  TypedDocumentNode,
+} from '@graphql-typed-document-node/core';
 import { FragmentDefinitionNode } from 'graphql';
 import { Incremental } from './graphql';
 
-
-export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
-  infer TType,
-  any
->
-  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
-    ? TKey extends string
-      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+export type FragmentType<
+  TDocumentType extends DocumentTypeDecoration<any, any>,
+> =
+  TDocumentType extends DocumentTypeDecoration<infer TType, any>
+    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+      ? TKey extends string
+        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        : never
       : never
-    : never
-  : never;
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
@@ -22,7 +25,10 @@ export function useFragment<TType>(
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | null
+    | undefined
 ): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
@@ -32,35 +38,49 @@ export function useFragment<TType>(
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+  fragmentType:
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
 ): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
 
-
 export function makeFragmentData<
   F extends DocumentTypeDecoration<any, any>,
-  FT extends ResultOf<F>
+  FT extends ResultOf<F>,
 >(data: FT, _fragment: F): FragmentType<F> {
   return data as FragmentType<F>;
 }
 export function isFragmentReady<TQuery, TFrag>(
   queryNode: DocumentTypeDecoration<TQuery, any>,
   fragmentNode: TypedDocumentNode<TFrag>,
-  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+  data:
+    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
+    | null
+    | undefined
 ): data is FragmentType<typeof fragmentNode> {
-  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
-    ?.deferredFields;
+  const deferredFields = (
+    queryNode as {
+      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };
+    }
+  ).__meta__?.deferredFields;
 
   if (!deferredFields) return true;
 
-  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragDef = fragmentNode.definitions[0] as
+    | FragmentDefinitionNode
+    | undefined;
   const fragName = fragDef?.name?.value;
 
   const fields = (fragName && deferredFields[fragName]) || [];
-  return fields.length > 0 && fields.every(field => data && field in data);
+  return fields.length > 0 && fields.every((field) => data && field in data);
 }

package/src/gql/types/gql.ts

@@ -13,8 +13,10 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n": types.GetInstrumentsChartDocument,
-    "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": types.ValidateInstrumentsDocument,
+  '\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n':
+    types.GetInstrumentsChartDocument,
+  '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
+    types.ValidateInstrumentsDocument,
 };
 
 /**
@@ -34,14 +36,19 @@ export 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 function graphql(source: "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n"): (typeof documents)["\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n'
+): (typeof documents)['\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"): (typeof documents)["\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'
+): (typeof documents)['\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }
 
-export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;