@oanda/labs-order-book-widget 1.0.62 → 1.0.64

package/dist/main/OrderBookWidget/components/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_react","_interopRequireDefault","require","_echartsForReact","_getOptions","obj","__esModule","default","Chart","_ref","_data$orderPositionBo","_data$orderPositionBo2","_data$orderPositionBo3","data","buckets","orderPositionBooks","bucketWidth","price","chartData","map","item","Number","longCountPercent","shortCountPercent","createElement","className","style","height","width","option","getOptions","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React from 'react';\nimport ReactEcharts from 'echarts-for-react';\nimport { getOptions } from './getOptions';\nimport { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';\n\ninterface ChartProps {\n  data: GetOrderPositionBooksQuery;\n}\n\nexport const Chart = ({ data }: ChartProps) => {\n  const buckets = data.orderPositionBooks[0]?.buckets || [];\n  const bucketWidth = data.orderPositionBooks[0]?.bucketWidth;\n  const price = data.orderPositionBooks[0]?.price;\n\n  const chartData = buckets.map((item) => ([\n    item!.price,\n    Number(item!.longCountPercent),\n    Number(item!.shortCountPercent) * -1,\n  ]));\n\n  return (\n    <div className=\"lw-relative lw-w-full\">\n      <div>\n        {price && bucketWidth && (\n          <ReactEcharts\n            style={{\n              height: '600px',\n              width: '100%',\n            }}\n            option={getOptions({ data: chartData, price, bucketWidth })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAA0C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOnC,MAAMG,KAAK,GAAGC,IAAA,IAA0B;EAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;EAAA,IAAzB;IAAEC;EAAiB,CAAC,GAAAJ,IAAA;EACxC,MAAMK,OAAO,GAAG,EAAAJ,qBAAA,GAAAG,IAAI,CAACE,kBAAkB,CAAC,CAAC,CAAC,cAAAL,qBAAA,uBAA1BA,qBAAA,CAA4BI,OAAO,KAAI,EAAE;EACzD,MAAME,WAAW,IAAAL,sBAAA,GAAGE,IAAI,CAACE,kBAAkB,CAAC,CAAC,CAAC,cAAAJ,sBAAA,uBAA1BA,sBAAA,CAA4BK,WAAW;EAC3D,MAAMC,KAAK,IAAAL,sBAAA,GAAGC,IAAI,CAACE,kBAAkB,CAAC,CAAC,CAAC,cAAAH,sBAAA,uBAA1BA,sBAAA,CAA4BK,KAAK;EAE/C,MAAMC,SAAS,GAAGJ,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAM,CACvCA,IAAI,CAAEH,KAAK,EACXI,MAAM,CAACD,IAAI,CAAEE,gBAAgB,CAAC,EAC9BD,MAAM,CAACD,IAAI,CAAEG,iBAAiB,CAAC,GAAG,CAAC,CAAC,CACpC,CAAC;EAEH,OACEvB,MAAA,CAAAO,OAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAuB,GACpCzB,MAAA,CAAAO,OAAA,CAAAiB,aAAA,cACGP,KAAK,IAAID,WAAW,IACnBhB,MAAA,CAAAO,OAAA,CAAAiB,aAAA,CAACrB,gBAAA,CAAAI,OAAY;IACXmB,KAAK,EAAE;MACLC,MAAM,EAAE,OAAO;MACfC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAE,IAAAC,sBAAU,EAAC;MAAEjB,IAAI,EAAEK,SAAS;MAAED,KAAK;MAAED;IAAY,CAAC;EAAE,CAC7D,CAEA,CACF,CAAC;AAEV,CAAC;AAACe,OAAA,CAAAvB,KAAA,GAAAA,KAAA"}
+{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_echartsForReact","_interopRequireDefault","_echarts","_labsWidgetCommon","_usehooksTs","_getOption","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","data","isOrderBook","isDark","useContext","ThemeContext","echartRef","useRef","isDesktop","useMediaQuery","useEffect","current","echartInstance","getEchartsInstance","on","getOption","color","colorPalette","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","getDesktopOption","createElement","className","ref","theme","style","height","width","option","precision","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEcharts from 'echarts-for-react';\nimport { registerTheme, EChartsType, Color } from 'echarts';\nimport {\n  Theme, ThemeContext, colorPalette, getChartTheme,\n} from '@oanda/labs-widget-common';\nimport { useMediaQuery } from 'usehooks-ts';\nimport { getDesktopOption, getOption } from './getOption';\nimport { ChartProps } from './types';\n\nregisterTheme('dark_theme', getChartTheme(Theme.Dark));\nregisterTheme('light_theme', getChartTheme(Theme.Light));\n\nexport const Chart = ({ data, isOrderBook }: ChartProps) => {\n  const isDark = useContext(ThemeContext) === Theme.Dark;\n  const echartRef = useRef(null);\n  const isDesktop = useMediaQuery('(min-width: 768px)');\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;\n\n      echartInstance.on('highlight', () => {\n        if ((echartInstance.getOption().color as Color[])[0] === colorPalette.bottleGreenLight) {\n          echartInstance.setOption({\n            color: [\n              colorPalette.bottleGreenLight70,\n              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,\n            ],\n          });\n        }\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          color: [\n            colorPalette.bottleGreenLight,\n            isDark ? colorPalette.orange : colorPalette.raspberryDark,\n          ],\n        });\n      });\n    }\n  }, [echartRef, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;\n\n      echartInstance.setOption(getDesktopOption({ isDark, isOrderBook }));\n    }\n  }, [echartRef, isDesktop, isDark, isOrderBook]);\n\n  return (\n    <div className=\"lw-relative lw-w-full\">\n      <div>\n        {data && (\n          <ReactEcharts\n            ref={echartRef}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n            style={{\n              height: '450px',\n              width: '100%',\n            }}\n            option={getOption({\n              data, precision: 4, isDark, isOrderBook,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAGA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AAA0D,SAAAE,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAG1D,IAAAY,sBAAa,EAAC,YAAY,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACC,IAAI,CAAC,CAAC;AACtD,IAAAH,sBAAa,EAAC,aAAa,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACE,KAAK,CAAC,CAAC;AAEjD,MAAMC,KAAK,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,IAAI;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EACrD,MAAMG,MAAM,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC,KAAKT,uBAAK,CAACC,IAAI;EACtD,MAAMS,SAAS,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAC9B,MAAMC,SAAS,GAAG,IAAAC,yBAAa,EAAC,oBAAoB,CAAC;EAErD,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIJ,SAAS,CAACK,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGN,SAAS,CAACK,OAAO,CAACE,kBAAkB,CAAC,CAAgB;MAE5ED,cAAc,CAACE,EAAE,CAAC,WAAW,EAAE,MAAM;QACnC,IAAKF,cAAc,CAACG,SAAS,CAAC,CAAC,CAACC,KAAK,CAAa,CAAC,CAAC,KAAKC,8BAAY,CAACC,gBAAgB,EAAE;UACtFN,cAAc,CAACO,SAAS,CAAC;YACvBH,KAAK,EAAE,CACLC,8BAAY,CAACG,kBAAkB,EAC/BjB,MAAM,GAAGc,8BAAY,CAACI,QAAQ,GAAGJ,8BAAY,CAACK,eAAe;UAEjE,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;MAEFV,cAAc,CAACE,EAAE,CAAC,WAAW,EAAE,MAAM;QACnCF,cAAc,CAACO,SAAS,CAAC;UACvBH,KAAK,EAAE,CACLC,8BAAY,CAACC,gBAAgB,EAC7Bf,MAAM,GAAGc,8BAAY,CAACM,MAAM,GAAGN,8BAAY,CAACO,aAAa;QAE7D,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAAClB,SAAS,EAAEH,MAAM,CAAC,CAAC;EAEvB,IAAAO,gBAAS,EAAC,MAAM;IACd,IAAIJ,SAAS,CAACK,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGN,SAAS,CAACK,OAAO,CAACE,kBAAkB,CAAC,CAAgB;MAE5ED,cAAc,CAACO,SAAS,CAAC,IAAAM,2BAAgB,EAAC;QAAEtB,MAAM;QAAED;MAAY,CAAC,CAAC,CAAC;IACrE;EACF,CAAC,EAAE,CAACI,SAAS,EAAEE,SAAS,EAAEL,MAAM,EAAED,WAAW,CAAC,CAAC;EAE/C,OACEvC,MAAA,CAAAW,OAAA,CAAAoD,aAAA;IAAKC,SAAS,EAAC;EAAuB,GACpChE,MAAA,CAAAW,OAAA,CAAAoD,aAAA,cACGzB,IAAI,IACHtC,MAAA,CAAAW,OAAA,CAAAoD,aAAA,CAAC5D,gBAAA,CAAAQ,OAAY;IACXsD,GAAG,EAAEtB,SAAU;IACfuB,KAAK,EAAE1B,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7C2B,KAAK,EAAE;MACLC,MAAM,EAAE,OAAO;MACfC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAE,IAAAlB,oBAAS,EAAC;MAChBd,IAAI;MAAEiC,SAAS,EAAE,CAAC;MAAE/B,MAAM;MAAED;IAC9B,CAAC;EAAE,CACJ,CAEA,CACF,CAAC;AAEV,CAAC;AAACiC,OAAA,CAAApC,KAAA,GAAAA,KAAA"}

