@oanda/labs-currency-cross-table 1.0.6 → 1.0.8

package/dist/types/gql/types/graphql.d.ts

@@ -0,0 +1,384 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+export type MakeEmpty<T extends {
+    [key: string]: unknown;
+}, K extends keyof T> = {
+    [_ in K]?: never;
+};
+export type Incremental<T> = T | {
+    [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: {
+        input: string;
+        output: string;
+    };
+    String: {
+        input: string;
+        output: string;
+    };
+    Boolean: {
+        input: boolean;
+        output: boolean;
+    };
+    Int: {
+        input: number;
+        output: number;
+    };
+    Float: {
+        input: number;
+        output: number;
+    };
+};
+export type AssetClass = {
+    __typename?: 'AssetClass';
+    instruments: Array<Instrument>;
+    name: Scalars['String']['output'];
+};
+export declare enum AssetClassName {
+    Commodities = "COMMODITIES",
+    Cryptocurrency = "CRYPTOCURRENCY",
+    Currency = "CURRENCY",
+    EquityShares = "EQUITY_SHARES",
+    Indices = "INDICES",
+    Rates = "RATES"
+}
+export declare enum BookType {
+    Order = "ORDER",
+    Position = "POSITION"
+}
+export type CorrelationHeatmap = {
+    __typename?: 'CorrelationHeatmap';
+    baseInstrument: Instrument;
+    heatmap: Array<Heatmap>;
+};
+export type CorrelationMatrix = {
+    __typename?: 'CorrelationMatrix';
+    baseTimeUnit: CorrelationTimeUnit;
+    matrix: Array<Matrix>;
+};
+export declare enum CorrelationTimeUnit {
+    H1 = "H1",
+    H4 = "H4",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    M6 = "M6",
+    W1 = "W1",
+    Y1 = "Y1"
+}
+export declare enum CurrencyName {
+    Aud = "AUD",
+    Cad = "CAD",
+    Chf = "CHF",
+    Eur = "EUR",
+    Gbp = "GBP",
+    Jpy = "JPY",
+    Nzd = "NZD",
+    Usd = "USD"
+}
+export type CurrencyPower = {
+    __typename?: 'CurrencyPower';
+    /** UTC Timestamp */
+    point: Scalars['String']['output'];
+    price: Scalars['Float']['output'];
+};
+export type CurrencyPowerBalance = {
+    __typename?: 'CurrencyPowerBalance';
+    currency: CurrencyName;
+    power: Array<CurrencyPower>;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum CurrencyPowerBalanceTimeUnit {
+    CurrentDay = "CURRENT_DAY",
+    H4 = "H4",
+    H8 = "H8",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    PreviousDay = "PREVIOUS_DAY",
+    W1 = "W1"
+}
+export type CurrencyStrength = {
+    __typename?: 'CurrencyStrength';
+    currency: CurrencyName;
+    strengthRelation?: Maybe<Array<StrengthRelation>>;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum DataSource {
+    Ny4 = "NY4",
+    Ty3 = "TY3"
+}
+export declare enum Division {
+    Oap = "OAP",
+    Oau = "OAU",
+    Oc = "OC",
+    Ocan = "OCAN",
+    Oel = "OEL",
+    Ogm = "OGM",
+    Oj = "OJ",
+    Opt = "OPT",
+    Otms = "OTMS"
+}
+export type Heatmap = {
+    __typename?: 'Heatmap';
+    instrument: Instrument;
+    timeCorrelation: Array<TimeCorrelation>;
+};
+export type Instrument = {
+    __typename?: 'Instrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+};
+export type InstrumentCorrelation = {
+    __typename?: 'InstrumentCorrelation';
+    instrument: Instrument;
+    value?: Maybe<Scalars['Float']['output']>;
+};
+export type Matrix = {
+    __typename?: 'Matrix';
+    instrument: Instrument;
+    instrumentCorrelation: Array<InstrumentCorrelation>;
+};
+export type OrderPositionBucket = {
+    __typename?: 'OrderPositionBucket';
+    longCountPercent: Scalars['Float']['output'];
+    price: Scalars['Float']['output'];
+    shortCountPercent: Scalars['Float']['output'];
+};
+export type OrderPositionData = {
+    __typename?: 'OrderPositionData';
+    bucketWidth: Scalars['Float']['output'];
+    buckets: Array<Maybe<OrderPositionBucket>>;
+    dataSource?: Maybe<Scalars['String']['output']>;
+    instrument: Scalars['String']['output'];
+    price?: Maybe<Scalars['Float']['output']>;
+    region?: Maybe<Scalars['String']['output']>;
+    time: Scalars['String']['output'];
+    unixTime: Scalars['Int']['output'];
+};
+export type Query = {
+    __typename?: 'Query';
+    assetClasses?: Maybe<Array<Maybe<AssetClass>>>;
+    correlationHeatmap: CorrelationHeatmap;
+    correlationMatrix: CorrelationMatrix;
+    currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+    currencyStrength?: Maybe<Array<CurrencyStrength>>;
+    isAllowedPartner?: Maybe<Scalars['Boolean']['output']>;
+    mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
+    orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    sentiment?: Maybe<Array<SentimentInstrument>>;
+    sentimentList?: Maybe<Array<SentimentInstrument>>;
+    topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+    topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+    topicalInstrumentsTotalCount: Scalars['Int']['output'];
+    valueAtRiskAssetClasses?: Maybe<Array<AssetClass>>;
+    valueAtRiskChart?: Maybe<ValueAtRiskChart>;
+    volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+    volatilityChartAssetClasses?: Maybe<Array<AssetClass>>;
+};
+export type QueryAssetClassesArgs = {
+    division: Division;
+};
+export type QueryCorrelationHeatmapArgs = {
+    division: Division;
+    instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+    timeSpans?: InputMaybe<Array<InputMaybe<CorrelationTimeUnit>>>;
+};
+export type QueryCorrelationMatrixArgs = {
+    division: Division;
+    instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+export type QueryCurrencyPowerBalanceArgs = {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+export type QueryIsAllowedPartnerArgs = {
+    url: Scalars['String']['input'];
+};
+export type QueryMapInstrumentNamesArgs = {
+    division?: InputMaybe<Division>;
+    instruments: Array<InputMaybe<Scalars['String']['input']>>;
+};
+export type QueryOrderPositionBooksArgs = {
+    bookType: BookType;
+    dataSource?: InputMaybe<DataSource>;
+    instrument: Scalars['String']['input'];
+    recentHours?: InputMaybe<Scalars['Int']['input']>;
+    region?: InputMaybe<Region>;
+};
+export type QuerySentimentArgs = {
+    division?: InputMaybe<Division>;
+    name: Scalars['String']['input'];
+};
+export type QuerySentimentListArgs = {
+    division?: InputMaybe<Division>;
+    sort?: InputMaybe<Sort>;
+};
+export type QueryTopicalInstrumentsArgs = {
+    assetClass?: InputMaybe<AssetClassName>;
+    count?: InputMaybe<Scalars['Int']['input']>;
+    division?: InputMaybe<Division>;
+    offset?: InputMaybe<Scalars['Int']['input']>;
+    sort: TopicalSort;
+};
+export type QueryTopicalInstrumentsChartsArgs = {
+    division?: InputMaybe<Division>;
+    instruments?: InputMaybe<Array<Scalars['String']['input']>>;
+};
+export type QueryTopicalInstrumentsTotalCountArgs = {
+    assetClass?: InputMaybe<AssetClassName>;
+    division?: InputMaybe<Division>;
+    sort: TopicalSort;
+};
+export type QueryValueAtRiskAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export type QueryValueAtRiskChartArgs = {
+    bars: ValueAtRiskBars;
+    division?: InputMaybe<Division>;
+    duration: ValueAtRiskDuration;
+    instrument: Scalars['String']['input'];
+};
+export type QueryVolatilityChartArgs = {
+    division?: InputMaybe<Division>;
+    instrument: Scalars['String']['input'];
+    timeSpan: VolatilityChartTimeSpan;
+    timeUnit: VolatilityChartTimeUnit;
+};
+export type QueryVolatilityChartAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export declare enum Region {
+    Amer = "AMER",
+    Apac = "APAC",
+    Emea = "EMEA"
+}
+export type Sentiment = {
+    __typename?: 'Sentiment';
+    longPercent: Scalars['Float']['output'];
+    shortPercent: Scalars['Float']['output'];
+};
+export type SentimentInstrument = {
+    __typename?: 'SentimentInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum Sort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH"
+}
+export type StrengthRelation = {
+    __typename?: 'StrengthRelation';
+    currency: CurrencyName;
+    percentage: Scalars['Float']['output'];
+};
+export type TimeCorrelation = {
+    __typename?: 'TimeCorrelation';
+    timeUnit: CorrelationTimeUnit;
+    value?: Maybe<Scalars['Float']['output']>;
+};
+export type TopicalInstrument = {
+    __typename?: 'TopicalInstrument';
+    assetClass?: Maybe<AssetClassName>;
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export type TopicalInstrumentChart = {
+    __typename?: 'TopicalInstrumentChart';
+    chart?: Maybe<Array<Scalars['Float']['output']>>;
+    name: Scalars['String']['output'];
+};
+export declare enum TopicalSort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH",
+    Hot = "HOT",
+    Popular = "POPULAR",
+    Volatile = "VOLATILE"
+}
+export declare enum ValueAtRiskBars {
+    C100 = "C100",
+    C200 = "C200",
+    C300 = "C300"
+}
+export type ValueAtRiskChart = {
+    __typename?: 'ValueAtRiskChart';
+    down: ValueAtRiskChartData;
+    up: ValueAtRiskChartData;
+};
+export type ValueAtRiskChartData = {
+    __typename?: 'ValueAtRiskChartData';
+    average: Scalars['Float']['output'];
+    max: Scalars['Float']['output'];
+    median: Scalars['Float']['output'];
+    points?: Maybe<Array<ValueAtRiskChartPoint>>;
+    threshold: Scalars['Float']['output'];
+};
+export type ValueAtRiskChartPoint = {
+    __typename?: 'ValueAtRiskChartPoint';
+    percent: Scalars['Float']['output'];
+    pips: Scalars['Float']['output'];
+};
+export declare enum ValueAtRiskDuration {
+    C1 = "C1",
+    C2 = "C2",
+    C3 = "C3",
+    C4 = "C4",
+    C5 = "C5",
+    C10 = "C10"
+}
+export type VolatilityChart = {
+    __typename?: 'VolatilityChart';
+    pips: Scalars['Float']['output'];
+    /** Time point - hour in format hh:mm, Date in UTC, Week in format 'Mo' */
+    point: Scalars['String']['output'];
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum VolatilityChartTimeSpan {
+    /**  Valid for: H */
+    D5 = "D5",
+    /**  Valid for: H */
+    D10 = "D10",
+    /**  Valid for: D */
+    M1 = "M1",
+    /**  Valid for: D */
+    M3 = "M3",
+    /**  Valid for: W */
+    W5 = "W5",
+    /**  Valid for: W */
+    W10 = "W10"
+}
+export declare enum VolatilityChartTimeUnit {
+    D = "D",
+    H = "H",
+    W = "W"
+}
+export type ValidateInstrumentsQueryVariables = Exact<{
+    instruments: Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>;
+    division?: InputMaybe<Division>;
+}>;
+export type ValidateInstrumentsQuery = {
+    __typename?: 'Query';
+    mapInstrumentNames?: Array<{
+        __typename?: 'Instrument';
+        name: string;
+        displayName: string;
+    } | null> | null;
+};
+export declare const ValidateInstrumentsDocument: DocumentNode<ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables>;

package/dist/types/gql/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/dist/types/gql/validateInstruments.d.ts

@@ -0,0 +1 @@
+export declare const validateInstruments: import("@apollo/client").DocumentNode;

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@oanda/labs-currency-cross-table",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Labs Currency Cross Table",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
   "types": "dist/types/index.d.ts",
+  "scripts": {
+    "codegen": "graphql-codegen --config codegen.ts"
+  },
   "keywords": [],
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.155",
-    "@oanda/mono-i18n": "10.0.1"
+    "@oanda/labs-widget-common": "^1.0.157",
+    "@oanda/mono-i18n": "10.0.1",
+    "graphql": "16.8.1"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "eecb0d8d995023c4374b106577b8be81b27604d4"
+  "gitHead": "60a2bfe5c3adb01f35e853dd1596a444033f4847"
 }

package/src/CurrencyCrossTableWidget/CurrencyCrossTableWidget.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { LocaleProvider } from '@oanda/mono-i18n';
 import {
   LiveRatesProvider, ThemeProvider, getLocale,
 } from '@oanda/labs-widget-common';
 import { translations } from '../translations';
-import { Division, CurrencyCrossTableConfig } from './types';
+import { CurrencyCrossTableConfig } from './types';
 import { ValidationWrapper } from './ValidationWrapper';
+import { Division } from '../gql/types/graphql';
 
 const CurrencyCrossTableWidget = ({
+  graphqlUrl,
   liveRatesUrl,
   currencies,
   division,
@@ -16,6 +19,11 @@ const CurrencyCrossTableWidget = ({
   isParamError,
   removePadding,
 }: CurrencyCrossTableConfig) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
   const divisionCode = division === Division.Opt ? Division.Ogm : division;
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
 
@@ -26,11 +34,13 @@ const CurrencyCrossTableWidget = ({
           url={liveRatesUrl}
           options={{ divisionCode, dataSource }}
         >
-          <ValidationWrapper
-            currencies={currencies}
-            division={division}
-            isParamError={isParamError}
-          />
+          <ApolloProvider client={client}>
+            <ValidationWrapper
+              currencies={currencies}
+              division={division}
+              isParamError={isParamError}
+            />
+          </ApolloProvider>
         </LiveRatesProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/CurrencyCrossTableWidget/Main.tsx

@@ -1,11 +1,16 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, {
+  Fragment, Suspense, useEffect, useState,
+} from 'react';
 import { useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { MainProps } from './types';
-import { CellWithData, TextCell } from './components';
+import { TextCell } from './components';
+import { CellValidationWrapper } from './components/CellValidationWrapper';
+import { divisionMapper } from './utils';
 
 const Main = ({
   instruments,
   currencies,
+  division,
 }: MainProps) => {
   const [selectedCurrency, setSelectedCurrency] = useState('');
   const [selectedPair, setSelectedPair] = useState('');
@@ -22,9 +27,9 @@ const Main = ({
   }, instruments);
 
   return (
-    <div data-testid="currency-cross-table-wrapper" className="lw-w-full">
-      <div className="lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary">
-        <TextCell />
+    <div data-testid="currency-cross-table-wrapper" className="lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary">
+      <div className="lw-flex lw-w-max lw-min-w-full">
+        <TextCell sticky />
         {currencies.map(((pair) => (
           <TextCell
             key={pair}
@@ -36,30 +41,29 @@ const Main = ({
       {currencies.map(((currency, index, arr) => (
         <div
           key={currency}
-          className="lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary"
+          className="lw-flex lw-w-max lw-min-w-full"
         >
           <TextCell
             label={currency}
-            additionalBorderBottom={index === arr.length - 1}
             hovered={currency === selectedCurrency}
+            sticky
           />
           {arr.map((pair) => (
             <Fragment key={`${currency}_${pair}`}>
               {currency !== pair ? (
-                <CellWithData
-                  loading={false}
-                  record={{
-                    instrument: `${currency}_${pair}`,
-                    displayName: `${currency}/${pair}`,
-                  }}
-                  target={target}
-                  additionalBorderBottom={index === arr.length - 1}
-                  setSelectedCurrency={setSelectedCurrency}
-                  setSelectedPair={setSelectedPair}
-                />
+                <Suspense>
+                  <CellValidationWrapper
+                    currency={currency}
+                    pair={pair}
+                    instrument={`${currency}${divisionMapper(division)}${pair}`}
+                    target={target}
+                    setSelectedCurrency={setSelectedCurrency}
+                    setSelectedPair={setSelectedPair}
+                    division={division}
+                  />
+                </Suspense>
               ) : (
                 <TextCell
-                  additionalBorderBottom={index === arr.length - 1}
                   emptyIndicator
                 />
               )}

package/src/CurrencyCrossTableWidget/ValidationWrapper.tsx

@@ -21,6 +21,7 @@ const ValidationWrapper = ({
           <Main
             instruments={currenciesToInstruments(currencies, division)}
             currencies={currencies}
+            division={division}
           />
         )}
         {showError && (

package/src/CurrencyCrossTableWidget/components/Cell.tsx

@@ -7,15 +7,13 @@ const Cell = ({
   children,
   isError,
   isLoading,
-  additionalBorderBottom,
   hovered,
   mouseEnterHandler,
   mouseLeaveHandler,
 }: CellProps) => (
   <div
-    className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {
-      'lw-border-b': additionalBorderBottom,
-      'lw-font-semibold': hovered,
+    className={classnames('lw-flex lw-h-11 lw-min-w-[70px] lw-flex-1 lw-items-center lw-justify-center lw-border-b lw-border-r lw-border-solid lw-border-border-primary last:lw-border-r-[0px]', {
+      'lw-bg-border-primary lw-font-semibold lw-shadow-innerBorderBgColor': hovered,
     })}
     onMouseEnter={mouseEnterHandler}
     onMouseLeave={mouseLeaveHandler}

package/src/CurrencyCrossTableWidget/components/CellValidationWrapper.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useSuspenseQuery } from '@apollo/client';
+import { CellValidationWrapperProps } from './types';
+import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../../gql/types/graphql';
+import { validateInstruments } from '../../gql/validateInstruments';
+import { CellWithData } from './CellWithData';
+import { divisionMapper } from '../utils';
+
+const CellValidationWrapper = ({
+  currency,
+  pair,
+  instrument,
+  target,
+  setSelectedCurrency,
+  setSelectedPair,
+  division,
+}: CellValidationWrapperProps) => {
+  const { error } = useSuspenseQuery<
+  ValidateInstrumentsQuery,
+  ValidateInstrumentsQueryVariables
+  >(validateInstruments, {
+    variables: {
+      instruments: [instrument],
+      division,
+    },
+    fetchPolicy: 'network-only',
+    errorPolicy: 'all',
+  });
+
+  const instrumentForCalculations = error ? `${pair}${divisionMapper(division)}${currency}` : '';
+
+  return (
+    <CellWithData
+      currency={currency}
+      pair={pair}
+      record={{
+        instrument,
+        displayName: `${currency}${divisionMapper(division)}${pair}`,
+      }}
+      instrumentForCalculations={instrumentForCalculations}
+      target={target}
+      setSelectedCurrency={setSelectedCurrency}
+      setSelectedPair={setSelectedPair}
+      division={division}
+    />
+  );
+};
+
+export { CellValidationWrapper };