@oanda/labs-order-book-widget 1.0.0

package/src/OrderBookWidget/types.ts

@@ -0,0 +1,32 @@
+// @todo get from graphql schema
+export interface OrderBookData {
+  instrument: string;
+  price: string;
+  bucketWidth: string;
+  buckets: {
+    price: string;
+    longCountPercent: string;
+    shortCountPercent: string;
+  }[];
+  time: string;
+  unixTime: string;
+  region: string;
+  division: string;
+}
+
+export enum DataType {
+  Order = 'ORDER',
+  Position = 'POSITION',
+}
+
+export interface OrderBookWidgetConfig {
+  apiUrl: string;
+  instrument: string;
+  division: string;
+}
+
+export interface MainProps {
+  apiUrl: string;
+  instrument: string;
+  division: string;
+}

package/src/OrderBookWidget/utils.ts

@@ -0,0 +1,25 @@
+import { DataType } from './types';
+
+const getFetchUrl = (
+  apiUrl: string,
+  instrument: string,
+  division: string,
+  dataType: string,
+) => {
+  const recentHourlyDataType = dataType === DataType.Order ? 'recentHourlyOrderBooks' : 'recentHourlyPositionBooks';
+
+  return `${apiUrl}/instruments/${instrument}/${recentHourlyDataType}?division=${division}`;
+};
+
+const getData = (
+  apiUrl: string,
+  instrument: string,
+  division: string,
+  dataType: string,
+) => {
+  const fetchUrl = getFetchUrl(apiUrl, instrument, division, dataType);
+
+  return fetch(fetchUrl).then((res) => res.json());
+};
+
+export { getData };

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './OrderBookWidget/types';
+export * from './OrderBookWidget/OrderBookWidget';

package/test/Main.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Main } from '../src/OrderBookWidget/Main';
+
+jest.mock('../src/OrderBookWidget/utils', () => ({
+  getData: () => Promise.resolve({
+    orderBooks: [{
+      instrument: 'GBP_USD',
+      price: '1.25933',
+      bucketWidth: '0.0005',
+      buckets: [
+        {
+          price: '0.02',
+          longCountPercent: '0.0582',
+          shortCountPercent: '0.0',
+        },
+        {
+          price: '0.7',
+          longCountPercent: '0.0582',
+          shortCountPercent: '0.0',
+        },
+        {
+          price: '0.9925',
+          longCountPercent: '0.0582',
+          shortCountPercent: '0.0',
+        },
+        {
+          price: '1.0',
+          longCountPercent: '0.1163',
+          shortCountPercent: '0.0',
+        },
+      ],
+      time: '2023-08-24T10:30:00Z',
+      unixTime: '1692873000',
+      region: '-',
+      division: 'OJ',
+      dataSource: '-',
+    }],
+  }),
+}));
+
+jest.mock('../src/OrderBookWidget/components/Chart/Chart', () => ({
+  Chart: () => <p data-testid="chart-test-component">Chart</p>,
+}));
+
+describe('Main component', () => {
+  it('should render main component', async () => {
+    const { findByTestId } = render(
+      <Main instrument="EUR/USD" division="OJ" apiUrl="http://test.com" />,
+    );
+
+    expect(await findByTestId('order-book-widget')).toBeInTheDocument();
+  });
+});

package/tsconfig.types.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.types.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist/types"
+  },
+  "include": [
+    "./src/**/*",
+    "../../types/**/*"
+  ]
+}