package/dist/main/OrderBookWidget/components/Chart/constants.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_BARS = exports.INITIAL_BARS = void 0;
-const INITIAL_BARS = exports.INITIAL_BARS = 150;
-const ZOOM_BARS = exports.ZOOM_BARS = 10;
+exports.Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE_DESKTOP = exports.X_LABEL_SIZE = exports.INITIAL_BARS = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+const INITIAL_BARS = exports.INITIAL_BARS = 80;
+const X_LABEL_SIZE = exports.X_LABEL_SIZE = 40;
+const Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE_MOBILE = 35;
+const Y_LABEL_SIZE_DESKTOP = exports.Y_LABEL_SIZE_DESKTOP = 120;
+const CHART_WIDTH = exports.CHART_WIDTH = 9999;
+const CHART_HEIGHT = exports.CHART_HEIGHT = 450;
 //# sourceMappingURL=constants.js.map

package/dist/main/OrderBookWidget/components/Chart/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["INITIAL_BARS","exports","ZOOM_BARS"],"sources":["../../../../../src/OrderBookWidget/components/Chart/constants.ts"],"sourcesContent":["export const INITIAL_BARS = 150;\nexport const ZOOM_BARS = 10;\n"],"mappings":";;;;;;AAAO,MAAMA,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,GAAG;AACxB,MAAME,SAAS,GAAAD,OAAA,CAAAC,SAAA,GAAG,EAAE"}
+{"version":3,"file":"constants.js","names":["INITIAL_BARS","exports","X_LABEL_SIZE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT"],"sources":["../../../../../src/OrderBookWidget/components/Chart/constants.ts"],"sourcesContent":["export const INITIAL_BARS = 80;\n\nexport const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_MOBILE = 35;\nexport const Y_LABEL_SIZE_DESKTOP = 120;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 450;\n"],"mappings":";;;;;;AAAO,MAAMA,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AAEvB,MAAME,YAAY,GAAAD,OAAA,CAAAC,YAAA,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAAF,OAAA,CAAAE,mBAAA,GAAG,EAAE;AAC9B,MAAMC,oBAAoB,GAAAH,OAAA,CAAAG,oBAAA,GAAG,GAAG;AAChC,MAAMC,WAAW,GAAAJ,OAAA,CAAAI,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG,GAAG"}

package/dist/main/OrderBookWidget/components/Chart/formatters.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipFormatter = void 0;
+const tooltipFormatter = (data, precision, isOrderBook) => {
+  const priceText = "Price: ".concat(data[0].toFixed(precision));
+  const buyText = data[1] ? "<br />".concat(isOrderBook ? 'Buy' : 'Long positions', ": ").concat(data[1], "%") : '';
+  const sellText = data[2] ? "<br />".concat(isOrderBook ? 'Sell' : 'Short positions', ": ").concat(data[2] * -1, "%") : '';
+  return priceText + buyText + sellText;
+};
+exports.tooltipFormatter = tooltipFormatter;
+//# sourceMappingURL=formatters.js.map

package/dist/main/OrderBookWidget/components/Chart/formatters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.js","names":["tooltipFormatter","data","precision","isOrderBook","priceText","concat","toFixed","buyText","sellText","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/formatters.ts"],"sourcesContent":["import { TooltipFormatterType } from './types';\n\nconst tooltipFormatter: TooltipFormatterType = (data, precision, isOrderBook) => {\n  const priceText = `Price: ${data[0].toFixed(precision)}`;\n  const buyText = data[1] ? `<br />${isOrderBook ? 'Buy' : 'Long positions'}: ${data[1]}%` : '';\n  const sellText = data[2] ? `<br />${isOrderBook ? 'Sell' : 'Short positions'}: ${data[2] * -1}%` : '';\n\n  return priceText + buyText + sellText;\n};\n\nexport { tooltipFormatter };\n"],"mappings":";;;;;;AAEA,MAAMA,gBAAsC,GAAGA,CAACC,IAAI,EAAEC,SAAS,EAAEC,WAAW,KAAK;EAC/E,MAAMC,SAAS,aAAAC,MAAA,CAAaJ,IAAI,CAAC,CAAC,CAAC,CAACK,OAAO,CAACJ,SAAS,CAAC,CAAE;EACxD,MAAMK,OAAO,GAAGN,IAAI,CAAC,CAAC,CAAC,YAAAI,MAAA,CAAYF,WAAW,GAAG,KAAK,GAAG,gBAAgB,QAAAE,MAAA,CAAKJ,IAAI,CAAC,CAAC,CAAC,SAAM,EAAE;EAC7F,MAAMO,QAAQ,GAAGP,IAAI,CAAC,CAAC,CAAC,YAAAI,MAAA,CAAYF,WAAW,GAAG,MAAM,GAAG,iBAAiB,QAAAE,MAAA,CAAKJ,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAM,EAAE;EAErG,OAAOG,SAAS,GAAGG,OAAO,GAAGC,QAAQ;AACvC,CAAC;AAACC,OAAA,CAAAT,gBAAA,GAAAA,gBAAA"}

package/dist/main/OrderBookWidget/components/Chart/getOption.js

@@ -0,0 +1,274 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOption = exports.getDesktopOption = void 0;
+var _labsWidgetCommon = require("@oanda/labs-widget-common");
+var _constants = require("./constants");
+var _formatters = require("./formatters");
+const getDesktopOption = _ref => {
+  let {
+    isDark,
+    isOrderBook
+  } = _ref;
+  const desktopGridLines = (0, _labsWidgetCommon.getGridLines)({
+    isDark,
+    chartWidth: _constants.CHART_WIDTH,
+    chartHeight: _constants.CHART_HEIGHT,
+    xLabelsSize: _constants.X_LABEL_SIZE,
+    yLabelSize: _constants.Y_LABEL_SIZE_DESKTOP
+  });
+  return {
+    grid: [{
+      name: 'main-grid',
+      top: '48px',
+      left: '0px',
+      right: "".concat(_constants.Y_LABEL_SIZE_DESKTOP, "px"),
+      bottom: "".concat(_constants.X_LABEL_SIZE, "px")
+    }],
+    graphic: [...desktopGridLines, {
+      type: 'group',
+      left: '8px',
+      top: '56px',
+      silent: true,
+      children: [{
+        type: 'rect',
+        z: 100,
+        left: 'center',
+        top: 'middle',
+        shape: {
+          width: 70,
+          height: 30
+        },
+        style: {
+          fill: isDark ? _labsWidgetCommon.colorPalette.darkGray : _labsWidgetCommon.colorPalette.white,
+          shadowBlur: 8,
+          shadowOffsetX: 0,
+          shadowOffsetY: 1,
+          shadowColor: 'rgba(0,0,0,0.1)'
+        }
+      }, {
+        type: 'text',
+        z: 100,
+        left: 'center',
+        top: 'middle',
+        style: {
+          fill: isDark ? _labsWidgetCommon.colorPalette.white : _labsWidgetCommon.colorPalette.black,
+          width: 70,
+          height: 30,
+          text: isOrderBook ? 'Sell' : 'Short'
+        }
+      }]
+    }, {
+      type: 'group',
+      right: '128px',
+      top: '56px',
+      silent: true,
+      children: [{
+        type: 'rect',
+        z: 100,
+        right: 'center',
+        top: 'middle',
+        shape: {
+          width: 70,
+          height: 30
+        },
+        style: {
+          fill: isDark ? _labsWidgetCommon.colorPalette.darkGray : _labsWidgetCommon.colorPalette.white,
+          shadowBlur: 8,
+          shadowOffsetX: 0,
+          shadowOffsetY: 1,
+          shadowColor: 'rgba(0,0,0,0.1)'
+        }
+      }, {
+        type: 'text',
+        z: 100,
+        right: 'center',
+        top: 'middle',
+        style: {
+          fill: isDark ? _labsWidgetCommon.colorPalette.white : _labsWidgetCommon.colorPalette.black,
+          width: 70,
+          height: 30,
+          text: isOrderBook ? 'Buy' : 'Long'
+        }
+      }]
+    }]
+  };
+};
+exports.getDesktopOption = getDesktopOption;
+const getOption = _ref2 => {
+  var _data$orderPositionBo, _data$orderPositionBo2, _data$orderPositionBo3;
+  let {
+    data,
+    precision,
+    isDark,
+    isOrderBook
+  } = _ref2;
+  const buckets = ((_data$orderPositionBo = data.orderPositionBooks[0]) === null || _data$orderPositionBo === void 0 ? void 0 : _data$orderPositionBo.buckets) || [];
+  const bucketWidth = (_data$orderPositionBo2 = data.orderPositionBooks[0]) === null || _data$orderPositionBo2 === void 0 ? void 0 : _data$orderPositionBo2.bucketWidth;
+  const price = (_data$orderPositionBo3 = data.orderPositionBooks[0]) === null || _data$orderPositionBo3 === void 0 ? void 0 : _data$orderPositionBo3.price;
+  const dataset = buckets.map(item => [item.price, Number(item.longCountPercent), Number(item.shortCountPercent) * -1]);
+  const zoomInitialStartValue = price - bucketWidth * _constants.INITIAL_BARS * 0.5;
+  const zoomInitialEndValue = price + bucketWidth * _constants.INITIAL_BARS * 0.5;
+  const max = Math.max(...dataset.map(item => item[1]));
+  const min = Math.abs(Math.min(...dataset.map(item => item[2])));
+  const range = max > min ? max : min;
+  return {
+    animation: false,
+    color: [_labsWidgetCommon.colorPalette.bottleGreenLight, isDark ? _labsWidgetCommon.colorPalette.orange : _labsWidgetCommon.colorPalette.raspberryDark],
+    title: {
+      text: isOrderBook ? 'OPEN ORDERS' : 'OPEN POSITIONS',
+      padding: 20,
+      textStyle: {
+        fontSize: 14
+      }
+    },
+    toolbox: {
+      feature: (0, _labsWidgetCommon.getZoomControls)({
+        resetStartValue: zoomInitialStartValue,
+        resetEndValue: zoomInitialEndValue
+      })
+    },
+    dataZoom: [{
+      type: 'inside',
+      realtime: true,
+      startValue: zoomInitialStartValue,
+      endValue: zoomInitialEndValue,
+      yAxisIndex: 0,
+      minValueSpan: 10 * bucketWidth
+    }],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        axis: 'y'
+      },
+      formatter: val => (0, _formatters.tooltipFormatter)(val[0].data, precision, isOrderBook)
+    },
+    xAxis: {
+      type: 'value',
+      min: range * -1.05,
+      max: range * 1.05,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        padding: [7, 0, 0, 0],
+        showMinLabel: false,
+        showMaxLabel: false,
+        formatter: value => value === 0 ? '%' : "".concat(Math.abs(value), "%")
+      }
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        showMaxLabel: false,
+        showMinLabel: false,
+        padding: [0, 0, 0, 10],
+        formatter: value => value.toFixed(precision)
+      }
+    },
+    dataset: {
+      source: dataset
+    },
+    series: [{
+      type: 'custom',
+      clip: true,
+      encode: {
+        x: 1,
+        y: 0,
+        tooltip: 1
+      },
+      renderItem: (params, api) => {
+        const yValue = api.value(0);
+        const xStart = api.coord([api.value(1), yValue]);
+        const xEnd = api.coord([0, yValue]);
+        const bucketWidthHeight = api.size ? api.size([0, bucketWidth])[1] : 0;
+        const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;
+        const rectShape = {
+          x: xStart[0] + 0.5,
+          y: xStart[1] - height / 2,
+          width: xEnd[0] - xStart[0],
+          height
+        };
+        return {
+          type: 'rect',
+          shape: rectShape,
+          emphasis: {
+            style: {
+              fill: _labsWidgetCommon.colorPalette.bottleGreenLight
+            }
+          },
+          style: {
+            fill: api.visual('color')
+          }
+        };
+      }
+    }, {
+      type: 'custom',
+      clip: true,
+      encode: {
+        x: 1,
+        y: 0,
+        tooltip: 2
+      },
+      markLine: {
+        animation: false,
+        silent: true,
+        precision: 4,
+        symbol: ['none', 'triangle'],
+        symbolRotate: 90,
+        symbolSize: [20, 10],
+        lineStyle: {
+          color: isDark ? _labsWidgetCommon.colorPalette.orange : _labsWidgetCommon.colorPalette.bottleGreenDark,
+          width: 1
+        },
+        label: {
+          padding: [5, 15, 5, 15],
+          color: isDark ? _labsWidgetCommon.colorPalette.black : _labsWidgetCommon.colorPalette.white,
+          backgroundColor: isDark ? _labsWidgetCommon.colorPalette.orange : _labsWidgetCommon.colorPalette.bottleGreenDark
+        },
+        data: [{
+          yAxis: price
+        }]
+      },
+      renderItem: (params, api) => {
+        const yValue = api.value(0);
+        const xStart = api.coord([api.value(2), yValue]);
+        const xEnd = api.coord([0, yValue]);
+        const bucketWidthHeight = api.size ? api.size([0, bucketWidth])[1] : 0;
+        const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;
+        const rectShape = {
+          x: xStart[0] - 0.5,
+          y: xStart[1] - height / 2,
+          width: xEnd[0] - xStart[0],
+          height
+        };
+        return {
+          type: 'rect',
+          shape: rectShape,
+          emphasis: {
+            style: {
+              fill: isDark ? _labsWidgetCommon.colorPalette.orange : _labsWidgetCommon.colorPalette.raspberryDark
+            }
+          },
+          style: {
+            fill: api.visual('color')
+          }
+        };
+      }
+    }]
+  };
+};
+exports.getOption = getOption;
+//# sourceMappingURL=getOption.js.map

package/dist/main/OrderBookWidget/components/Chart/getOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_constants","_formatters","getDesktopOption","_ref","isDark","isOrderBook","desktopGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","grid","name","top","left","right","concat","bottom","graphic","type","silent","children","z","shape","width","height","style","fill","colorPalette","darkGray","white","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","black","text","exports","getOption","_ref2","_data$orderPositionBo","_data$orderPositionBo2","_data$orderPositionBo3","data","precision","buckets","orderPositionBooks","bucketWidth","price","dataset","map","item","Number","longCountPercent","shortCountPercent","zoomInitialStartValue","INITIAL_BARS","zoomInitialEndValue","max","Math","min","abs","range","animation","color","bottleGreenLight","orange","raspberryDark","title","padding","textStyle","fontSize","toolbox","feature","getZoomControls","resetStartValue","resetEndValue","dataZoom","realtime","startValue","endValue","yAxisIndex","minValueSpan","tooltip","trigger","axisPointer","axis","formatter","val","tooltipFormatter","xAxis","axisTick","show","axisLine","axisLabel","showMinLabel","showMaxLabel","value","yAxis","position","toFixed","source","series","clip","encode","x","y","renderItem","params","api","yValue","xStart","coord","xEnd","bucketWidthHeight","size","rectShape","emphasis","visual","markLine","symbol","symbolRotate","symbolSize","lineStyle","bottleGreenDark","label","backgroundColor"],"sources":["../../../../../src/OrderBookWidget/components/Chart/getOption.ts"],"sourcesContent":["import { colorPalette, getGridLines, getZoomControls } from '@oanda/labs-widget-common';\nimport {\n  INITIAL_BARS, CHART_WIDTH, CHART_HEIGHT, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP,\n} from './constants';\nimport { GetOptionType, GetResponsiveOptionsProps } from './types';\nimport { tooltipFormatter } from './formatters';\n\nexport const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {\n  const desktopGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_DESKTOP,\n  });\n\n  return {\n    grid: [\n      {\n        name: 'main-grid',\n        top: '48px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...desktopGridLines,\n      {\n        type: 'group',\n        left: '8px',\n        top: '56px',\n        silent: true,\n        children: [\n          {\n            type: 'rect',\n            z: 100,\n            left: 'center',\n            top: 'middle',\n            shape: {\n              width: 70,\n              height: 30,\n            },\n            style: {\n              fill: isDark ? colorPalette.darkGray : colorPalette.white,\n              shadowBlur: 8,\n              shadowOffsetX: 0,\n              shadowOffsetY: 1,\n              shadowColor: 'rgba(0,0,0,0.1)',\n            },\n          },\n          {\n            type: 'text',\n            z: 100,\n            left: 'center',\n            top: 'middle',\n            style: {\n              fill: isDark ? colorPalette.white : colorPalette.black,\n              width: 70,\n              height: 30,\n              text: isOrderBook ? 'Sell' : 'Short',\n            },\n          },\n        ],\n      },\n      {\n        type: 'group',\n        right: '128px',\n        top: '56px',\n        silent: true,\n        children: [\n          {\n            type: 'rect',\n            z: 100,\n            right: 'center',\n            top: 'middle',\n            shape: {\n              width: 70,\n              height: 30,\n            },\n            style: {\n              fill: isDark ? colorPalette.darkGray : colorPalette.white,\n              shadowBlur: 8,\n              shadowOffsetX: 0,\n              shadowOffsetY: 1,\n              shadowColor: 'rgba(0,0,0,0.1)',\n            },\n          },\n          {\n            type: 'text',\n            z: 100,\n            right: 'center',\n            top: 'middle',\n            style: {\n              fill: isDark ? colorPalette.white : colorPalette.black,\n              width: 70,\n              height: 30,\n              text: isOrderBook ? 'Buy' : 'Long',\n            },\n          },\n        ],\n      },\n    ],\n  };\n};\n\nexport const getOption: GetOptionType = ({\n  data, precision, isDark, isOrderBook,\n}) => {\n  const buckets = data.orderPositionBooks[0]?.buckets || [];\n  const bucketWidth = data.orderPositionBooks[0]?.bucketWidth!;\n  const price = data.orderPositionBooks[0]?.price!;\n\n  const dataset = buckets.map((item) => ([\n    item!.price,\n    Number(item!.longCountPercent),\n    Number(item!.shortCountPercent) * -1,\n  ]));\n\n  const zoomInitialStartValue = price - (bucketWidth * INITIAL_BARS * 0.5);\n  const zoomInitialEndValue = price + (bucketWidth * INITIAL_BARS * 0.5);\n\n  const max = Math.max(...dataset.map((item) => item[1]));\n  const min = Math.abs(Math.min(...dataset.map((item) => item[2])));\n\n  const range = max > min ? max : min;\n\n  return (\n    {\n      animation: false,\n      color: [\n        colorPalette.bottleGreenLight,\n        isDark ? colorPalette.orange : colorPalette.raspberryDark,\n      ],\n      title: {\n        text: isOrderBook ? 'OPEN ORDERS' : 'OPEN POSITIONS',\n        padding: 20,\n        textStyle: {\n          fontSize: 14,\n        },\n      },\n      toolbox: {\n        feature: getZoomControls({\n          resetStartValue: zoomInitialStartValue,\n          resetEndValue: zoomInitialEndValue,\n        }),\n      },\n      dataZoom: [\n        {\n          type: 'inside',\n          realtime: true,\n          startValue: zoomInitialStartValue,\n          endValue: zoomInitialEndValue,\n\n          yAxisIndex: 0,\n          minValueSpan: 10 * bucketWidth,\n        },\n      ],\n      tooltip: {\n        trigger: 'axis',\n        axisPointer: {\n          axis: 'y',\n        },\n        formatter: (val) => tooltipFormatter(\n          (val as { data: number[] }[])[0].data,\n          precision,\n          isOrderBook,\n        ),\n      },\n      xAxis: {\n        type: 'value',\n        min: range * -1.05,\n        max: range * 1.05,\n        axisTick: { show: false },\n        axisLine: { show: false },\n        axisLabel: {\n          padding: [7, 0, 0, 0],\n          showMinLabel: false,\n          showMaxLabel: false,\n          formatter: (value) => (value === 0 ? '%' : `${Math.abs(value)}%`),\n        },\n      },\n      yAxis: {\n        type: 'value',\n        position: 'right',\n        axisLine: { show: false },\n        axisTick: { show: false },\n        axisLabel: {\n          showMaxLabel: false,\n          showMinLabel: false,\n          padding: [0, 0, 0, 10],\n          formatter: (value) => value.toFixed(precision),\n        },\n      },\n      dataset: {\n        source: dataset,\n      },\n      series: [\n        {\n          type: 'custom',\n          clip: true,\n          encode: {\n            x: 1,\n            y: 0,\n            tooltip: 1,\n          },\n          renderItem: (params, api) => {\n            const yValue = api.value(0);\n            const xStart = api.coord([api.value(1), yValue]);\n            const xEnd = api.coord([0, yValue]);\n            const bucketWidthHeight = api.size ? (api.size([0, bucketWidth]) as number[])[1] : 0;\n            const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;\n\n            const rectShape = {\n              x: xStart[0] + 0.5,\n              y: xStart[1] - height / 2,\n              width: xEnd[0] - xStart[0],\n              height,\n            };\n\n            return {\n              type: 'rect',\n              shape: rectShape,\n              emphasis: {\n                style: {\n                  fill: colorPalette.bottleGreenLight,\n                },\n              },\n              style: {\n                fill: api.visual('color'),\n              },\n            };\n          },\n        },\n        {\n          type: 'custom',\n          clip: true,\n          encode: {\n            x: 1,\n            y: 0,\n            tooltip: 2,\n          },\n          markLine: {\n            animation: false,\n            silent: true,\n            precision: 4,\n            symbol: ['none', 'triangle'],\n            symbolRotate: 90,\n            symbolSize: [20, 10],\n            lineStyle: {\n              color: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,\n              width: 1,\n            },\n            label: {\n              padding: [5, 15, 5, 15],\n              color: isDark ? colorPalette.black : colorPalette.white,\n              backgroundColor: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,\n            },\n            data: [\n              {\n                yAxis: price,\n              },\n            ],\n          },\n          renderItem: (params, api) => {\n            const yValue = api.value(0);\n            const xStart = api.coord([api.value(2), yValue]);\n            const xEnd = api.coord([0, yValue]);\n            const bucketWidthHeight = api.size ? (api.size([0, bucketWidth]) as number[])[1] : 0;\n            const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;\n\n            const rectShape = {\n              x: xStart[0] - 0.5,\n              y: xStart[1] - height / 2,\n              width: xEnd[0] - xStart[0],\n              height,\n            };\n\n            return {\n              type: 'rect',\n              shape: rectShape,\n              emphasis: {\n                style: {\n                  fill: isDark ? colorPalette.orange : colorPalette.raspberryDark,\n                },\n              },\n              style: {\n                fill: api.visual('color'),\n              },\n            };\n          },\n        },\n      ],\n    }\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAIA,IAAAE,WAAA,GAAAF,OAAA;AAEO,MAAMG,gBAAgB,GAAGC,IAAA,IAAwD;EAAA,IAAvD;IAAEC,MAAM;IAAEC;EAAuC,CAAC,GAAAF,IAAA;EACjF,MAAMG,gBAAgB,GAAG,IAAAC,8BAAY,EAAC;IACpCH,MAAM;IACNI,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAEC,uBAAY;IACzBC,UAAU,EAAEC;EACd,CAAC,CAAC;EAEF,OAAO;IACLC,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAE,KAAK;MACXC,KAAK,KAAAC,MAAA,CAAKN,+BAAoB,OAAI;MAClCO,MAAM,KAAAD,MAAA,CAAKR,uBAAY;IACzB,CAAC,CACF;IACDU,OAAO,EAAE,CACP,GAAGjB,gBAAgB,EACnB;MACEkB,IAAI,EAAE,OAAO;MACbL,IAAI,EAAE,KAAK;MACXD,GAAG,EAAE,MAAM;MACXO,MAAM,EAAE,IAAI;MACZC,QAAQ,EAAE,CACR;QACEF,IAAI,EAAE,MAAM;QACZG,CAAC,EAAE,GAAG;QACNR,IAAI,EAAE,QAAQ;QACdD,GAAG,EAAE,QAAQ;QACbU,KAAK,EAAE;UACLC,KAAK,EAAE,EAAE;UACTC,MAAM,EAAE;QACV,CAAC;QACDC,KAAK,EAAE;UACLC,IAAI,EAAE5B,MAAM,GAAG6B,8BAAY,CAACC,QAAQ,GAAGD,8BAAY,CAACE,KAAK;UACzDC,UAAU,EAAE,CAAC;UACbC,aAAa,EAAE,CAAC;UAChBC,aAAa,EAAE,CAAC;UAChBC,WAAW,EAAE;QACf;MACF,CAAC,EACD;QACEf,IAAI,EAAE,MAAM;QACZG,CAAC,EAAE,GAAG;QACNR,IAAI,EAAE,QAAQ;QACdD,GAAG,EAAE,QAAQ;QACba,KAAK,EAAE;UACLC,IAAI,EAAE5B,MAAM,GAAG6B,8BAAY,CAACE,KAAK,GAAGF,8BAAY,CAACO,KAAK;UACtDX,KAAK,EAAE,EAAE;UACTC,MAAM,EAAE,EAAE;UACVW,IAAI,EAAEpC,WAAW,GAAG,MAAM,GAAG;QAC/B;MACF,CAAC;IAEL,CAAC,EACD;MACEmB,IAAI,EAAE,OAAO;MACbJ,KAAK,EAAE,OAAO;MACdF,GAAG,EAAE,MAAM;MACXO,MAAM,EAAE,IAAI;MACZC,QAAQ,EAAE,CACR;QACEF,IAAI,EAAE,MAAM;QACZG,CAAC,EAAE,GAAG;QACNP,KAAK,EAAE,QAAQ;QACfF,GAAG,EAAE,QAAQ;QACbU,KAAK,EAAE;UACLC,KAAK,EAAE,EAAE;UACTC,MAAM,EAAE;QACV,CAAC;QACDC,KAAK,EAAE;UACLC,IAAI,EAAE5B,MAAM,GAAG6B,8BAAY,CAACC,QAAQ,GAAGD,8BAAY,CAACE,KAAK;UACzDC,UAAU,EAAE,CAAC;UACbC,aAAa,EAAE,CAAC;UAChBC,aAAa,EAAE,CAAC;UAChBC,WAAW,EAAE;QACf;MACF,CAAC,EACD;QACEf,IAAI,EAAE,MAAM;QACZG,CAAC,EAAE,GAAG;QACNP,KAAK,EAAE,QAAQ;QACfF,GAAG,EAAE,QAAQ;QACba,KAAK,EAAE;UACLC,IAAI,EAAE5B,MAAM,GAAG6B,8BAAY,CAACE,KAAK,GAAGF,8BAAY,CAACO,KAAK;UACtDX,KAAK,EAAE,EAAE;UACTC,MAAM,EAAE,EAAE;UACVW,IAAI,EAAEpC,WAAW,GAAG,KAAK,GAAG;QAC9B;MACF,CAAC;IAEL,CAAC;EAEL,CAAC;AACH,CAAC;AAACqC,OAAA,CAAAxC,gBAAA,GAAAA,gBAAA;AAEK,MAAMyC,SAAwB,GAAGC,KAAA,IAElC;EAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;EAAA,IAFmC;IACvCC,IAAI;IAAEC,SAAS;IAAE7C,MAAM;IAAEC;EAC3B,CAAC,GAAAuC,KAAA;EACC,MAAMM,OAAO,GAAG,EAAAL,qBAAA,GAAAG,IAAI,CAACG,kBAAkB,CAAC,CAAC,CAAC,cAAAN,qBAAA,uBAA1BA,qBAAA,CAA4BK,OAAO,KAAI,EAAE;EACzD,MAAME,WAAW,IAAAN,sBAAA,GAAGE,IAAI,CAACG,kBAAkB,CAAC,CAAC,CAAC,cAAAL,sBAAA,uBAA1BA,sBAAA,CAA4BM,WAAY;EAC5D,MAAMC,KAAK,IAAAN,sBAAA,GAAGC,IAAI,CAACG,kBAAkB,CAAC,CAAC,CAAC,cAAAJ,sBAAA,uBAA1BA,sBAAA,CAA4BM,KAAM;EAEhD,MAAMC,OAAO,GAAGJ,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAM,CACrCA,IAAI,CAAEH,KAAK,EACXI,MAAM,CAACD,IAAI,CAAEE,gBAAgB,CAAC,EAC9BD,MAAM,CAACD,IAAI,CAAEG,iBAAiB,CAAC,GAAG,CAAC,CAAC,CACpC,CAAC;EAEH,MAAMC,qBAAqB,GAAGP,KAAK,GAAID,WAAW,GAAGS,uBAAY,GAAG,GAAI;EACxE,MAAMC,mBAAmB,GAAGT,KAAK,GAAID,WAAW,GAAGS,uBAAY,GAAG,GAAI;EAEtE,MAAME,GAAG,GAAGC,IAAI,CAACD,GAAG,CAAC,GAAGT,OAAO,CAACC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;EACvD,MAAMS,GAAG,GAAGD,IAAI,CAACE,GAAG,CAACF,IAAI,CAACC,GAAG,CAAC,GAAGX,OAAO,CAACC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EAEjE,MAAMW,KAAK,GAAGJ,GAAG,GAAGE,GAAG,GAAGF,GAAG,GAAGE,GAAG;EAEnC,OACE;IACEG,SAAS,EAAE,KAAK;IAChBC,KAAK,EAAE,CACLpC,8BAAY,CAACqC,gBAAgB,EAC7BlE,MAAM,GAAG6B,8BAAY,CAACsC,MAAM,GAAGtC,8BAAY,CAACuC,aAAa,CAC1D;IACDC,KAAK,EAAE;MACLhC,IAAI,EAAEpC,WAAW,GAAG,aAAa,GAAG,gBAAgB;MACpDqE,OAAO,EAAE,EAAE;MACXC,SAAS,EAAE;QACTC,QAAQ,EAAE;MACZ;IACF,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,IAAAC,iCAAe,EAAC;QACvBC,eAAe,EAAEpB,qBAAqB;QACtCqB,aAAa,EAAEnB;MACjB,CAAC;IACH,CAAC;IACDoB,QAAQ,EAAE,CACR;MACE1D,IAAI,EAAE,QAAQ;MACd2D,QAAQ,EAAE,IAAI;MACdC,UAAU,EAAExB,qBAAqB;MACjCyB,QAAQ,EAAEvB,mBAAmB;MAE7BwB,UAAU,EAAE,CAAC;MACbC,YAAY,EAAE,EAAE,GAAGnC;IACrB,CAAC,CACF;IACDoC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE;MACR,CAAC;MACDC,SAAS,EAAGC,GAAG,IAAK,IAAAC,4BAAgB,EACjCD,GAAG,CAA0B,CAAC,CAAC,CAAC7C,IAAI,EACrCC,SAAS,EACT5C,WACF;IACF,CAAC;IACD0F,KAAK,EAAE;MACLvE,IAAI,EAAE,OAAO;MACbyC,GAAG,EAAEE,KAAK,GAAG,CAAC,IAAI;MAClBJ,GAAG,EAAEI,KAAK,GAAG,IAAI;MACjB6B,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTzB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACrB0B,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE,KAAK;QACnBT,SAAS,EAAGU,KAAK,IAAMA,KAAK,KAAK,CAAC,GAAG,GAAG,MAAAjF,MAAA,CAAM2C,IAAI,CAACE,GAAG,CAACoC,KAAK,CAAC;MAC/D;IACF,CAAC;IACDC,KAAK,EAAE;MACL/E,IAAI,EAAE,OAAO;MACbgF,QAAQ,EAAE,OAAO;MACjBN,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTE,YAAY,EAAE,KAAK;QACnBD,YAAY,EAAE,KAAK;QACnB1B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACtBkB,SAAS,EAAGU,KAAK,IAAKA,KAAK,CAACG,OAAO,CAACxD,SAAS;MAC/C;IACF,CAAC;IACDK,OAAO,EAAE;MACPoD,MAAM,EAAEpD;IACV,CAAC;IACDqD,MAAM,EAAE,CACN;MACEnF,IAAI,EAAE,QAAQ;MACdoF,IAAI,EAAE,IAAI;MACVC,MAAM,EAAE;QACNC,CAAC,EAAE,CAAC;QACJC,CAAC,EAAE,CAAC;QACJvB,OAAO,EAAE;MACX,CAAC;MACDwB,UAAU,EAAEA,CAACC,MAAM,EAAEC,GAAG,KAAK;QAC3B,MAAMC,MAAM,GAAGD,GAAG,CAACZ,KAAK,CAAC,CAAC,CAAC;QAC3B,MAAMc,MAAM,GAAGF,GAAG,CAACG,KAAK,CAAC,CAACH,GAAG,CAACZ,KAAK,CAAC,CAAC,CAAC,EAAEa,MAAM,CAAC,CAAC;QAChD,MAAMG,IAAI,GAAGJ,GAAG,CAACG,KAAK,CAAC,CAAC,CAAC,EAAEF,MAAM,CAAC,CAAC;QACnC,MAAMI,iBAAiB,GAAGL,GAAG,CAACM,IAAI,GAAIN,GAAG,CAACM,IAAI,CAAC,CAAC,CAAC,EAAEpE,WAAW,CAAC,CAAC,CAAc,CAAC,CAAC,GAAG,CAAC;QACpF,MAAMtB,MAAM,GAAGyF,iBAAiB,GAAG,CAAC,GAAGA,iBAAiB,GAAG,GAAG,GAAGA,iBAAiB;QAElF,MAAME,SAAS,GAAG;UAChBX,CAAC,EAAEM,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG;UAClBL,CAAC,EAAEK,MAAM,CAAC,CAAC,CAAC,GAAGtF,MAAM,GAAG,CAAC;UACzBD,KAAK,EAAEyF,IAAI,CAAC,CAAC,CAAC,GAAGF,MAAM,CAAC,CAAC,CAAC;UAC1BtF;QACF,CAAC;QAED,OAAO;UACLN,IAAI,EAAE,MAAM;UACZI,KAAK,EAAE6F,SAAS;UAChBC,QAAQ,EAAE;YACR3F,KAAK,EAAE;cACLC,IAAI,EAAEC,8BAAY,CAACqC;YACrB;UACF,CAAC;UACDvC,KAAK,EAAE;YACLC,IAAI,EAAEkF,GAAG,CAACS,MAAM,CAAC,OAAO;UAC1B;QACF,CAAC;MACH;IACF,CAAC,EACD;MACEnG,IAAI,EAAE,QAAQ;MACdoF,IAAI,EAAE,IAAI;MACVC,MAAM,EAAE;QACNC,CAAC,EAAE,CAAC;QACJC,CAAC,EAAE,CAAC;QACJvB,OAAO,EAAE;MACX,CAAC;MACDoC,QAAQ,EAAE;QACRxD,SAAS,EAAE,KAAK;QAChB3C,MAAM,EAAE,IAAI;QACZwB,SAAS,EAAE,CAAC;QACZ4E,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;QAC5BC,YAAY,EAAE,EAAE;QAChBC,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;QACpBC,SAAS,EAAE;UACT3D,KAAK,EAAEjE,MAAM,GAAG6B,8BAAY,CAACsC,MAAM,GAAGtC,8BAAY,CAACgG,eAAe;UAClEpG,KAAK,EAAE;QACT,CAAC;QACDqG,KAAK,EAAE;UACLxD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;UACvBL,KAAK,EAAEjE,MAAM,GAAG6B,8BAAY,CAACO,KAAK,GAAGP,8BAAY,CAACE,KAAK;UACvDgG,eAAe,EAAE/H,MAAM,GAAG6B,8BAAY,CAACsC,MAAM,GAAGtC,8BAAY,CAACgG;QAC/D,CAAC;QACDjF,IAAI,EAAE,CACJ;UACEuD,KAAK,EAAElD;QACT,CAAC;MAEL,CAAC;MACD2D,UAAU,EAAEA,CAACC,MAAM,EAAEC,GAAG,KAAK;QAC3B,MAAMC,MAAM,GAAGD,GAAG,CAACZ,KAAK,CAAC,CAAC,CAAC;QAC3B,MAAMc,MAAM,GAAGF,GAAG,CAACG,KAAK,CAAC,CAACH,GAAG,CAACZ,KAAK,CAAC,CAAC,CAAC,EAAEa,MAAM,CAAC,CAAC;QAChD,MAAMG,IAAI,GAAGJ,GAAG,CAACG,KAAK,CAAC,CAAC,CAAC,EAAEF,MAAM,CAAC,CAAC;QACnC,MAAMI,iBAAiB,GAAGL,GAAG,CAACM,IAAI,GAAIN,GAAG,CAACM,IAAI,CAAC,CAAC,CAAC,EAAEpE,WAAW,CAAC,CAAC,CAAc,CAAC,CAAC,GAAG,CAAC;QACpF,MAAMtB,MAAM,GAAGyF,iBAAiB,GAAG,CAAC,GAAGA,iBAAiB,GAAG,GAAG,GAAGA,iBAAiB;QAElF,MAAME,SAAS,GAAG;UAChBX,CAAC,EAAEM,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG;UAClBL,CAAC,EAAEK,MAAM,CAAC,CAAC,CAAC,GAAGtF,MAAM,GAAG,CAAC;UACzBD,KAAK,EAAEyF,IAAI,CAAC,CAAC,CAAC,GAAGF,MAAM,CAAC,CAAC,CAAC;UAC1BtF;QACF,CAAC;QAED,OAAO;UACLN,IAAI,EAAE,MAAM;UACZI,KAAK,EAAE6F,SAAS;UAChBC,QAAQ,EAAE;YACR3F,KAAK,EAAE;cACLC,IAAI,EAAE5B,MAAM,GAAG6B,8BAAY,CAACsC,MAAM,GAAGtC,8BAAY,CAACuC;YACpD;UACF,CAAC;UACDzC,KAAK,EAAE;YACLC,IAAI,EAAEkF,GAAG,CAACS,MAAM,CAAC,OAAO;UAC1B;QACF,CAAC;MACH;IACF,CAAC;EAEL,CAAC;AAEL,CAAC;AAACjF,OAAA,CAAAC,SAAA,GAAAA,SAAA"}

package/dist/main/OrderBookWidget/components/Chart/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/dist/main/OrderBookWidget/components/Chart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/OrderBookWidget/components/Chart/types.ts"],"sourcesContent":["import { EChartsOption } from 'echarts';\nimport { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';\n\nexport interface ChartProps {\n  data: GetOrderPositionBooksQuery;\n  isOrderBook: boolean;\n}\n\nexport interface GetResponsiveOptionsProps {\n  isDark: boolean;\n  isOrderBook: boolean;\n}\n\nexport interface GetOptionProps {\n  data: GetOrderPositionBooksQuery;\n  precision: number;\n  isDark: boolean;\n  isOrderBook: boolean;\n}\n\nexport type GetOptionType = (\n  props: GetOptionProps,\n) => EChartsOption;\n\nexport type TooltipFormatterType = (\n  data: number[],\n  precision: number,\n  isOrderBook: boolean,\n) => string;\n"],"mappings":""}

package/dist/main/OrderBookWidget/config.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.navigationConfig = void 0;
+var _graphql = require("../gql/types/graphql");
+const navigationConfig = exports.navigationConfig = [{
+  id: _graphql.BookType.Order,
+  label: 'order_book'
+}, {
+  id: _graphql.BookType.Position,
+  label: 'position_book'
+}];
+//# sourceMappingURL=config.js.map

package/dist/main/OrderBookWidget/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":["_graphql","require","navigationConfig","exports","id","BookType","Order","label","Position"],"sources":["../../../src/OrderBookWidget/config.ts"],"sourcesContent":["import { BookType } from '../gql/types/graphql';\n\nconst navigationConfig = [{\n  id: BookType.Order,\n  label: 'order_book',\n}, {\n  id: BookType.Position,\n  label: 'position_book',\n}];\n\nexport { navigationConfig };\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAEA,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,CAAC;EACxBE,EAAE,EAAEC,iBAAQ,CAACC,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EAAE;EACDH,EAAE,EAAEC,iBAAQ,CAACG,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CAAC"}

package/dist/main/OrderBookWidget/render.js

@@ -5,14 +5,35 @@ var _reactDom = require("react-dom");
 var _OrderBookWidget = require("./OrderBookWidget");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const {
-  graphqlUrl,
-  instrument,
-  renderElementId,
-  locale
-} = window.orderBookWidgetConfig;
-(0, _reactDom.render)(_react.default.createElement(_OrderBookWidget.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);
+    (0, _reactDom.render)(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
+      locale: locale,
+      graphqlUrl: graphqlUrl,
+      instrument: instrument,
+      theme: mode
+    }), element);
+  });
+} else {
+  (0, _reactDom.render)(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
+    locale: configLocale,
+    graphqlUrl: configGraphQl,
+    instrument: configInstrument
+  }), document.getElementById(configRenderElementId));
+}
 //# sourceMappingURL=render.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_reactDom","_OrderBookWidget","obj","__esModule","default","graphqlUrl","instrument","renderElementId","locale","window","orderBookWidgetConfig","render","createElement","OrderBookWidget","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AAAoD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AASpD,MAAM;EACJG,UAAU;EACVC,UAAU;EACVC,eAAe;EACfC;AACF,CAAC,GAAGC,MAAM,CAACC,qBAAqB;AAEhC,IAAAC,gBAAM,EACJd,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACX,gBAAA,CAAAY,eAAe;EACdL,MAAM,EAAEA,MAAO;EACfH,UAAU,EAAEA,UAAW;EACvBC,UAAU,EAAEA;AAAW,CACxB,CAAC,EACFQ,QAAQ,CAACC,cAAc,CAACR,eAAe,CACzC,CAAC"}
+{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_reactDom","_OrderBookWidget","obj","__esModule","default","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","render","createElement","OrderBookWidget","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AAAoD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAM;EACJG,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;IAE3D,IAAAK,gBAAM,EACJ9B,MAAA,CAAAO,OAAA,CAAAwB,aAAA,CAAC3B,gBAAA,CAAA4B,eAAe;MACdlB,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvBuB,KAAK,EAAEN;IAAc,CACtB,CAAC,EACFH,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,IAAAM,gBAAM,EACJ9B,MAAA,CAAAO,OAAA,CAAAwB,aAAA,CAAC3B,gBAAA,CAAA4B,eAAe;IACdlB,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CAAC,EACFS,QAAQ,CAACc,cAAc,CAACrB,qBAAqB,CAC/C,CAAC;AACH"}

package/dist/main/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/OrderBookWidget/OrderBookWidget.js

@@ -1,27 +1,30 @@
 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 { translations } from '../translations';
 const OrderBookWidget = _ref => {
   let {
     graphqlUrl,
     instrument,
-    locale
+    locale,
+    theme
   } = _ref;
   const client = new ApolloClient({
     uri: graphqlUrl,
     cache: new InMemoryCache()
   });
-  return React.createElement(LocaleProvider, {
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(LocaleProvider, {
     locale: getLocale(locale),
     translations: translations
   }, React.createElement(ApolloProvider, {
     client: client
   }, React.createElement(Widget, {
     instrument: instrument
-  })));
+  }))));
 };
 export { OrderBookWidget };
 //# sourceMappingURL=OrderBookWidget.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderBookWidget.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","LocaleProvider","getLocale","Widget","translations","OrderBookWidget","_ref","graphqlUrl","instrument","locale","client","uri","cache","createElement"],"sources":["../../../src/OrderBookWidget/OrderBookWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { OrderBookWidgetConfig } from './types';\nimport { translations } from '../translations';\n\nconst OrderBookWidget = ({\n  graphqlUrl,\n  instrument,\n  locale,\n}: OrderBookWidgetConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <LocaleProvider locale={getLocale(locale)} translations={translations}>\n      <ApolloProvider client={client}>\n        <Widget instrument={instrument} />\n      </ApolloProvider>\n    </LocaleProvider>\n  );\n};\n\nexport { OrderBookWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,SAAS,QAAQ,2BAA2B;AACrD,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,eAAe,GAAGC,IAAA,IAIK;EAAA,IAJJ;IACvBC,UAAU;IACVC,UAAU;IACVC;EACqB,CAAC,GAAAH,IAAA;EACtB,MAAMI,MAAM,GAAG,IAAIZ,YAAY,CAAC;IAC9Ba,GAAG,EAAEJ,UAAU;IACfK,KAAK,EAAE,IAAIb,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,CAAAgB,aAAA,CAACZ,cAAc;IAACQ,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAACL,YAAY,EAAEA;EAAa,GACpEP,KAAA,CAAAgB,aAAA,CAACb,cAAc;IAACU,MAAM,EAAEA;EAAO,GAC7Bb,KAAA,CAAAgB,aAAA,CAACV,MAAM;IAACK,UAAU,EAAEA;EAAW,CAAE,CACnB,CACF,CAAC;AAErB,CAAC;AAED,SAASH,eAAe"}
