@oanda/labs-order-book-widget 1.0.88 → 1.0.90

package/src/OrderBookWidget/ChartWithData.tsx

@@ -2,18 +2,21 @@ import React, { useContext } from 'react';
 import { useQuery } from '@apollo/client';
 import classnames from 'classnames';
 import {
-  ChartError, Size, Spinner, SpinnerSize, ThemeContext,
+  ChartError, InfoBox, Size, Spinner, SpinnerSize, ThemeContext, formatUpdatedTimestamp,
 } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import { ChartWithDataProps } from './types';
 import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
 import { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';
 import { Chart } from './components/Chart/Chart';
 import { instrumentPrecisionConfig } from './config';
+import { EMPTY_VALUE } from './constants';
 
 const ChartWithData = ({
   instrument,
   bookType,
 }: ChartWithDataProps) => {
+  const { lang } = useLocale();
   const { size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
 
@@ -30,51 +33,59 @@ const ChartWithData = ({
   });
 
   const isError = (!loading && !data?.orderPositionBooks[0]?.price) || !!error;
+  const updatedAt = data?.orderPositionBooks[0]?.time;
 
   return (
-    <div className={classnames('lw-relative lw-w-full', {
-      'lw-h-[450px]': isDesktop,
-      'lw-h-[390px]': !isDesktop,
-    })}
-    >
-      {isError && (
-      <div className={
-            classnames(
-              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
-              {
-                'lw-h-full': isDesktop,
-                'lw-h-[calc(100%-40px)]': !isDesktop,
-              },
-            )
-          }
+    <>
+      <div className={classnames('lw-relative lw-w-full', {
+        'lw-h-[450px]': isDesktop,
+        'lw-h-[390px]': !isDesktop,
+      })}
       >
-        <ChartError />
+        {isError && (
+        <div className={
+          classnames(
+            'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
+            {
+              'lw-h-full': isDesktop,
+              'lw-h-[calc(100%-40px)]': !isDesktop,
+            },
+          )
+        }
+        >
+          <ChartError />
+        </div>
+        )}
+        {loading && (
+        <div className={
+          classnames(
+            'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
+            {
+              'lw-h-full': isDesktop,
+              'lw-h-[calc(100%-40px)]': !isDesktop,
+            },
+          )
+        }
+        >
+          <Spinner size={SpinnerSize.lg} />
+        </div>
+        )}
+        {!isError && data && (
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
+            <Chart
+              data={data}
+              isOrderBook={bookType === BookType.Order}
+              precision={instrumentPrecisionConfig[instrument]}
+            />
+          </div>
+        )}
       </div>
-      )}
-      {loading && (
-      <div className={
-            classnames(
-              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
-              {
-                'lw-h-full': isDesktop,
-                'lw-h-[calc(100%-40px)]': !isDesktop,
-              },
-            )
-          }
-      >
-        <Spinner size={SpinnerSize.lg} />
+      {!isError && (
+      <div className="lw-mt-2 lw-h-8">
+        <InfoBox text={`${lang('last_updated')}: ${updatedAt ? formatUpdatedTimestamp(updatedAt, lang('today')) : EMPTY_VALUE}`} />
       </div>
       )}
-      {!isError && data && (
-        <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-          <Chart
-            data={data}
-            isOrderBook={bookType === BookType.Order}
-            precision={instrumentPrecisionConfig[instrument]}
-          />
-        </div>
-      )}
-    </div>
+    </>
   );
 };
 

package/src/OrderBookWidget/components/Chart/getOption.ts

@@ -328,6 +328,7 @@ export const getOption: GetOptionType = ({
             silent: true,
             precision,
             symbol: ['none', 'triangle'],
+            symbolOffset: [0, [0, isDesktop ? 0 : -10]] as unknown as number,
             symbolRotate: 90,
             symbolSize: [20, 10],
             lineStyle: {
@@ -335,9 +336,9 @@ export const getOption: GetOptionType = ({
               width: 1,
             },
             label: {
+              distance: isDesktop ? 5 : -5,
               overflow: 'truncate',
               width: isDesktop ? undefined : Y_LABEL_SIZE_MOBILE,
-              padding: isDesktop ? [5, 15, 5, 15] : [5, 12, 5, 5],
               color: isDark ? colorPalette.black : colorPalette.white,
               backgroundColor: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
             },

package/src/OrderBookWidget/constants.ts

@@ -0,0 +1,3 @@
+const EMPTY_VALUE = '\u2014';
+
+export { EMPTY_VALUE };

package/src/gql/getOrderPositionBooks.ts

@@ -9,6 +9,7 @@ const getOrderPositionBooks = gql`
     ) {
       bucketWidth
       price
+      time
       buckets {
         price
         longCountPercent

package/src/gql/types/gql.ts

@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n": types.GetOrderPositionBooksDocument,
+    "\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n": types.GetOrderPositionBooksDocument,
 };
 
 /**
@@ -33,7 +33,7 @@ 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 GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/gql/types/graphql.ts

@@ -27,6 +27,70 @@ export enum BookType {
   Position = 'POSITION'
 }
 
+export type Correlation = {
+  __typename?: 'Correlation';
+  timeUnit: CorrelationTimeUnit;
+  value: Scalars['Float']['output'];
+};
+
+export type CorrelationHeatmap = {
+  __typename?: 'CorrelationHeatmap';
+  baseInstrument: Scalars['String']['output'];
+  heatmap: Array<Heatmap>;
+};
+
+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>;
+};
+
+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'
@@ -43,6 +107,12 @@ export enum Division {
   Otms = 'OTMS'
 }
 
+export type Heatmap = {
+  __typename?: 'Heatmap';
+  correlation: Array<Correlation>;
+  instrument: Scalars['String']['output'];
+};
+
 export type Instrument = {
   __typename?: 'Instrument';
   displayName?: Maybe<Scalars['String']['output']>;
@@ -62,7 +132,7 @@ export type OrderPositionData = {
   buckets: Array<Maybe<OrderPositionBucket>>;
   dataSource?: Maybe<Scalars['String']['output']>;
   instrument: Scalars['String']['output'];
-  price: Scalars['Float']['output'];
+  price?: Maybe<Scalars['Float']['output']>;
   region?: Maybe<Scalars['String']['output']>;
   time: Scalars['String']['output'];
   unixTime: Scalars['Int']['output'];
@@ -71,6 +141,9 @@ export type OrderPositionData = {
 export type Query = {
   __typename?: 'Query';
   assetClasses?: Maybe<Array<Maybe<AssetClass>>>;
+  correlationHeatmap: CorrelationHeatmap;
+  currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+  currencyStrength?: Maybe<Array<CurrencyStrength>>;
   orderPositionBooks: Array<Maybe<OrderPositionData>>;
   sentiment?: Maybe<Array<SentimentInstrument>>;
   sentimentList?: Maybe<Array<SentimentInstrument>>;
@@ -87,6 +160,16 @@ export type QueryAssetClassesArgs = {
 };
 
 
+export type QueryCorrelationHeatmapArgs = {
+  division: Division;
+};
+
+
+export type QueryCurrencyPowerBalanceArgs = {
+  timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+
+
 export type QueryOrderPositionBooksArgs = {
   bookType: BookType;
   dataSource?: InputMaybe<DataSource>;
@@ -157,6 +240,7 @@ export type SentimentInstrument = {
   displayName: Scalars['String']['output'];
   name: Scalars['String']['output'];
   sentiment: Sentiment;
+  updatedAt: Scalars['String']['output'];
 };
 
 export enum Sort {
@@ -164,11 +248,17 @@ export enum Sort {
   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: TopicalInstrumentSentiment;
+  sentiment: Sentiment;
   updatedAt: Scalars['String']['output'];
 };
 
@@ -178,12 +268,6 @@ export type TopicalInstrumentChart = {
   name: Scalars['String']['output'];
 };
 
-export type TopicalInstrumentSentiment = {
-  __typename?: 'TopicalInstrumentSentiment';
-  longPercent: Scalars['Float']['output'];
-  shortPercent: Scalars['Float']['output'];
-};
-
 export enum TopicalSort {
   Bearish = 'BEARISH',
   Bullish = 'BULLISH',
@@ -201,7 +285,7 @@ export type VolatilityChart = {
 
 export type VolatilityChartAssetClass = {
   __typename?: 'VolatilityChartAssetClass';
-  instruments?: Maybe<Array<Maybe<VolatilityChartInstrument>>>;
+  instruments: Array<VolatilityChartInstrument>;
   name: Scalars['String']['output'];
 };
 
@@ -212,11 +296,17 @@ export type VolatilityChartInstrument = {
 };
 
 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'
 }
 
@@ -233,7 +323,7 @@ export type GetOrderPositionBooksQueryVariables = Exact<{
 }>;
 
 
-export type GetOrderPositionBooksQuery = { __typename?: 'Query', orderPositionBooks: Array<{ __typename?: 'OrderPositionData', bucketWidth: number, price: number, buckets: Array<{ __typename?: 'OrderPositionBucket', price: number, longCountPercent: number, shortCountPercent: number } | null> } | null> };
+export type GetOrderPositionBooksQuery = { __typename?: 'Query', orderPositionBooks: Array<{ __typename?: 'OrderPositionData', bucketWidth: number, price?: number | null, time: string, buckets: Array<{ __typename?: 'OrderPositionBucket', price: number, longCountPercent: number, shortCountPercent: number } | null> } | null> };
 
 
-export const GetOrderPositionBooksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetOrderPositionBooks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"instrument"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"bookType"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"BookType"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"recentHours"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"orderPositionBooks"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"instrument"},"value":{"kind":"Variable","name":{"kind":"Name","value":"instrument"}}},{"kind":"Argument","name":{"kind":"Name","value":"bookType"},"value":{"kind":"Variable","name":{"kind":"Name","value":"bookType"}}},{"kind":"Argument","name":{"kind":"Name","value":"recentHours"},"value":{"kind":"Variable","name":{"kind":"Name","value":"recentHours"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"bucketWidth"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"buckets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"longCountPercent"}},{"kind":"Field","name":{"kind":"Name","value":"shortCountPercent"}}]}}]}}]}}]} as unknown as DocumentNode<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>;
+export const GetOrderPositionBooksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetOrderPositionBooks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"instrument"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"bookType"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"BookType"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"recentHours"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"orderPositionBooks"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"instrument"},"value":{"kind":"Variable","name":{"kind":"Name","value":"instrument"}}},{"kind":"Argument","name":{"kind":"Name","value":"bookType"},"value":{"kind":"Variable","name":{"kind":"Name","value":"bookType"}}},{"kind":"Argument","name":{"kind":"Name","value":"recentHours"},"value":{"kind":"Variable","name":{"kind":"Name","value":"recentHours"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"bucketWidth"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"time"}},{"kind":"Field","name":{"kind":"Name","value":"buckets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"longCountPercent"}},{"kind":"Field","name":{"kind":"Name","value":"shortCountPercent"}}]}}]}}]}}]} as unknown as DocumentNode<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>;

package/src/translations/sources/en.json

@@ -2,6 +2,7 @@
   "buy": "Buy",
   "data_unavailable": "Data unavailable",
   "instrument": "Instrument",
+  "last_updated": "Last updated",
   "long": "Long",
   "long_positions": "Long Positions",
   "open_orders": "Open Orders",
@@ -15,6 +16,7 @@
   "sell_orders": "Sell Orders",
   "short": "Short",
   "short_positions": "Short Positions",
+  "today": "Today",
   "zoom_in": "Zoom In",
   "zoom_out": "Zoom Out"
 }

package/src/translations/sources/zh_TW.json

@@ -2,6 +2,7 @@
   "buy": "買進",
   "data_unavailable": "沒有數據",
   "instrument": "金融工具",
+  "last_updated": "最後更新",
   "long": "長",
   "long_positions": "長倉",
   "open_orders": "開盤市價單",
@@ -15,6 +16,7 @@
   "sell_orders": "賣單",
   "short": "短",
   "short_positions": "短倉",
+  "today": "今日",
   "zoom_in": "放大",
   "zoom_out": "縮小"
 }

package/test/Main.test.tsx

@@ -26,6 +26,7 @@ const mocks = [
           {
             bucketWidth: 0.0005,
             price: 0.8,
+            time: '2024-02-21T10:30:00Z',
             buckets: [
               {
                 price: 0.02,
@@ -68,6 +69,7 @@ const mocks = [
           {
             bucketWidth: 0.0005,
             price: 0.8,
+            time: '2024-02-21T10:30:00Z',
             buckets: [
               {
                 price: 0.02,
@@ -98,8 +100,15 @@ const mocks = [
 ];
 
 describe('Main component', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-02-21'));
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
   it('should render tool component', async () => {
-    const { findByTestId } = render(
+    const { findByTestId, findByText } = render(
       <MockedProvider mocks={mocks}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
           <Main />
@@ -108,6 +117,7 @@ describe('Main component', () => {
     );
 
     expect(await findByTestId('order-book-widget')).toBeInTheDocument();
+    expect(await findByText('last_updated: 10:30:00 UTC, today')).toBeInTheDocument();
     expect((await findByTestId('select'))).toBeInTheDocument();
   });
   it('should render widget component', async () => {