@oanda/labs-order-book-widget 1.0.15 → 1.0.16

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.16 (2023-10-04)
+
+
+
+## 1.0.15 (2023-10-04)
+
+
+
+## 1.0.14 (2023-10-03)
+
+
+
+## 1.0.13 (2023-10-03)
+
+
+
+## 1.0.12 (2023-10-03)
+
+
+
+## 1.0.11 (2023-10-02)
+
+
+
+## 1.0.10 (2023-09-29)
+
+
+
+## 1.0.9 (2023-09-28)
+
+
+
+## 1.0.8 (2023-09-27)
+
+
+
+## 1.0.7 (2023-09-26)
+
+
+
+## 1.0.6 (2023-09-21)
+
+
+
+## 1.0.5 (2023-09-13)
+
+**Note:** Version bump only for package @oanda/labs-order-book-widget
+
+
+
+
+
 ## 1.0.15 (2023-10-04)
 
 

package/dist/main/OrderBookWidget/Main.js

@@ -42,9 +42,9 @@ const Main = _ref => {
   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"
+    className: "lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-text-black"
   }, _react.default.createElement("div", {
-    className: "flex gap-2"
+    className: "lw-flex lw-gap-2"
   }, _react.default.createElement(_labsWidgetCommon.Button, {
     variant: isTypeOrder ? _labsWidgetCommon.ButtonVariant.primary : _labsWidgetCommon.ButtonVariant.secondary,
     onClick: () => setDataType(_types.DataType.Order)
@@ -52,15 +52,15 @@ const Main = _ref => {
     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"
+    className: "lw-relative lw-h-[600px] lw-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]"
+    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]"
   }, _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]"
+    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]"
   }, _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"
