@oanda/labs-crowd-view-widget 1.0.27 → 1.0.29

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

@@ -53,6 +53,7 @@ export declare enum AssetClassName {
     Cryptocurrency = "CRYPTOCURRENCY",
     Currency = "CURRENCY",
     EquityShares = "EQUITY_SHARES",
+    Etfs = "ETFS",
     Indices = "INDICES",
     Rates = "RATES"
 }
@@ -60,6 +61,20 @@ export declare enum BookType {
     Order = "ORDER",
     Position = "POSITION"
 }
+export type Candle = {
+    __typename?: 'Candle';
+    close: Scalars['Float']['output'];
+    high: Scalars['Float']['output'];
+    low: Scalars['Float']['output'];
+    open: Scalars['Float']['output'];
+};
+export type CandlesData = {
+    __typename?: 'CandlesData';
+    candle: Candle;
+    time: Scalars['String']['output'];
+    timeSpan: TimeSpan;
+    unixTime: Scalars['Int']['output'];
+};
 export type CorrelationHeatmap = {
     __typename?: 'CorrelationHeatmap';
     baseInstrument: Instrument;
@@ -133,6 +148,20 @@ export declare enum Division {
     Opt = "OPT",
     Otms = "OTMS"
 }
+export type ExtendedInstrument = {
+    __typename?: 'ExtendedInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    tradeMode: TradeMode;
+};
+export declare enum Granularity {
+    Day_1 = "DAY_1",
+    Hour_1 = "HOUR_1",
+    Hour_4 = "HOUR_4",
+    Minute_5 = "MINUTE_5",
+    Minute_15 = "MINUTE_15",
+    Minute_30 = "MINUTE_30"
+}
 export type Heatmap = {
     __typename?: 'Heatmap';
     instrument: Instrument;
@@ -154,8 +183,9 @@ export declare enum InstrumentDataSource {
 }
 export type InstrumentTableResult = {
     __typename?: 'InstrumentTableResult';
-    instruments: Array<Instrument>;
+    instruments: Array<ExtendedInstrument>;
     totalCount: Scalars['Int']['output'];
+    updatedAt: Scalars['String']['output'];
 };
 export type Matrix = {
     __typename?: 'Matrix';
@@ -186,6 +216,7 @@ export type Query = {
     correlationMatrix: CorrelationMatrix;
     currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
     currencyStrength?: Maybe<Array<CurrencyStrength>>;
+    getPriceCandles: Array<CandlesData>;
     isAllowedPartner?: Maybe<Scalars['Boolean']['output']>;
     mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
     orderPositionBooks: Array<Maybe<OrderPositionData>>;
@@ -216,6 +247,12 @@ export type QueryCorrelationMatrixArgs = {
 export type QueryCurrencyPowerBalanceArgs = {
     timeUnit: CurrencyPowerBalanceTimeUnit;
 };
+export type QueryGetPriceCandlesArgs = {
+    division?: InputMaybe<Division>;
+    granularity: Granularity;
+    instrument: Scalars['String']['input'];
+    timeSpan: TimeSpan;
+};
 export type QueryIsAllowedPartnerArgs = {
     url: Scalars['String']['input'];
 };
@@ -235,13 +272,14 @@ export type QueryResolveInstrumentsByDivisionArgs = {
     instruments: Array<InputMaybe<Scalars['String']['input']>>;
 };
 export type QueryResolveInstrumentsWithFiltersArgs = {
-    assetClass?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+    assetClass?: InputMaybe<Array<InputMaybe<AssetClassName>>>;
     count?: InputMaybe<Scalars['Int']['input']>;
     dataSource?: InputMaybe<InstrumentDataSource>;
     division: Division;
     instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
     offset?: InputMaybe<Scalars['Int']['input']>;
     searchPattern?: InputMaybe<Scalars['String']['input']>;
+    tradeModes?: InputMaybe<Array<InputMaybe<TradeMode>>>;
 };
 export type QuerySentimentArgs = {
     division?: InputMaybe<Division>;
@@ -316,6 +354,19 @@ export type TimeCorrelation = {
     timeUnit: CorrelationTimeUnit;
     value?: Maybe<Scalars['Float']['output']>;
 };
+export declare enum TimeSpan {
+    Day_1 = "DAY_1",
+    Day_2 = "DAY_2",
+    Hour_1 = "HOUR_1",
+    Hour_12 = "HOUR_12",
+    Month_1 = "MONTH_1",
+    Month_3 = "MONTH_3",
+    Month_6 = "MONTH_6",
+    Week_1 = "WEEK_1",
+    Week_2 = "WEEK_2",
+    Week_3 = "WEEK_3",
+    Year_1 = "YEAR_1"
+}
 export type TopicalInstrument = {
     __typename?: 'TopicalInstrument';
     assetClass?: Maybe<AssetClassName>;
@@ -336,6 +387,14 @@ export declare enum TopicalSort {
     Popular = "POPULAR",
     Volatile = "VOLATILE"
 }
+export declare enum TradeMode {
+    TradeCloseonly = "TRADE_CLOSEONLY",
+    TradeDisabled = "TRADE_DISABLED",
+    TradeFull = "TRADE_FULL",
+    TradeLongonly = "TRADE_LONGONLY",
+    TradeShortonly = "TRADE_SHORTONLY",
+    TradeUndefined = "TRADE_UNDEFINED"
+}
 export declare enum ValueAtRiskBars {
     C100 = "C100",
     C200 = "C200",
@@ -413,6 +472,28 @@ export type GetOrderPositionBooksQuery = {
         } | null>;
     } | null>;
 };
+export type GetPriceCandlesQueryVariables = Exact<{
+    division?: InputMaybe<Division>;
+    instrument: Scalars['String']['input'];
+    granularity: Granularity;
+    timeSpan: TimeSpan;
+}>;
+export type GetPriceCandlesQuery = {
+    __typename?: 'Query';
+    getPriceCandles: Array<{
+        __typename?: 'CandlesData';
+        time: string;
+        unixTime: number;
+        timeSpan: TimeSpan;
+        candle: {
+            __typename?: 'Candle';
+            high: number;
+            low: number;
+            open: number;
+            close: number;
+        };
+    }>;
+};
 export type ValidateInstrumentsQueryVariables = Exact<{
     instruments: Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>;
     division?: InputMaybe<Division>;
@@ -426,4 +507,5 @@ export type ValidateInstrumentsQuery = {
     } | null> | null;
 };
 export declare const GetOrderPositionBooksDocument: DocumentNode<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>;
+export declare const GetPriceCandlesDocument: DocumentNode<GetPriceCandlesQuery, GetPriceCandlesQueryVariables>;
 export declare const ValidateInstrumentsDocument: DocumentNode<ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.209",
+    "@oanda/labs-widget-common": "^1.0.211",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "3ea75a8eb6299695ea5b697b801040f06fcddb44"
+  "gitHead": "ecce179e47e442c6d1dac02607b4ae851f175740"
 }

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -5,7 +5,7 @@ import {
   Theme,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import { BarChart, CustomChart } from 'echarts/charts';
+import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
 import {
   DataZoomInsideComponent,
   GraphicComponent,
@@ -28,6 +28,7 @@ echarts.use([
   DataZoomInsideComponent,
   CustomChart,
   TooltipComponent,
+  CandlestickChart,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));

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

@@ -1,4 +1,8 @@
-import { getGridLines, getLineCommons } from '@oanda/labs-widget-common';
+import {
+  colorPalette,
+  getGridLines,
+  getLineCommons,
+} from '@oanda/labs-widget-common';
 import * as echarts from 'echarts/core';
 
 import {
@@ -60,6 +64,7 @@ export const getOption: GetOptionType = ({
   xAxisData,
   ordersPositionsChartData,
   ordersPositionsBucketWidth,
+  candlesSeriesData,
 }) => {
   return {
     animation: false,
@@ -108,6 +113,14 @@ export const getOption: GetOptionType = ({
       },
     },
     series: [
+      {
+        type: 'candlestick',
+        data: candlesSeriesData,
+        itemStyle: {
+          color: colorPalette.raspberryLight,
+          color0: colorPalette.bottleGreenLight,
+        },
+      },
       {
         type: 'custom',
         name: 'heatmap',

package/src/CrowdViewWidget/components/Chart/getPriceCandlesMock.ts

@@ -0,0 +1,43 @@
+import type { Candle } from '../../../gql/types/graphql';
+
+export const getPriceCandlesMock = (
+  count: number,
+  min: number = 1.3,
+  max: number = 2.1
+): Candle[] => {
+  const buffer = 0.02;
+  const safeMin = min + buffer;
+  const safeMax = max - buffer;
+
+  const initialClose = +(Math.random() * (safeMax - safeMin) + safeMin).toFixed(
+    5
+  );
+
+  return Array.from({ length: count }).reduce<Candle[]>((acc) => {
+    const prevClose =
+      acc.length === 0 ? initialClose : acc[acc.length - 1].close;
+    const isBullish = Math.random() > 0.5;
+
+    const bodySize = +(Math.random() * 0.05 + 0.015).toFixed(5);
+    const wickSize = +(Math.random() * 0.015 + 0.005).toFixed(5);
+
+    const open = prevClose;
+    let close = isBullish ? open + bodySize : open - bodySize;
+    close = Math.max(safeMin, Math.min(safeMax, Number(close)));
+
+    const high = Math.min(
+      max,
+      Math.max(Number(open), Number(close)) + wickSize
+    );
+    const low = Math.max(min, Math.min(Number(open), Number(close)) - wickSize);
+
+    acc.push({
+      open: +open.toFixed(5),
+      close: +close.toFixed(5),
+      low: +low.toFixed(5),
+      high: +high.toFixed(5),
+    });
+
+    return acc;
+  }, []);
+};

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

@@ -14,6 +14,7 @@ interface ChartOptionsProps {
     number,
   ][];
   ordersPositionsBucketWidth: number;
+  candlesSeriesData: [number, number, number, number][];
 }
 
 export type GetOptionType = (props: ChartOptionsProps) => EChartsOption;

package/src/CrowdViewWidget/components/Chart/utils.ts

@@ -1,5 +1,6 @@
 import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 import { colorMap } from '../../config';
+import { getPriceCandlesMock } from './getPriceCandlesMock';
 import type { TransformDataForChartType } from './types';
 
 export const getRectColor = (sentiment: number) => {
@@ -69,9 +70,20 @@ export const transformDataForChart: TransformDataForChartType = (data) => {
     )
     .filter((item) => Math.abs(item[2]) > 0.15);
 
+  const mockedCandles = getPriceCandlesMock(ordersPositionsChartData.length);
+
+  const candlesSeriesData: [number, number, number, number][] =
+    mockedCandles.map(({ close, open, low, high }) => [
+      +close.toFixed(5),
+      +open.toFixed(5),
+      +low.toFixed(5),
+      +high.toFixed(5),
+    ]);
+
   return {
     xAxisData,
     ordersPositionsChartData,
     ordersPositionsBucketWidth: mockedData[0]!.bucketWidth,
+    candlesSeriesData,
   };
 };

package/src/gql/mock/getPriceCandles.ts

@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+
+const getPriceCandles = gql`
+  query GetPriceCandles(
+    $division: Division
+    $instrument: String!
+    $granularity: Granularity!
+    $timeSpan: TimeSpan!
+  ) {
+    getPriceCandles(
+      division: $division
+      instrument: $instrument
+      granularity: $granularity
+      timeSpan: $timeSpan
+    ) {
+      time
+      unixTime
+      candle {
+        high
+        low
+        open
+        close
+      }
+      timeSpan
+    }
+  }
+`;
+
+export { getPriceCandles };

package/src/gql/mock/schema.graphqls

@@ -0,0 +1,62 @@
+enum TimeSpan {
+  HOUR_1
+  HOUR_12
+  DAY_1
+  DAY_2
+  WEEK_1
+  WEEK_2
+  WEEK_3
+  MONTH_1
+  MONTH_3
+  MONTH_6
+  YEAR_1
+}
+
+enum Granularity {
+  MINUTE_5
+  MINUTE_15
+  MINUTE_30
+  HOUR_1
+  HOUR_4
+  DAY_1
+}
+
+enum Division {
+  OAP
+  OAU
+  OC
+  OCAN
+  OEL
+  OGM
+  OJ
+  OPT
+  OTMS
+}
+
+type Candle {
+  high: Float!
+  low: Float!
+  open: Float!
+  close: Float!
+}
+
+type Instrument {
+  name: String!
+  displayName: String!
+}
+
+type CandlesData {
+  time: String!
+  unixTime: Int!
+  candle: Candle!
+  timeSpan: TimeSpan!
+}
+
+type Query {
+  getPriceCandles(
+    division: Division
+    instrument: String!
+    granularity: Granularity!
+    timeSpan: TimeSpan!
+  ): [CandlesData!]!
+}

package/src/gql/types/gql.ts

@@ -15,6 +15,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
 const documents = {
   '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $recentHours: Int\n  ) {\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,
+  '\n  query GetPriceCandles(\n    $division: Division\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    getPriceCandles(\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      time\n      unixTime\n      candle {\n        high\n        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n':
+    types.GetPriceCandlesDocument,
   '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
     types.ValidateInstrumentsDocument,
 };
@@ -39,6 +41,12 @@ export function graphql(source: string): unknown;
 export function graphql(
   source: '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $recentHours: Int\n  ) {\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(\n    $instrument: String!\n    $bookType: BookType!\n    $recentHours: Int\n  ) {\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'];
+/**
+ * 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 GetPriceCandles(\n    $division: Division\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    getPriceCandles(\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      time\n      unixTime\n      candle {\n        high\n        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n'
+): (typeof documents)['\n  query GetPriceCandles(\n    $division: Division\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    getPriceCandles(\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      time\n      unixTime\n      candle {\n        high\n        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */