@oanda/labs-spread-cost-calculator-widget 1.0.1

package/src/gql/types/graphql.ts

@@ -0,0 +1,430 @@
+/* eslint-disable */
+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 enum AssetClassName {
+  Commodities = 'COMMODITIES',
+  Cryptocurrency = 'CRYPTOCURRENCY',
+  Currency = 'CURRENCY',
+  EquityShares = 'EQUITY_SHARES',
+  Indices = 'INDICES',
+  Rates = 'RATES'
+}
+
+export 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 enum CorrelationTimeUnit {
+  H1 = 'H1',
+  H4 = 'H4',
+  H24 = 'H24',
+  M1 = 'M1',
+  M3 = 'M3',
+  M6 = 'M6',
+  W1 = 'W1',
+  Y1 = 'Y1'
+}
+
+export 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 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 enum DataSource {
+  Ny4 = 'NY4',
+  Ty3 = 'TY3'
+}
+
+export 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>>;
+  resolveInstrumentsByDivision?: Maybe<Array<Instrument>>;
+  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 QueryResolveInstrumentsByDivisionArgs = {
+  division: Division;
+  instruments: Array<InputMaybe<Scalars['String']['input']>>;
+};
+
+
+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 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 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 enum TopicalSort {
+  Bearish = 'BEARISH',
+  Bullish = 'BULLISH',
+  Hot = 'HOT',
+  Popular = 'POPULAR',
+  Volatile = 'VOLATILE'
+}
+
+export 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 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 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 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 const ValidateInstrumentsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"validateInstruments"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"instruments"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"division"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Division"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mapInstrumentNames"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"instruments"},"value":{"kind":"Variable","name":{"kind":"Name","value":"instruments"}}},{"kind":"Argument","name":{"kind":"Name","value":"division"},"value":{"kind":"Variable","name":{"kind":"Name","value":"division"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}}]}}]}}]} as unknown as DocumentNode<ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables>;

package/src/gql/types/index.ts

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

package/src/gql/validateInstruments.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const validateInstruments = gql`
+  query validateInstruments($instruments: [String]!, $division: Division) {
+    mapInstrumentNames(instruments: $instruments, division: $division) {
+      name
+      displayName
+    }
+  }
+`;

package/src/index.ts

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

package/src/translations/index.ts

@@ -0,0 +1,17 @@
+import { Locale, Translations } from '@oanda/mono-i18n';
+
+import en from './sources/en.json';
+import zhTW from './sources/zh_TW.json';
+import es from './sources/es.json';
+import th from './sources/th.json';
+
+import { defaultTranslations } from './translations';
+
+export type TranslationKey = keyof typeof defaultTranslations;
+
+export const translations: Translations = {
+  [Locale.en]: { translation: en },
+  [Locale.zhTW]: { translation: zhTW },
+  [Locale.es]: { translation: es },
+  [Locale.th]: { translation: th },
+};

package/src/translations/sources/en.json

@@ -0,0 +1,11 @@
+{
+  "absolute_spread_cost": "Absolute Spread Cost",
+  "data_unavailable": "Data unavailable",
+  "instrument": "Instrument",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "pips": "Pips",
+  "search": "Search",
+  "spread": "Spread",
+  "units_traded": "Units traded",
+  "volume": "Volume"
+}

package/src/translations/sources/es.json

@@ -0,0 +1,11 @@
+{
+  "absolute_spread_cost": "Coste de spreads absolutos",
+  "data_unavailable": "No hay datos disponibles",
+  "instrument": "Instrumento",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} de {{itemCount}} entradas",
+  "pips": "Pips",
+  "search": "Buscar",
+  "spread": "Spread",
+  "units_traded": "Unidades negociadas",
+  "volume": "Volumen"
+}

package/src/translations/sources/th.json

@@ -0,0 +1,11 @@
+{
+  "absolute_spread_cost": "ค่าสเปรดที่แท้จริง",
+  "data_unavailable": "ข้อมูลไม่พร้อมใช้งาน",
+  "instrument": "ตราสาร",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} จาก {{itemCount}} รายการ",
+  "pips": "Pips",
+  "search": "ค้นหา",
+  "spread": "สเปรด",
+  "units_traded": "จำนวนหน่วยที่ซื้อขาย",
+  "volume": "ปริมาณ"
+}

