@oanda/labs-currency-power-balance-widget 1.0.1

package/src/gql/types/graphql.ts

@@ -0,0 +1,283 @@
+/* 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?: Maybe<Array<Maybe<Instrument>>>;
+  name?: Maybe<Scalars['String']['output']>;
+};
+
+export enum BookType {
+  Order = 'ORDER',
+  Position = 'POSITION'
+}
+
+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>;
+};
+
+export enum CurrencyPowerBalanceTimeUnit {
+  CurrentDay = 'CURRENT_DAY',
+  H4 = 'H4',
+  H8 = 'H8',
+  H24 = 'H24',
+  M1 = 'M1',
+  M3 = 'M3',
+  PreviousDay = 'PREVIOUS_DAY',
+  W1 = 'W1'
+}
+
+export enum DataSource {
+  Ny4 = 'NY4',
+  Ty3 = 'TY3'
+}
+
+export enum Division {
+  Oap = 'OAP',
+  Oau = 'OAU',
+  Oc = 'OC',
+  Ocan = 'OCAN',
+  Oel = 'OEL',
+  Ogm = 'OGM',
+  Oj = 'OJ',
+  Otms = 'OTMS'
+}
+
+export type Instrument = {
+  __typename?: 'Instrument';
+  displayName?: Maybe<Scalars['String']['output']>;
+  name?: Maybe<Scalars['String']['output']>;
+};
+
+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: 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>>>;
+  currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+  orderPositionBooks: Array<Maybe<OrderPositionData>>;
+  sentiment?: Maybe<Array<SentimentInstrument>>;
+  sentimentList?: Maybe<Array<SentimentInstrument>>;
+  topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+  topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+  topicalInstrumentsTotalCount: Scalars['Int']['output'];
+  volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+  volatilityChartAssetClasses?: Maybe<Array<VolatilityChartAssetClass>>;
+};
+
+
+export type QueryAssetClassesArgs = {
+  division: Division;
+};
+
+
+export type QueryCurrencyPowerBalanceArgs = {
+  timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+
+
+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 = {
+  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 = {
+  division?: InputMaybe<Division>;
+  sort: TopicalSort;
+};
+
+
+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;
+};
+
+export enum Sort {
+  Bearish = 'BEARISH',
+  Bullish = 'BULLISH'
+}
+
+export type TopicalInstrument = {
+  __typename?: 'TopicalInstrument';
+  displayName: Scalars['String']['output'];
+  name: Scalars['String']['output'];
+  sentiment: TopicalInstrumentSentiment;
+  updatedAt: Scalars['String']['output'];
+};
+
+export type TopicalInstrumentChart = {
+  __typename?: 'TopicalInstrumentChart';
+  chart?: Maybe<Array<Scalars['Float']['output']>>;
+  name: Scalars['String']['output'];
+};
+
+export type TopicalInstrumentSentiment = {
+  __typename?: 'TopicalInstrumentSentiment';
+  longPercent: Scalars['Float']['output'];
+  shortPercent: Scalars['Float']['output'];
+};
+
+export enum TopicalSort {
+  Bearish = 'BEARISH',
+  Bullish = 'BULLISH',
+  Hot = 'HOT',
+  Popular = 'POPULAR',
+  Volatile = 'VOLATILE'
+}
+
+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'];
+};
+
+export type VolatilityChartAssetClass = {
+  __typename?: 'VolatilityChartAssetClass';
+  instruments: Array<VolatilityChartInstrument>;
+  name: Scalars['String']['output'];
+};
+
+export type VolatilityChartInstrument = {
+  __typename?: 'VolatilityChartInstrument';
+  displayName: Scalars['String']['output'];
+  name: Scalars['String']['output'];
+};
+
+export enum VolatilityChartTimeSpan {
+  D5 = 'D5',
+  /**  Valid for: H */
+  D10 = 'D10',
+  /**  Valid for: H */
+  M1 = 'M1',
+  /**  Valid for: D */
+  M3 = 'M3',
+  /**  Valid for: D */
+  W5 = 'W5',
+  /**  Valid for: W */
+  W10 = 'W10'
+}
+
+export enum VolatilityChartTimeUnit {
+  D = 'D',
+  H = 'H',
+  W = 'W'
+}
+
+export type GetCurrencyPowerBalanceQueryVariables = Exact<{
+  timeUnit: CurrencyPowerBalanceTimeUnit;
+}>;
+
+
+export type GetCurrencyPowerBalanceQuery = { __typename?: 'Query', currencyPowerBalance?: Array<{ __typename?: 'CurrencyPowerBalance', currency: CurrencyName, power: Array<{ __typename?: 'CurrencyPower', point: string, price: number }> }> | null };
+
+
+export const GetCurrencyPowerBalanceDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCurrencyPowerBalance"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"timeUnit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CurrencyPowerBalanceTimeUnit"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currencyPowerBalance"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"timeUnit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"timeUnit"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"power"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"point"}},{"kind":"Field","name":{"kind":"Name","value":"price"}}]}}]}}]}}]} as unknown as DocumentNode<GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables>;

