@oanda/labs-crowd-view-widget 1.0.42 → 1.0.44

package/dist/types/CrowdViewWidget/components/Chart/types.d.ts

@@ -1,29 +1,32 @@
 import type { EChartsOption } from 'echarts';
-import type { BookType } from '../../../gql/types/graphql';
-import type { GranularityId } from '../../types';
-interface ChartOptionsProps {
+import type { BookType, Division, Granularity } from '../../../gql/types/graphql';
+export interface UseCrowdViewDataProps {
+    instrument: string;
+    bookType: BookType;
+    division: Division;
+    granularity: Granularity;
+}
+interface CrowdViewData {
     xAxisData: string[];
-    ordersPositionsChartData: [
-        string,
-        number,
-        number
-    ][];
-    ordersPositionsBucketWidth: number;
     candlesSeriesData: [number, number, number, number][];
+    orderPositionBooks: ([string, number, string] | null)[];
+    bucketWidth: number;
 }
-export type GetOptionType = (props: ChartOptionsProps, isDark: boolean) => EChartsOption;
+export interface UseCrowdViewDataReturn {
+    data: CrowdViewData | null;
+    loading: boolean;
+    error: boolean;
+}
+export type GetOptionType = (props: CrowdViewData, isDark: boolean) => EChartsOption;
 export interface ChartProps {
-    data: ChartOptionsProps;
+    data: CrowdViewData;
 }
 export interface ChartWithDataProps {
     bookType: BookType;
+    division: Division;
     instrument: string;
-    granularity: GranularityId;
-}
-interface TransformDataForChartTypeProps {
-    granularity: GranularityId;
+    granularity: Granularity;
 }
-export type TransformDataForChartType = (props: TransformDataForChartTypeProps) => ChartOptionsProps;
 export interface GetLabelsDataProps {
     xAxisData: string[];
     isGreaterThanTwoWeeks: boolean;

package/dist/types/CrowdViewWidget/components/Chart/useCrowdViewData.d.ts

@@ -0,0 +1,2 @@
+import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
+export declare const useCrowdViewData: ({ instrument, bookType, division, granularity, }: UseCrowdViewDataProps) => UseCrowdViewDataReturn;

package/dist/types/CrowdViewWidget/components/Chart/{utils.d.ts → utils/chartUtils.d.ts}

@@ -1,13 +1,5 @@
-import type { GetLabelsDataProps, TransformDataForChartType } from './types';
-export declare const getRectColor: (sentiment: number) => string;
-export declare 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"
-}
+import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+import type { GetLabelsDataProps } from '../types';
 export declare const getLabelData: ({ xAxisData, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => {
     name: string;
     xAxis: string;
@@ -25,4 +17,5 @@ export declare const getLabelData: ({ xAxisData, isGreaterThanTwoWeeks, }: GetLa
     };
 }[];
 export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;
-export declare const transformDataForChart: TransformDataForChartType;
+export declare const getTimeSpanForGranularity: (granularity: Granularity) => TimeSpan;
+export declare const getRectColor: (sentiment: number) => string;

package/dist/types/CrowdViewWidget/components/Legend/Legend.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface LegendProps {
-    longValues: number[];
-    shortValues: number[];
+    longValues?: [number, number];
+    shortValues?: [number, number];
 }
-export declare const Legend: ({ longValues, shortValues }: LegendProps) => React.JSX.Element;
+export declare const Legend: ({ longValues, shortValues, }: LegendProps) => React.JSX.Element;
 export {};

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

@@ -0,0 +1,23 @@
+export declare const BOOKS_THRESHOLDS: {
+    readonly MIN: 0.15;
+    readonly MAX: 0.55;
+};
+export declare const BUCKET_CONFIG: {
+    readonly DEFAULT_WIDTH: 0.0005;
+    readonly PRICE_PADDING_MULTIPLIER: 2;
+};
+export declare const TIME_THRESHOLDS: {
+    readonly TWO_WEEKS_MS: number;
+};
+export declare const CHART_CONFIG: {
+    readonly HEIGHT: 425;
+    readonly WIDTH: 9999;
+    readonly X_LABEL_SIZE: 40;
+    readonly Y_LABEL_SIZE_DESKTOP: 60;
+    readonly INITIAL_START_ZOOM: 80;
+    readonly INITIAL_END_ZOOM: 100;
+};
+export declare const COLOR_MAP: {
+    readonly long: readonly ["#ffffff", "#fdb833"];
+    readonly short: readonly ["#ffffff", "#0096c7"];
+};

package/dist/types/CrowdViewWidget/selectConfig.d.ts

@@ -0,0 +1,19 @@
+import { BookType, Granularity } from '../gql/types/graphql';
+import { InstrumentId, InstrumentIdOC } from './types/instruments';
+declare const navigationConfig: {
+    id: BookType;
+    label: string;
+}[];
+declare const instrumentSelectConfigOC: {
+    id: InstrumentIdOC;
+    label: string;
+}[];
+declare const instrumentSelectConfig: {
+    id: InstrumentId;
+    label: string;
+}[];
+declare const granularitySelectConfig: {
+    id: Granularity;
+    label: string;
+}[];
+export { granularitySelectConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig, };

package/dist/types/CrowdViewWidget/types/index.d.ts

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

package/dist/types/CrowdViewWidget/types/instruments.d.ts

@@ -0,0 +1,36 @@
+export declare 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 declare 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/dist/types/CrowdViewWidget/types.d.ts

@@ -1,58 +1,10 @@
 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 {
+    division: Division;
 }
 export interface MainProps {
     instrument?: InstrumentId;
     division: Division;
 }
-export declare 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 declare 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 declare 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/dist/types/CrowdViewWidget/utils/instrumentUtils.d.ts

@@ -0,0 +1,8 @@
+import { Division } from '../../gql/types/graphql';
+export declare const getInstrumentConfigForDivision: (division: Division) => {
+    id: import("../types").InstrumentIdOC;
+    label: string;
+}[] | {
+    id: import("../types").InstrumentId;
+    label: string;
+}[];

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

@@ -11,21 +11,21 @@ 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(\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': DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
+    '\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': DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
         instrument: types.Scalars["String"]["input"];
         bookType: types.BookType;
-        recentHours?: types.InputMaybe<types.Scalars["Int"]["input"]>;
+        timeSpan: types.TimeSpan;
+        granularity: types.Granularity;
+        maxBookPrice?: types.InputMaybe<types.Scalars["Float"]["input"]>;
+        minBookPrice?: types.InputMaybe<types.Scalars["Float"]["input"]>;
     }>>;
-    '\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': DocumentNode<types.GetPriceCandlesQuery, types.Exact<{
-        division?: types.InputMaybe<types.Division>;
+    '\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': DocumentNode<types.GetPriceCandlesQuery, types.Exact<{
+        dataSource: types.DataSource;
+        division: types.Division;
         instrument: types.Scalars["String"]["input"];
         granularity: types.Granularity;
         timeSpan: types.TimeSpan;
     }>>;
-    '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n': DocumentNode<types.ValidateInstrumentsQuery, types.Exact<{
-        instruments: Array<types.InputMaybe<types.Scalars["String"]["input"]>> | types.InputMaybe<types.Scalars["String"]["input"]>;
-        division?: types.InputMaybe<types.Division>;
-    }>>;
 };
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -43,14 +43,10 @@ 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(\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 declare 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'];
+export declare function graphql(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 declare 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'];
+export declare function graphql(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 type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

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

@@ -67,13 +67,16 @@ export type Candle = {
     high: Scalars['Float']['output'];
     low: Scalars['Float']['output'];
     open: Scalars['Float']['output'];
+    /** UTC Timestamp */
+    point: Scalars['String']['output'];
 };
 export type CandlesData = {
     __typename?: 'CandlesData';
-    candle: Candle;
-    time: Scalars['String']['output'];
+    candle: Array<Maybe<Candle>>;
+    granularity: Granularity;
+    instrument: Instrument;
+    pipsLocation: Scalars['Int']['output'];
     timeSpan: TimeSpan;
-    unixTime: Scalars['Int']['output'];
 };
 export type CorrelationHeatmap = {
     __typename?: 'CorrelationHeatmap';
@@ -134,8 +137,9 @@ export type CurrencyStrength = {
     updatedAt: Scalars['String']['output'];
 };
 export declare enum DataSource {
-    Ny4 = "NY4",
-    Ty3 = "TY3"
+    All = "ALL",
+    Mt5 = "MT5",
+    V20 = "V20"
 }
 export declare enum Division {
     Oap = "OAP",
@@ -150,17 +154,16 @@ export declare enum Division {
 }
 export type ExtendedInstrument = {
     __typename?: 'ExtendedInstrument';
+    dataSource: DataSource;
     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"
+    H1 = "H1",
+    H4 = "H4",
+    M5 = "M5",
+    M15 = "M15"
 }
 export type Heatmap = {
     __typename?: 'Heatmap';
@@ -177,26 +180,33 @@ export type InstrumentCorrelation = {
     instrument: Instrument;
     value?: Maybe<Scalars['Float']['output']>;
 };
-export declare enum InstrumentDataSource {
-    Mt5 = "MT5",
-    V20 = "V20"
-}
 export type InstrumentTableResult = {
     __typename?: 'InstrumentTableResult';
     instruments: Array<ExtendedInstrument>;
     totalCount: Scalars['Int']['output'];
     updatedAt: Scalars['String']['output'];
 };
+export type MarginRate = {
+    __typename?: 'MarginRate';
+    instrument: Instrument;
+    rate: Scalars['Float']['output'];
+};
 export type Matrix = {
     __typename?: 'Matrix';
     instrument: Instrument;
     instrumentCorrelation: Array<InstrumentCorrelation>;
 };
+export declare enum OrderBookDataSource {
+    Ny4 = "NY4",
+    Ny4Mt5 = "NY4_MT5",
+    Ty3 = "TY3"
+}
 export type OrderPositionBucket = {
     __typename?: 'OrderPositionBucket';
-    longCountPercent: Scalars['Float']['output'];
+    longCountPercent?: Maybe<Scalars['Float']['output']>;
     price: Scalars['Float']['output'];
-    shortCountPercent: Scalars['Float']['output'];
+    sentiment?: Maybe<Scalars['Float']['output']>;
+    shortCountPercent?: Maybe<Scalars['Float']['output']>;
 };
 export type OrderPositionData = {
     __typename?: 'OrderPositionData';
@@ -216,10 +226,12 @@ 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>>>;
+    marginRates?: Maybe<Array<MarginRate>>;
+    orderPositionBook: Array<Maybe<OrderPositionData>>;
     orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    priceCandles: CandlesData;
     resolveInstrumentsByDivision?: Maybe<Array<Instrument>>;
     resolveInstrumentsWithFilters?: Maybe<InstrumentTableResult>;
     sentiment?: Maybe<Array<SentimentInstrument>>;
@@ -247,12 +259,6 @@ 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'];
 };
@@ -260,12 +266,32 @@ export type QueryMapInstrumentNamesArgs = {
     division?: InputMaybe<Division>;
     instruments: Array<InputMaybe<Scalars['String']['input']>>;
 };
-export type QueryOrderPositionBooksArgs = {
+export type QueryMarginRatesArgs = {
+    dataSource: DataSource;
+    division: Division;
+    instruments?: InputMaybe<Array<Scalars['String']['input']>>;
+    tradingGroup: Scalars['Int']['input'];
+};
+export type QueryOrderPositionBookArgs = {
     bookType: BookType;
-    dataSource?: InputMaybe<DataSource>;
+    dataSource?: InputMaybe<OrderBookDataSource>;
     instrument: Scalars['String']['input'];
     recentHours?: InputMaybe<Scalars['Int']['input']>;
-    region?: InputMaybe<Region>;
+};
+export type QueryOrderPositionBooksArgs = {
+    bookType: BookType;
+    granularity: Granularity;
+    instrument: Scalars['String']['input'];
+    maxBookPrice?: InputMaybe<Scalars['Float']['input']>;
+    minBookPrice?: InputMaybe<Scalars['Float']['input']>;
+    timeSpan: TimeSpan;
+};
+export type QueryPriceCandlesArgs = {
+    dataSource: DataSource;
+    division: Division;
+    granularity: Granularity;
+    instrument: Scalars['String']['input'];
+    timeSpan: TimeSpan;
 };
 export type QueryResolveInstrumentsByDivisionArgs = {
     division: Division;
@@ -274,7 +300,7 @@ export type QueryResolveInstrumentsByDivisionArgs = {
 export type QueryResolveInstrumentsWithFiltersArgs = {
     assetClass?: InputMaybe<Array<InputMaybe<AssetClassName>>>;
     count?: InputMaybe<Scalars['Int']['input']>;
-    dataSource?: InputMaybe<InstrumentDataSource>;
+    dataSource: DataSource;
     division: Division;
     instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
     offset?: InputMaybe<Scalars['Int']['input']>;
@@ -355,17 +381,11 @@ export type TimeCorrelation = {
     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"
+    FiveDays = "FIVE_DAYS",
+    NinetyDays = "NINETY_DAYS",
+    TenDays = "TEN_DAYS",
+    TwentyDays = "TWENTY_DAYS",
+    TwoDays = "TWO_DAYS"
 }
 export type TopicalInstrument = {
     __typename?: 'TopicalInstrument';
@@ -455,7 +475,10 @@ export declare enum VolatilityChartTimeUnit {
 export type GetOrderPositionBooksQueryVariables = Exact<{
     instrument: Scalars['String']['input'];
     bookType: BookType;
-    recentHours?: InputMaybe<Scalars['Int']['input']>;
+    timeSpan: TimeSpan;
+    granularity: Granularity;
+    maxBookPrice?: InputMaybe<Scalars['Float']['input']>;
+    minBookPrice?: InputMaybe<Scalars['Float']['input']>;
 }>;
 export type GetOrderPositionBooksQuery = {
     __typename?: 'Query';
@@ -467,45 +490,30 @@ export type GetOrderPositionBooksQuery = {
         buckets: Array<{
             __typename?: 'OrderPositionBucket';
             price: number;
-            longCountPercent: number;
-            shortCountPercent: number;
+            sentiment?: number | null;
         } | null>;
     } | null>;
 };
 export type GetPriceCandlesQueryVariables = Exact<{
-    division?: InputMaybe<Division>;
+    dataSource: DataSource;
+    division: Division;
     instrument: Scalars['String']['input'];
     granularity: Granularity;
     timeSpan: TimeSpan;
 }>;
 export type GetPriceCandlesQuery = {
     __typename?: 'Query';
-    getPriceCandles: Array<{
+    priceCandles: {
         __typename?: 'CandlesData';
-        time: string;
-        unixTime: number;
-        timeSpan: TimeSpan;
-        candle: {
+        candle: Array<{
             __typename?: 'Candle';
+            point: string;
             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>;
-}>;
-export type ValidateInstrumentsQuery = {
-    __typename?: 'Query';
-    mapInstrumentNames?: Array<{
-        __typename?: 'Instrument';
-        name: string;
-        displayName: string;
-    } | null> | 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.42",
+  "version": "1.0.44",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,13 +13,15 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.224",
+    "@oanda/labs-widget-common": "^1.0.226",
     "@oanda/mono-i18n": "10.0.1",
+    "chroma-js": "^3.1.2",
     "graphql": "16.8.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.0",
-    "@graphql-codegen/client-preset": "4.1.0"
+    "@graphql-codegen/client-preset": "4.1.0",
+    "@types/chroma-js": "^3.1.2"
   },
-  "gitHead": "b03e9304ac39928b92878bab83628b07214c3c6f"
+  "gitHead": "4709e181ae37de87e1c5d5569391c5f6cfeeca33"
 }

package/src/CrowdViewWidget/CrowdViewWidget.tsx

@@ -2,7 +2,6 @@ import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import React from 'react';
 
-import { Division } from '../gql/types/graphql';
 import { translations } from '../translations';
 import { Main } from './Main';
 import type { CrowdViewConfig } from './types';
@@ -13,6 +12,7 @@ const CrowdViewWidget = ({
   theme,
   isParamError,
   logoLink,
+  division,
 }: CrowdViewConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -31,7 +31,7 @@ const CrowdViewWidget = ({
         linkArea="logo"
         logoLink={logoLink}
       >
-        <Main division={Division.Oc} />
+        <Main division={division} />
       </WidgetWrapper>
     </WidgetProvider>
   );

package/src/CrowdViewWidget/Main.tsx

@@ -8,21 +8,17 @@ import {
 import { useLocale } from '@oanda/mono-i18n';
 import React, { useState } from 'react';
 
-import { BookType, Division } from '../gql/types/graphql';
+import type { Granularity } from '../gql/types/graphql';
+import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
-import {
-  granularitySelectConfig,
-  instrumentSelectConfig,
-  instrumentSelectConfigOC,
-  navigationConfig,
-} from './config';
-import type { GranularityId, InstrumentId, MainProps } from './types';
+import { granularitySelectConfig, navigationConfig } from './selectConfig';
+import type { MainProps } from './types';
+import type { InstrumentId } from './types/instruments';
+import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const instrumentSelectConfigWithDivision =
-    division === Division.Oc
-      ? instrumentSelectConfigOC
-      : instrumentSelectConfig;
+    getInstrumentConfigForDivision(division);
 
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
@@ -77,7 +73,7 @@ const Main = ({ division }: MainProps) => {
                 selectLabel={lang('granularity')}
                 selectedOption={granularity}
                 setSelectedOption={(val) =>
-                  setGranularity(val as { id: GranularityId; label: string })
+                  setGranularity(val as { id: Granularity; label: string })
                 }
               />
             </div>
@@ -85,14 +81,12 @@ const Main = ({ division }: MainProps) => {
 
           <ChartWithData
             bookType={bookType}
+            division={division}
             granularity={granularity.id}
             instrument={instrument.id}
           />
 
-          <Legend
-            longValues={[0.15, 0.25, 0.4, 0.55]}
-            shortValues={[0.15, 0.25, 0.4, 0.55]}
-          />
+          <Legend />
         </div>
       )}
     </>