@oanda/labs-volatility-chart-widget 1.0.167 → 1.0.169

package/src/VolatilityChartWidget/components/Chart/Chart.tsx

@@ -1,12 +1,11 @@
-import type { BaseChartRef } from '@oanda/labs-widget-common';
 import {
   BaseChart,
   getChartTheme,
-  Size,
   Theme,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
+import type { EChartsType } from 'echarts';
 import { BarChart } from 'echarts/charts';
 import {
   GraphicComponent,
@@ -16,10 +15,10 @@ 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 { CHART_HEIGHT } from './constants';
-import { getDesktopOption, getMobileOption, getOption } from './getOption';
+import { getOption } from './getOption';
 import type { ChartProps } from './types';
 
 echarts.use([
@@ -36,51 +35,30 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values, timeUnit }: ChartProps) => {
   const { lang } = useLocale();
-  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.setOption(
-        isDesktop
-          ? getDesktopOption({ timeUnit, lang, isDark })
-          : getMobileOption({ timeUnit, lang, isDark })
-      );
-    }
-  }, [echartRef, timeUnit, isDesktop, lang, isDark]);
-
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-
-      echartInstance.on('highlight', () => {
-        echartInstance.setOption({
-          title: {
-            show: false,
-          },
-        });
-      });
-
-      echartInstance.on('globalout', () => {
-        echartInstance.setOption({
-          title: {
-            show: window.innerWidth < 769,
-          },
-        });
-      });
-    }
-  }, [echartRef]);
+  const { isDark } = useLayoutProvider();
 
   return (
     <BaseChart
-      ref={echartRef}
       chartHeight={CHART_HEIGHT}
       echarts={echarts}
       isDark={isDark}
-      option={getOption(values, lang, timeUnit)}
+      option={getOption(values, lang, timeUnit, isDark)}
+      onEvents={{
+        highlight: (_params: unknown, instance: EChartsType) => {
+          instance.setOption({
+            title: {
+              show: false,
+            },
+          });
+        },
+        globalout: (_params: unknown, instance: EChartsType) => {
+          instance.setOption({
+            title: {
+              show: true,
+            },
+          });
+        },
+      }}
     />
   );
 };

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

@@ -1,4 +1,5 @@
 import {
+  DESKTOP_MIN_WIDTH,
   getGridLines,
   getLineCommons,
   themeColors,
@@ -48,7 +49,7 @@ export const getDesktopOption = ({
 
   return {
     title: {
-      show: false,
+      text: '',
     },
     tooltip: {
       position: undefined,
@@ -113,7 +114,7 @@ export const getMobileOption = ({
 
   return {
     title: {
-      show: true,
+      text: lang('mobile_tooltip_placeholder'),
     },
     tooltip: {
       backgroundColor: 'transparent',
@@ -176,7 +177,7 @@ export const pointFormatter = ({
   return point;
 };
 
-export const getOption: GetOptionType = (values, lang, timeUnit) => {
+export const getOption: GetOptionType = (values, lang, timeUnit, isDark) => {
   const pipsValues = values.map(({ pips }) => pips.toFixed());
   const points = values.map(({ point }) =>
     pointFormatter({ point, lang, timeUnit })
@@ -187,7 +188,6 @@ export const getOption: GetOptionType = (values, lang, timeUnit) => {
     title: {
       left: 10,
       top: 20,
-      text: lang('mobile_tooltip_placeholder'),
       textStyle: {
         fontFamily: 'Sofia W03',
         fontWeight: 500,
@@ -237,5 +237,23 @@ export const getOption: GetOptionType = (values, lang, timeUnit) => {
         type: 'bar',
       },
     ],
+    media: [
+      {
+        query: {
+          minWidth: DESKTOP_MIN_WIDTH,
+        },
+        option: {
+          ...getDesktopOption({ timeUnit, lang, isDark }),
+        },
+      },
+      {
+        query: {
+          maxWidth: DESKTOP_MIN_WIDTH - 1,
+        },
+        option: {
+          ...getMobileOption({ timeUnit, lang, isDark }),
+        },
+      },
+    ],
   };
 };

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

@@ -25,7 +25,8 @@ export interface TooltipData {
 export type GetOptionType = (
   values: VolatilityChartDataValues[],
   lang: (label: string) => string,
-  timeUnit: VolatilityChartTimeUnit
+  timeUnit: VolatilityChartTimeUnit,
+  isDark: boolean
 ) => EChartsOption;
 
 export interface GetResponsiveOptionsProps {