@oanda/labs-order-book-widget 1.0.173 → 1.0.174

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

@@ -1,23 +1,28 @@
-import { colorPalette, getGridLines, getZoomControls } from '@oanda/labs-widget-common';
 import {
-  INITIAL_BARS,
-  CHART_WIDTH,
+  colorPalette,
+  getGridLines,
+  getZoomControls,
+} from '@oanda/labs-widget-common';
+
+import {
   CHART_HEIGHT_DESKTOP,
   CHART_HEIGHT_MOBILE,
+  CHART_WIDTH,
+  INITIAL_BARS,
   X_LABEL_SIZE,
   Y_LABEL_SIZE_DESKTOP,
   Y_LABEL_SIZE_MOBILE,
   ZOOM_CONTROL_HEIGHT,
 } from './constants';
-import { GetOptionType, GetResponsiveOptionsProps } from './types';
 import { tooltipFormatter } from './formatters';
+import type { GetOptionType, GetResponsiveOptionsProps } from './types';
 
-export const getResponsiveOption = (
-  {
-    isDark, isOrderBook, isDesktop, lang,
-  }
-  : GetResponsiveOptionsProps,
-) => {
+export const getResponsiveOption = ({
+  isDark,
+  isOrderBook,
+  isDesktop,
+  lang,
+}: GetResponsiveOptionsProps) => {
   const desktopGridLines = getGridLines({
     isDark,
     chartWidth: CHART_WIDTH,
@@ -136,221 +141,233 @@ export const getResponsiveOption = (
 };
 
 export const getOption: GetOptionType = ({
-  data, precision, isDark, isOrderBook, isDesktop, lang,
+  data,
+  precision,
+  isDark,
+  isOrderBook,
+  isDesktop,
+  lang,
 }) => {
   const buckets = data.orderPositionBooks[0]?.buckets || [];
   const bucketWidth = data.orderPositionBooks[0]?.bucketWidth!;
   const price = data.orderPositionBooks[0]?.price!;
   const bucketPrecision = bucketWidth.toString().split('.')[1].length || 0;
 
-  const dataset = buckets.map((item) => ([
+  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 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: lang(isOrderBook ? 'open_orders' : 'open_positions').toUpperCase(),
-        padding: 20,
-        textStyle: {
-          fontSize: 14,
-        },
-      },
-      toolbox: {
-        feature: getZoomControls({
-          resetStartValue: zoomInitialStartValue,
-          resetEndValue: zoomInitialEndValue,
-        }),
+  return {
+    animation: false,
+    color: [
+      colorPalette.bottleGreenLight,
+      isDark ? colorPalette.orange : colorPalette.raspberryDark,
+    ],
+    title: {
+      text: lang(isOrderBook ? 'open_orders' : 'open_positions').toUpperCase(),
+      padding: 20,
+      textStyle: {
+        fontSize: 14,
       },
-      dataZoom: [
-        {
-          type: 'inside',
-          realtime: true,
-          startValue: zoomInitialStartValue,
-          endValue: zoomInitialEndValue,
+    },
+    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({
+        yAxisIndex: 0,
+        minValueSpan: 10 * bucketWidth,
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        axis: 'y',
+      },
+      formatter: (val) =>
+        tooltipFormatter({
           data: (val as { data: number[] }[])[0].data,
           precision: bucketPrecision,
           isOrderBook,
           lang,
         }),
-        extraCssText: 'z-index: 1',
-      },
-      grid: [
-        {
-          name: 'main-grid',
-          top: '48px',
-          left: '0px',
-          right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,
-          bottom: `${isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT}px`,
-        },
-      ],
-      xAxis: {
-        type: 'value',
-        min: Math.floor(range * -1.1),
-        max: Math.ceil(range * 1.1),
-        axisTick: { show: false },
-        axisLine: { show: false },
-        axisLabel: {
-          padding: [7, 12, 0, 12],
-          formatter: (value) => (value === 0 ? '%' : `${Math.abs(value)}%`),
-          hideOverlap: true,
-          alignMaxLabel: 'right',
-          alignMinLabel: 'left',
-        },
+      extraCssText: 'z-index: 1',
+    },
+    grid: [
+      {
+        name: 'main-grid',
+        top: '48px',
+        left: '0px',
+        right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,
+        bottom: `${isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT}px`,
       },
-      yAxis: {
-        type: 'value',
-        position: 'right',
-        axisLine: { show: false },
-        axisTick: { show: false },
-        axisLabel: {
-          overflow: 'truncate',
-          width: (isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) - 10,
-          margin: isDesktop ? 10 : 0,
-          showMaxLabel: false,
-          showMinLabel: false,
-          padding: [0, 0, 0, 10],
-          formatter: (value) => value.toFixed(bucketPrecision),
-        },
+    ],
+    xAxis: {
+      type: 'value',
+      min: Math.floor(range * -1.1),
+      max: Math.ceil(range * 1.1),
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: {
+        padding: [7, 12, 0, 12],
+        formatter: (value) => (value === 0 ? '%' : `${Math.abs(value)}%`),
+        hideOverlap: true,
+        alignMaxLabel: 'right',
+        alignMinLabel: 'left',
       },
-      dataset: {
-        source: dataset,
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        overflow: 'truncate',
+        width: (isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) - 10,
+        margin: isDesktop ? 10 : 0,
+        showMaxLabel: false,
+        showMinLabel: false,
+        padding: [0, 0, 0, 10],
+        formatter: (value) => value.toFixed(bucketPrecision),
       },
-      series: [
-        {
-          type: 'custom',
-          name: 'sell-short',
-          id: 'sell-short',
-          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;
+    },
+    dataset: {
+      source: dataset,
+    },
+    series: [
+      {
+        type: 'custom',
+        name: 'sell-short',
+        id: 'sell-short',
+        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,
-            };
+          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,
-                },
-              },
+          return {
+            type: 'rect',
+            shape: rectShape,
+            emphasis: {
               style: {
-                fill: api.visual('color'),
+                fill: colorPalette.bottleGreenLight,
               },
-            };
-          },
+            },
+            style: {
+              fill: api.visual('color'),
+            },
+          };
         },
-        {
-          type: 'custom',
-          name: 'buy-long',
-          id: 'buy-long',
-          clip: true,
-          encode: {
-            x: 1,
-            y: 0,
-            tooltip: 2,
-          },
-          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;
+      },
+      {
+        type: 'custom',
+        name: 'buy-long',
+        id: 'buy-long',
+        clip: true,
+        encode: {
+          x: 1,
+          y: 0,
+          tooltip: 2,
+        },
+        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,
-            };
+          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,
-                },
-              },
+          return {
+            type: 'rect',
+            shape: rectShape,
+            emphasis: {
               style: {
-                fill: api.visual('color'),
+                fill: isDark ? colorPalette.orange : colorPalette.raspberryDark,
               },
-            };
-          },
-        },
-        {
-          type: 'custom',
-          name: 'current-price',
-          id: 'current-price',
-          markLine: {
-            animation: false,
-            silent: true,
-            precision,
-            symbol: ['none', 'triangle'],
-            symbolOffset: [0, [0, isDesktop ? 0 : -10]] as unknown as number,
-            symbolRotate: 90,
-            symbolSize: [20, 10],
-            lineStyle: {
-              color: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
-              width: 1,
             },
-            label: {
-              distance: isDesktop ? 5 : -5,
-              overflow: 'truncate',
-              width: isDesktop ? undefined : Y_LABEL_SIZE_MOBILE,
-              color: isDark ? colorPalette.black : colorPalette.white,
-              backgroundColor: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
+            style: {
+              fill: api.visual('color'),
             },
-            data: [
-              {
-                yAxis: price,
-              },
-            ],
+          };
+        },
+      },
+      {
+        type: 'custom',
+        name: 'current-price',
+        id: 'current-price',
+        markLine: {
+          animation: false,
+          silent: true,
+          precision,
+          symbol: ['none', 'triangle'],
+          symbolOffset: [0, [0, isDesktop ? 0 : -10]] as unknown as number,
+          symbolRotate: 90,
+          symbolSize: [20, 10],
+          lineStyle: {
+            color: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
+            width: 1,
+          },
+          label: {
+            distance: isDesktop ? 5 : -5,
+            overflow: 'truncate',
+            width: isDesktop ? undefined : Y_LABEL_SIZE_MOBILE,
+            color: isDark ? colorPalette.black : colorPalette.white,
+            backgroundColor: isDark
+              ? colorPalette.orange
+              : colorPalette.bottleGreenDark,
           },
-          renderItem: () => null,
+          data: [
+            {
+              yAxis: price,
+            },
+          ],
         },
-      ],
-    }
-  );
+        renderItem: () => null,
+      },
+    ],
+  };
 };

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

@@ -1,5 +1,6 @@
-import { EChartsOption } from 'echarts';
-import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+import type { EChartsOption } from 'echarts';
+
+import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 
 export interface ChartProps {
   data: GetOrderPositionBooksQuery;
@@ -23,15 +24,11 @@ export interface GetOptionProps {
   lang: (label: string) => string;
 }
 
-export type GetOptionType = (
-  props: GetOptionProps,
-) => EChartsOption;
+export type GetOptionType = (props: GetOptionProps) => EChartsOption;
 
-export type TooltipFormatterType = (
-  props : {
-    data: number[],
-    precision: number,
-    isOrderBook: boolean,
-    lang: (label: string) => string;
-  }
-) => string;
+export type TooltipFormatterType = (props: {
+  data: number[];
+  precision: number;
+  isOrderBook: boolean;
+  lang: (label: string) => string;
+}) => string;

package/src/OrderBookWidget/config.ts

@@ -1,67 +1,87 @@
 import { BookType } from '../gql/types/graphql';
 import { InstrumentId } from './types';
 
-const navigationConfig = [{
-  id: BookType.Order,
-  label: 'order_book',
-}, {
-  id: BookType.Position,
-  label: 'position_book',
-}];
+const navigationConfig = [
+  {
+    id: BookType.Order,
+    label: 'order_book',
+  },
+  {
+    id: BookType.Position,
+    label: 'position_book',
+  },
+];
 
-const instrumentSelectConfigOC = [{
-  id: InstrumentId.EUR_AUD,
-  label: 'EUR/AUD',
-}, {
-  id: InstrumentId.EUR_GBP,
-  label: 'EUR/GBP',
-}, {
-  id: InstrumentId.EUR_JPY,
-  label: 'EUR/JPY',
-}, {
-  id: InstrumentId.EUR_USD,
-  label: 'EUR/USD',
-}, {
-  id: InstrumentId.EUR_CHF,
-  label: 'EUR/CHF',
-}, {
-  id: InstrumentId.USD_CHF,
-  label: 'USD/CHF',
-}, {
-  id: InstrumentId.USD_JPY,
-  label: 'USD/JPY',
-}, {
-  id: InstrumentId.USD_CAD,
-  label: 'USD/CAD',
-}, {
-  id: InstrumentId.GBP_USD,
-  label: 'GBP/USD',
-}, {
-  id: InstrumentId.GBP_JPY,
-  label: 'GBP/JPY',
-}, {
-  id: InstrumentId.GBP_CHF,
-  label: 'GBP/CHF',
-}, {
-  id: InstrumentId.AUD_JPY,
-  label: 'AUD/JPY',
-}, {
-  id: InstrumentId.AUD_USD,
-  label: 'AUD/USD',
-}, {
-  id: InstrumentId.NZD_USD,
-  label: 'NZD/USD',
-}];
+const instrumentSelectConfigOC = [
+  {
+    id: InstrumentId.EUR_AUD,
+    label: 'EUR/AUD',
+  },
+  {
+    id: InstrumentId.EUR_GBP,
+    label: 'EUR/GBP',
+  },
+  {
+    id: InstrumentId.EUR_JPY,
+    label: 'EUR/JPY',
+  },
+  {
+    id: InstrumentId.EUR_USD,
+    label: 'EUR/USD',
+  },
+  {
+    id: InstrumentId.EUR_CHF,
+    label: 'EUR/CHF',
+  },
+  {
+    id: InstrumentId.USD_CHF,
+    label: 'USD/CHF',
+  },
+  {
+    id: InstrumentId.USD_JPY,
+    label: 'USD/JPY',
+  },
+  {
+    id: InstrumentId.USD_CAD,
+    label: 'USD/CAD',
+  },
+  {
+    id: InstrumentId.GBP_USD,
+    label: 'GBP/USD',
+  },
+  {
+    id: InstrumentId.GBP_JPY,
+    label: 'GBP/JPY',
+  },
+  {
+    id: InstrumentId.GBP_CHF,
+    label: 'GBP/CHF',
+  },
+  {
+    id: InstrumentId.AUD_JPY,
+    label: 'AUD/JPY',
+  },
+  {
+    id: InstrumentId.AUD_USD,
+    label: 'AUD/USD',
+  },
+  {
+    id: InstrumentId.NZD_USD,
+    label: 'NZD/USD',
+  },
+];
 
 const instrumentSelectConfig = [
   ...instrumentSelectConfigOC,
   {
     id: InstrumentId.XAU_USD,
     label: 'XAU/USD',
-  }, {
+  },
+  {
     id: InstrumentId.XAG_USD,
     label: 'XAG/USD',
-  }];
+  },
+];
 
 const instrumentPrecisionConfig: Record<InstrumentId, number> = {
   [InstrumentId.EUR_AUD]: 5,
@@ -82,5 +102,8 @@ const instrumentPrecisionConfig: Record<InstrumentId, number> = {
   [InstrumentId.XAG_USD]: 5,
 };
 export {
-  navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig, instrumentSelectConfigOC,
+  instrumentPrecisionConfig,
+  instrumentSelectConfig,
+  instrumentSelectConfigOC,
+  navigationConfig,
 };