@oanda/labs-crowd-view-widget 1.0.52 → 1.0.54

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

@@ -0,0 +1,10 @@
+export * from './getDataZoomConfig';
+export * from './getGridConfig';
+export * from './getGridLines';
+export * from './getSeriesCandlestickConfig';
+export * from './getSeriesHeatmapConfig';
+export * from './getSeriesSentimentConfig';
+export * from './getTooltipConfig';
+export * from './getVisualMapConfig';
+export * from './getXAxisConfig';
+export * from './getYAxisConfig';

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

@@ -0,0 +1 @@
+export declare const formatXAxisLabel: (value: unknown, isGreaterThanTwoWeeks: boolean) => string;

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

@@ -1,10 +1,10 @@
 export interface ChartStyles {
     sentimentLongColor: string;
     sentimentShortColor: string;
+    sentimentOutlineColor: string;
     candleLongColor: string;
     candleShortColor: string;
-    sentimentAreaOpacity: number;
     tooltipLinesColor: string;
-    sentimentLabelColor: string;
+    sentimentOutlineWidth: number;
 }
 export declare const getChartStyles: (isDark: boolean) => ChartStyles;

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

@@ -0,0 +1 @@
+export declare const getGradientColor: (value: number, startColor: string, targetColor: string, minThreshold: number, maxThreshold: number) => string;

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

@@ -0,0 +1,17 @@
+import type { GetLabelsDataProps } from '../types';
+export declare const getLabelData: ({ dates, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => {
+    readonly name: string;
+    readonly xAxis: string;
+    readonly y: number;
+    readonly silent: true;
+    readonly emphasis: {
+        readonly disabled: true;
+    };
+    readonly label: {
+        readonly fontFamily: "Sofia W03";
+        readonly fontSize: 10;
+        readonly position: "bottom";
+        readonly align: "center";
+        readonly formatter: "{b}";
+    };
+}[];

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

@@ -0,0 +1 @@
+export declare const getRectColor: (sentiment: number, isDark: boolean, minThreshold: number, maxThreshold: number) => string;

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

@@ -0,0 +1,10 @@
+import { BookType } from '../../../../gql/types/graphql';
+import type { Bucket, TooltipParam } from '../types';
+export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, bookType, labelCallback, }: {
+    params: TooltipParam[];
+    buckets: Bucket[][];
+    bucketWidth: number;
+    selectedPrice: number;
+    bookType: BookType;
+    labelCallback: (key: string) => string;
+}) => string;

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

@@ -0,0 +1,7 @@
+export * from './formatXAxisLabel';
+export * from './getChartStyles';
+export * from './getGradientColor';
+export * from './getLabelData';
+export * from './getRectColor';
+export * from './getTooltipFormatter';
+export * from './isDifferenceGreaterThanTwoWeeks';

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

@@ -0,0 +1 @@
+export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;

package/dist/types/CrowdViewWidget/{utils/instrumentUtils.d.ts → components/Chart/dataUtils/getInstrumentConfigForDivision.d.ts}

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

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

@@ -0,0 +1,2 @@
+import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+export declare const getTimeSpanForGranularity: (granularity: Granularity) => TimeSpan;

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

@@ -0,0 +1,6 @@
+export * from './getInstrumentConfigForDivision';
+export * from './getTimeSpanForGranularity';
+export * from './processOrderPositionBooks';
+export * from './processPriceCandles';
+export * from './processSentiments';
+export * from './validateData';

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

@@ -0,0 +1,11 @@
+import type { GetOrderPositionBooksQuery } from '../../../../gql/types/graphql';
+import type { Bucket } from '../types';
+export declare const processOrderPositionBooks: (orderPositionData: GetOrderPositionBooksQuery | undefined, dates: string[]) => {
+    bookPrices: (number | null)[];
+    bookIndexes: number[];
+    buckets: Bucket[][];
+    bucketWidth: number;
+    sentimentThresholdMin: number;
+    sentimentThresholdMax: number;
+    hasValidBooks: boolean;
+};

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

@@ -0,0 +1,12 @@
+import type { GetPriceCandlesQuery } from '../../../../gql/types/graphql';
+export declare const processPriceCandles: (priceCandlesData: GetPriceCandlesQuery | undefined) => {
+    minPrice: number;
+    maxPrice: number;
+    candlesOpen: number[];
+    candlesClose: number[];
+    candlesLow: number[];
+    candlesHigh: number[];
+    dates: string[];
+    hasValidCandles: boolean;
+    pipsLocation: number;
+};

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

