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

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

@@ -1,24 +1,29 @@
-import React, { useRef, useEffect } from 'react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import * as echarts from 'echarts/core';
+import {
+  colorPalette,
+  getChartTheme,
+  Size,
+  Theme,
+  useLayoutProvider,
+} from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import { CustomChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
 import {
-  GridSimpleComponent,
+  DatasetComponent,
+  DataZoomInsideComponent,
   GraphicComponent,
-  TooltipComponent,
-  TitleComponent,
+  GridSimpleComponent,
   MarkLineComponent,
+  TitleComponent,
   ToolboxComponent,
-  DataZoomInsideComponent,
-  DatasetComponent,
+  TooltipComponent,
 } from 'echarts/components';
-import {
-  Theme, useLayoutProvider, colorPalette, getChartTheme, Size,
-} from '@oanda/labs-widget-common';
-import { useLocale } from '@oanda/mono-i18n';
-import { getResponsiveOption, getOption } from './getOption';
-import { ChartProps } from './types';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import React, { useEffect, useRef } from 'react';
+
+import { getOption, getResponsiveOption } from './getOption';
+import type { ChartProps } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -41,16 +46,16 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const echartRef = useRef(null);
+  const echartRef = useRef<ReactEChartsCore | null>(null);
 
   useEffect(() => {
     if (echartRef.current) {
-      // @ts-ignore
-      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;
+      const echartInstance = echartRef.current.getEchartsInstance();
 
       echartInstance.on('highlight', () => {
-        if ((
-          echartInstance.getOption().color as echarts.Color[])[0] === colorPalette.bottleGreenLight
+        if (
+          (echartInstance.getOption().color as echarts.Color[])[0] ===
+          colorPalette.bottleGreenLight
         ) {
           echartInstance.setOption({
             color: [
@@ -74,13 +79,15 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
 
   useEffect(() => {
     if (echartRef.current) {
-      // @ts-ignore
-      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;
+      const echartInstance = echartRef.current.getEchartsInstance();
 
       echartInstance.setOption(
         getResponsiveOption({
-          isDark, isOrderBook, isDesktop, lang,
-        }),
+          isDark,
+          isOrderBook,
+          isDesktop,
+          lang,
+        })
       );
     }
   }, [echartRef, isDesktop, isDark, isOrderBook, lang]);
@@ -90,16 +97,21 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
       <div>
         {data && (
           <ReactEChartsCore
-            echarts={echarts}
             ref={echartRef}
-            theme={isDark ? 'dark_theme' : 'light_theme'}
+            echarts={echarts}
+            option={getOption({
+              data,
+              precision,
+              isDark,
+              isOrderBook,
+              isDesktop,
+              lang,
+            })}
             style={{
               height: isDesktop ? '450px' : '390px',
               width: '100%',
             }}
-            option={getOption({
-              data, precision, isDark, isOrderBook, isDesktop, lang,
-            })}
+            theme={isDark ? 'dark_theme' : 'light_theme'}
           />
         )}
       </div>

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

@@ -1,11 +1,18 @@
-import { TooltipFormatterType } from './types';
+import type { TooltipFormatterType } from './types';
 
 const tooltipFormatter: TooltipFormatterType = ({
-  data, precision, isOrderBook, lang,
+  data,
+  precision,
+  isOrderBook,
+  lang,
 }) => {
   const priceText = `${lang('price')}: ${data[0].toFixed(precision)}`;
-  const buyText = data[1] ? `<br />${lang(isOrderBook ? 'buy' : 'long_positions')}: ${data[1]}%` : '';
-  const sellText = data[2] ? `<br />${lang(isOrderBook ? 'sell' : 'short_positions')}: ${data[2] * -1}%` : '';
+  const buyText = data[1]
+    ? `<br />${lang(isOrderBook ? 'buy' : 'long_positions')}: ${data[1]}%`
+    : '';
+  const sellText = data[2]
+    ? `<br />${lang(isOrderBook ? 'sell' : 'short_positions')}: ${data[2] * -1}%`
+    : '';
 
   return priceText + buyText + sellText;
 };

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;