@oanda/labs-order-book-widget 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.0.0 (2023-09-01)
+
+**Note:** Version bump only for package @oanda/labs-order-book-widget

package/dist/main/OrderBookWidget/Main.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Main = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _labsWidgetCommon = require("@oanda/labs-widget-common");
+var _Chart = require("./components/Chart/Chart");
+var _types = require("./types");
+var _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const Main = _ref => {
+  let {
+    apiUrl,
+    instrument,
+    division
+  } = _ref;
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)(undefined);
+  const [dataType, setDataType] = (0, _react.useState)(_types.DataType.Order);
+  const [data, setData] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    setIsLoading(true);
+    setData(undefined);
+    setError(undefined);
+    (0, _utils.getData)(apiUrl, instrument, division, dataType).then(result => {
+      setIsLoading(false);
+      if (dataType === _types.DataType.Order && (result === null || result === void 0 ? void 0 : result.orderBooks.length) > 0) {
+        setData(result.orderBooks);
+      } else if (dataType === _types.DataType.Position && (result === null || result === void 0 ? void 0 : result.positionBooks.length) > 0) {
+        setData(result.positionBooks);
+      } else {
+        setData(undefined);
+      }
+    }).catch(err => {
+      setIsLoading(false);
+      setError(JSON.stringify(err));
+    });
+  }, [dataType, apiUrl, instrument, division]);
+  const isTypeOrder = dataType === _types.DataType.Order;
+  return _react.default.createElement("div", {
+    "data-testid": "order-book-widget",
+    className: "border border-solid border-grey p-4 text-sm text-black"
+  }, _react.default.createElement("div", {
+    className: "flex gap-2"
+  }, _react.default.createElement(_labsWidgetCommon.Button, {
+    variant: isTypeOrder ? _labsWidgetCommon.ButtonVariant.primary : _labsWidgetCommon.ButtonVariant.secondary,
+    onClick: () => setDataType(_types.DataType.Order)
+  }, "Order Book"), _react.default.createElement(_labsWidgetCommon.Button, {
+    variant: isTypeOrder ? _labsWidgetCommon.ButtonVariant.secondary : _labsWidgetCommon.ButtonVariant.primary,
+    onClick: () => setDataType(_types.DataType.Position)
+  }, "Position Book")), _react.default.createElement("div", {
+    className: "relative h-[600px] w-full"
+  }, error && _react.default.createElement("div", {
+    className: "absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]"
+  }, _react.default.createElement(_labsWidgetCommon.ChartError, null)), isLoading && _react.default.createElement("div", {
+    className: "absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]"
+  }, _react.default.createElement(_labsWidgetCommon.Spinner, {
+    size: _labsWidgetCommon.SpinnerSize.lg
+  })), data && _react.default.createElement("div", {
+    className: "absolute left-0 top-0 flex h-full w-full"
+  }, _react.default.createElement(_Chart.Chart, {
+    data: data[data.length - 1],
+    isTypeOrder: isTypeOrder
+  }))));
+};
+exports.Main = Main;
+//# sourceMappingURL=Main.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_Chart","_types","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Main","_ref","apiUrl","instrument","division","isLoading","setIsLoading","useState","error","setError","undefined","dataType","setDataType","DataType","Order","data","setData","useEffect","getData","then","result","orderBooks","length","Position","positionBooks","catch","err","JSON","stringify","isTypeOrder","createElement","className","Button","variant","ButtonVariant","primary","secondary","onClick","ChartError","Spinner","size","SpinnerSize","lg","Chart","exports"],"sources":["../../../src/OrderBookWidget/Main.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Button, ButtonVariant, ChartError, Spinner, SpinnerSize,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart/Chart';\nimport { DataType, MainProps, OrderBookData } from './types';\nimport { getData } from './utils';\n\nconst Main = ({\n  apiUrl,\n  instrument,\n  division,\n}: MainProps) => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | undefined>(undefined);\n  const [dataType, setDataType] = useState(DataType.Order);\n  const [data, setData] = useState<OrderBookData[] | undefined>(undefined);\n\n  useEffect(() => {\n    setIsLoading(true);\n    setData(undefined);\n    setError(undefined);\n\n    getData(apiUrl, instrument, division, dataType)\n      .then((result) => {\n        setIsLoading(false);\n        if (dataType === DataType.Order && result?.orderBooks.length > 0) {\n          setData(result.orderBooks);\n        } else if (dataType === DataType.Position && result?.positionBooks.length > 0) {\n          setData(result.positionBooks);\n        } else {\n          setData(undefined);\n        }\n      }).catch((err) => {\n        setIsLoading(false);\n        setError(JSON.stringify(err));\n      });\n  }, [dataType, apiUrl, instrument, division]);\n\n  const isTypeOrder = dataType === DataType.Order;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"border border-solid border-grey p-4 text-sm text-black\">\n      <div className=\"flex gap-2\">\n        <Button\n          variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}\n          onClick={() => setDataType(DataType.Order)}\n        >\n          Order Book\n        </Button>\n        <Button\n          variant={isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary}\n          onClick={() => setDataType(DataType.Position)}\n        >\n          Position Book\n        </Button>\n      </div>\n      {/* @todo: chart height */}\n      <div className=\"relative h-[600px] w-full\">\n        {error && (\n          <div className=\"absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]\">\n            <ChartError />\n          </div>\n        )}\n        {isLoading && (\n          <div className=\"absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {data && (\n          <div className=\"absolute left-0 top-0 flex h-full w-full\">\n            <Chart data={data[data.length - 1]} isTypeOrder={isTypeOrder} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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"}