+{"version":3,"file":"OrderBookWidget.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","LocaleProvider","ThemeProvider","getLocale","Widget","translations","OrderBookWidget","_ref","graphqlUrl","instrument","locale","theme","client","uri","cache","createElement"],"sources":["../../../src/OrderBookWidget/OrderBookWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { OrderBookWidgetConfig } from './types';\nimport { translations } from '../translations';\n\nconst OrderBookWidget = ({\n  graphqlUrl,\n  instrument,\n  locale,\n  theme,\n}: OrderBookWidgetConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider theme={theme}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          <Widget instrument={instrument} />\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { OrderBookWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AACpE,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,eAAe,GAAGC,IAAA,IAKK;EAAA,IALJ;IACvBC,UAAU;IACVC,UAAU;IACVC,MAAM;IACNC;EACqB,CAAC,GAAAJ,IAAA;EACtB,MAAMK,MAAM,GAAG,IAAId,YAAY,CAAC;IAC9Be,GAAG,EAAEL,UAAU;IACfM,KAAK,EAAE,IAAIf,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,CAAAkB,aAAA,CAACb,aAAa;IAACS,KAAK,EAAEA;EAAM,GAC1Bd,KAAA,CAAAkB,aAAA,CAACd,cAAc;IAACS,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAACL,YAAY,EAAEA;EAAa,GACpER,KAAA,CAAAkB,aAAA,CAACf,cAAc;IAACY,MAAM,EAAEA;EAAO,GAC7Bf,KAAA,CAAAkB,aAAA,CAACX,MAAM;IAACK,UAAU,EAAEA;EAAW,CAAE,CACnB,CACF,CACH,CAAC;AAEpB,CAAC;AAED,SAASH,eAAe"}

