@oanda/labs-order-book-widget 1.0.61 → 1.0.63

package/dist/module/OrderBookWidget/render.js

@@ -2,14 +2,35 @@ import React from 'react';
 import { render } from 'react-dom';
 import { OrderBookWidget } from './OrderBookWidget';
 const {
-  graphqlUrl,
-  instrument,
-  renderElementId,
-  locale
-} = window.orderBookWidgetConfig;
-render(React.createElement(OrderBookWidget, {
-  locale: locale,
-  graphqlUrl: graphqlUrl,
-  instrument: instrument
-}), document.getElementById(renderElementId));
+  graphqlUrl: configGraphQl,
+  instrument: configInstrument,
+  renderElementId: configRenderElementId,
+  locale: configLocale
+} = window.volatilityChartWidgetConfig || {};
+const {
+  graphqlUrl
+} = window.widgetsConfig || {};
+const orderBookElements = document.querySelectorAll('div[data-order-book-params]');
+if (orderBookElements.length > 0) {
+  orderBookElements.forEach(element => {
+    const params = element.getAttribute('data-order-book-params');
+    const mode = element.getAttribute('data-mode');
+    const {
+      instrument,
+      locale
+    } = JSON.parse(params);
+    render(React.createElement(OrderBookWidget, {
+      locale: locale,
+      graphqlUrl: graphqlUrl,
+      instrument: instrument,
+      theme: mode
+    }), element);
+  });
+} else {
+  render(React.createElement(OrderBookWidget, {
+    locale: configLocale,
+    graphqlUrl: configGraphQl,
+    instrument: configInstrument
+  }), document.getElementById(configRenderElementId));
+}
 //# sourceMappingURL=render.js.map

