@oanda/labs-order-book-widget 1.0.87 → 1.0.89

package/dist/types/OrderBookWidget/constants.d.ts

@@ -0,0 +1,2 @@
+declare const EMPTY_VALUE = "\u2014";
+export { EMPTY_VALUE };

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

@@ -11,7 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare 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": DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
+    "\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": DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
         instrument: string;
         bookType: types.BookType;
         recentHours?: types.InputMaybe<number> | undefined;
@@ -33,6 +33,6 @@ export declare 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 declare 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 declare 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 type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

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

@@ -52,6 +52,62 @@ export declare enum BookType {
     Order = "ORDER",
     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 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>;
+};
+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>>;
+};
 export declare enum DataSource {
     Ny4 = "NY4",
     Ty3 = "TY3"
@@ -66,6 +122,11 @@ export declare enum Division {
     Oj = "OJ",
     Otms = "OTMS"
 }
+export type Heatmap = {
+    __typename?: 'Heatmap';
+    correlation: Array<Correlation>;
+    instrument: Scalars['String']['output'];
+};
 export type Instrument = {
     __typename?: 'Instrument';
     displayName?: Maybe<Scalars['String']['output']>;
@@ -83,7 +144,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'];
@@ -91,6 +152,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>>;
@@ -103,6 +167,12 @@ export type Query = {
 export type QueryAssetClassesArgs = {
     division: Division;
 };
+export type QueryCorrelationHeatmapArgs = {
+    division: Division;
+};
+export type QueryCurrencyPowerBalanceArgs = {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+};
 export type QueryOrderPositionBooksArgs = {
     bookType: BookType;
     dataSource?: InputMaybe<DataSource>;
@@ -156,16 +226,22 @@ export type 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 TopicalInstrument = {
     __typename?: 'TopicalInstrument';
     displayName: Scalars['String']['output'];
     name: Scalars['String']['output'];
-    sentiment: TopicalInstrumentSentiment;
+    sentiment: Sentiment;
     updatedAt: Scalars['String']['output'];
 };
 export type TopicalInstrumentChart = {
@@ -173,11 +249,6 @@ export type 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 declare enum TopicalSort {
     Bearish = "BEARISH",
     Bullish = "BULLISH",
@@ -193,7 +264,7 @@ export type VolatilityChart = {
 };
 export type VolatilityChartAssetClass = {
     __typename?: 'VolatilityChartAssetClass';
-    instruments?: Maybe<Array<Maybe<VolatilityChartInstrument>>>;
+    instruments: Array<VolatilityChartInstrument>;
     name: Scalars['String']['output'];
 };
 export type VolatilityChartInstrument = {
@@ -202,11 +273,17 @@ export type VolatilityChartInstrument = {
     name: 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 {
@@ -224,7 +301,8 @@ export type GetOrderPositionBooksQuery = {
     orderPositionBooks: Array<{
         __typename?: 'OrderPositionData';
         bucketWidth: number;
-        price: number;
+        price?: number | null;
+        time: string;
         buckets: Array<{
             __typename?: 'OrderPositionBucket';
             price: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.87",
+    "@oanda/labs-widget-common": "^1.0.89",
     "@oanda/mono-i18n": "9.0.0",
     "echarts": "5.4.3",
     "echarts-for-react": "3.0.2",
@@ -24,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "e7446b4a6f2ee2fb04e9bc39ad71883589cb8415"
+  "gitHead": "132c4c3570c0cba5114eccbd4d93a8469227a6c5"
 }

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/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,
@@ -108,6 +110,7 @@ describe('Main component', () => {
     );
 
     expect(await findByTestId('order-book-widget')).toBeInTheDocument();
+    expect(await findByTestId('info-box')).toHaveTextContent('last_updated: 10:30:00 UTC, today');
     expect((await findByTestId('select'))).toBeInTheDocument();
   });
   it('should render widget component', async () => {