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

package/src/OrderBookWidget/components/Chart/getOption.ts

@@ -0,0 +1,296 @@
+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 { GetOptionType, GetResponsiveOptionsProps } from './types';
+import { tooltipFormatter } from './formatters';
+
+export const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {
+  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: `${Y_LABEL_SIZE_DESKTOP}px`,
+        bottom: `${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: GetOptionType = ({
+  data, precision, isDark, isOrderBook,
+}) => {
+  const buckets = data.orderPositionBooks[0]?.buckets || [];
+  const bucketWidth = data.orderPositionBooks[0]?.bucketWidth!;
+  const price = data.orderPositionBooks[0]?.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 as { data: number[] }[])[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 ? '%' : `${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]) as number[])[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]) as number[])[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'),
+              },
+            };
+          },
+        },
+      ],
+    }
+  );
+};

package/src/OrderBookWidget/components/Chart/types.ts

@@ -0,0 +1,29 @@
+import { EChartsOption } from 'echarts';
+import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+
+export interface ChartProps {
+  data: GetOrderPositionBooksQuery;
+  isOrderBook: boolean;
+}
+
+export interface GetResponsiveOptionsProps {
+  isDark: boolean;
+  isOrderBook: boolean;
+}
+
+export interface GetOptionProps {
+  data: GetOrderPositionBooksQuery;
+  precision: number;
+  isDark: boolean;
+  isOrderBook: boolean;
+}
+
+export type GetOptionType = (
+  props: GetOptionProps,
+) => EChartsOption;
+
+export type TooltipFormatterType = (
+  data: number[],
+  precision: number,
+  isOrderBook: boolean,
+) => string;

package/src/OrderBookWidget/config.ts

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

package/src/OrderBookWidget/render.tsx

@@ -1,26 +1,44 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { Theme } from '@oanda/labs-widget-common';
 import { OrderBookWidget } from './OrderBookWidget';
-import { OrderBookWrapperConfig } from './types';
 
-declare global {
-  interface Window {
-    orderBookWidgetConfig: OrderBookWrapperConfig;
-  }
-}
+const {
+  graphqlUrl: configGraphQl,
+  instrument: configInstrument,
+  renderElementId: configRenderElementId,
+  locale: configLocale,
+} = window.volatilityChartWidgetConfig || {};
 
 const {
   graphqlUrl,
-  instrument,
-  renderElementId,
-  locale,
-} = window.orderBookWidgetConfig;
+} = window.widgetsConfig || {};
+
+const orderBookElements = document.querySelectorAll('div[data-order-book-params]');
 
-render(
-  <OrderBookWidget
-    locale={locale}
-    graphqlUrl={graphqlUrl}
-    instrument={instrument}
-  />,
-  document.getElementById(renderElementId),
-);
+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 as string);
+
+    render(
+      <OrderBookWidget
+        locale={locale}
+        graphqlUrl={graphqlUrl}
+        instrument={instrument}
+        theme={mode as Theme}
+      />,
+      element,
+    );
+  });
+} else {
+  render(
+    <OrderBookWidget
+      locale={configLocale}
+      graphqlUrl={configGraphQl}
+      instrument={configInstrument}
+    />,
+    document.getElementById(configRenderElementId),
+  );
+}

package/src/OrderBookWidget/types.ts

@@ -1,9 +1,11 @@
+import { Theme } from '@oanda/labs-widget-common';
 import { Locale } from '@oanda/mono-i18n';
 
 export interface OrderBookWidgetConfig {
   graphqlUrl: string;
   instrument: string;
   locale: Locale;
+  theme?: Theme;
 }
 
 export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {