@oanda/labs-crowd-view-widget 1.0.43 → 1.0.45

package/src/CrowdViewWidget/{config.ts → selectConfig.ts}

@@ -1,6 +1,5 @@
-import { BookType } from '../gql/types/graphql';
-import type { LegendType } from './components/Legend/LegendBar';
-import { GranularityId, InstrumentId } from './types';
+import { BookType, Granularity } from '../gql/types/graphql';
+import { InstrumentId, InstrumentIdOC } from './types/instruments';
 
 const navigationConfig = [
   {
@@ -14,6 +13,65 @@ const navigationConfig = [
 ];
 
 const instrumentSelectConfigOC = [
+  {
+    id: InstrumentIdOC.EUR_AUD,
+    label: 'EUR/AUD',
+  },
+  {
+    id: InstrumentIdOC.EUR_GBP,
+    label: 'EUR/GBP',
+  },
+  {
+    id: InstrumentIdOC.EUR_JPY,
+    label: 'EUR/JPY',
+  },
+  {
+    id: InstrumentIdOC.EUR_USD,
+    label: 'EUR/USD',
+  },
+  {
+    id: InstrumentIdOC.EUR_CHF,
+    label: 'EUR/CHF',
+  },
+  {
+    id: InstrumentIdOC.USD_CHF,
+    label: 'USD/CHF',
+  },
+  {
+    id: InstrumentIdOC.USD_JPY,
+    label: 'USD/JPY',
+  },
+  {
+    id: InstrumentIdOC.USD_CAD,
+    label: 'USD/CAD',
+  },
+  {
+    id: InstrumentIdOC.GBP_USD,
+    label: 'GBP/USD',
+  },
+  {
+    id: InstrumentIdOC.GBP_JPY,
+    label: 'GBP/JPY',
+  },
+  {
+    id: InstrumentIdOC.GBP_CHF,
+    label: 'GBP/CHF',
+  },
+  {
+    id: InstrumentIdOC.AUD_JPY,
+    label: 'AUD/JPY',
+  },
+  {
+    id: InstrumentIdOC.AUD_USD,
+    label: 'AUD/USD',
+  },
+  {
+    id: InstrumentIdOC.NZD_USD,
+    label: 'NZD/USD',
+  },
+];
+
+const instrumentSelectConfig = [
   {
     id: InstrumentId.EUR_AUD,
     label: 'EUR/AUD',
@@ -70,10 +128,6 @@ const instrumentSelectConfigOC = [
     id: InstrumentId.NZD_USD,
     label: 'NZD/USD',
   },
-];
-
-const instrumentSelectConfig = [
-  ...instrumentSelectConfigOC,
   {
     id: InstrumentId.XAU_USD,
     label: 'XAU/USD',
@@ -84,60 +138,28 @@ const instrumentSelectConfig = [
   },
 ];
 
-const instrumentPrecisionConfig: Record<InstrumentId, number> = {
-  [InstrumentId.EUR_AUD]: 5,
-  [InstrumentId.EUR_GBP]: 5,
-  [InstrumentId.EUR_JPY]: 3,
-  [InstrumentId.EUR_USD]: 5,
-  [InstrumentId.EUR_CHF]: 5,
-  [InstrumentId.USD_CHF]: 5,
-  [InstrumentId.USD_JPY]: 3,
-  [InstrumentId.USD_CAD]: 5,
-  [InstrumentId.GBP_USD]: 5,
-  [InstrumentId.GBP_JPY]: 3,
-  [InstrumentId.GBP_CHF]: 5,
-  [InstrumentId.AUD_JPY]: 3,
-  [InstrumentId.AUD_USD]: 5,
-  [InstrumentId.NZD_USD]: 5,
-  [InstrumentId.XAU_USD]: 3,
-  [InstrumentId.XAG_USD]: 5,
-};
-
 const granularitySelectConfig = [
   {
-    id: GranularityId.MINUTE_5,
+    id: Granularity.M5,
     label: '5_minutes',
   },
   {
-    id: GranularityId.MINUTE_15,
+    id: Granularity.M15,
     label: '15_minutes',
   },
   {
-    id: GranularityId.MINUTE_30,
-    label: '30_minutes',
-  },
-  {
-    id: GranularityId.HOUR_1,
+    id: Granularity.H1,
     label: '1_hour',
   },
   {
-    id: GranularityId.HOUR_4,
+    id: Granularity.H4,
     label: '4_hours',
   },
-  {
-    id: GranularityId.DAY_1,
-    label: '1_day',
-  },
 ];
 
 export {
   granularitySelectConfig,
-  instrumentPrecisionConfig,
   instrumentSelectConfig,
   instrumentSelectConfigOC,
   navigationConfig,
 };
-export const colorMap: Record<LegendType, string[]> = {
-  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],
-  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],
-};

package/src/CrowdViewWidget/types/index.ts

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

package/src/CrowdViewWidget/types/instruments.ts

@@ -0,0 +1,37 @@
+export enum InstrumentId {
+  EUR_AUD = 'EURAUD',
+  EUR_GBP = 'EURGBP',
+  EUR_JPY = 'EURJPY',
+  EUR_USD = 'EURUSD',
+  EUR_CHF = 'EURCHF',
+  USD_CHF = 'USDCHF',
+  USD_JPY = 'USDJPY',
+  USD_CAD = 'USDCAD',
+  GBP_USD = 'GBPUSD',
+  GBP_JPY = 'GBPJPY',
+  GBP_CHF = 'GBPCHF',
+  AUD_JPY = 'AUDJPY',
+  AUD_USD = 'AUDUSD',
+  NZD_USD = 'NZDUSD',
+  XAU_USD = 'XAUUSD',
+  XAG_USD = 'XAGUSD',
+}
+
+export enum InstrumentIdOC {
+  EUR_AUD = 'EUR_AUD',
+  EUR_GBP = 'EUR_GBP',
+  EUR_JPY = 'EUR_JPY',
+  EUR_USD = 'EUR_USD',
+  EUR_CHF = 'EUR_CHF',
+  USD_CHF = 'USD_CHF',
+  USD_JPY = 'USD_JPY',
+  USD_CAD = 'USD_CAD',
+  GBP_USD = 'GBP_USD',
+  GBP_JPY = 'GBP_JPY',
+  GBP_CHF = 'GBP_CHF',
+  AUD_JPY = 'AUD_JPY',
+  AUD_USD = 'AUD_USD',
+  NZD_USD = 'NZD_USD',
+  XAU_USD = 'XAU_USD',
+  XAG_USD = 'XAG_USD',
+}

package/src/CrowdViewWidget/types.ts

@@ -1,64 +1,13 @@
 import type { WidgetConfig } from '@oanda/labs-widget-common';
 
 import type { Division } from '../gql/types/graphql';
+import type { InstrumentId } from './types/instruments';
 
-export interface CrowdViewConfig extends WidgetConfig {}
+export interface CrowdViewConfig extends WidgetConfig {
+  division: Division;
+}
 
 export interface MainProps {
   instrument?: InstrumentId;
   division: Division;
 }
-
-export enum InstrumentId {
-  EUR_AUD = 'EURAUD',
-  EUR_GBP = 'EURGBP',
-  EUR_JPY = 'EURJPY',
-  EUR_USD = 'EURUSD',
-  EUR_CHF = 'EURCHF',
-  USD_CHF = 'USDCHF',
-  USD_JPY = 'USDJPY',
-  USD_CAD = 'USDCAD',
-  GBP_USD = 'GBPUSD',
-  GBP_JPY = 'GBPJPY',
-  GBP_CHF = 'GBPCHF',
-  AUD_JPY = 'AUDJPY',
-  AUD_USD = 'AUDUSD',
-  NZD_USD = 'NZDUSD',
-  XAU_USD = 'XAUUSD',
-  XAG_USD = 'XAGUSD',
-}
-
-export enum GranularityId {
-  MINUTE_5 = 'MINUTE_5',
-  MINUTE_15 = 'MINUTE_15',
-  MINUTE_30 = 'MINUTE_30',
-  HOUR_1 = 'HOUR_1',
-  HOUR_4 = 'HOUR_4',
-  DAY_1 = 'DAY_1',
-}
-
-export enum TimeSpanId {
-  HOUR_1 = 'HOUR_1',
-  HOUR_12 = 'HOUR_12',
-  DAY_1 = 'DAY_1',
-  DAY_2 = 'DAY_2',
-  WEEK_1 = 'WEEK_1',
-  WEEK_2 = 'WEEK_2',
-  WEEK_3 = 'WEEK_3',
-  MONTH_1 = 'MONTH_1',
-  MONTH_3 = 'MONTH_3',
-  MONTH_6 = 'MONTH_6',
-  YEAR_1 = 'YEAR_1',
-  YEAR_5 = 'YEAR_5',
-}
-
-export interface OrdersPositionsData {
-  price: number;
-  buckets: {
-    price: number;
-    longCountPercent: number;
-    shortCountPercent: number;
-  }[];
-  bucketWidth: number;
-  timestamp: number;
-}

package/src/CrowdViewWidget/utils/instrumentUtils.ts

@@ -0,0 +1,11 @@
+import { Division } from '../../gql/types/graphql';
+import {
+  instrumentSelectConfig,
+  instrumentSelectConfigOC,
+} from '../selectConfig';
+
+export const getInstrumentConfigForDivision = (division: Division) => {
+  return division === Division.Oc
+    ? instrumentSelectConfigOC
+    : instrumentSelectConfig;
+};

package/src/gql/getOrderPositionBooks.ts

@@ -4,20 +4,25 @@ const getOrderPositionBooks = gql`
   query GetOrderPositionBooks(
     $instrument: String!
     $bookType: BookType!
-    $recentHours: Int
+    $timeSpan: TimeSpan!
+    $granularity: Granularity!
+    $maxBookPrice: Float
+    $minBookPrice: Float
   ) {
     orderPositionBooks(
       instrument: $instrument
       bookType: $bookType
-      recentHours: $recentHours
+      timeSpan: $timeSpan
+      granularity: $granularity
+      maxBookPrice: $maxBookPrice
+      minBookPrice: $minBookPrice
     ) {
       bucketWidth
       price
       time
       buckets {
         price
-        longCountPercent
-        shortCountPercent
+        sentiment
       }
     }
   }

package/src/gql/{mock/getPriceCandles.ts → getPriceCandles.ts}

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

package/src/gql/types/gql.ts

@@ -13,12 +13,10 @@ 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(\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':
+  '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        sentiment\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':
+  '\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\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,20 +37,14 @@ 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(\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'];
+  source: '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        sentiment\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        sentiment\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.
- */
-export function graphql(
-  source: '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'
-): (typeof documents)['\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'];
+  source: '\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};