@oanda/labs-order-book-widget 1.0.173 → 1.0.175

package/src/OrderBookWidget/config.ts

@@ -1,67 +1,87 @@
 import { BookType } from '../gql/types/graphql';
 import { InstrumentId } from './types';
 
-const navigationConfig = [{
-  id: BookType.Order,
-  label: 'order_book',
-}, {
-  id: BookType.Position,
-  label: 'position_book',
-}];
+const navigationConfig = [
+  {
+    id: BookType.Order,
+    label: 'order_book',
+  },
+  {
+    id: BookType.Position,
+    label: 'position_book',
+  },
+];
 
-const instrumentSelectConfigOC = [{
-  id: InstrumentId.EUR_AUD,
-  label: 'EUR/AUD',
-}, {
-  id: InstrumentId.EUR_GBP,
-  label: 'EUR/GBP',
-}, {
-  id: InstrumentId.EUR_JPY,
-  label: 'EUR/JPY',
-}, {
-  id: InstrumentId.EUR_USD,
-  label: 'EUR/USD',
-}, {
-  id: InstrumentId.EUR_CHF,
-  label: 'EUR/CHF',
-}, {
-  id: InstrumentId.USD_CHF,
-  label: 'USD/CHF',
-}, {
-  id: InstrumentId.USD_JPY,
-  label: 'USD/JPY',
-}, {
-  id: InstrumentId.USD_CAD,
-  label: 'USD/CAD',
-}, {
-  id: InstrumentId.GBP_USD,
-  label: 'GBP/USD',
-}, {
-  id: InstrumentId.GBP_JPY,
-  label: 'GBP/JPY',
-}, {
-  id: InstrumentId.GBP_CHF,
-  label: 'GBP/CHF',
-}, {
-  id: InstrumentId.AUD_JPY,
-  label: 'AUD/JPY',
-}, {
-  id: InstrumentId.AUD_USD,
-  label: 'AUD/USD',
-}, {
-  id: InstrumentId.NZD_USD,
-  label: 'NZD/USD',
-}];
+const instrumentSelectConfigOC = [
+  {
+    id: InstrumentId.EUR_AUD,
+    label: 'EUR/AUD',
+  },
+  {
+    id: InstrumentId.EUR_GBP,
+    label: 'EUR/GBP',
+  },
+  {
+    id: InstrumentId.EUR_JPY,
+    label: 'EUR/JPY',
+  },
+  {
+    id: InstrumentId.EUR_USD,
+    label: 'EUR/USD',
+  },
+  {
+    id: InstrumentId.EUR_CHF,
+    label: 'EUR/CHF',
+  },
+  {
+    id: InstrumentId.USD_CHF,
+    label: 'USD/CHF',
+  },
+  {
+    id: InstrumentId.USD_JPY,
+    label: 'USD/JPY',
+  },
+  {
+    id: InstrumentId.USD_CAD,
+    label: 'USD/CAD',
+  },
+  {
+    id: InstrumentId.GBP_USD,
+    label: 'GBP/USD',
+  },
+  {
+    id: InstrumentId.GBP_JPY,
+    label: 'GBP/JPY',
+  },
+  {
+    id: InstrumentId.GBP_CHF,
+    label: 'GBP/CHF',
+  },
+  {
+    id: InstrumentId.AUD_JPY,
+    label: 'AUD/JPY',
+  },
+  {
+    id: InstrumentId.AUD_USD,
+    label: 'AUD/USD',
+  },
+  {
+    id: InstrumentId.NZD_USD,
+    label: 'NZD/USD',
+  },
+];
 
 const instrumentSelectConfig = [
   ...instrumentSelectConfigOC,
   {
     id: InstrumentId.XAU_USD,
     label: 'XAU/USD',
-  }, {
+  },
+  {
     id: InstrumentId.XAG_USD,
     label: 'XAG/USD',
-  }];
+  },
+];
 
 const instrumentPrecisionConfig: Record<InstrumentId, number> = {
   [InstrumentId.EUR_AUD]: 5,
@@ -82,5 +102,8 @@ const instrumentPrecisionConfig: Record<InstrumentId, number> = {
   [InstrumentId.XAG_USD]: 5,
 };
 export {
-  navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig, instrumentSelectConfigOC,
+  instrumentPrecisionConfig,
+  instrumentSelectConfig,
+  instrumentSelectConfigOC,
+  navigationConfig,
 };

package/src/OrderBookWidget/render.tsx

@@ -1,9 +1,12 @@
+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 { OrderBookWidget } from './OrderBookWidget';
+
 import { Division } from '../gql/types/graphql';
-import { instrumentSelectConfigOC, instrumentSelectConfig } from './config';
+import { instrumentSelectConfig, instrumentSelectConfigOC } from './config';
+import { OrderBookWidget } from './OrderBookWidget';
+import type { InstrumentId } from './types';
 
 const {
   graphqlUrl: configGraphQl,
@@ -13,79 +16,105 @@ const {
   division: configDivision,
 } = window.volatilityChartWidgetConfig || {};
 
-const {
-  graphqlUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl } = window.widgetsConfig || {};
 
-const orderBookElements = document.querySelectorAll('div[data-order-book-params]');
+const orderBookElements = document.querySelectorAll(
+  'div[data-order-book-params]'
+);
 
 if (orderBookElements.length > 0) {
   orderBookElements.forEach((element) => {
     const root = createRoot(element);
     const params = element.getAttribute('data-order-book-params');
     const mode = element.getAttribute('data-mode');
-    const {
-      instrument, locale, division, logoLink,
-    } = JSON.parse(params as string);
+    const { instrument, locale, division, logoLink } = JSON.parse(
+      params as string
+    );
 
-    const isParamError = instrument ? validateToolParams({
-      locale, graphqlUrl, division, instrument,
-    }, [
-      {
-        name: 'locale',
-        valueCheck: (value) => validateLocale(value),
-      }, {
-        name: 'graphqlUrl',
-      }, {
-        name: 'division',
-        valueCheck: (value) => Object.values(Division).includes(value),
-      }, {
-        name: 'instrument',
-        valueCheck: (value) => {
-          const acceptableInstruments = division === Division.Oc
-            ? instrumentSelectConfigOC
-            : instrumentSelectConfig;
+    const isParamError = instrument
+      ? validateToolParams(
+          {
+            locale,
+            graphqlUrl,
+            division,
+            instrument,
+          },
+          [
+            {
+              name: 'locale',
+              valueCheck: (value: string | undefined) => validateLocale(value),
+            },
+            {
+              name: 'graphqlUrl',
+            },
+            {
+              name: 'division',
+              valueCheck: (value: Division) =>
+                Object.values(Division).includes(value),
+            },
+            {
+              name: 'instrument',
+              valueCheck: (value) => {
+                const acceptableInstruments =
+                  division === Division.Oc
+                    ? instrumentSelectConfigOC
+                    : instrumentSelectConfig;
 
-          return Object.values(
-            acceptableInstruments.map((x) => x.id),
-          ).includes(value.replace(/\/|_/g, ''));
-        },
-      },
-    ]) : validateToolParams({
-      locale, graphqlUrl, division, logoLink,
-    }, [
-      {
-        name: 'locale',
-        valueCheck: (value) => validateLocale(value),
-      }, {
-        name: 'graphqlUrl',
-      }, {
-        name: 'division',
-        valueCheck: (value) => Object.values(Division).includes(value),
-      }]);
+                return Object.values(
+                  acceptableInstruments.map((x) => x.id)
+                ).includes(value.replace(/\/|_/g, '') as InstrumentId);
+              },
+            },
+          ]
+        )
+      : validateToolParams(
+          {
+            locale,
+            graphqlUrl,
+            division,
+            logoLink,
+          },
+          [
+            {
+              name: 'locale',
+              valueCheck: (value: string | undefined) => validateLocale(value),
+            },
+            {
+              name: 'graphqlUrl',
+            },
+            {
+              name: 'division',
+              valueCheck: (value: Division) =>
+                Object.values(Division).includes(value),
+            },
+          ]
+        );
 
     root.render(
       <OrderBookWidget
-        locale={locale}
+        division={division}
         graphqlUrl={graphqlUrl}
         instrument={instrument}
-        theme={mode as Theme}
         isParamError={isParamError}
-        division={division}
+        locale={locale}
         logoLink={logoLink}
-      />,
+        theme={mode as Theme}
+      />
     );
   });
 } else {
-  const container = document.getElementById(configRenderElementId);
+  const container: HTMLElement | null = document.querySelector(
+    configRenderElementId
+  );
+
   const root = createRoot(container!);
 
   root.render(
     <OrderBookWidget
-      locale={configLocale}
+      division={configDivision}
       graphqlUrl={configGraphQl}
       instrument={configInstrument}
-      division={configDivision}
-    />,
+      locale={configLocale}
+    />
   );
 }

package/src/OrderBookWidget/types.ts

@@ -1,5 +1,6 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { BookType, Division } from '../gql/types/graphql';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+
+import type { BookType, Division } from '../gql/types/graphql';
 
 export interface OrderBookWidgetConfig extends WidgetConfig {
   instrument: InstrumentId;

package/src/gql/getOrderPositionBooks.ts

@@ -1,7 +1,11 @@
 import { gql } from '@apollo/client';
 
 const getOrderPositionBooks = gql`
-  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {
+  query GetOrderPositionBooks(
+    $instrument: String!
+    $bookType: BookType!
+    $recentHours: Int
+  ) {
     orderPositionBooks(
       instrument: $instrument
       bookType: $bookType

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 GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n": types.GetOrderPositionBooksDocument,
+  '\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n':
+    types.GetOrderPositionBooksDocument,
 };
 
 /**
@@ -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 GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\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;