@@ -0,0 +1,6 @@
+import type { GetSentimentsQuery } from '../../../../gql/types/graphql';
+export declare const processSentiments: (sentimentsData: GetSentimentsQuery | undefined, dates: string[]) => {
+    sentimentLongs: (number | null)[];
+    sentimentShorts: (number | null)[];
+    hasValidSentiments: boolean;
+};

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

@@ -1,2 +1,2 @@
 import type { GetOrderPositionBooksQuery, GetPriceCandlesQuery } from '../../../../gql/types/graphql';
-export declare const validateData: (priceCandlesData: GetPriceCandlesQuery | undefined, orderPositionData: GetOrderPositionBooksQuery | undefined, hasValidCandles: boolean) => Error | null;
+export declare const validateData: (priceCandlesData: GetPriceCandlesQuery | undefined, orderPositionData: GetOrderPositionBooksQuery | undefined, hasValidCandles: boolean, hasValidBooks: boolean, hasValidSentiments: boolean) => Error | null;

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

@@ -1,6 +1,6 @@
 export * from './Chart';
 export * from './chartOptions';
 export * from './ChartWithData';
+export * from './dataUtils';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils';

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

@@ -11,25 +11,42 @@ export interface UseCrowdViewDataProps {
     division: Division;
     granularity: Granularity;
 }
