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

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

@@ -1,18 +1,24 @@
-import React, { useContext } 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, ThemeContext, 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,
@@ -28,19 +34,22 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values, currency }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark } = useContext(ThemeContext);
+  const { isDark } = useLayoutProvider();
 
   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;