package/dist/module/OrderBookWidget/Widget.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":["React","useState","useQuery","Button","ButtonVariant","ChartError","Spinner","SpinnerSize","useLocale","getOrderPositionBooks","BookType","Chart","Widget","_ref","instrument","bookType","setBookType","Order","lang","loading","data","error","variables","recentHours","isError","isTypeOrder","createElement","className","variant","primary","secondary","onClick","Position","size","lg"],"sources":["../../../src/OrderBookWidget/Widget.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  Button, ButtonVariant, ChartError, Spinner, SpinnerSize,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { WidgetProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\n\nconst Widget = ({\n  instrument,\n}: WidgetProps) => {\n  const [bookType, setBookType] = useState(BookType.Order);\n  const { lang } = useLocale();\n\n  const { loading, data, error } = useQuery<\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n  });\n\n  const isError = (!loading && !data) || !!error;\n\n  const isTypeOrder = bookType === BookType.Order;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <div className=\"lw-flex lw-gap-2\">\n        <Button\n          variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}\n          onClick={() => setBookType(BookType.Order)}\n        >\n          {lang('order_book')}\n        </Button>\n        <Button\n          variant={isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary}\n          onClick={() => setBookType(BookType.Position)}\n        >\n          {lang('position_book')}\n        </Button>\n      </div>\n      {/* @todo: chart height */}\n      <div className=\"lw-relative lw-h-[700px] lw-w-full\">\n        {isError && (\n          <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]\">\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <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]\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {data && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={data} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,MAAM,EAAEC,aAAa,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAClD,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,qBAAqB,QAAQ,8BAA8B;AACpE,SAA0EC,QAAQ,QAAQ,sBAAsB;AAChH,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,MAAMC,MAAM,GAAGC,IAAA,IAEI;EAAA,IAFH;IACdC;EACW,CAAC,GAAAD,IAAA;EACZ,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CAACS,QAAQ,CAACO,KAAK,CAAC;EACxD,MAAM;IAAEC;EAAK,CAAC,GAAGV,SAAS,CAAC,CAAC;EAE5B,MAAM;IAAEW,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGnB,QAAQ,CAGvCO,qBAAqB,EAAE;IACvBa,SAAS,EAAE;MACTR,UAAU;MACVC,QAAQ;MACRQ,WAAW,EAAE;IACf;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAI,CAACL,OAAO,IAAI,CAACC,IAAI,IAAK,CAAC,CAACC,KAAK;EAE9C,MAAMI,WAAW,GAAGV,QAAQ,KAAKL,QAAQ,CAACO,KAAK;EAE/C,OACEjB,KAAA,CAAA0B,aAAA;IAAK,eAAY,mBAAmB;IAACC,SAAS,EAAC;EAAoD,GACjG3B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAkB,GAC/B3B,KAAA,CAAA0B,aAAA,CAACvB,MAAM;IACLyB,OAAO,EAAEH,WAAW,GAAGrB,aAAa,CAACyB,OAAO,GAAGzB,aAAa,CAAC0B,SAAU;IACvEC,OAAO,EAAEA,CAAA,KAAMf,WAAW,CAACN,QAAQ,CAACO,KAAK;EAAE,GAE1CC,IAAI,CAAC,YAAY,CACZ,CAAC,EACTlB,KAAA,CAAA0B,aAAA,CAACvB,MAAM;IACLyB,OAAO,EAAEH,WAAW,GAAGrB,aAAa,CAAC0B,SAAS,GAAG1B,aAAa,CAACyB,OAAQ;IACvEE,OAAO,EAAEA,CAAA,KAAMf,WAAW,CAACN,QAAQ,CAACsB,QAAQ;EAAE,GAE7Cd,IAAI,CAAC,eAAe,CACf,CACL,CAAC,EAENlB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAChDH,OAAO,IACNxB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAoH,GACjI3B,KAAA,CAAA0B,aAAA,CAACrB,UAAU,MAAE,CACV,CACN,EACAc,OAAO,IACNnB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAoH,GACjI3B,KAAA,CAAA0B,aAAA,CAACpB,OAAO;IAAC2B,IAAI,EAAE1B,WAAW,CAAC2B;EAAG,CAAE,CAC7B,CACN,EACAd,IAAI,IACHpB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzE3B,KAAA,CAAA0B,aAAA,CAACf,KAAK;IAACS,IAAI,EAAEA;EAAK,CAAE,CACjB,CAEJ,CACF,CAAC;AAEV,CAAC;AAED,SAASR,MAAM"}
+{"version":3,"file":"Widget.js","names":["React","useState","useQuery","ChartError","Spinner","SpinnerSize","Tabs","useLocale","getOrderPositionBooks","BookType","Chart","navigationConfig","Widget","_ref","instrument","bookType","setBookType","Order","lang","loading","data","error","variables","recentHours","isError","createElement","className","activeTab","handleClick","e","currentTarget","value","labelCallback","items","size","lg","isOrderBook"],"sources":["../../../src/OrderBookWidget/Widget.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Spinner, SpinnerSize, Tabs,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { WidgetProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { navigationConfig } from './config';\n\nconst Widget = ({\n  instrument,\n}: WidgetProps) => {\n  const [bookType, setBookType] = useState(BookType.Order);\n  const { lang } = useLocale();\n\n  const { loading, data, error } = useQuery<\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n  });\n\n  const isError = (!loading && !data) || !!error;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <Tabs\n        activeTab={bookType}\n        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n        labelCallback={lang}\n        items={navigationConfig}\n      />\n      {/* @todo: chart height */}\n      <div className=\"lw-relative lw-h-[450px] lw-w-full\">\n        {isError && (\n          <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\">\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <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\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {data && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={data} isOrderBook={bookType === BookType.Order} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,QACjC,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,qBAAqB,QAAQ,8BAA8B;AACpE,SAA0EC,QAAQ,QAAQ,sBAAsB;AAChH,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,gBAAgB,QAAQ,UAAU;AAE3C,MAAMC,MAAM,GAAGC,IAAA,IAEI;EAAA,IAFH;IACdC;EACW,CAAC,GAAAD,IAAA;EACZ,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CAACQ,QAAQ,CAACQ,KAAK,CAAC;EACxD,MAAM;IAAEC;EAAK,CAAC,GAAGX,SAAS,CAAC,CAAC;EAE5B,MAAM;IAAEY,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGnB,QAAQ,CAGvCM,qBAAqB,EAAE;IACvBc,SAAS,EAAE;MACTR,UAAU;MACVC,QAAQ;MACRQ,WAAW,EAAE;IACf;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAI,CAACL,OAAO,IAAI,CAACC,IAAI,IAAK,CAAC,CAACC,KAAK;EAE9C,OACErB,KAAA,CAAAyB,aAAA;IAAK,eAAY,mBAAmB;IAACC,SAAS,EAAC;EAAoD,GACjG1B,KAAA,CAAAyB,aAAA,CAACnB,IAAI;IACHqB,SAAS,EAAEZ,QAAS;IACpBa,WAAW,EAAGC,CAAC,IAAKb,WAAW,CAACa,CAAC,CAACC,aAAa,CAACC,KAAiB,CAAE;IACnEC,aAAa,EAAEd,IAAK;IACpBe,KAAK,EAAEtB;EAAiB,CACzB,CAAC,EAEFX,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAChDF,OAAO,IACNxB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAiJ,GAC9J1B,KAAA,CAAAyB,aAAA,CAACtB,UAAU,MAAE,CACV,CACN,EACAgB,OAAO,IACNnB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAiJ,GAC9J1B,KAAA,CAAAyB,aAAA,CAACrB,OAAO;IAAC8B,IAAI,EAAE7B,WAAW,CAAC8B;EAAG,CAAE,CAC7B,CACN,EACAf,IAAI,IACHpB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzE1B,KAAA,CAAAyB,aAAA,CAACf,KAAK;IAACU,IAAI,EAAEA,IAAK;IAACgB,WAAW,EAAErB,QAAQ,KAAKN,QAAQ,CAACQ;EAAM,CAAE,CAC3D,CAEJ,CACF,CAAC;AAEV,CAAC;AAED,SAASL,MAAM"}