+    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
   }, _react.default.createElement(_Chart.Chart, {
     data: data[data.length - 1],
     isTypeOrder: isTypeOrder

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

@@ -1 +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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"}
+{"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=\"lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-text-black\">\n      <div className=\"lw-flex lw-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=\"lw-relative lw-h-[600px] lw-w-full\">\n        {error && (\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        {isLoading && (\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[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/components/Chart/Chart.js

@@ -54,9 +54,9 @@ const Chart = _ref => {
     }
   }, [price]);
   return _react.default.createElement("div", {
-    className: "w-full"
+    className: "lw-w-full"
   }, _react.default.createElement("div", {
-    className: "mb-0 ml-[70px] mr-2.5 mt-[30px] flex justify-between text-xs text-darkGrey"
+    className: "lw-mb-0 lw-ml-[70px] lw-mr-2.5 lw-mt-[30px] lw-flex lw-justify-between lw-text-xs lw-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),

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

@@ -1 +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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"}
+{"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=\"lw-w-full\">\n      {/* @todo: set correct margin when new designs are available  */}\n      <div className=\"lw-mb-0 lw-ml-[70px] lw-mr-2.5 lw-mt-[30px] lw-flex lw-justify-between lw-text-xs lw-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/module/OrderBookWidget/Main.js

@@ -34,9 +34,9 @@ const Main = _ref => {
   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"
+    className: "lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-text-black"
   }, React.createElement("div", {
-    className: "flex gap-2"
+    className: "lw-flex lw-gap-2"
   }, React.createElement(Button, {
     variant: isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary,
     onClick: () => setDataType(DataType.Order)
@@ -44,15 +44,15 @@ const Main = _ref => {
     variant: isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary,
     onClick: () => setDataType(DataType.Position)
   }, "Position Book")), React.createElement("div", {
-    className: "relative h-[600px] w-full"
+    className: "lw-relative lw-h-[600px] lw-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]"
+    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]"
   }, 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]"
+    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]"
   }, React.createElement(Spinner, {
     size: SpinnerSize.lg
   })), data && React.createElement("div", {
-    className: "absolute left-0 top-0 flex h-full w-full"
+    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
   }, React.createElement(Chart, {
     data: data[data.length - 1],
     isTypeOrder: isTypeOrder

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

@@ -1 +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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"}
+{"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=\"lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-text-black\">\n      <div className=\"lw-flex lw-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=\"lw-relative lw-h-[600px] lw-w-full\">\n        {error && (\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        {isLoading && (\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[data.length - 1]} isTypeOrder={isTypeOrder} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SACEC,MAAM,EAAEC,aAAa,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAClD,2BAA2B;AAClC,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,QAAQ,QAAkC,SAAS;AAC5D,SAASC,OAAO,QAAQ,SAAS;AAEjC,MAAMC,IAAI,GAAGC,IAAA,IAII;EAAA,IAJH;IACZC,MAAM;IACNC,UAAU;IACVC;EACS,CAAC,GAAAH,IAAA;EACV,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAACiB,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAAqBmB,SAAS,CAAC;EACjE,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGrB,QAAQ,CAACQ,QAAQ,CAACc,KAAK,CAAC;EACxD,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGxB,QAAQ,CAA8BmB,SAAS,CAAC;EAExElB,SAAS,CAAC,MAAM;IACde,YAAY,CAAC,IAAI,CAAC;IAClBQ,OAAO,CAACL,SAAS,CAAC;IAClBD,QAAQ,CAACC,SAAS,CAAC;IAEnBV,OAAO,CAACG,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEM,QAAQ,CAAC,CAC5CK,IAAI,CAAEC,MAAM,IAAK;MAChBV,YAAY,CAAC,KAAK,CAAC;MACnB,IAAII,QAAQ,KAAKZ,QAAQ,CAACc,KAAK,IAAI,CAAAI,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEC,UAAU,CAACC,MAAM,IAAG,CAAC,EAAE;QAChEJ,OAAO,CAACE,MAAM,CAACC,UAAU,CAAC;MAC5B,CAAC,MAAM,IAAIP,QAAQ,KAAKZ,QAAQ,CAACqB,QAAQ,IAAI,CAAAH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEI,aAAa,CAACF,MAAM,IAAG,CAAC,EAAE;QAC7EJ,OAAO,CAACE,MAAM,CAACI,aAAa,CAAC;MAC/B,CAAC,MAAM;QACLN,OAAO,CAACL,SAAS,CAAC;MACpB;IACF,CAAC,CAAC,CAACY,KAAK,CAAEC,GAAG,IAAK;MAChBhB,YAAY,CAAC,KAAK,CAAC;MACnBE,QAAQ,CAACe,IAAI,CAACC,SAAS,CAACF,GAAG,CAAC,CAAC;IAC/B,CAAC,CAAC;EACN,CAAC,EAAE,CAACZ,QAAQ,EAAER,MAAM,EAAEC,UAAU,EAAEC,QAAQ,CAAC,CAAC;EAE5C,MAAMqB,WAAW,GAAGf,QAAQ,KAAKZ,QAAQ,CAACc,KAAK;EAE/C,OACEvB,KAAA,CAAAqC,aAAA;IAAK,eAAY,mBAAmB;IAACC,SAAS,EAAC;EAA0E,GACvHtC,KAAA,CAAAqC,aAAA;IAAKC,SAAS,EAAC;EAAkB,GAC/BtC,KAAA,CAAAqC,aAAA,CAAClC,MAAM;IACLoC,OAAO,EAAEH,WAAW,GAAGhC,aAAa,CAACoC,OAAO,GAAGpC,aAAa,CAACqC,SAAU;IACvEC,OAAO,EAAEA,CAAA,KAAMpB,WAAW,CAACb,QAAQ,CAACc,KAAK;EAAE,GAC5C,YAEO,CAAC,EACTvB,KAAA,CAAAqC,aAAA,CAAClC,MAAM;IACLoC,OAAO,EAAEH,WAAW,GAAGhC,aAAa,CAACqC,SAAS,GAAGrC,aAAa,CAACoC,OAAQ;IACvEE,OAAO,EAAEA,CAAA,KAAMpB,WAAW,CAACb,QAAQ,CAACqB,QAAQ;EAAE,GAC/C,eAEO,CACL,CAAC,EAEN9B,KAAA,CAAAqC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAChDpB,KAAK,IACJlB,KAAA,CAAAqC,aAAA;IAAKC,SAAS,EAAC;EAAoH,GACjItC,KAAA,CAAAqC,aAAA,CAAChC,UAAU,MAAE,CACV,CACN,EACAW,SAAS,IACRhB,KAAA,CAAAqC,aAAA;IAAKC,SAAS,EAAC;EAAoH,GACjItC,KAAA,CAAAqC,aAAA,CAAC/B,OAAO;IAACqC,IAAI,EAAEpC,WAAW,CAACqC;EAAG,CAAE,CAC7B,CACN,EACApB,IAAI,IACHxB,KAAA,CAAAqC,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzEtC,KAAA,CAAAqC,aAAA,CAAC7B,KAAK;IAACgB,IAAI,EAAEA,IAAI,CAACA,IAAI,CAACK,MAAM,GAAG,CAAC,CAAE;IAACO,WAAW,EAAEA;EAAY,CAAE,CAC5D,CAEJ,CACF,CAAC;AAEV,CAAC;AAED,SAASzB,IAAI"}

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

@@ -45,9 +45,9 @@ export const Chart = _ref => {
     }
   }, [price]);
   return React.createElement("div", {
-    className: "w-full"
+    className: "lw-w-full"
   }, React.createElement("div", {
-    className: "mb-0 ml-[70px] mr-2.5 mt-[30px] flex justify-between text-xs text-darkGrey"
+    className: "lw-mb-0 lw-ml-[70px] lw-mr-2.5 lw-mt-[30px] lw-flex lw-justify-between lw-text-xs lw-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),

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","Chart","ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","zoomPlugin","Bar","colorNeg","colorPos","getChartOptions","getInitialRange","register","_ref","data","isTypeOrder","chartRef","sell","buckets","map","item","Number","shortCountPercent","buy","longCountPercent","price","maxSell","Math","abs","min","maxBuy","max","rangeX","ceil","minRangeY","maxRangeY","chartData","labels","datasets","backgroundColor","label","barPercentage","borderWidth","categoryPercentage","borderColor","current","zoomScale","createElement","className","Fragment","ref","options"],"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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"}
+{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","Chart","ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","zoomPlugin","Bar","colorNeg","colorPos","getChartOptions","getInitialRange","register","_ref","data","isTypeOrder","chartRef","sell","buckets","map","item","Number","shortCountPercent","buy","longCountPercent","price","maxSell","Math","abs","min","maxBuy","max","rangeX","ceil","minRangeY","maxRangeY","chartData","labels","datasets","backgroundColor","label","barPercentage","borderWidth","categoryPercentage","borderColor","current","zoomScale","createElement","className","Fragment","ref","options"],"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=\"lw-w-full\">\n      {/* @todo: set correct margin when new designs are available  */}\n      <div className=\"lw-mb-0 lw-ml-[70px] lw-mr-2.5 lw-mt-[30px] lw-flex lw-justify-between lw-text-xs lw-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -10,10 +10,10 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.15",
+    "@oanda/labs-widget-common": "^1.0.16",
     "chart.js": "4.3.3",
     "chartjs-plugin-zoom": "2.0.1",
     "react-chartjs-2": "5.2.0"
   },
-  "gitHead": "3b81bb8660a20137ba83499e1fe5ffe38ad948f2"
+  "gitHead": "d3da8df6da16f89440ea05148ad3472e3213e592"
 }

package/src/OrderBookWidget/Main.tsx

@@ -40,8 +40,8 @@ const Main = ({
   const isTypeOrder = dataType === DataType.Order;
 
   return (
-    <div data-testid="order-book-widget" className="border border-solid border-grey p-4 text-sm text-black">
-      <div className="flex gap-2">
+    <div data-testid="order-book-widget" className="lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-text-black">
+      <div className="lw-flex lw-gap-2">
         <Button
           variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}
           onClick={() => setDataType(DataType.Order)}
@@ -56,19 +56,19 @@ const Main = ({
         </Button>
       </div>
       {/* @todo: chart height */}
-      <div className="relative h-[600px] w-full">
+      <div className="lw-relative lw-h-[600px] lw-w-full">
         {error && (
-          <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-bg-lightGrey/[0.4]">
             <ChartError />
           </div>
         )}
         {isLoading && (
-          <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-lightGrey/[0.4]">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-bg-lightGrey/[0.4]">
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
         {data && (
-          <div className="absolute left-0 top-0 flex h-full w-full">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
             <Chart data={data[data.length - 1]} isTypeOrder={isTypeOrder} />
           </div>
         )}

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

@@ -59,9 +59,9 @@ export const Chart = ({ data, isTypeOrder }: { data: OrderBookData, isTypeOrder:
   }, [price]);
 
   return (
-    <div className="w-full">
+    <div className="lw-w-full">
       {/* @todo: set correct margin when new designs are available  */}
-      <div className="mb-0 ml-[70px] mr-2.5 mt-[30px] flex justify-between text-xs text-darkGrey">
+      <div className="lw-mb-0 lw-ml-[70px] lw-mr-2.5 lw-mt-[30px] lw-flex lw-justify-between lw-text-xs lw-text-darkGrey">
         {isTypeOrder ? (
           <>
             <div>Sell</div>