package/dist/module/OrderBookWidget/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","render","OrderBookWidget","graphqlUrl","instrument","renderElementId","locale","window","orderBookWidgetConfig","createElement","document","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { OrderBookWidget } from './OrderBookWidget';\nimport { OrderBookWrapperConfig } from './types';\n\ndeclare global {\n  interface Window {\n    orderBookWidgetConfig: OrderBookWrapperConfig;\n  }\n}\n\nconst {\n  graphqlUrl,\n  instrument,\n  renderElementId,\n  locale,\n} = window.orderBookWidgetConfig;\n\nrender(\n  <OrderBookWidget\n    locale={locale}\n    graphqlUrl={graphqlUrl}\n    instrument={instrument}\n  />,\n  document.getElementById(renderElementId),\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,eAAe,QAAQ,mBAAmB;AASnD,MAAM;EACJC,UAAU;EACVC,UAAU;EACVC,eAAe;EACfC;AACF,CAAC,GAAGC,MAAM,CAACC,qBAAqB;AAEhCP,MAAM,CACJD,KAAA,CAAAS,aAAA,CAACP,eAAe;EACdI,MAAM,EAAEA,MAAO;EACfH,UAAU,EAAEA,UAAW;EACvBC,UAAU,EAAEA;AAAW,CACxB,CAAC,EACFM,QAAQ,CAACC,cAAc,CAACN,eAAe,CACzC,CAAC"}
+{"version":3,"file":"render.js","names":["React","render","OrderBookWidget","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","createElement","theme","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale } = JSON.parse(params as string);\n\n    render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,2BAA2B,IAAI,CAAC,CAAC;AAE5C,MAAM;EACJT;AACF,CAAC,GAAGQ,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,6BAA6B,CAAC;AAElF,IAAIF,iBAAiB,CAACG,MAAM,GAAG,CAAC,EAAE;EAChCH,iBAAiB,CAACI,OAAO,CAAEC,OAAO,IAAK;IACrC,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,wBAAwB,CAAC;IAC7D,MAAMC,IAAI,GAAGH,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEhB,UAAU;MAAEI;IAAO,CAAC,GAAGc,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE3DnB,MAAM,CACJD,KAAA,CAAAyB,aAAA,CAACvB,eAAe;MACdO,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvBqB,KAAK,EAAEJ;IAAc,CACtB,CAAC,EACFH,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACLlB,MAAM,CACJD,KAAA,CAAAyB,aAAA,CAACvB,eAAe;IACdO,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CAAC,EACFS,QAAQ,CAACY,cAAc,CAACnB,qBAAqB,CAC/C,CAAC;AACH"}

package/dist/module/OrderBookWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\n\nexport interface OrderBookWidgetConfig {\n  graphqlUrl: string;\n  instrument: string;\n  locale: Locale;\n}\n\nexport interface OrderBookWrapperConfig extends OrderBookWidgetConfig {\n  renderElementId: string;\n}\n\nexport interface WidgetProps {\n  instrument: string;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["import { Theme } from '@oanda/labs-widget-common';\nimport { Locale } from '@oanda/mono-i18n';\n\nexport interface OrderBookWidgetConfig {\n  graphqlUrl: string;\n  instrument: string;\n  locale: Locale;\n  theme?: Theme;\n}\n\nexport interface OrderBookWrapperConfig extends OrderBookWidgetConfig {\n  renderElementId: string;\n}\n\nexport interface WidgetProps {\n  instrument: string;\n}\n"],"mappings":""}

package/dist/module/gql/getOrderPositionBooks.js

@@ -1,20 +1,6 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { gql } from '@apollo/client';
-const getOrderPositionBooks = gql`
-  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {
-    orderPositionBooks(
-      instrument: $instrument
-      bookType: $bookType
-      recentHours: $recentHours
-    ) {
-      bucketWidth
-      price
-      buckets {
-        price
-        longCountPercent
-        shortCountPercent
-      }
-    }
-  }
-`;
+const getOrderPositionBooks = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 { getOrderPositionBooks };
 //# sourceMappingURL=getOrderPositionBooks.js.map

package/dist/module/gql/getOrderPositionBooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOrderPositionBooks.js","names":["gql","getOrderPositionBooks"],"sources":["../../../src/gql/getOrderPositionBooks.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nconst getOrderPositionBooks = gql`\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`;\n\nexport { getOrderPositionBooks };\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,qBAAqB,GAAGD,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,SAASC,qBAAqB"}
+{"version":3,"file":"getOrderPositionBooks.js","names":["gql","getOrderPositionBooks","_templateObject","_taggedTemplateLiteral"],"sources":["../../../src/gql/getOrderPositionBooks.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nconst getOrderPositionBooks = gql`\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`;\n\nexport { getOrderPositionBooks };\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,qBAAqB,GAAGD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,sBAAA,iXAgBhC;AAED,SAASF,qBAAqB"}

package/dist/module/gql/types/fragment-masking.js

@@ -5,10 +5,11 @@ export function makeFragmentData(data, _fragment) {
   return data;
 }
 export function isFragmentReady(queryNode, fragmentNode, data) {
-  const deferredFields = queryNode.__meta__?.deferredFields;
+  var _meta__, _fragDef$name;
+  const deferredFields = (_meta__ = queryNode.__meta__) === null || _meta__ === void 0 ? void 0 : _meta__.deferredFields;
   if (!deferredFields) return true;
   const fragDef = fragmentNode.definitions[0];
-  const fragName = fragDef?.name?.value;
+  const fragName = fragDef === null || fragDef === void 0 || (_fragDef$name = fragDef.name) === null || _fragDef$name === void 0 ? void 0 : _fragDef$name.value;
   const fields = fragName && deferredFields[fragName] || [];
   return fields.length > 0 && fields.every(field => data && field in data);
 }

package/dist/module/gql/types/fragment-masking.js.map

@@ -1 +1 @@
-{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\n\nexport type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<\n  infer TType,\n  any\n>\n  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n    ? TKey extends string\n      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n      : never\n    : never\n  : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__\n    ?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every(field => data && field in data);\n}\n"],"mappings":"AAoCA,OAAO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAAmJ,EAClG;EACjD,OAAOA,YAAY;AACrB;AAGA,OAAO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACA,OAAO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAAiF,EACtC;EAC3C,MAAMK,cAAc,GAAIF,SAAS,CAAwEG,QAAQ,EAC7GD,cAAc;EAElB,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGH,YAAY,CAACI,WAAW,CAAC,CAAC,CAAuC;EACjF,MAAMC,QAAQ,GAAGF,OAAO,EAAEG,IAAI,EAAEC,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAACC,KAAK,IAAIf,IAAI,IAAIe,KAAK,IAAIf,IAAI,CAAC;AAC1E"}
+{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","_meta__","_fragDef$name","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\n\nexport type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<\n  infer TType,\n  any\n>\n  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n    ? TKey extends string\n      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n      : never\n    : never\n  : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__\n    ?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every(field => data && field in data);\n}\n"],"mappings":"AAoCA,OAAO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAAmJ,EAClG;EACjD,OAAOA,YAAY;AACrB;AAGA,OAAO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACA,OAAO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAAiF,EACtC;EAAA,IAAAK,OAAA,EAAAC,aAAA;EAC3C,MAAMC,cAAc,IAAAF,OAAA,GAAIF,SAAS,CAAwEK,QAAQ,cAAAH,OAAA,uBAA1FA,OAAA,CACnBE,cAAc;EAElB,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAAuC;EACjF,MAAMC,QAAQ,GAAGF,OAAO,aAAPA,OAAO,gBAAAH,aAAA,GAAPG,OAAO,CAAEG,IAAI,cAAAN,aAAA,uBAAbA,aAAA,CAAeO,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAACC,KAAK,IAAIjB,IAAI,IAAIiB,KAAK,IAAIjB,IAAI,CAAC;AAC1E"}

package/dist/module/gql/types/gql.js

@@ -3,6 +3,7 @@ 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
 };
 export function graphql(source) {
-  return documents[source] ?? {};
+  var _source;
+  return (_source = documents[source]) !== null && _source !== void 0 ? _source : {};
 }
 //# sourceMappingURL=gql.js.map

package/dist/module/gql/types/gql.js.map

@@ -1 +1 @@
-{"version":3,"file":"gql.js","names":["types","documents","GetOrderPositionBooksDocument","graphql","source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n    \"\\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};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport 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\"];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,WAAW;AAalC,MAAMC,SAAS,GAAG;EACd,2WAA2W,EAAED,KAAK,CAACE;AACvX,CAAC;AAqBD,OAAO,SAASC,OAAOA,CAACC,MAAc,EAAE;EACtC,OAAQH,SAAS,CAASG,MAAM,CAAC,IAAI,CAAC,CAAC;AACzC"}
+{"version":3,"file":"gql.js","names":["types","documents","GetOrderPositionBooksDocument","graphql","source","_source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n    \"\\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};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport 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\"];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,WAAW;AAalC,MAAMC,SAAS,GAAG;EACd,2WAA2W,EAAED,KAAK,CAACE;AACvX,CAAC;AAqBD,OAAO,SAASC,OAAOA,CAACC,MAAc,EAAE;EAAA,IAAAC,OAAA;EACtC,QAAAA,OAAA,GAAQJ,SAAS,CAASG,MAAM,CAAC,cAAAC,OAAA,cAAAA,OAAA,GAAI,CAAC,CAAC;AACzC"}

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { OrderBookWidgetConfig } from './types';
-declare const OrderBookWidget: ({ graphqlUrl, instrument, locale, }: OrderBookWidgetConfig) => JSX.Element;
+declare const OrderBookWidget: ({ graphqlUrl, instrument, locale, theme, }: OrderBookWidgetConfig) => JSX.Element;
 export { OrderBookWidget };

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

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
-interface ChartProps {
-    data: GetOrderPositionBooksQuery;
-}
-export declare const Chart: ({ data }: ChartProps) => JSX.Element;
-export {};
+import { ChartProps } from './types';
+export declare const Chart: ({ data, isOrderBook }: ChartProps) => JSX.Element;

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

@@ -1,2 +1,6 @@
-export declare const INITIAL_BARS = 150;
-export declare const ZOOM_BARS = 10;
+export declare const INITIAL_BARS = 80;
+export declare const X_LABEL_SIZE = 40;
+export declare const Y_LABEL_SIZE_MOBILE = 35;
+export declare const Y_LABEL_SIZE_DESKTOP = 120;
+export declare const CHART_WIDTH = 9999;
+export declare const CHART_HEIGHT = 450;

package/dist/types/OrderBookWidget/components/Chart/formatters.d.ts

@@ -0,0 +1,3 @@
+import { TooltipFormatterType } from './types';
+declare const tooltipFormatter: TooltipFormatterType;
+export { tooltipFormatter };

package/dist/types/OrderBookWidget/components/Chart/getOption.d.ts

@@ -0,0 +1,174 @@
+import { GetOptionType, GetResponsiveOptionsProps } from './types';
+export declare const getDesktopOption: ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {
+    grid: {
+        name: string;
+        top: string;
+        left: string;
+        right: string;
+        bottom: string;
+    }[];
+    graphic: ({
+        top: number | undefined;
+        bottom: number | undefined;
+        left: number | undefined;
+        right: number | undefined;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        top: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        right: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        bottom: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        left: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        type: string;
+        left: string;
+        top: string;
+        silent: boolean;
+        children: ({
+            type: string;
+            z: number;
+            left: string;
+            top: string;
+            shape: {
+                width: number;
+                height: number;
+            };
+            style: {
+                fill: string;
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowOffsetY: number;
+                shadowColor: string;
+                width?: undefined;
+                height?: undefined;
+                text?: undefined;
+            };
+        } | {
+            type: string;
+            z: number;
+            left: string;
+            top: string;
+            style: {
+                fill: string;
+                width: number;
+                height: number;
+                text: string;
+                shadowBlur?: undefined;
+                shadowOffsetX?: undefined;
+                shadowOffsetY?: undefined;
+                shadowColor?: undefined;
+            };
+            shape?: undefined;
+        })[];
+        right?: undefined;
+    } | {
+        type: string;
+        right: string;
+        top: string;
+        silent: boolean;
+        children: ({
+            type: string;
+            z: number;
+            right: string;
+            top: string;
+            shape: {
+                width: number;
+                height: number;
+            };
+            style: {
+                fill: string;
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowOffsetY: number;
+                shadowColor: string;
+                width?: undefined;
+                height?: undefined;
+                text?: undefined;
+            };
+        } | {
+            type: string;
+            z: number;
+            right: string;
+            top: string;
+            style: {
+                fill: string;
+                width: number;
+                height: number;
+                text: string;
+                shadowBlur?: undefined;
+                shadowOffsetX?: undefined;
+                shadowOffsetY?: undefined;
+                shadowColor?: undefined;
+            };
+            shape?: undefined;
+        })[];
+        left?: undefined;
+    })[];
+};
+export declare const getOption: GetOptionType;

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

@@ -0,0 +1,18 @@
+import { EChartsOption } from 'echarts';
+import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+export interface ChartProps {
+    data: GetOrderPositionBooksQuery;
+    isOrderBook: boolean;
+}
+export interface GetResponsiveOptionsProps {
+    isDark: boolean;
+    isOrderBook: boolean;
+}
+export interface GetOptionProps {
+    data: GetOrderPositionBooksQuery;
+    precision: number;
+    isDark: boolean;
+    isOrderBook: boolean;
+}
+export type GetOptionType = (props: GetOptionProps) => EChartsOption;
+export type TooltipFormatterType = (data: number[], precision: number, isOrderBook: boolean) => string;

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

@@ -0,0 +1,6 @@
+import { BookType } from '../gql/types/graphql';
+declare const navigationConfig: {
+    id: BookType;
+    label: string;
+}[];
+export { navigationConfig };

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

@@ -1,6 +1 @@
-import { OrderBookWrapperConfig } from './types';
-declare global {
-    interface Window {
-        orderBookWidgetConfig: OrderBookWrapperConfig;
-    }
-}
+export {};

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

@@ -1,8 +1,10 @@
+import { Theme } from '@oanda/labs-widget-common';
 import { Locale } from '@oanda/mono-i18n';
 export interface OrderBookWidgetConfig {
     graphqlUrl: string;
     instrument: string;
     locale: Locale;
+    theme?: Theme;
 }
 export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {
     renderElementId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "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.61",
+    "@oanda/labs-widget-common": "^1.0.63",
     "@oanda/mono-i18n": "9.0.0",
     "classnames": "2.3.2",
     "echarts": "5.4.3",
@@ -25,5 +25,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "46623aec339fa9c2a22dc96ba2c7fb2a4d7546cc"
+  "gitHead": "f09946395428aaec61ae575a8c762be67e3f05d5"
 }

package/src/OrderBookWidget/OrderBookWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { LocaleProvider } from '@oanda/mono-i18n';
-import { getLocale } from '@oanda/labs-widget-common';
+import { ThemeProvider, getLocale } from '@oanda/labs-widget-common';
 import { Widget } from './Widget';
 import { OrderBookWidgetConfig } from './types';
 import { translations } from '../translations';
@@ -10,6 +10,7 @@ const OrderBookWidget = ({
   graphqlUrl,
   instrument,
   locale,
+  theme,
 }: OrderBookWidgetConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -17,11 +18,13 @@ const OrderBookWidget = ({
   });
 
   return (
-    <LocaleProvider locale={getLocale(locale)} translations={translations}>
-      <ApolloProvider client={client}>
-        <Widget instrument={instrument} />
-      </ApolloProvider>
-    </LocaleProvider>
+    <ThemeProvider theme={theme}>
+      <LocaleProvider locale={getLocale(locale)} translations={translations}>
+        <ApolloProvider client={client}>
+          <Widget instrument={instrument} />
+        </ApolloProvider>
+      </LocaleProvider>
+    </ThemeProvider>
   );
 };
 

package/src/OrderBookWidget/Widget.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import {
-  Button, ButtonVariant, ChartError, Spinner, SpinnerSize,
+  ChartError, Spinner, SpinnerSize, Tabs,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { WidgetProps } from './types';
 import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
 import { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';
 import { Chart } from './components/Chart/Chart';
+import { navigationConfig } from './config';
 
 const Widget = ({
   instrument,
@@ -28,39 +29,29 @@ const Widget = ({
 
   const isError = (!loading && !data) || !!error;
 
-  const isTypeOrder = bookType === BookType.Order;
-
   return (
     <div data-testid="order-book-widget" className="lw-p-4 lw-text-sm lw-tracking-normal lw-text-black">
-      <div className="lw-flex lw-gap-2">
-        <Button
-          variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}
-          onClick={() => setBookType(BookType.Order)}
-        >
-          {lang('order_book')}
-        </Button>
-        <Button
-          variant={isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary}
-          onClick={() => setBookType(BookType.Position)}
-        >
-          {lang('position_book')}
-        </Button>
-      </div>
+      <Tabs
+        activeTab={bookType}
+        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
+        labelCallback={lang}
+        items={navigationConfig}
+      />
       {/* @todo: chart height */}
-      <div className="lw-relative lw-h-[700px] lw-w-full">
+      <div className="lw-relative lw-h-[450px] lw-w-full">
         {isError && (
-          <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-bg-lightGrey/[0.4]">
+          <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 />
           </div>
         )}
         {loading && (
-          <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-bg-lightGrey/[0.4]">
+          <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">
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
         {data && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={data} />
+            <Chart data={data} isOrderBook={bookType === BookType.Order} />
           </div>
         )}
       </div>

package/src/OrderBookWidget/components/Chart/Chart.tsx

@@ -1,33 +1,71 @@
-import React from 'react';
+import React, { useRef, useEffect, useContext } from 'react';
 import ReactEcharts from 'echarts-for-react';
-import { getOptions } from './getOptions';
-import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+import { registerTheme, EChartsType, Color } from 'echarts';
+import {
+  Theme, ThemeContext, colorPalette, getChartTheme,
+} from '@oanda/labs-widget-common';
+import { useMediaQuery } from 'usehooks-ts';
+import { getDesktopOption, getOption } from './getOption';
+import { ChartProps } from './types';
 
-interface ChartProps {
-  data: GetOrderPositionBooksQuery;
-}
+registerTheme('dark_theme', getChartTheme(Theme.Dark));
+registerTheme('light_theme', getChartTheme(Theme.Light));
 
-export const Chart = ({ data }: ChartProps) => {
-  const buckets = data.orderPositionBooks[0]?.buckets || [];
-  const bucketWidth = data.orderPositionBooks[0]?.bucketWidth;
-  const price = data.orderPositionBooks[0]?.price;
+export const Chart = ({ data, isOrderBook }: ChartProps) => {
+  const isDark = useContext(ThemeContext) === Theme.Dark;
+  const echartRef = useRef(null);
+  const isDesktop = useMediaQuery('(min-width: 768px)');
 
-  const chartData = buckets.map((item) => ([
-    item!.price,
-    Number(item!.longCountPercent),
-    Number(item!.shortCountPercent) * -1,
-  ]));
+  useEffect(() => {
+    if (echartRef.current) {
+      // @ts-ignore
+      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
+
+      echartInstance.on('highlight', () => {
+        if ((echartInstance.getOption().color as Color[])[0] === colorPalette.bottleGreenLight) {
+          echartInstance.setOption({
+            color: [
+              colorPalette.bottleGreenLight70,
+              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,
+            ],
+          });
+        }
+      });
+
+      echartInstance.on('globalout', () => {
+        echartInstance.setOption({
+          color: [
+            colorPalette.bottleGreenLight,
+            isDark ? colorPalette.orange : colorPalette.raspberryDark,
+          ],
+        });
+      });
+    }
+  }, [echartRef, isDark]);
+
+  useEffect(() => {
+    if (echartRef.current) {
+      // @ts-ignore
+      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
+
+      echartInstance.setOption(getDesktopOption({ isDark, isOrderBook }));
+    }
+  }, [echartRef, isDesktop, isDark, isOrderBook]);
 
   return (
     <div className="lw-relative lw-w-full">
       <div>
-        {price && bucketWidth && (
+        {data && (
           <ReactEcharts
+            ref={echartRef}
+            theme={isDark ? 'dark_theme' : 'light_theme'}
             style={{
-              height: '600px',
+              height: '450px',
               width: '100%',
             }}
-            option={getOptions({ data: chartData, price, bucketWidth })}
+            option={getOption({
+              data, precision: 4, isDark, isOrderBook,
+            })}
           />
         )}
       </div>

package/src/OrderBookWidget/components/Chart/constants.ts

@@ -1,2 +1,7 @@
-export const INITIAL_BARS = 150;
-export const ZOOM_BARS = 10;
+export const INITIAL_BARS = 80;
+
+export const X_LABEL_SIZE = 40;
+export const Y_LABEL_SIZE_MOBILE = 35;
+export const Y_LABEL_SIZE_DESKTOP = 120;
+export const CHART_WIDTH = 9999;
+export const CHART_HEIGHT = 450;