package/src/translations/sources/zh_TW.json

@@ -0,0 +1,11 @@
+{
+  "absolute_spread_cost": "絕對點差成本",
+  "data_unavailable": "沒有數據",
+  "instrument": "金融工具",
+  "pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
+  "pips": "點",
+  "search": "搜尋",
+  "spread": "點差",
+  "units_traded": "交易單位",
+  "volume": "交易量"
+}

package/src/translations/translations.ts

@@ -0,0 +1 @@
+export const defaultTranslations = {};

package/test/SpreadCostCalculator.test.tsx

@@ -0,0 +1,31 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/* eslint-disable react/jsx-props-no-spreading */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Main } from '../src/SpreadCostCalculatorWidget/Main';
+
+describe('Spread Cost Calculator', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('should render spread cost calculator component', async () => {
+    // When
+    const { findByTestId } = render(
+      <Main
+        instruments={[{ name: 'EUR_USD', displayName: 'EUR/USD' }]}
+      />,
+    );
+
+    // Then
+    expect(await findByTestId('spread-cost-calculator')).toBeInTheDocument();
+  });
+});

package/test/useCalculateSpread.test.tsx

@@ -0,0 +1,131 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { act, renderHook } from '@testing-library/react';
+import {
+  useCalculateSpread,
+  UseCalculateSpreadInput,
+} from '../src/SpreadCostCalculatorWidget/useCalculateSpread';
+
+describe('spread cost calculator', () => {
+  describe('useCalculateSpread', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
+    const defaultDelay = 350;
+
+    const input: UseCalculateSpreadInput = {
+      unitsTraded: 10000,
+      spread: 1.4,
+      pipLocation: -4,
+    };
+
+    it.each([
+      { ...input, unitsTraded: undefined },
+      { ...input, spread: undefined },
+      { ...input, pipLocation: undefined },
+    ])(
+      'should return undefined, when one of params is undefined (%s)',
+      ({ unitsTraded, spread, pipLocation }) => {
+        // Given
+        // When
+        const { result } = renderHook(() => useCalculateSpread({
+          spread,
+          unitsTraded,
+          pipLocation,
+        }));
+
+        expect(result.current).toBeUndefined();
+
+        act(() => {
+          jest.advanceTimersByTime(defaultDelay);
+        });
+
+        // Then
+        expect(result.current).toBeUndefined();
+      },
+    );
+
+    it('should return correct calculated values', () => {
+      // Given
+      // When
+      const { result } = renderHook(() => useCalculateSpread({
+        ...input,
+        spread: 2,
+        pipLocation: -4,
+      }));
+
+      expect(result.current).toBeUndefined();
+
+      act(() => {
+        jest.advanceTimersByTime(defaultDelay);
+      });
+
+      // Then
+      expect(result.current).toEqual(1);
+    });
+
+    it('should return correct calculated values with 0 as pipLocation', () => {
+      // Given
+      // When
+      const { result } = renderHook(() => useCalculateSpread({
+        ...input,
+        spread: 2,
+        pipLocation: 0,
+      }));
+
+      expect(result.current).toBeUndefined();
+
+      act(() => {
+        jest.advanceTimersByTime(defaultDelay);
+      });
+
+      // Then
+      expect(result.current).toEqual(10000);
+    });
+
+    it('should round up result to 4 decimal places', () => {
+      // Given
+      // When
+      const { result } = renderHook(() => useCalculateSpread({
+        ...input,
+        unitsTraded: 4,
+        spread: 1.1,
+      }));
+
+      expect(result.current).toBeUndefined();
+
+      act(() => {
+        jest.advanceTimersByTime(defaultDelay);
+      });
+
+      // Then
+      expect(result.current).toEqual(0.0003);
+    });
+
+    it('should calculate big numbers', () => {
+      // Given
+      // When
+      const { result } = renderHook(() => useCalculateSpread({
+        ...input,
+        unitsTraded: 1122342,
+        spread: 123331,
+      }));
+
+      expect(result.current).toBeUndefined();
+
+      act(() => {
+        jest.advanceTimersByTime(defaultDelay);
+      });
+
+      // Then
+      expect(result.current).toEqual(6920978.0601);
+    });
+  });
+});