@oanda/labs-crowd-view-widget 1.0.1

package/src/CrowdViewWidget/config.ts

@@ -0,0 +1,130 @@
+import { BookType } from '../gql/types/graphql';
+import { GranularityId, InstrumentId } from './types';
+
+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 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,
+  [InstrumentId.EUR_GBP]: 5,
+  [InstrumentId.EUR_JPY]: 3,
+  [InstrumentId.EUR_USD]: 5,
+  [InstrumentId.EUR_CHF]: 5,
+  [InstrumentId.USD_CHF]: 5,
+  [InstrumentId.USD_JPY]: 3,
+  [InstrumentId.USD_CAD]: 5,
+  [InstrumentId.GBP_USD]: 5,
+  [InstrumentId.GBP_JPY]: 3,
+  [InstrumentId.GBP_CHF]: 5,
+  [InstrumentId.AUD_JPY]: 3,
+  [InstrumentId.AUD_USD]: 5,
+  [InstrumentId.NZD_USD]: 5,
+  [InstrumentId.XAU_USD]: 3,
+  [InstrumentId.XAG_USD]: 5,
+};
+
+const granularitySelectConfig = [
+  {
+    id: GranularityId.M5,
+    label: '5_minutes',
+  },
+  {
+    id: GranularityId.M15,
+    label: '15_minutes',
+  },
+  {
+    id: GranularityId.H1,
+    label: '1_hour',
+  },
+  {
+    id: GranularityId.D1,
+    label: '1_day',
+  },
+];
+
+export {
+  granularitySelectConfig,
+  instrumentPrecisionConfig,
+  instrumentSelectConfig,
+  instrumentSelectConfigOC,
+  navigationConfig,
+};

package/src/CrowdViewWidget/index.ts

@@ -0,0 +1,2 @@
+export * from './CrowdViewWidget';
+export * from './types';

package/src/CrowdViewWidget/render.tsx

@@ -0,0 +1,51 @@
+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 { Division } from '../gql/types/graphql';
+import { CrowdViewWidget } from './CrowdViewWidget';
+
+const { graphqlUrl } = window.widgetsConfig || {};
+
+const dataCrowdViewParamsElements = document.querySelectorAll(
+  'div[data-crowd-view-params]'
+);
+
+dataCrowdViewParamsElements.forEach((element) => {
+  const root = createRoot(element);
+  const params = element.getAttribute('data-crowd-view-params');
+  const mode = element.getAttribute('data-mode');
+  const { division, locale } = JSON.parse(params as string);
+
+  const isParamError = validateToolParams(
+    {
+      division,
+      locale,
+      graphqlUrl,
+    },
+    [
+      {
+        name: 'locale',
+        valueCheck: (value: string | undefined) => validateLocale(value),
+      },
+      {
+        name: 'division',
+        valueCheck: (value: Division) =>
+          Object.values(Division).includes(value),
+      },
+      {
+        name: 'graphqlUrl',
+      },
+    ]
+  );
+
+  root.render(
+    <CrowdViewWidget
+      graphqlUrl={graphqlUrl}
+      isParamError={isParamError}
+      locale={locale}
+      theme={mode as Theme}
+    />
+  );
+});

package/src/CrowdViewWidget/types.ts

@@ -0,0 +1,36 @@
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+
+import type { Division } from '../gql/types/graphql';
+
+export interface CrowdViewConfig extends WidgetConfig {}
+
+export interface MainProps {
+  instrument?: InstrumentId;
+  division: Division;
+}
+
+export enum InstrumentId {
+  EUR_AUD = 'EURAUD',
+  EUR_GBP = 'EURGBP',
+  EUR_JPY = 'EURJPY',
+  EUR_USD = 'EURUSD',
+  EUR_CHF = 'EURCHF',
+  USD_CHF = 'USDCHF',
+  USD_JPY = 'USDJPY',
+  USD_CAD = 'USDCAD',
+  GBP_USD = 'GBPUSD',
+  GBP_JPY = 'GBPJPY',
+  GBP_CHF = 'GBPCHF',
+  AUD_JPY = 'AUDJPY',
+  AUD_USD = 'AUDUSD',
+  NZD_USD = 'NZDUSD',
+  XAU_USD = 'XAUUSD',
+  XAG_USD = 'XAGUSD',
+}
+
+export enum GranularityId {
+  M5 = '5M',
+  M15 = '15M',
+  H1 = '1H',
+  D1 = '1D',
+}

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

@@ -0,0 +1,86 @@
+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 } }
+        : never
+      : never
+    : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  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>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<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
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  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>,
+>(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 is FragmentType<typeof fragmentNode> {
+  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 fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every((field) => data && field in data);
+}

package/src/gql/types/gql.ts

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+  '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
+    types.ValidateInstrumentsDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+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 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;