@oanda/labs-currency-strength-widget 1.0.1

package/src/CurrencyStrengthWidget/components/Chart/types.ts

@@ -0,0 +1,25 @@
+import { CurrencyName } from '../../../gql/types/graphql';
+
+export interface CPBChartDataValues {
+  currency: CurrencyName;
+  percentage: number;
+}
+export interface ChartProps {
+  values: CPBChartDataValues[];
+  currency: CurrencyName;
+}
+
+export interface TooltipFormatterParams {
+  marker: string;
+  name: string;
+  value: number;
+  currency: CurrencyName;
+  lang: (label: string) => string;
+}
+
+export type GetOptionProps = {
+  values: CPBChartDataValues[],
+  currency: CurrencyName,
+  lang: (label: string) => string,
+  isDark: boolean;
+};

package/src/CurrencyStrengthWidget/index.ts

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

package/src/CurrencyStrengthWidget/render.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Theme, validateToolParams } from '@oanda/labs-widget-common';
+import { CurrencyStrengthWidget } from './CurrencyStrengthWidget';
+
+const {
+  graphqlUrl,
+} = window.widgetsConfig || {};
+
+const volatilityChartParamsElements = document.querySelectorAll('div[data-currency-strength-params]');
+
+volatilityChartParamsElements.forEach((element) => {
+  const params = element.getAttribute('data-currency-strength-params');
+  const mode = element.getAttribute('data-mode');
+  const { locale } = JSON.parse(params as string);
+
+  const isParamError = validateToolParams({ locale, graphqlUrl }, [
+    {
+      name: 'locale',
+      valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',
+    }, {
+      name: 'graphqlUrl',
+    }]);
+
+  render(
+    <CurrencyStrengthWidget
+      graphqlUrl={graphqlUrl}
+      locale={locale}
+      theme={mode as Theme}
+      isParamError={isParamError}
+    />,
+    element,
+  );
+});

package/src/CurrencyStrengthWidget/types.ts

@@ -0,0 +1,13 @@
+import { Locale } from '@oanda/mono-i18n';
+import { Theme } from '@oanda/labs-widget-common';
+
+export interface VolatilityChartConfig {
+  graphqlUrl: string;
+  locale: Locale;
+  theme?: Theme;
+  isParamError?: boolean;
+}
+
+export interface VolatilityChartWrapperConfig extends VolatilityChartConfig {
+  renderElementId: string;
+}

package/src/gql/getCurrencyStrength.ts

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+const getCurrencyStrength = gql`
+  query GetCurrencyStrength {
+    currencyStrength {
+      currency
+      strengthRelation {
+        currency
+        percentage
+      }
+    }
+  }
+`;
+
+export { getCurrencyStrength };

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

@@ -0,0 +1,66 @@
+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,42 @@
+/* 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 GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n    }\n  }\n": types.GetCurrencyStrengthDocument,
+};
+
+/**
+ * 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 GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\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;

package/src/gql/types/graphql.ts

@@ -0,0 +1,290 @@
+/* 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 type CurrencyStrength = {
+  __typename?: 'CurrencyStrength';
+  currency: CurrencyName;
+  strengthRelation?: Maybe<Array<StrengthRelation>>;
+};
+
+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?: 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>>>;
+  currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+  currencyStrength?: Maybe<Array<CurrencyStrength>>;
+  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;
+  updatedAt: Scalars['String']['output'];
+};
+
+export enum Sort {
+  Bearish = 'BEARISH',
+  Bullish = 'BULLISH'
+}
+
+export type StrengthRelation = {
+  __typename?: 'StrengthRelation';
+  currency: CurrencyName;
+  percentage: Scalars['Float']['output'];
+};
+
+export type TopicalInstrument = {
+  __typename?: 'TopicalInstrument';
+  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 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 {
+  /**  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 GetCurrencyStrengthQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetCurrencyStrengthQuery = { __typename?: 'Query', currencyStrength?: Array<{ __typename?: 'CurrencyStrength', currency: CurrencyName, strengthRelation?: Array<{ __typename?: 'StrengthRelation', currency: CurrencyName, percentage: number }> | null }> | null };
+
+
+export const GetCurrencyStrengthDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCurrencyStrength"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currencyStrength"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"strengthRelation"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"percentage"}}]}}]}}]}}]} as unknown as DocumentNode<GetCurrencyStrengthQuery, GetCurrencyStrengthQueryVariables>;

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 './CurrencyStrengthWidget/CurrencyStrengthWidget';

package/src/translations/index.ts

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

package/src/translations/sources/en.json

@@ -0,0 +1,6 @@
+{
+  "data_unavailable": "Data unavailable",
+  "vs": "vs",
+  "5_minutes": "5 minutes",
+  "daily": "Daily"
+}

package/src/translations/sources/zh_TW.json

@@ -0,0 +1,6 @@
+{
+  "data_unavailable": "沒有數據",
+  "vs": "",
+  "5_minutes": "",
+  "daily": ""
+}

package/src/translations/translations.ts

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

package/test/Main.test.tsx

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

package/test/chartOptions.test.ts

@@ -0,0 +1,18 @@
+import { tooltipFormatter } from '../src/CurrencyStrengthWidget/components/Chart/formatters';
+import { CurrencyName } from '../src/gql/types/graphql';
+
+describe('tooltipFormatter', () => {
+  it('should display correct label on daily data', () => {
+    expect(tooltipFormatter({
+      marker: '<div>Marker</div>',
+      name: CurrencyName.Cad,
+      value: 0.81,
+      currency: CurrencyName.Aud,
+      lang: (label) => label,
+    })).toEqual(`
+<div>
+  <div style="margin-bottom:5px;">AUD vs CAD</div>
+  <div style="display:flex;align-items:center;"><div>Marker</div> 0.81%</div>
+</div>`);
+  });
+});