package/dist/main/OrderBookWidget/OrderBookWidget.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrderBookWidget = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Main = require("./Main");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const OrderBookWidget = _ref => {
+  let {
+    apiUrl,
+    instrument,
+    division
+  } = _ref;
+  return _react.default.createElement(_Main.Main, {
+    apiUrl: apiUrl,
+    instrument: instrument,
+    division: division
+  });
+};
+exports.OrderBookWidget = OrderBookWidget;
+//# sourceMappingURL=OrderBookWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderBookWidget.js","names":["_react","_interopRequireDefault","require","_Main","obj","__esModule","default","OrderBookWidget","_ref","apiUrl","instrument","division","createElement","Main","exports"],"sources":["../../../src/OrderBookWidget/OrderBookWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { Main } from './Main';\nimport { OrderBookWidgetConfig } from './types';\n\nconst OrderBookWidget = ({\n  apiUrl,\n  instrument,\n  division,\n}: OrderBookWidgetConfig) => (\n  <Main\n    apiUrl={apiUrl}\n    instrument={instrument}\n    division={division}\n  />\n);\n\nexport { OrderBookWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAA8B,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAG9B,MAAMG,eAAe,GAAGC,IAAA;EAAA,IAAC;IACvBC,MAAM;IACNC,UAAU;IACVC;EACqB,CAAC,GAAAH,IAAA;EAAA,OACtBR,MAAA,CAAAM,OAAA,CAAAM,aAAA,CAACT,KAAA,CAAAU,IAAI;IACHJ,MAAM,EAAEA,MAAO;IACfC,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAAA,CACH;AAACG,OAAA,CAAAP,eAAA,GAAAA,eAAA"}

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chart = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _chart = require("chart.js");
+var _chartjsPluginZoom = _interopRequireDefault(require("chartjs-plugin-zoom"));
+var _reactChartjs = require("react-chartjs-2");
+var _config = require("./config");
+var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+_chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.Tooltip, _chartjsPluginZoom.default);
+const Chart = _ref => {
+  let {
+    data,
+    isTypeOrder
+  } = _ref;
+  const chartRef = (0, _react.useRef)(null);
+  const sell = data.buckets.map(item => Number(item.shortCountPercent) * -1);
+  const buy = data.buckets.map(item => Number(item.longCountPercent));
+  const price = data.buckets.map(item => Number(item.price));
+  const maxSell = Math.abs(Math.min(...sell));
+  const maxBuy = Math.max(...buy);
+  const rangeX = Math.ceil(Math.max(maxSell, maxBuy));
+  const minRangeY = Math.min(...price);
+  const maxRangeY = Math.max(...price);
+  const chartData = {
+    labels: price,
+    datasets: [{
+      data: sell,
+      backgroundColor: _config.colorNeg,
+      label: isTypeOrder ? 'Sell Orders' : 'Short Positions',
+      barPercentage: 1,
+      borderWidth: 1,
+      categoryPercentage: 1,
+      borderColor: 'transparent'
+    }, {
+      data: buy,
+      backgroundColor: _config.colorPos,
+      label: isTypeOrder ? 'Buy Orders' : 'Long Positions',
+      borderColor: 'transparent',
+      borderWidth: 1,
+      barPercentage: 1,
+      categoryPercentage: 1
+    }]
+  };
+  (0, _react.useEffect)(() => {
+    if (chartRef && chartRef.current) {
+      chartRef.current.zoomScale('y', (0, _utils.getInitialRange)(price), 'none');
+    }
+  }, [price]);
+  return _react.default.createElement("div", {
+    className: "w-full"
+  }, _react.default.createElement("div", {
+    className: "mb-0 ml-[70px] mr-2.5 mt-[30px] flex justify-between text-xs text-darkGrey"
+  }, isTypeOrder ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", null, "Sell"), _react.default.createElement("div", null, "Open Orders"), _react.default.createElement("div", null, "Buy")) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", null, "Short"), _react.default.createElement("div", null, "Open Positions"), _react.default.createElement("div", null, "Long"))), _react.default.createElement(_reactChartjs.Bar, {
+    ref: chartRef,
+    options: (0, _config.getChartOptions)(rangeX, minRangeY, maxRangeY),
+    data: chartData
+  }));
+};
+exports.Chart = Chart;
+//# sourceMappingURL=Chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_chart","_chartjsPluginZoom","_interopRequireDefault","_reactChartjs","_config","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","zoomPlugin","Chart","_ref","data","isTypeOrder","chartRef","useRef","sell","buckets","map","item","Number","shortCountPercent","buy","longCountPercent","price","maxSell","Math","abs","min","maxBuy","max","rangeX","ceil","minRangeY","maxRangeY","chartData","labels","datasets","backgroundColor","colorNeg","label","barPercentage","borderWidth","categoryPercentage","borderColor","colorPos","useEffect","current","zoomScale","getInitialRange","createElement","className","Fragment","Bar","ref","options","getChartOptions","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  Tooltip,\n} from 'chart.js';\nimport zoomPlugin from 'chartjs-plugin-zoom';\nimport { Bar } from 'react-chartjs-2';\nimport type { ChartData } from 'chart.js';\nimport { colorNeg, colorPos, getChartOptions } from './config';\nimport { OrderBookData } from '../../types';\nimport { getInitialRange } from './utils';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, zoomPlugin);\n\nexport const Chart = ({ data, isTypeOrder }: { data: OrderBookData, isTypeOrder: boolean }) => {\n  const chartRef = useRef<ChartJS | null>(null);\n\n  const sell = data.buckets.map((item) => Number(item.shortCountPercent) * -1);\n  const buy = data.buckets.map((item) => Number(item.longCountPercent));\n  const price = data.buckets.map((item) => Number(item.price));\n\n  const maxSell = Math.abs(Math.min(...sell));\n  const maxBuy = Math.max(...buy);\n  const rangeX = Math.ceil((Math.max(maxSell, maxBuy)));\n  const minRangeY = (Math.min(...price));\n  const maxRangeY = (Math.max(...price));\n\n  const chartData: ChartData<'bar'> = {\n    labels: price,\n    datasets: [\n      {\n        data: sell,\n        backgroundColor: colorNeg,\n        label: isTypeOrder ? 'Sell Orders' : 'Short Positions',\n        barPercentage: 1,\n        borderWidth: 1,\n        categoryPercentage: 1,\n        borderColor: 'transparent',\n      },\n      {\n        data: buy,\n        backgroundColor: colorPos,\n        label: isTypeOrder ? 'Buy Orders' : 'Long Positions',\n        borderColor: 'transparent',\n        borderWidth: 1,\n        barPercentage: 1,\n        categoryPercentage: 1,\n      },\n    ],\n  };\n\n  useEffect(() => {\n    if (chartRef && chartRef.current) {\n      chartRef.current.zoomScale('y', getInitialRange(price), 'none');\n    }\n  }, [price]);\n\n  return (\n    <div className=\"w-full\">\n      {/* @todo: set correct margin when new designs are available  */}\n      <div className=\"mb-0 ml-[70px] mr-2.5 mt-[30px] flex justify-between text-xs text-darkGrey\">\n        {isTypeOrder ? (\n          <>\n            <div>Sell</div>\n            <div>Open Orders</div>\n            <div>Buy</div>\n          </>\n        ) : (\n          <>\n            <div>Short</div>\n            <div>Open Positions</div>\n            <div>Long</div>\n          </>\n        )}\n      </div>\n      <Bar\n        ref={chartRef as any}\n        options={getChartOptions(rangeX, minRangeY, maxRangeY)}\n        data={chartData}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChartOptions = exports.colorPos = exports.colorNeg = void 0;
+const colorPos = '#4A87F1';
+exports.colorPos = colorPos;
+const colorNeg = '#00d37e';
+exports.colorNeg = colorNeg;
+const getChartOptions = (rangeX, minRangeY, maxRangeY) => ({
+  animation: {
+    duration: 0
+  },
+  transitions: {
+    zoom: {
+      animation: {
+        duration: 500
+      }
+    }
+  },
+  skipNull: true,
+  scales: {
+    x: {
+      min: rangeX * -1,
+      max: rangeX,
+      ticks: {
+        color: '#607890',
+        callback: tickValue => tickValue === 0 ? '%' : "".concat(Math.abs(Number(tickValue)), " %")
+      },
+      grid: {
+        color: '#d1d7e0'
+      }
+    },
+    y: {
+      bounds: 'ticks',
+      type: 'linear',
+      min: minRangeY,
+      max: maxRangeY,
+      stacked: true,
+      afterFit(scaleInstance) {
+        scaleInstance.width = 80;
+      },
+      ticks: {
+        color: '#607890'
+      },
+      grid: {
+        color: '#d1d7e0'
+      }
+    }
+  },
+  indexAxis: 'y',
+  responsive: true,
+  plugins: {
+    zoom: {
+      limits: {
+        y: {
+          min: minRangeY,
+          max: maxRangeY
+        }
+      },
+      pan: {
+        enabled: true,
+        modifierKey: 'shift',
+        mode: 'y'
+      },
+      zoom: {
+        wheel: {
+          enabled: true
+        },
+        pinch: {
+          enabled: true
+        },
+        drag: {
+          enabled: true
+        },
+        mode: 'y'
+      }
+    },
+    tooltip: {
+      position: 'nearest',
+      yAlign: 'bottom',
+      backgroundColor: 'rgba(255, 255, 255, 0.90)',
+      borderWidth: 1,
+      borderColor: '#607890',
+      titleColor: '#607890',
+      bodyColor: '#607890',
+      displayColors: false,
+      titleFont: {
+        size: 14,
+        weight: 'normal'
+      },
+      bodyFont: {
+        size: 14,
+        weight: 'normal'
+      },
+      padding: 8,
+      callbacks: {
+        title: context => "Price: ".concat(context[0].label),
+        label: context => "".concat(context.dataset.label, ": ").concat(Math.abs(Number(context.raw)), "%")
+      }
+    }
+  }
+});
+exports.getChartOptions = getChartOptions;
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":["colorPos","exports","colorNeg","getChartOptions","rangeX","minRangeY","maxRangeY","animation","duration","transitions","zoom","skipNull","scales","x","min","max","ticks","color","callback","tickValue","concat","Math","abs","Number","grid","y","bounds","type","stacked","afterFit","scaleInstance","width","indexAxis","responsive","plugins","limits","pan","enabled","modifierKey","mode","wheel","pinch","drag","tooltip","position","yAlign","backgroundColor","borderWidth","borderColor","titleColor","bodyColor","displayColors","titleFont","size","weight","bodyFont","padding","callbacks","title","context","label","dataset","raw"],"sources":["../../../../../src/OrderBookWidget/components/Chart/config.tsx"],"sourcesContent":["import type { ChartOptions } from 'chart.js';\n\nexport const colorPos = '#4A87F1';\nexport const colorNeg = '#00d37e';\n\nexport const getChartOptions = (rangeX: number, minRangeY: number, maxRangeY: number): ChartOptions<'bar'> => ({\n  animation: {\n    duration: 0,\n  },\n  transitions: {\n    zoom: {\n      animation: {\n        duration: 500,\n      },\n    },\n  },\n  skipNull: true,\n  scales: {\n    x: {\n      min: rangeX * -1,\n      max: rangeX,\n      ticks: {\n        color: '#607890',\n        callback: (tickValue) => (tickValue === 0 ? '%' : `${Math.abs(Number(tickValue))} %`),\n      },\n      grid: {\n        color: '#d1d7e0',\n      },\n    },\n    y: {\n      bounds: 'ticks',\n      type: 'linear',\n      min: minRangeY,\n      max: maxRangeY,\n      stacked: true,\n      afterFit(scaleInstance) {\n        // eslint-disable-next-line no-param-reassign\n        scaleInstance.width = 80;\n      },\n      ticks: {\n        color: '#607890',\n      },\n      grid: {\n        color: '#d1d7e0',\n      },\n    },\n  },\n  indexAxis: 'y' as const,\n  responsive: true,\n  plugins: {\n    zoom: {\n      limits: {\n        y: {\n          min: minRangeY,\n          max: maxRangeY,\n        },\n      },\n      pan: {\n        enabled: true,\n        modifierKey: 'shift',\n        mode: 'y',\n      },\n      zoom: {\n        wheel: {\n          enabled: true,\n        },\n        pinch: {\n          enabled: true,\n        },\n        drag: {\n          enabled: true,\n        },\n        mode: 'y',\n      },\n    },\n    tooltip: {\n      position: 'nearest',\n      yAlign: 'bottom',\n      backgroundColor: 'rgba(255, 255, 255, 0.90)',\n      borderWidth: 1,\n      borderColor: '#607890',\n      titleColor: '#607890',\n      bodyColor: '#607890',\n      displayColors: false,\n      titleFont: {\n        size: 14,\n        weight: 'normal',\n      },\n      bodyFont: {\n        size: 14,\n        weight: 'normal',\n      },\n      padding: 8,\n      callbacks: {\n        title: (context) => `Price: ${context[0].label}`,\n        label: (context) => `${context.dataset.label}: ${Math.abs(Number(context.raw))}%`,\n      },\n    },\n  },\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInitialRange = void 0;
+const calculateQuartile = (sortedData, q) => {
+  const pos = (sortedData.length - 1) * q;
+  const base = Math.floor(pos);
+  const rest = pos - base;
+  if (sortedData[base + 1] !== undefined) {
+    return sortedData[base] + rest * (sortedData[base + 1] - sortedData[base]);
+  }
+  return sortedData[base];
+};
+const getInitialRange = data => ({
+  min: calculateQuartile(data, 0.25),
+  max: calculateQuartile(data, 0.75)
+});
+exports.getInitialRange = getInitialRange;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["calculateQuartile","sortedData","q","pos","length","base","Math","floor","rest","undefined","getInitialRange","data","min","max","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/utils.tsx"],"sourcesContent":["const calculateQuartile = (sortedData: number[], q: number) => {\n  const pos = ((sortedData.length) - 1) * q;\n  const base = Math.floor(pos);\n  const rest = pos - base;\n  if ((sortedData[base + 1] !== undefined)) {\n    return sortedData[base] + rest * (sortedData[base + 1] - sortedData[base]);\n  }\n  return sortedData[base];\n};\n\nexport const getInitialRange = (\n  data: number[],\n) => ({ min: calculateQuartile(data, 0.25), max: calculateQuartile(data, 0.75) });\n"],"mappings":";;;;;;AAAA,MAAMA,iBAAiB,GAAGA,CAACC,UAAoB,EAAEC,CAAS,KAAK;EAC7D,MAAMC,GAAG,GAAG,CAAEF,UAAU,CAACG,MAAM,GAAI,CAAC,IAAIF,CAAC;EACzC,MAAMG,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACJ,GAAG,CAAC;EAC5B,MAAMK,IAAI,GAAGL,GAAG,GAAGE,IAAI;EACvB,IAAKJ,UAAU,CAACI,IAAI,GAAG,CAAC,CAAC,KAAKI,SAAS,EAAG;IACxC,OAAOR,UAAU,CAACI,IAAI,CAAC,GAAGG,IAAI,IAAIP,UAAU,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGJ,UAAU,CAACI,IAAI,CAAC,CAAC;EAC5E;EACA,OAAOJ,UAAU,CAACI,IAAI,CAAC;AACzB,CAAC;AAEM,MAAMK,eAAe,GAC1BC,IAAc,KACV;EAAEC,GAAG,EAAEZ,iBAAiB,CAACW,IAAI,EAAE,IAAI,CAAC;EAAEE,GAAG,EAAEb,iBAAiB,CAACW,IAAI,EAAE,IAAI;AAAE,CAAC,CAAC;AAACG,OAAA,CAAAJ,eAAA,GAAAA,eAAA"}

package/dist/main/OrderBookWidget/render.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+var _OrderBookWidget = require("./OrderBookWidget");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const {
+  apiUrl,
+  instrument,
+  division
+} = window.orderBookWidgetConfig;
+(0, _reactDom.render)(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
+  apiUrl: apiUrl,
+  instrument: instrument,
+  division: division
+}), document.getElementById('order-book'));
+//# sourceMappingURL=render.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_reactDom","_OrderBookWidget","obj","__esModule","default","apiUrl","instrument","division","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';\n\nimport { OrderBookWidgetConfig } from './types';\n\ndeclare global {\n  interface Window {\n    orderBookWidgetConfig: OrderBookWidgetConfig;\n  }\n}\n\nconst {\n  apiUrl,\n  instrument,\n  division,\n} = window.orderBookWidgetConfig;\n\nrender(\n  <OrderBookWidget\n    apiUrl={apiUrl}\n    instrument={instrument}\n    division={division}\n  />,\n  document.getElementById('order-book'),\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;AAUpD,MAAM;EACJG,MAAM;EACNC,UAAU;EACVC;AACF,CAAC,GAAGC,MAAM,CAACC,qBAAqB;AAEhC,IAAAC,gBAAM,EACJb,MAAA,CAAAO,OAAA,CAAAO,aAAA,CAACV,gBAAA,CAAAW,eAAe;EACdP,MAAM,EAAEA,MAAO;EACfC,UAAU,EAAEA,UAAW;EACvBC,QAAQ,EAAEA;AAAS,CACpB,CAAC,EACFM,QAAQ,CAACC,cAAc,CAAC,YAAY,CACtC,CAAC"}

package/dist/main/OrderBookWidget/types.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataType = void 0;
+let DataType = function (DataType) {
+  DataType["Order"] = "ORDER";
+  DataType["Position"] = "POSITION";
+  return DataType;
+}({});
+exports.DataType = DataType;
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["DataType","exports"],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["// @todo get from graphql schema\nexport interface OrderBookData {\n  instrument: string;\n  price: string;\n  bucketWidth: string;\n  buckets: {\n    price: string;\n    longCountPercent: string;\n    shortCountPercent: string;\n  }[];\n  time: string;\n  unixTime: string;\n  region: string;\n  division: string;\n}\n\nexport enum DataType {\n  Order = 'ORDER',\n  Position = 'POSITION',\n}\n\nexport interface OrderBookWidgetConfig {\n  apiUrl: string;\n  instrument: string;\n  division: string;\n}\n\nexport interface MainProps {\n  apiUrl: string;\n  instrument: string;\n  division: string;\n}\n"],"mappings":";;;;;;IAgBYA,QAAQ,aAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAAA,OAARA,QAAQ;AAAA;AAAAC,OAAA,CAAAD,QAAA,GAAAA,QAAA"}

package/dist/main/OrderBookWidget/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getData = void 0;
+var _types = require("./types");
+const getFetchUrl = (apiUrl, instrument, division, dataType) => {
+  const recentHourlyDataType = dataType === _types.DataType.Order ? 'recentHourlyOrderBooks' : 'recentHourlyPositionBooks';
+  return "".concat(apiUrl, "/instruments/").concat(instrument, "/").concat(recentHourlyDataType, "?division=").concat(division);
+};
+const getData = (apiUrl, instrument, division, dataType) => {
+  const fetchUrl = getFetchUrl(apiUrl, instrument, division, dataType);
+  return fetch(fetchUrl).then(res => res.json());
+};
+exports.getData = getData;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["_types","require","getFetchUrl","apiUrl","instrument","division","dataType","recentHourlyDataType","DataType","Order","concat","getData","fetchUrl","fetch","then","res","json","exports"],"sources":["../../../src/OrderBookWidget/utils.ts"],"sourcesContent":["import { DataType } from './types';\n\nconst getFetchUrl = (\n  apiUrl: string,\n  instrument: string,\n  division: string,\n  dataType: string,\n) => {\n  const recentHourlyDataType = dataType === DataType.Order ? 'recentHourlyOrderBooks' : 'recentHourlyPositionBooks';\n\n  return `${apiUrl}/instruments/${instrument}/${recentHourlyDataType}?division=${division}`;\n};\n\nconst getData = (\n  apiUrl: string,\n  instrument: string,\n  division: string,\n  dataType: string,\n) => {\n  const fetchUrl = getFetchUrl(apiUrl, instrument, division, dataType);\n\n  return fetch(fetchUrl).then((res) => res.json());\n};\n\nexport { getData };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,WAAW,GAAGA,CAClBC,MAAc,EACdC,UAAkB,EAClBC,QAAgB,EAChBC,QAAgB,KACb;EACH,MAAMC,oBAAoB,GAAGD,QAAQ,KAAKE,eAAQ,CAACC,KAAK,GAAG,wBAAwB,GAAG,2BAA2B;EAEjH,UAAAC,MAAA,CAAUP,MAAM,mBAAAO,MAAA,CAAgBN,UAAU,OAAAM,MAAA,CAAIH,oBAAoB,gBAAAG,MAAA,CAAaL,QAAQ;AACzF,CAAC;AAED,MAAMM,OAAO,GAAGA,CACdR,MAAc,EACdC,UAAkB,EAClBC,QAAgB,EAChBC,QAAgB,KACb;EACH,MAAMM,QAAQ,GAAGV,WAAW,CAACC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,CAAC;EAEpE,OAAOO,KAAK,CAACD,QAAQ,CAAC,CAACE,IAAI,CAAEC,GAAG,IAAKA,GAAG,CAACC,IAAI,CAAC,CAAC,CAAC;AAClD,CAAC;AAACC,OAAA,CAAAN,OAAA,GAAAA,OAAA"}

package/dist/main/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./OrderBookWidget/types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _OrderBookWidget = require("./OrderBookWidget/OrderBookWidget");
+Object.keys(_OrderBookWidget).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OrderBookWidget[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OrderBookWidget[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_types","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_OrderBookWidget"],"sources":["../../src/index.ts"],"sourcesContent":["export * from './OrderBookWidget/types';\nexport * from './OrderBookWidget/OrderBookWidget';\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,gBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,gBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,gBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,gBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA"}

package/dist/module/OrderBookWidget/Main.js

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Button, ButtonVariant, ChartError, Spinner, SpinnerSize } from '@oanda/labs-widget-common';
+import { Chart } from './components/Chart/Chart';
+import { DataType } from './types';
+import { getData } from './utils';
+const Main = _ref => {
+  let {
+    apiUrl,
+    instrument,
+    division
+  } = _ref;
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(undefined);
+  const [dataType, setDataType] = useState(DataType.Order);
+  const [data, setData] = useState(undefined);
+  useEffect(() => {
+    setIsLoading(true);
+    setData(undefined);
+    setError(undefined);
+    getData(apiUrl, instrument, division, dataType).then(result => {
+      setIsLoading(false);
+      if (dataType === DataType.Order && (result === null || result === void 0 ? void 0 : result.orderBooks.length) > 0) {
+        setData(result.orderBooks);
+      } else if (dataType === DataType.Position && (result === null || result === void 0 ? void 0 : result.positionBooks.length) > 0) {
+        setData(result.positionBooks);
+      } else {
+        setData(undefined);
+      }
+    }).catch(err => {
+      setIsLoading(false);
+      setError(JSON.stringify(err));
+    });
+  }, [dataType, apiUrl, instrument, division]);
+  const isTypeOrder = dataType === DataType.Order;
+  return React.createElement("div", {
+    "data-testid": "order-book-widget",
+    className: "border border-solid border-grey p-4 text-sm text-black"
+  }, React.createElement("div", {
+    className: "flex gap-2"
+  }, React.createElement(Button, {
+    variant: isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary,
+    onClick: () => setDataType(DataType.Order)
+  }, "Order Book"), React.createElement(Button, {
+    variant: isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary,
+    onClick: () => setDataType(DataType.Position)
+  }, "Position Book")), React.createElement("div", {
+    className: "relative h-[600px] w-full"
+  }, error && React.createElement("div", {
+    className: "absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]"
+  }, React.createElement(ChartError, null)), isLoading && React.createElement("div", {
+    className: "absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]"
+  }, React.createElement(Spinner, {
+    size: SpinnerSize.lg
+  })), data && React.createElement("div", {
+    className: "absolute left-0 top-0 flex h-full w-full"
+  }, React.createElement(Chart, {
+    data: data[data.length - 1],
+    isTypeOrder: isTypeOrder
+  }))));
+};
+export { Main };
+//# sourceMappingURL=Main.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Main.js","names":["React","useState","useEffect","Button","ButtonVariant","ChartError","Spinner","SpinnerSize","Chart","DataType","getData","Main","_ref","apiUrl","instrument","division","isLoading","setIsLoading","error","setError","undefined","dataType","setDataType","Order","data","setData","then","result","orderBooks","length","Position","positionBooks","catch","err","JSON","stringify","isTypeOrder","createElement","className","variant","primary","secondary","onClick","size","lg"],"sources":["../../../src/OrderBookWidget/Main.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Button, ButtonVariant, ChartError, Spinner, SpinnerSize,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart/Chart';\nimport { DataType, MainProps, OrderBookData } from './types';\nimport { getData } from './utils';\n\nconst Main = ({\n  apiUrl,\n  instrument,\n  division,\n}: MainProps) => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | undefined>(undefined);\n  const [dataType, setDataType] = useState(DataType.Order);\n  const [data, setData] = useState<OrderBookData[] | undefined>(undefined);\n\n  useEffect(() => {\n    setIsLoading(true);\n    setData(undefined);\n    setError(undefined);\n\n    getData(apiUrl, instrument, division, dataType)\n      .then((result) => {\n        setIsLoading(false);\n        if (dataType === DataType.Order && result?.orderBooks.length > 0) {\n          setData(result.orderBooks);\n        } else if (dataType === DataType.Position && result?.positionBooks.length > 0) {\n          setData(result.positionBooks);\n        } else {\n          setData(undefined);\n        }\n      }).catch((err) => {\n        setIsLoading(false);\n        setError(JSON.stringify(err));\n      });\n  }, [dataType, apiUrl, instrument, division]);\n\n  const isTypeOrder = dataType === DataType.Order;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"border border-solid border-grey p-4 text-sm text-black\">\n      <div className=\"flex gap-2\">\n        <Button\n          variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}\n          onClick={() => setDataType(DataType.Order)}\n        >\n          Order Book\n        </Button>\n        <Button\n          variant={isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary}\n          onClick={() => setDataType(DataType.Position)}\n        >\n          Position Book\n        </Button>\n      </div>\n      {/* @todo: chart height */}\n      <div className=\"relative h-[600px] w-full\">\n        {error && (\n          <div className=\"absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]\">\n            <ChartError />\n          </div>\n        )}\n        {isLoading && (\n          <div className=\"absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {data && (\n          <div className=\"absolute left-0 top-0 flex h-full w-full\">\n            <Chart data={data[data.length - 1]} isTypeOrder={isTypeOrder} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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"}

package/dist/module/OrderBookWidget/OrderBookWidget.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Main } from './Main';
+const OrderBookWidget = _ref => {
+  let {
+    apiUrl,
+    instrument,
+    division
+  } = _ref;
+  return React.createElement(Main, {
+    apiUrl: apiUrl,
+    instrument: instrument,
+    division: division
+  });
+};
+export { OrderBookWidget };
+//# sourceMappingURL=OrderBookWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderBookWidget.js","names":["React","Main","OrderBookWidget","_ref","apiUrl","instrument","division","createElement"],"sources":["../../../src/OrderBookWidget/OrderBookWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { Main } from './Main';\nimport { OrderBookWidgetConfig } from './types';\n\nconst OrderBookWidget = ({\n  apiUrl,\n  instrument,\n  division,\n}: OrderBookWidgetConfig) => (\n  <Main\n    apiUrl={apiUrl}\n    instrument={instrument}\n    division={division}\n  />\n);\n\nexport { OrderBookWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,QAAQ;AAG7B,MAAMC,eAAe,GAAGC,IAAA;EAAA,IAAC;IACvBC,MAAM;IACNC,UAAU;IACVC;EACqB,CAAC,GAAAH,IAAA;EAAA,OACtBH,KAAA,CAAAO,aAAA,CAACN,IAAI;IACHG,MAAM,EAAEA,MAAO;IACfC,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAAA,CACH;AAED,SAASJ,eAAe"}

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

@@ -0,0 +1,57 @@
+import React, { useRef, useEffect } from 'react';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { Bar } from 'react-chartjs-2';
+import { colorNeg, colorPos, getChartOptions } from './config';
+import { getInitialRange } from './utils';
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, zoomPlugin);
+export const Chart = _ref => {
+  let {
+    data,
+    isTypeOrder
+  } = _ref;
+  const chartRef = useRef(null);
+  const sell = data.buckets.map(item => Number(item.shortCountPercent) * -1);
+  const buy = data.buckets.map(item => Number(item.longCountPercent));
+  const price = data.buckets.map(item => Number(item.price));
+  const maxSell = Math.abs(Math.min(...sell));
+  const maxBuy = Math.max(...buy);
+  const rangeX = Math.ceil(Math.max(maxSell, maxBuy));
+  const minRangeY = Math.min(...price);
+  const maxRangeY = Math.max(...price);
+  const chartData = {
+    labels: price,
+    datasets: [{
+      data: sell,
+      backgroundColor: colorNeg,
+      label: isTypeOrder ? 'Sell Orders' : 'Short Positions',
+      barPercentage: 1,
+      borderWidth: 1,
+      categoryPercentage: 1,
+      borderColor: 'transparent'
+    }, {
+      data: buy,
+      backgroundColor: colorPos,
+      label: isTypeOrder ? 'Buy Orders' : 'Long Positions',
+      borderColor: 'transparent',
+      borderWidth: 1,
+      barPercentage: 1,
+      categoryPercentage: 1
+    }]
+  };
+  useEffect(() => {
+    if (chartRef && chartRef.current) {
+      chartRef.current.zoomScale('y', getInitialRange(price), 'none');
+    }
+  }, [price]);
+  return React.createElement("div", {
+    className: "w-full"
+  }, React.createElement("div", {
+    className: "mb-0 ml-[70px] mr-2.5 mt-[30px] flex justify-between text-xs text-darkGrey"
+  }, isTypeOrder ? React.createElement(React.Fragment, null, React.createElement("div", null, "Sell"), React.createElement("div", null, "Open Orders"), React.createElement("div", null, "Buy")) : React.createElement(React.Fragment, null, React.createElement("div", null, "Short"), React.createElement("div", null, "Open Positions"), React.createElement("div", null, "Long"))), React.createElement(Bar, {
+    ref: chartRef,
+    options: getChartOptions(rangeX, minRangeY, maxRangeY),
+    data: chartData
+  }));
+};
+//# sourceMappingURL=Chart.js.map