@oanda/labs-order-book-widget 1.0.218 → 1.0.220

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

@@ -1,4 +1,3 @@
-import type { BaseChartRef } from '@oanda/labs-widget-common';
 import {
   BaseChart,
   colorPalette,
@@ -8,6 +7,7 @@ import {
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
+import type { EChartsType } from 'echarts';
 import { CustomChart } from 'echarts/charts';
 import {
   DatasetComponent,
@@ -21,9 +21,9 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
-import { getOption, getResponsiveOption } from './getOption';
+import { getOption } from './getOption';
 import type { ChartProps } from './types';
 
 echarts.use([
@@ -47,58 +47,11 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const echartRef = useRef<BaseChartRef | null>(null);
-
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-
-      echartInstance.on('highlight', () => {
-        if (
-          (echartInstance.getOption().color as echarts.Color[])[0] ===
-          colorPalette.bottleGreenLight
-        ) {
-          echartInstance.setOption({
-            color: [
-              colorPalette.bottleGreenLight70,
-              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,
-            ],
-          });
-        }
-      });
-
-      echartInstance.on('globalout', () => {
-        echartInstance.setOption({
-          color: [
-            colorPalette.bottleGreenLight,
-            isDark ? colorPalette.orange : colorPalette.raspberryDark,
-          ],
-        });
-      });
-    }
-  }, [echartRef, isDark]);
-
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-
-      echartInstance.setOption(
-        getResponsiveOption({
-          isDark,
-          isOrderBook,
-          isDesktop,
-          lang,
-        })
-      );
-    }
-  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);
-
   return (
     <div className="lw-relative lw-w-full" data-testid="order-book-chart">
       <div>
         {data && (
           <BaseChart
-            ref={echartRef}
             chartHeight={isDesktop ? 450 : 390}
             echarts={echarts}
             isDark={isDark}
@@ -110,6 +63,26 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
               isDesktop,
               lang,
             })}
+            onEvents={{
+              highlight: (_params: unknown, instance: EChartsType) => {
+                instance.setOption({
+                  color: [
+                    colorPalette.bottleGreenLight70,
+                    isDark
+                      ? colorPalette.orange70
+                      : colorPalette.raspberryDark70,
+                  ],
+                });
+              },
+              globalout: (_params: unknown, instance: EChartsType) => {
+                instance.setOption({
+                  color: [
+                    colorPalette.bottleGreenLight,
+                    isDark ? colorPalette.orange : colorPalette.raspberryDark,
+                  ],
+                });
+              },
+            }}
           />
         )}
       </div>

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

@@ -15,130 +15,7 @@ import {
   ZOOM_CONTROL_HEIGHT,
 } from './constants';
 import { tooltipFormatter } from './formatters';
-import type { GetOptionType, GetResponsiveOptionsProps } from './types';
-
-export const getResponsiveOption = ({
-  isDark,
-  isOrderBook,
-  isDesktop,
-  lang,
-}: GetResponsiveOptionsProps) => {
-  const desktopGridLines = getGridLines({
-    isDark,
-    chartWidth: CHART_WIDTH,
-    chartHeight: isDesktop ? CHART_HEIGHT_DESKTOP : CHART_HEIGHT_MOBILE,
-    xLabelsSize: isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT,
-    yLabelSize: isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE,
-    bottomLeftBox: isDesktop,
-    marginBottom: isDesktop ? 0 : ZOOM_CONTROL_HEIGHT,
-  });
-
-  return {
-    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: {
-      axisLabel: {
-        margin: isDesktop ? 10 : 0,
-      },
-    },
-    series: [
-      {
-        type: 'custom',
-        name: 'current-price',
-        id: 'current-price',
-        markLine: {
-          label: {
-            padding: isDesktop ? [5, 15, 5, 15] : [5, 12, 5, 5],
-          },
-        },
-      },
-    ],
-    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: lang(isOrderBook ? 'sell' : 'short'),
-            },
-          },
-        ],
-      },
-      {
-        type: 'group',
-        right: `${(isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) + 8}px'`,
-        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: lang(isOrderBook ? 'buy' : 'long'),
-            },
-          },
-        ],
-      },
-    ],
-  };
-};
+import type { GetOptionType } from './types';
 
 export const getOption: GetOptionType = ({
   data,
@@ -167,6 +44,16 @@ export const getOption: GetOptionType = ({
 
   const range = max > min ? max : min;
 
+  const gridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: isDesktop ? CHART_HEIGHT_DESKTOP : CHART_HEIGHT_MOBILE,
+    xLabelsSize: isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT,
+    yLabelSize: isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE,
+    bottomLeftBox: isDesktop,
+    marginBottom: isDesktop ? 0 : ZOOM_CONTROL_HEIGHT,
+  });
+
   return {
     animation: false,
     color: [
@@ -176,11 +63,15 @@ export const getOption: GetOptionType = ({
     title: {
       text: lang(isOrderBook ? 'open_orders' : 'open_positions').toUpperCase(),
       padding: 20,
+      top: 0,
+      left: 0,
       textStyle: {
         fontSize: 14,
       },
     },
     toolbox: {
+      bottom: -4,
+      right: -4,
       feature: getZoomControls({
         resetStartValue: zoomInitialStartValue,
         resetEndValue: zoomInitialEndValue,
@@ -359,6 +250,7 @@ export const getOption: GetOptionType = ({
             backgroundColor: isDark
               ? colorPalette.orange
               : colorPalette.bottleGreenDark,
+            padding: isDesktop ? [5, 15, 5, 15] : [5, 12, 5, 5],
           },
           data: [
             {
@@ -369,5 +261,82 @@ export const getOption: GetOptionType = ({
         renderItem: () => null,
       },
     ],
+    graphic: [
+      ...gridLines,
+      {
+        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: lang(isOrderBook ? 'sell' : 'short'),
+            },
+          },
+        ],
+      },
+      {
+        type: 'group',
+        right: `${(isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) + 8}px'`,
+        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: lang(isOrderBook ? 'buy' : 'long'),
+            },
+          },
+        ],
+      },
+    ],
   };
 };

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

@@ -8,13 +8,6 @@ export interface ChartProps {
   precision: number;
 }
 
-export interface GetResponsiveOptionsProps {
-  isDesktop: boolean;
-  isDark: boolean;
-  isOrderBook: boolean;
-  lang: (label: string) => string;
-}
-
 export interface GetOptionProps {
   data: GetOrderPositionBooksQuery;
   precision: number;