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

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","ReactEcharts","getOptions","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"],"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,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,YAAY,MAAM,mBAAmB;AAC5C,SAASC,UAAU,QAAQ,cAAc;AAOzC,OAAO,MAAMC,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,OACElB,KAAA,CAAAmB,aAAA;IAAKC,SAAS,EAAC;EAAuB,GACpCpB,KAAA,CAAAmB,aAAA,cACGP,KAAK,IAAID,WAAW,IACnBX,KAAA,CAAAmB,aAAA,CAAClB,YAAY;IACXoB,KAAK,EAAE;MACLC,MAAM,EAAE,OAAO;MACfC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEtB,UAAU,CAAC;MAAEM,IAAI,EAAEK,SAAS;MAAED,KAAK;MAAED;IAAY,CAAC;EAAE,CAC7D,CAEA,CACF,CAAC;AAEV,CAAC"}
+{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEcharts","registerTheme","Theme","ThemeContext","colorPalette","getChartTheme","useMediaQuery","getDesktopOption","getOption","Dark","Light","Chart","_ref","data","isOrderBook","isDark","echartRef","isDesktop","current","echartInstance","getEchartsInstance","on","color","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","createElement","className","ref","theme","style","height","width","option","precision"],"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,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,EAAEC,UAAU,QAAQ,OAAO;AAC5D,OAAOC,YAAY,MAAM,mBAAmB;AAC5C,SAASC,aAAa,QAA4B,SAAS;AAC3D,SACEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAEC,aAAa,QAC3C,2BAA2B;AAClC,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAASC,gBAAgB,EAAEC,SAAS,QAAQ,aAAa;AAGzDP,aAAa,CAAC,YAAY,EAAEI,aAAa,CAACH,KAAK,CAACO,IAAI,CAAC,CAAC;AACtDR,aAAa,CAAC,aAAa,EAAEI,aAAa,CAACH,KAAK,CAACQ,KAAK,CAAC,CAAC;AAExD,OAAO,MAAMC,KAAK,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,IAAI;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EACrD,MAAMG,MAAM,GAAGhB,UAAU,CAACI,YAAY,CAAC,KAAKD,KAAK,CAACO,IAAI;EACtD,MAAMO,SAAS,GAAGnB,MAAM,CAAC,IAAI,CAAC;EAC9B,MAAMoB,SAAS,GAAGX,aAAa,CAAC,oBAAoB,CAAC;EAErDR,SAAS,CAAC,MAAM;IACd,IAAIkB,SAAS,CAACE,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGH,SAAS,CAACE,OAAO,CAACE,kBAAkB,CAAC,CAAgB;MAE5ED,cAAc,CAACE,EAAE,CAAC,WAAW,EAAE,MAAM;QACnC,IAAKF,cAAc,CAACX,SAAS,CAAC,CAAC,CAACc,KAAK,CAAa,CAAC,CAAC,KAAKlB,YAAY,CAACmB,gBAAgB,EAAE;UACtFJ,cAAc,CAACK,SAAS,CAAC;YACvBF,KAAK,EAAE,CACLlB,YAAY,CAACqB,kBAAkB,EAC/BV,MAAM,GAAGX,YAAY,CAACsB,QAAQ,GAAGtB,YAAY,CAACuB,eAAe;UAEjE,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;MAEFR,cAAc,CAACE,EAAE,CAAC,WAAW,EAAE,MAAM;QACnCF,cAAc,CAACK,SAAS,CAAC;UACvBF,KAAK,EAAE,CACLlB,YAAY,CAACmB,gBAAgB,EAC7BR,MAAM,GAAGX,YAAY,CAACwB,MAAM,GAAGxB,YAAY,CAACyB,aAAa;QAE7D,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACb,SAAS,EAAED,MAAM,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACd,IAAIkB,SAAS,CAACE,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGH,SAAS,CAACE,OAAO,CAACE,kBAAkB,CAAC,CAAgB;MAE5ED,cAAc,CAACK,SAAS,CAACjB,gBAAgB,CAAC;QAAEQ,MAAM;QAAED;MAAY,CAAC,CAAC,CAAC;IACrE;EACF,CAAC,EAAE,CAACE,SAAS,EAAEC,SAAS,EAAEF,MAAM,EAAED,WAAW,CAAC,CAAC;EAE/C,OACElB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAC;EAAuB,GACpCnC,KAAA,CAAAkC,aAAA,cACGjB,IAAI,IACHjB,KAAA,CAAAkC,aAAA,CAAC9B,YAAY;IACXgC,GAAG,EAAEhB,SAAU;IACfiB,KAAK,EAAElB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CmB,KAAK,EAAE;MACLC,MAAM,EAAE,OAAO;MACfC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAE7B,SAAS,CAAC;MAChBK,IAAI;MAAEyB,SAAS,EAAE,CAAC;MAAEvB,MAAM;MAAED;IAC9B,CAAC;EAAE,CACJ,CAEA,CACF,CAAC;AAEV,CAAC"}

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

@@ -1,3 +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;
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["INITIAL_BARS","ZOOM_BARS"],"sources":["../../../../../src/OrderBookWidget/components/Chart/constants.ts"],"sourcesContent":["export const INITIAL_BARS = 150;\nexport const ZOOM_BARS = 10;\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG,GAAG;AAC/B,OAAO,MAAMC,SAAS,GAAG,EAAE"}
+{"version":3,"file":"constants.js","names":["INITIAL_BARS","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":"AAAA,OAAO,MAAMA,YAAY,GAAG,EAAE;AAE9B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,mBAAmB,GAAG,EAAE;AACrC,OAAO,MAAMC,oBAAoB,GAAG,GAAG;AACvC,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,YAAY,GAAG,GAAG"}

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

@@ -0,0 +1,8 @@
+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;
+};
+export { tooltipFormatter };
+//# sourceMappingURL=formatters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.js","names":["tooltipFormatter","data","precision","isOrderBook","priceText","concat","toFixed","buyText","sellText"],"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;AAED,SAASR,gBAAgB"}

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

@@ -0,0 +1,266 @@
+import { colorPalette, getGridLines, getZoomControls } from '@oanda/labs-widget-common';
+import { INITIAL_BARS, CHART_WIDTH, CHART_HEIGHT, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
+import { tooltipFormatter } from './formatters';
+export const getDesktopOption = _ref => {
+  let {
+    isDark,
+    isOrderBook
+  } = _ref;
+  const desktopGridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: X_LABEL_SIZE,
+    yLabelSize: Y_LABEL_SIZE_DESKTOP
+  });
+  return {
+    grid: [{
+      name: 'main-grid',
+      top: '48px',
+      left: '0px',
+      right: "".concat(Y_LABEL_SIZE_DESKTOP, "px"),
+      bottom: "".concat(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 ? colorPalette.darkGray : 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 ? colorPalette.white : 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 ? colorPalette.darkGray : 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 ? colorPalette.white : colorPalette.black,
+          width: 70,
+          height: 30,
+          text: isOrderBook ? 'Buy' : 'Long'
+        }
+      }]
+    }]
+  };
+};
+export 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 * INITIAL_BARS * 0.5;
+  const zoomInitialEndValue = price + bucketWidth * 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: [colorPalette.bottleGreenLight, isDark ? colorPalette.orange : colorPalette.raspberryDark],
+    title: {
+      text: isOrderBook ? 'OPEN ORDERS' : 'OPEN POSITIONS',
+      padding: 20,
+      textStyle: {
+        fontSize: 14
+      }
+    },
+    toolbox: {
+      feature: 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 => 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: 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 ? colorPalette.orange : colorPalette.bottleGreenDark,
+          width: 1
+        },
+        label: {
+          padding: [5, 15, 5, 15],
+          color: isDark ? colorPalette.black : colorPalette.white,
+          backgroundColor: isDark ? colorPalette.orange : 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 ? colorPalette.orange : colorPalette.raspberryDark
+            }
+          },
+          style: {
+            fill: api.visual('color')
+          }
+        };
+      }
+    }]
+  };
+};
+//# sourceMappingURL=getOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getOption.js","names":["colorPalette","getGridLines","getZoomControls","INITIAL_BARS","CHART_WIDTH","CHART_HEIGHT","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","tooltipFormatter","getDesktopOption","_ref","isDark","isOrderBook","desktopGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","grid","name","top","left","right","concat","bottom","graphic","type","silent","children","z","shape","width","height","style","fill","darkGray","white","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","black","text","getOption","_ref2","_data$orderPositionBo","_data$orderPositionBo2","_data$orderPositionBo3","data","precision","buckets","orderPositionBooks","bucketWidth","price","dataset","map","item","Number","longCountPercent","shortCountPercent","zoomInitialStartValue","zoomInitialEndValue","max","Math","min","abs","range","animation","color","bottleGreenLight","orange","raspberryDark","title","padding","textStyle","fontSize","toolbox","feature","resetStartValue","resetEndValue","dataZoom","realtime","startValue","endValue","yAxisIndex","minValueSpan","tooltip","trigger","axisPointer","axis","formatter","val","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":"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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,10 @@
+import { BookType } from '../gql/types/graphql';
+const navigationConfig = [{
+  id: BookType.Order,
+  label: 'order_book'
+}, {
+  id: BookType.Position,
+  label: 'position_book'
+}];
+export { navigationConfig };
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":["BookType","navigationConfig","id","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,SAASA,QAAQ,QAAQ,sBAAsB;AAE/C,MAAMC,gBAAgB,GAAG,CAAC;EACxBC,EAAE,EAAEF,QAAQ,CAACG,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,QAAQ,CAACK,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,SAASH,gBAAgB"}

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/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 };