@oanda/labs-currency-strength-widget 1.0.91 → 1.0.92

package/src/CurrencyStrengthWidget/ChartsWithData.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
-import { useLocale } from '@oanda/mono-i18n';
 import {
   ChartError,
   LastUpdated,
@@ -9,22 +7,29 @@ import {
   SpinnerSize,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import classnames from 'classnames';
+import React from 'react';
+
 import { getCurrencyStrength } from '../gql/getCurrencyStrength';
-import { GetCurrencyStrengthQuery } from '../gql/types/graphql';
+import type { GetCurrencyStrengthQuery } from '../gql/types/graphql';
 import { Chart } from './components/Chart';
 import { sortCurrencies } from './components/Chart/formatters';
-import { WidgetProps } from './types';
+import type { WidgetProps } from './types';
 
 const ChartWithData = ({ currency }: WidgetProps) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { lang } = useLocale();
-  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {
-    fetchPolicy: 'cache-and-network',
-  });
+  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(
+    getCurrencyStrength,
+    {
+      fetchPolicy: 'cache-and-network',
+    }
+  );
 
-  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;
+  const showChart =
+    data?.currencyStrength && data?.currencyStrength?.length > 0;
   const showError = data?.currencyStrength?.length === 0 || error;
 
   const currencyData = currency
@@ -33,46 +38,60 @@ const ChartWithData = ({ currency }: WidgetProps) => {
 
   return (
     <>
-      {loading
-      && (
-        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {
-          'lw-h-[461px]': !currency,
-          'lw-h-[135px]': currency,
-        })}
+      {loading && (
+        <div
+          className={classnames(
+            'lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary',
+            {
+              'lw-h-[461px]': !currency,
+              'lw-h-[135px]': currency,
+            }
+          )}
         >
           <Spinner size={SpinnerSize.lg} />
         </div>
       )}
       {!loading && showChart && (
         <div
-          data-testid="currency-strength-chart-wrapper"
           className={classnames('lw-grid lw-place-content-center lw-gap-7', {
             'lw-grid-cols-3 ': isDesktop && !currency,
             'lw-grid-cols-1': !isDesktop || currency,
           })}
+          data-testid="currency-strength-chart-wrapper"
         >
-          {currencyData && currencyData.map((item) => (
-            <div key={item.currency} className="lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center">
-              <Chart
-                currency={item.currency}
-                values={item.strengthRelation?.slice().sort(sortCurrencies)!}
-              />
-            </div>
-          ))}
+          {currencyData &&
+            currencyData.map((item) => (
+              <div
+                key={item.currency}
+                className="lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center"
+              >
+                <Chart
+                  currency={item.currency}
+                  values={item.strengthRelation?.slice().sort(sortCurrencies)!}
+                />
+              </div>
+            ))}
         </div>
       )}
       {!loading && showError && (
-        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {
-          'lw-h-[425px]': !currency,
-          'lw-h-[135px]': currency,
-        })}
+        <div
+          className={classnames(
+            'lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary',
+            {
+              'lw-h-[425px]': !currency,
+              'lw-h-[135px]': currency,
+            }
+          )}
         >
           <ChartError />
         </div>
       )}
       {!loading && !showError && (
         <div className="lw-mt-2 lw-h-8">
-          <LastUpdated timestamp={data?.currencyStrength![0]?.updatedAt} labelCallback={lang} />
+          <LastUpdated
+            labelCallback={lang}
+            timestamp={data?.currencyStrength![0]?.updatedAt}
+          />
         </div>
       )}
     </>

package/src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx

@@ -1,12 +1,18 @@
-import React from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
-import { CurrencyStrengthConfig } from './types';
+import React from 'react';
+
 import { translations } from '../translations';
 import { Main } from './Main';
+import type { CurrencyStrengthConfig } from './types';
 
 const CurrencyStrengthWidget = ({
-  graphqlUrl, currency, locale, theme, isParamError, logoLink,
+  graphqlUrl,
+  currency,
+  locale,
+  theme,
+  isParamError,
+  logoLink,
 }: CurrencyStrengthConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -15,15 +21,15 @@ const CurrencyStrengthWidget = ({
 
   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 currency={currency} theme={theme} />
       </WidgetWrapper>

package/src/CurrencyStrengthWidget/Main.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { useLocale } from '@oanda/mono-i18n';
 import { useLayoutProvider } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+
 import { ChartWithData } from './ChartsWithData';
-import { WidgetProps } from './types';
+import type { WidgetProps } from './types';
 
 const Main = ({ currency }: WidgetProps) => {
   const { lang } = useLocale();
@@ -11,12 +12,12 @@ const Main = ({ currency }: WidgetProps) => {
   return (
     <>
       {size && (
-      <div data-testid="currency-strength-wrapper">
-        <div className="lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold">
-          <span>{`${lang('daily')} (${lang('minute', { count: 5 })})`}</span>
+        <div data-testid="currency-strength-wrapper">
+          <div className="lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold">
+            <span>{`${lang('daily')} (${lang('minute', { count: 5 })})`}</span>
+          </div>
+          <ChartWithData currency={currency} />
         </div>
-        <ChartWithData currency={currency} />
-      </div>
       )}
     </>
   );

package/src/CurrencyStrengthWidget/components/Chart/Chart.tsx

@@ -1,18 +1,24 @@
-import React from 'react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import * as echarts from 'echarts/core';
-import { BarChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
 import {
-  GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,
-} from 'echarts/components';
+  getChartTheme,
+  Theme,
+  useLayoutProvider,
+} from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { Theme, useLayoutProvider, getChartTheme } from '@oanda/labs-widget-common';
+import { BarChart } from 'echarts/charts';
 import {
-  CHART_HEIGHT,
-} from './constants';
+  GraphicComponent,
+  GridSimpleComponent,
+  TitleComponent,
+  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 from 'react';
+
+import { CHART_HEIGHT } from './constants';
 import { getOption } from './getOption';
-import { ChartProps } from './types';
+import type { ChartProps } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -33,14 +39,17 @@ const Chart = ({ values, currency }: ChartProps) => {
   return (
     <ReactEChartsCore
       echarts={echarts}
-      theme={isDark ? 'dark_theme' : 'light_theme'}
+      option={getOption({
+        values,
+        currency,
+        lang,
+        isDark,
+      })}
       style={{
         height: `${CHART_HEIGHT}px`,
         width: '100%',
       }}
-      option={getOption({
-        values, currency, lang, isDark,
-      })}
+      theme={isDark ? 'dark_theme' : 'light_theme'}
     />
   );
 };

package/src/CurrencyStrengthWidget/components/Chart/constants.tsx

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+
 import { CurrencyName } from '../../../gql/types/graphql';
 
 export const X_LABEL_SIZE = 24;

package/src/CurrencyStrengthWidget/components/Chart/formatters.ts

@@ -1,5 +1,5 @@
 import { instrumentsConfig } from './constants';
-import { SortingParams, TooltipFormatterParams } from './types';
+import type { SortingParams, TooltipFormatterParams } from './types';
 
 const tooltipFormatter = ({
   marker,
@@ -13,10 +13,7 @@ const tooltipFormatter = ({
   <div style="display:flex;align-items:center;">${marker} ${value}%</div>
 </div>`;
 
-const sortCurrencies = (a: SortingParams, b: SortingParams) => instrumentsConfig
-  .indexOf(a.currency) - instrumentsConfig.indexOf(b.currency);
+const sortCurrencies = (a: SortingParams, b: SortingParams) =>
+  instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency);
 
-export {
-  tooltipFormatter,
-  sortCurrencies,
-};
+export { sortCurrencies, tooltipFormatter };

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

@@ -1,17 +1,21 @@
 import { getGridLines } from '@oanda/labs-widget-common';
+
 import {
   CHART_HEIGHT,
   CHART_WIDTH,
-  X_LABEL_SIZE,
-  Y_LABEL_SIZE,
   darkBarColors,
   lightBarColors,
+  X_LABEL_SIZE,
+  Y_LABEL_SIZE,
 } from './constants';
-import { GetOptionProps } from './types';
 import { tooltipFormatter } from './formatters';
+import type { GetOptionProps } from './types';
 
 export const getOption = ({
-  values, currency, isDark, lang,
+  values,
+  currency,
+  isDark,
+  lang,
 }: GetOptionProps) => {
   const currencies = values.map((item) => item.currency);
   const percentages = values.map((item) => item.percentage);
@@ -45,21 +49,21 @@ export const getOption = ({
         bottom: `${X_LABEL_SIZE}px`,
       },
     ],
-    graphic: [
-      ...gridLines,
-    ],
+    graphic: [...gridLines],
     tooltip: {
       trigger: 'axis',
-      formatter: (
-        [{ marker, name, value }]
-        : { marker: string, name: string, value: number }[],
-      ) => tooltipFormatter({
-        lang,
-        currency,
-        marker,
-        name,
-        value,
-      }),
+      formatter: ([{ marker, name, value }]: {
+        marker: string;
+        name: string;
+        value: number;
+      }[]) =>
+        tooltipFormatter({
+          lang,
+          currency,
+          marker,
+          name,
+          value,
+        }),
       axisPointer: {
         axis: 'x',
       },
@@ -97,7 +101,7 @@ export const getOption = ({
         },
         itemStyle: {
           opacity: 1,
-          color: ({ data } : { data: number }) => {
+          color: ({ data }: { data: number }) => {
             if (data > 0) {
               return barColors.positive;
             }

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

@@ -1,4 +1,4 @@
-import { CurrencyName } from '../../../gql/types/graphql';
+import type { CurrencyName } from '../../../gql/types/graphql';
 
 export interface CSChartDataValues {
   currency: CurrencyName;
@@ -17,13 +17,13 @@ export interface TooltipFormatterParams {
   lang: (label: string) => string;
 }
 
-export type GetOptionProps = {
-  values: CSChartDataValues[],
-  currency: CurrencyName,
-  lang: (label: string) => string,
+export interface GetOptionProps {
+  values: CSChartDataValues[];
+  currency: CurrencyName;
+  lang: (label: string) => string;
   isDark: boolean;
-};
+}
 
-export type SortingParams = {
+export interface SortingParams {
   currency: CurrencyName;
-};
+}

package/src/CurrencyStrengthWidget/render.tsx

@@ -1,38 +1,40 @@
+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 { CurrencyStrengthWidget } from './CurrencyStrengthWidget';
 
-const {
-  graphqlUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl } = window.widgetsConfig || {};
 
-const currencyStrengthParamsElements = document.querySelectorAll('div[data-currency-strength-params]');
+const currencyStrengthParamsElements = document.querySelectorAll(
+  'div[data-currency-strength-params]'
+);
 
 currencyStrengthParamsElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-currency-strength-params');
   const mode = element.getAttribute('data-mode');
-  const {
-    currency, locale, logoLink,
-  } = JSON.parse(params as string);
+  const { currency, locale, logoLink } = JSON.parse(params as string);
 
   const isParamError = validateToolParams({ locale, graphqlUrl }, [
     {
       name: 'locale',
-      valueCheck: (value) => validateLocale(value),
-    }, {
+      valueCheck: (value: string | undefined) => validateLocale(value),
+    },
+    {
       name: 'graphqlUrl',
-    }]);
+    },
+  ]);
 
   root.render(
     <CurrencyStrengthWidget
+      currency={currency}
       graphqlUrl={graphqlUrl}
-      locale={locale}
-      theme={mode as Theme}
       isParamError={isParamError}
-      currency={currency}
+      locale={locale}
       logoLink={logoLink}
-    />,
+      theme={mode as Theme}
+    />
   );
 });

package/src/CurrencyStrengthWidget/types.ts

@@ -1,4 +1,4 @@
-import { Theme, WidgetConfig } from '@oanda/labs-widget-common';
+import type { Theme, WidgetConfig } from '@oanda/labs-widget-common';
 
 export interface CurrencyStrengthConfig extends WidgetConfig {
   currency?: string;

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,7 +13,8 @@ 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 GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n      updatedAt\n    }\n  }\n": types.GetCurrencyStrengthDocument,
+  '\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n      updatedAt\n    }\n  }\n':
+    types.GetCurrencyStrengthDocument,
 };
 
 /**
@@ -33,10 +34,13 @@ 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 GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n      updatedAt\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n      updatedAt\n    }\n  }\n'
+): (typeof documents)['\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n      updatedAt\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;