package/src/gql/types/index.ts

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

package/src/index.ts

@@ -0,0 +1 @@
+export * from './CurrencyPowerBalanceWidget';

package/test/Main.test.tsx

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { Main } from '../src/CurrencyPowerBalanceWidget/Main';
+import { mockResponse } from './responsesMocks';
+
+jest.mock('usehooks-ts', () => ({
+  useMediaQuery: jest.fn(),
+  useOnClickOutside: jest.fn(),
+  useElementSize: jest.fn().mockImplementation(() => [null, {
+    width: 100,
+  }]),
+}));
+
+describe('Main component', () => {
+  it('should render tool view', async () => {
+    const { findByTestId, getByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <Main />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-select')).toBeInTheDocument();
+  });
+});

package/test/chartFormatters.test.ts

@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { xAxisLabelFormatter, tooltipFormatter } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
+import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
+
+describe('tooltipFormatter', () => {
+  it('should sort & format tooltip content', () => {
+    const values = [{
+      marker: '<span>Marker 1</span>',
+      seriesName: 'Name 1',
+      value: ['2023-10-27T14:00:00Z', '-30.91'],
+    }, {
+      marker: '<span>Marker 2</span>',
+      seriesName: 'Name 2',
+      value: ['2023-10-27T14:00:00Z', '-20.23'],
+    }];
+
+    const element = document.createElement('div');
+    element.innerHTML = tooltipFormatter(values);
+
+    expect(element.querySelector('p')).toContainHTML('<p style="margin-bottom:5px;">10/27/2023, 14:00 UTC</p>');
+    expect(element.querySelectorAll('span')[0]).toContainHTML('<span>Marker 2</span>');
+    expect(element.querySelectorAll('span')[2]).toContainHTML('<span>-20.23</span>');
+    expect(element.querySelectorAll('span')[3]).toContainHTML('<span>Marker 1</span>');
+    expect(element.querySelectorAll('span')[5]).toContainHTML('<span>-30.91</span>');
+  });
+});
+
+describe('xAxisLabelFormatter', () => {
+  it('should format x axis label to date for 1 week time unit', () => {
+    expect(xAxisLabelFormatter('2023-10-22T10:00:00Z', CurrencyPowerBalanceTimeUnit.W1)).toEqual('10/22');
+  });
+  it('should format x axis label to date for 1 month time unit', () => {
+    expect(xAxisLabelFormatter('2023-10-20T10:00:00Z', CurrencyPowerBalanceTimeUnit.M1)).toEqual('10/20');
+  });
+  it('should format x axis label to date for 3 months time unit', () => {
+    expect(xAxisLabelFormatter('2023-10-10T10:00:00Z', CurrencyPowerBalanceTimeUnit.M3)).toEqual('10/10');
+  });
+  it('should format x axis label to date for midnight', () => {
+    expect(xAxisLabelFormatter('2023-09-20T00:00:00Z', CurrencyPowerBalanceTimeUnit.CurrentDay)).toEqual('9/20');
+  });
+  it('should format x axis label to time for current day', () => {
+    expect(xAxisLabelFormatter('2023-09-20T01:00:00Z', CurrencyPowerBalanceTimeUnit.CurrentDay)).toEqual('01:00');
+  });
+  it('should format x axis label to time for previous day', () => {
+    expect(xAxisLabelFormatter('2023-12-18T05:00:00Z', CurrencyPowerBalanceTimeUnit.PreviousDay)).toEqual('05:00');
+  });
+  it('should format x axis label to time for 24 hours', () => {
+    expect(xAxisLabelFormatter('2023-06-01T12:20:00Z', CurrencyPowerBalanceTimeUnit.H24)).toEqual('12:20');
+  });
+  it('should format x axis label to time for 8 hours', () => {
+    expect(xAxisLabelFormatter('2023-08-23T14:00:00Z', CurrencyPowerBalanceTimeUnit.H8)).toEqual('14:00');
+  });
+  it('should format x axis label to time for 4 hours', () => {
+    expect(xAxisLabelFormatter('2024-01-05T05:45:00Z', CurrencyPowerBalanceTimeUnit.H4)).toEqual('05:45');
+  });
+});

package/test/responsesMocks.ts

@@ -0,0 +1,223 @@
+import { getCurrencyPowerBalance } from '../src/gql/getCurrencyPowerBalance';
+
+const mockResponse = [{
+  request: {
+    query: getCurrencyPowerBalance,
+    variables: {
+      timeUnit: 'CURRENT_DAY',
+    },
+  },
+  result: {
+    data: {
+      currencyPowerBalance: [
+        {
+          currency: 'NZD',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: 3.86,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: 3.04,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: 3.84,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: 4.65,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: 2.43,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: 1.65,
+            },
+          ],
+        },
+        {
+          currency: 'CHF',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: -5.62,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: -5.57,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: -7.7,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: -8.75,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: -10.33,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: -9.15,
+            },
+          ],
+        },
+        {
+          currency: 'AUD',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: 3.8,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: 3.08,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: 3.37,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: 3.51,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: 3.91,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: 4.31,
+            },
+          ],
+        },
+        {
+          currency: 'CAD',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: -6.41,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: -5.54,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: -4.95,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: -6.56,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: -9.63,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: -9.75,
+            },
+          ],
+        },
+        {
+          currency: 'EUR',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: -0.01,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: 0.27,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: -0.01,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: -0.52,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: 2.81,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: 1.4,
+            },
+          ],
+        },
+        {
+          currency: 'JPY',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: -0.24,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: 0.58,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: 1.59,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: 3.29,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: 5.54,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: 6.27,
+            },
+          ],
+        },
+        {
+          currency: 'USD',
+          power: [
+            {
+              point: '2023-10-26T22:00:00Z',
+              price: 3.8,
+            },
+            {
+              point: '2023-10-27T02:00:00Z',
+              price: 3.08,
+            },
+            {
+              point: '2023-10-27T06:00:00Z',
+              price: 3.37,
+            },
+            {
+              point: '2023-10-27T10:00:00Z',
+              price: 3.51,
+            },
+            {
+              point: '2023-10-27T14:00:00Z',
+              price: 3.91,
+            },
+            {
+              point: '2023-10-27T18:00:00Z',
+              price: 4.31,
+            },
+          ],
+        },
+      ],
+    },
+  },
+}];
+
+export {
+  mockResponse,
+};

package/tsconfig.types.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.types.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist/types"
+  },
+  "include": [
+    "./src/**/*",
+    "../../types/**/*"
+  ]
+}