-export type ProcessedSentiment = [string, number, number];
-interface CrowdViewData {
-    xAxisData: string[];
-    candlesSeriesData: [number, number, number, number][];
-    orderPositionBooks: [string, number | null, number][];
+interface CrowdViewMainData {
+    dates: string[];
+    candlesOpen: number[];
+    candlesClose: number[];
+    candlesLow: number[];
+    candlesHigh: number[];
+    bookPrices?: (number | null)[];
+    bookIndexes?: (number | null)[];
+    sentimentShorts: (number | null)[];
+    sentimentLongs: (number | null)[];
+}
+interface CrowdViewAdditionalData {
     bucketWidth: number;
     buckets: Bucket[][];
-    precision: number;
+    displayPrecision: number;
     bookType: BookType;
-    sentiments: ProcessedSentiment[];
+    sentimentThresholdMin: number;
+    sentimentThresholdMax: number;
 }
 export interface UseCrowdViewDataReturn {
-    data: CrowdViewData | null;
+    mainData?: CrowdViewMainData | null;
+    additionalData?: CrowdViewAdditionalData | null;
     loading: boolean;
     error: boolean;
 }
-export type GetOptionType = (props: CrowdViewData, isDark: boolean, isDesktop: boolean, labelCallback: (key: string, params?: Record<string, unknown>) => string) => EChartsOption;
+interface GetOptionProps {
+    mainData: CrowdViewMainData;
+    additionalData: CrowdViewAdditionalData;
+    isDark: boolean;
+    isDesktop: boolean;
+    labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+export type GetOptionType = (props: GetOptionProps) => EChartsOption;
 export interface ChartProps {
-    data: CrowdViewData;
+    mainData: CrowdViewMainData;
+    additionalData: CrowdViewAdditionalData;
     isDesktop: boolean;
 }
 export interface ChartWithDataProps {
@@ -39,7 +56,7 @@ export interface ChartWithDataProps {
     granularity: Granularity;
 }
 export interface GetLabelsDataProps {
-    xAxisData: string[];
+    dates: string[];
     isGreaterThanTwoWeeks: boolean;
 }
 interface BaseTooltipParam {

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { BookType } from '../../../gql/types/graphql';
 interface LegendProps {
-    longValues?: [number, number];
-    shortValues?: [number, number];
     bookType: BookType;
-    isDark: boolean;
 }
-export declare const Legend: ({ longValues, shortValues, bookType, isDark, }: LegendProps) => React.JSX.Element;
+export declare const Legend: ({ bookType }: LegendProps) => React.JSX.Element;
 export {};

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

@@ -1,10 +1,8 @@
 import React from 'react';
 export type LegendType = 'long' | 'short';
 interface LegendBarProps {
-    values: number[];
     type: LegendType;
-    label: string;
     isDark: boolean;
 }
-export declare const LegendBar: ({ values, type, label, isDark }: LegendBarProps) => React.JSX.Element;
+export declare const LegendBar: ({ type, isDark }: LegendBarProps) => React.JSX.Element;
 export {};

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

@@ -1,16 +1,13 @@
 import { InstrumentId } from './types';
-export declare const BOOKS_THRESHOLDS: {
-    readonly MIN: 0.15;
-    readonly MAX: 0.55;
-};
 export declare const BUCKET_CONFIG: {
     readonly MULTIPLIER: 4;
-    readonly PRICE_PADDING_MULTIPLIER: 2;
+    readonly PRICE_MARGIN_MULTIPLIER: 2;
 };
 export declare const TIME_THRESHOLDS: {
     readonly TWO_WEEKS_MS: number;
 };
 export declare const CHART_CONFIG: {
+    readonly HEIGHT: 440;
     readonly MAIN_HEIGHT: 400;
     readonly MARGIN_BETWEEN: 50;
     readonly SENTIMENT_HEIGHT: 120;
@@ -18,17 +15,12 @@ export declare const CHART_CONFIG: {
     readonly X_LABEL_SIZE: 40;
     readonly Y_LABEL_SIZE_DESKTOP: 60;
     readonly Y_LABEL_SIZE_MOBILE: 40;
-    readonly INITIAL_START_ZOOM: 80;
+    readonly Y_SENTIMENT_LABEL_SIZE: 40;
+    readonly INITIAL_START_ZOOM: 90;
     readonly INITIAL_END_ZOOM: 100;
     readonly X_AXIS_DATE_PADDING: "        ";
     readonly SENTIMENT_MIN: 0;
     readonly SENTIMENT_MAX: 100;
-    readonly SENTIMENT_INTERVAL: 25;
-    readonly SENTIMENT_TEXT_OFFSET: 16;
-};
-export declare const CHART_CONFIG_CALCULATED: {
-    FULL_HEIGHT: number;
-    SENTIMENT_TEXT_POSITION: number;
 };
 export declare const COLOR_MAP: {
     readonly dark: {

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

@@ -11,15 +11,17 @@ 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    $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<{
+    '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n    $bucketMultiplier: Int!\n    $bucketMargin: Int!\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n      bucketMultiplier: $bucketMultiplier\n      bucketMargin: $bucketMargin\n    ) {\n      books {\n        time\n        price\n        buckets {\n          price\n          sentiment\n        }\n      }\n      bucketWidth\n      sentimentThresholdMax\n      sentimentThresholdMin\n    }\n  }\n': DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
         instrument: types.Scalars["String"]["input"];
         bookType: types.BookType;
         timeSpan: types.TimeSpan;
         granularity: types.Granularity;
         maxBookPrice?: types.InputMaybe<types.Scalars["Float"]["input"]>;
         minBookPrice?: types.InputMaybe<types.Scalars["Float"]["input"]>;
+        bucketMultiplier: types.Scalars["Int"]["input"];
+        bucketMargin: types.Scalars["Int"]["input"];
     }>>;
-    '\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<{
+    '\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      pipsLocation\n    }\n  }\n': DocumentNode<types.GetPriceCandlesQuery, types.Exact<{
         dataSource: types.DataSource;
         division: types.Division;
         instrument: types.Scalars["String"]["input"];
@@ -48,11 +50,11 @@ 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    $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'];
+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    $bucketMultiplier: Int!\n    $bucketMargin: Int!\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n      bucketMultiplier: $bucketMultiplier\n      bucketMargin: $bucketMargin\n    ) {\n      books {\n        time\n        price\n        buckets {\n          price\n          sentiment\n        }\n      }\n      bucketWidth\n      sentimentThresholdMax\n      sentimentThresholdMin\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    $bucketMultiplier: Int!\n    $bucketMargin: Int!\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n      bucketMultiplier: $bucketMultiplier\n      bucketMargin: $bucketMargin\n    ) {\n      books {\n        time\n        price\n        buckets {\n          price\n          sentiment\n        }\n      }\n      bucketWidth\n      sentimentThresholdMax\n      sentimentThresholdMin\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    $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 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      pipsLocation\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      pipsLocation\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

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

@@ -55,6 +55,7 @@ export declare enum AssetClassName {
     EquityShares = "EQUITY_SHARES",
     Etfs = "ETFS",
     Indices = "INDICES",
+    Metals = "METALS",
     Rates = "RATES"
 }
 export declare enum BookType {
@@ -201,6 +202,14 @@ export declare enum OrderBookDataSource {
     Ny4Mt5 = "NY4_MT5",
     Ty3 = "TY3"
 }
+export type OrderPositionBooksData = {
+    __typename?: 'OrderPositionBooksData';
+    books?: Maybe<Array<OrderPositionData>>;
+    bucketWidth: Scalars['Float']['output'];
+    displayPrecision: Scalars['Int']['output'];
+    sentimentThresholdMax: Scalars['Float']['output'];
+    sentimentThresholdMin: Scalars['Float']['output'];
+};
 export type OrderPositionBucket = {
     __typename?: 'OrderPositionBucket';
     longCountPercent?: Maybe<Scalars['Float']['output']>;
@@ -230,7 +239,7 @@ export type Query = {
     mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
     marginRates?: Maybe<Array<MarginRate>>;
     orderPositionBook: Array<Maybe<OrderPositionData>>;
-    orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    orderPositionBooks: OrderPositionBooksData;
     priceCandles: CandlesData;
     resolveInstrumentsByDivision?: Maybe<Array<Instrument>>;
     resolveInstrumentsWithFilters?: Maybe<InstrumentTableResult>;
@@ -281,6 +290,8 @@ export type QueryOrderPositionBookArgs = {
 };
 export type QueryOrderPositionBooksArgs = {
     bookType: BookType;
+    bucketMargin?: Scalars['Int']['input'];
+    bucketMultiplier?: Scalars['Int']['input'];
     granularity: Granularity;
     instrument: Scalars['String']['input'];
     maxBookPrice?: InputMaybe<Scalars['Float']['input']>;
@@ -494,20 +505,27 @@ export type GetOrderPositionBooksQueryVariables = Exact<{
     granularity: Granularity;
     maxBookPrice?: InputMaybe<Scalars['Float']['input']>;
     minBookPrice?: InputMaybe<Scalars['Float']['input']>;
+    bucketMultiplier: Scalars['Int']['input'];
+    bucketMargin: Scalars['Int']['input'];
 }>;
 export type GetOrderPositionBooksQuery = {
     __typename?: 'Query';
-    orderPositionBooks: Array<{
-        __typename?: 'OrderPositionData';
+    orderPositionBooks: {
+        __typename?: 'OrderPositionBooksData';
         bucketWidth: number;
-        price?: number | null;
-        time: string;
-        buckets: Array<{
-            __typename?: 'OrderPositionBucket';
-            price: number;
-            sentiment?: number | null;
-        } | null>;
-    } | null>;
+        sentimentThresholdMax: number;
+        sentimentThresholdMin: number;
+        books?: Array<{
+            __typename?: 'OrderPositionData';
+            time: string;
+            price?: number | null;
+            buckets: Array<{
+                __typename?: 'OrderPositionBucket';
+                price: number;
+                sentiment?: number | null;
+            } | null>;
+        }> | null;
+    };
 };
 export type GetPriceCandlesQueryVariables = Exact<{
     dataSource: DataSource;
@@ -520,6 +538,7 @@ export type GetPriceCandlesQuery = {
     __typename?: 'Query';
     priceCandles: {
         __typename?: 'CandlesData';
+        pipsLocation: number;
         candle: Array<{
             __typename?: 'Candle';
             point: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.234",
+    "@oanda/labs-widget-common": "^1.0.236",
     "@oanda/mono-i18n": "10.0.1",
     "chroma-js": "^3.1.2",
     "decimal.js": "^10.6.0",
@@ -24,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@types/chroma-js": "^3.1.2"
   },
-  "gitHead": "e3dbcef54061fbb025ca5e63c62f41971890f72a"
+  "gitHead": "f04c026db9ec11a1d0ac934dd66146c877b01570"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -11,13 +11,13 @@ import React, { useEffect, useMemo, useState } from 'react';
 import type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
+import { getInstrumentConfigForDivision } from './components/Chart/dataUtils/getInstrumentConfigForDivision';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
 import type { InstrumentId, MainProps } from './types';
-import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const { lang } = useLocale();
-  const { size, isDark } = useLayoutProvider();
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const [bookType, setBookType] = useState(BookType.Order);
@@ -107,8 +107,7 @@ const Main = ({ division }: MainProps) => {
             granularity={granularity.id}
             instrument={instrument.id}
           />
-
-          <Legend bookType={bookType} isDark={isDark} />
+          <Legend bookType={bookType} />
         </div>
       )}
     </>

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

@@ -8,11 +8,11 @@ import { useLocale } from '@oanda/mono-i18n';
 import type { EChartsType } from 'echarts';
 import { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';
 import {
+  DatasetComponent,
   DataZoomInsideComponent,
   GraphicComponent,
   GridSimpleComponent,
-  MarkAreaComponent,
-  MarkPointComponent,
+  MarkLineComponent,
   TooltipComponent,
   VisualMapComponent,
 } from 'echarts/components';
@@ -20,19 +20,19 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
 
-import { CHART_CONFIG_CALCULATED } from '../../constants';
-import { getOption } from './chartOptions';
+import { CHART_CONFIG } from '../../constants';
+import {
+  formatXAxisLabel,
+  getLabelData,
+  isDifferenceGreaterThanTwoWeeks,
+} from './chartUtils';
+import { getOption } from './getOption';
 import type {
   ChartProps,
   DataZoomArray,
   DataZoomEvent,
   XAxisArray,
 } from './types';
-import {
-  formatXAxisLabel,
-  getLabelData,
-  isDifferenceGreaterThanTwoWeeks,
-} from './utils/chartUtils';
 
 echarts.use([
   GridSimpleComponent,
@@ -42,26 +42,32 @@ echarts.use([
   CustomChart,
   TooltipComponent,
   CandlestickChart,
-  MarkPointComponent,
-  MarkAreaComponent,
+  MarkLineComponent,
   LineChart,
   VisualMapComponent,
+  DatasetComponent,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ data, isDesktop }: ChartProps) => {
+const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
   return (
     <BaseChart
-      chartHeight={CHART_CONFIG_CALCULATED.FULL_HEIGHT}
+      chartHeight={CHART_CONFIG.HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark, isDesktop, lang)}
+      option={getOption({
+        mainData,
+        additionalData,
+        isDark,
+        isDesktop,
+        labelCallback: lang,
+      })}
       opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (params: DataZoomEvent, instance: EChartsType) => {
@@ -69,8 +75,7 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
             return;
           }
 
-          const batchItem = params.batch[0];
-          const { start, end } = batchItem;
+          const { dates } = mainData;
 
           const { dataZoom, xAxis } = instance.getOption();
           if (
@@ -85,33 +90,13 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
 
           const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];
 
-          if (batchItem.dataZoomId === 'main') {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              dataZoomId: 'sentiment',
-              start,
-              end,
-              filterMode: 'none',
-            });
-          }
-
-          if (batchItem.dataZoomId === 'sentiment') {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              dataZoomId: 'main',
-              start,
-              end,
-              filterMode: 'filter',
-            });
-          }
-
-          if (!data.xAxisData[startValue] || !data.xAxisData[endValue]) {
+          if (!dates[startValue] || !dates[endValue]) {
             return;
           }
 
           const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-            data.xAxisData[startValue],
-            data.xAxisData[endValue]
+            dates[startValue],
+            dates[endValue]
           );
 
           const wasGreaterThanTwoWeeks =
@@ -121,7 +106,7 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
 
           if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
             const labelsData = getLabelData({
-              xAxisData: data.xAxisData,
+              dates,
               isGreaterThanTwoWeeks,
             });
 

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

@@ -20,7 +20,7 @@ const ChartWithData = ({
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const { data, loading, error } = useCrowdViewData({
+  const { mainData, additionalData, loading, error } = useCrowdViewData({
     instrument,
     bookType,
     division,
@@ -29,7 +29,7 @@ const ChartWithData = ({
 
   return (
     <>
-      <div className="lw-relative lw-h-[610px] lw-w-full">
+      <div className="lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden">
         {error && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <ChartError />
@@ -40,9 +40,13 @@ const ChartWithData = ({
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
-        {!loading && !error && !!data && (
+        {!loading && !error && !!mainData && !!additionalData && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={data} isDesktop={isDesktop} />
+            <Chart
+              additionalData={additionalData}
+              isDesktop={isDesktop}
+              mainData={mainData}
+            />
           </div>
         )}
       </div>

package/src/CrowdViewWidget/components/Chart/chartOptions/getDataZoomConfig.ts

@@ -0,0 +1,13 @@
+import type { DataZoomComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+export const getDataZoomConfig = (): DataZoomComponentOption => ({
+  type: 'inside',
+  id: 'main',
+  xAxisIndex: [0, 1],
+  start: CHART_CONFIG.INITIAL_START_ZOOM,
+  end: CHART_CONFIG.INITIAL_END_ZOOM,
+  filterMode: 'filter',
+  minSpan: 10,
+});