feat(anomaly-chart): added gestures enablement option

packages/doc-site/stories/components/anomalyChart/AnomalyChart.mdx

@@ -61,6 +61,8 @@ includes the following options:
 - **showX** (boolean, optional) Setting to determine whether we show the x-axis and the horizontal grid lines. Defaults to true.
 - **showY** (boolean, optional) Setting to determine whether we show the y-axis and the horizontal grid lines. Defaults to true.
 
+**gestures** (boolean, optional) Specifies whether gestures (pan, zoom and restrict time-span) are enabled. Defaults to `true`
+
 ### Example
 
 ```

packages/react-components/src/components/anomaly-chart/hooks/types.ts

@@ -2,6 +2,7 @@ import { AnomalyData, AnomalyDescription } from '../../../data';
 import { ThemeMode, TooltipSort } from '../types';
 
 export type ConfigurationOptions = {
+  gestures?: boolean;
   mode?: ThemeMode;
   description?: AnomalyDescription;
   loading?: boolean;

packages/react-components/src/components/anomaly-chart/hooks/useAnomalyEchart.ts

@@ -102,6 +102,7 @@ export type AnomalyEChartOptions = {
   DataSetOptions;
 
 export const useAnomalyEchart = ({
+  gestures = true,
   mode,
   ...options
 }: AnomalyEChartOptions) => {
@@ -121,6 +122,7 @@ export const useAnomalyEchart = ({
   );
 
   const { ref, chartRef, sizeRef } = useZoomableECharts({
+    gestures,
     theme: mode === 'dark' ? 'cloudscapeDarkTheme' : 'cloudscapeLightTheme',
     viewport: utilizedViewport,
     setViewport,

packages/react-components/src/components/anomaly-chart/index.tsx

@@ -24,7 +24,12 @@ const AnomalyDataSourceLoader = new DataSourceLoader([
 ]);
 
 export const AnomalyChart = (options: AnomalyChartOptions) => {
-  const { showTimestamp = true, viewport, ...configuration } = options;
+  const {
+    gestures = true,
+    showTimestamp = true,
+    viewport,
+    ...configuration
+  } = options;
 
   const {
     viewport: utilizedViewport,
@@ -48,6 +53,7 @@ export const AnomalyChart = (options: AnomalyChartOptions) => {
 
   const { ref, sizeRef } = useAnomalyEchart({
     ...configuration,
+    gestures,
     showTimestamp,
     data,
     description,

packages/react-components/src/components/anomaly-chart/types.ts

@@ -25,6 +25,7 @@ export type AnomalyChartWithData = Partial<AnomalyChartDataSourceOption> &
   (AnomalyChartDataSourceOption | AnomalyChartQueryOption);
 
 export type AnomalyChartOptions = AnomalyChartWithData & {
+  gestures?: boolean;
   mode?: ThemeMode;
   decimalPlaces?: number;
   viewport?: Viewport;

packages/react-components/src/echarts/unboundedZoom/constants.ts

@@ -1,4 +1,8 @@
-import { DataZoomComponentOption, XAXisComponentOption } from 'echarts';
+import {
+  DataZoomComponentOption,
+  ToolboxComponentOption,
+  XAXisComponentOption,
+} from 'echarts';
 
 export const ECHARTS_GESTURE = 'echarts-gesture';
 
@@ -10,6 +14,14 @@ export const DEFAULT_DATA_ZOOM: DataZoomComponentOption = {
   moveOnMouseWheel: false,
 };
 
+export const DEFAULT_DATA_ZOOM_GESTURES_ENABLED: DataZoomComponentOption = {
+  disabled: false,
+};
+
+export const DEFAULT_DATA_ZOOM_GESTURES_DISABLED: DataZoomComponentOption = {
+  disabled: true,
+};
+
 // this is the chart live mode refresh rate, this should be inline with the animation props
 // https://echarts.apache.org/en/option.html#animation
 export const LIVE_MODE_REFRESH_RATE_MS = 1000;
@@ -32,7 +44,7 @@ export const DEFAULT_X_AXIS: XAXisComponentOption = {
   max: 4102513200000, // Jan 01 2100 19:00:00 UTC
 };
 
-export const DEFAULT_TOOLBOX = {
+export const DEFAULT_TOOLBOX_GESTURES_ENABLED: ToolboxComponentOption = {
   show: true,
   top: 0,
   right: 8,
@@ -44,3 +56,7 @@ export const DEFAULT_TOOLBOX = {
     },
   },
 };
+
+export const DEFAULT_TOOLBOX_GESTURES_DISABLED: ToolboxComponentOption = {
+  show: false,
+};

packages/react-components/src/echarts/unboundedZoom/useUnboundedDataZoom.ts

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { useEffectOnce, useUpdateEffect } from 'react-use';
-import { DataZoomComponentOption, ECharts } from 'echarts';
+import {
+  DataZoomComponentOption,
+  ECharts,
+  ToolboxComponentOption,
+} from 'echarts';
 import {
   Viewport,
   isHistoricalViewport,
@@ -12,7 +16,10 @@ import {
 import { useViewport } from '../../hooks/useViewport';
 import {
   DEFAULT_DATA_ZOOM,
-  DEFAULT_TOOLBOX,
+  DEFAULT_DATA_ZOOM_GESTURES_DISABLED,
+  DEFAULT_DATA_ZOOM_GESTURES_ENABLED,
+  DEFAULT_TOOLBOX_GESTURES_ENABLED,
+  DEFAULT_TOOLBOX_GESTURES_DISABLED,
   ECHARTS_GESTURE,
   LIVE_MODE_REFRESH_RATE_MS,
 } from './constants';
@@ -87,13 +94,51 @@ const reducer = (state: TickState, action: TickAction): TickState => {
   return state;
 };
 
+const updateGesturesOptions = (
+  gestures: boolean | undefined,
+  dataZoomOption: DataZoomComponentOption,
+  toolboxOption: ToolboxComponentOption
+) => {
+  if (gestures) {
+    // enabled gestures specific option settings
+    dataZoomOption = {
+      ...dataZoomOption,
+      ...DEFAULT_DATA_ZOOM_GESTURES_ENABLED,
+    };
+    toolboxOption = DEFAULT_TOOLBOX_GESTURES_ENABLED;
+  } else {
+    // disabled gestures specific option settings
+    dataZoomOption = {
+      ...dataZoomOption,
+      ...DEFAULT_DATA_ZOOM_GESTURES_DISABLED,
+    };
+    toolboxOption = DEFAULT_TOOLBOX_GESTURES_DISABLED;
+  }
+  return { dataZoomOption, toolboxOption };
+};
+
+const dispatchGesturesEnablement = (
+  gestures?: boolean,
+  chart?: ECharts | null
+) => {
+  if (!gestures) {
+    chart?.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  }
+};
+
 export const useUnboundedDataZoom = ({
   chart,
+  gestures,
   viewport,
   setViewport,
   viewportType,
 }: {
   chart: ECharts | null;
+  gestures?: boolean;
   viewport: Viewport | undefined;
   setViewport?: (viewport: Viewport, lastUpdatedBy?: string) => void;
   viewportType: UtilizedViewportType;
@@ -124,16 +169,29 @@ export const useUnboundedDataZoom = ({
   const zoomCache = useRef<DataZoomComponentOption | undefined>(undefined);
   useEffect(() => {
     if (chart && zoomCache.current) {
+      let dataZoomOption = zoomCache.current;
+      let toolboxOption = DEFAULT_TOOLBOX_GESTURES_ENABLED;
+
+      ({ dataZoomOption, toolboxOption } = updateGesturesOptions(
+        gestures,
+        dataZoomOption,
+        toolboxOption
+      ));
+
+      toolboxOption = merge(toolboxOption, {
+        feature: {
+          dataZoom: { title: { zoom: zoomTitle, back: backZoomTitle } },
+        },
+      });
+
+      // WARN: enablement needs to dispatch before chart option
+      dispatchGesturesEnablement(gestures, chart);
       chart.setOption({
-        dataZoom: zoomCache.current,
-        toolbox: merge({}, DEFAULT_TOOLBOX, {
-          feature: {
-            dataZoom: { title: { zoom: zoomTitle, back: backZoomTitle } },
-          },
-        }),
+        dataZoom: dataZoomOption,
+        toolbox: toolboxOption,
       });
     }
-  }, [chart, zoomTitle, backZoomTitle]);
+  }, [chart, zoomTitle, backZoomTitle, gestures]);
 
   /**
    * function for setting the dataZoom chart option on the echart instance
@@ -142,15 +200,30 @@ export const useUnboundedDataZoom = ({
     ({ startValue, endValue }: { startValue: number; endValue: number }) => {
       cancelAnimationFrame(frameRef.current);
       frameRef.current = requestAnimationFrame(() => {
-        const dataZoomOption = { ...DEFAULT_DATA_ZOOM, startValue, endValue };
+        let dataZoomOption: DataZoomComponentOption = {
+          ...DEFAULT_DATA_ZOOM,
+          startValue,
+          endValue,
+        };
+        let toolboxOption = DEFAULT_TOOLBOX_GESTURES_ENABLED;
+
+        ({ dataZoomOption, toolboxOption } = updateGesturesOptions(
+          gestures,
+          dataZoomOption,
+          toolboxOption
+        ));
+
         zoomCache.current = dataZoomOption;
+
+        // WARN: enablement needs to dispatch before chart option
+        dispatchGesturesEnablement(gestures, chart);
         chart?.setOption({
           dataZoom: dataZoomOption,
-          toolbox: DEFAULT_TOOLBOX,
+          toolbox: toolboxOption,
         });
       });
     },
-    [chart]
+    [chart, gestures]
   );
 
   /**

packages/react-components/src/hooks/useECharts/useZoomableECharts.ts

@@ -26,11 +26,13 @@ export interface EChartsWrapperProps {
  *  - chartRef: ref to an Echarts instance
  */
 export const useZoomableECharts = ({
+  gestures,
   theme,
   viewport,
   setViewport,
   viewportType,
 }: {
+  gestures?: boolean;
   theme?: string;
   viewport?: Viewport;
   setViewport?: (viewport: Viewport, lastUpdatedBy?: string) => void;
@@ -78,7 +80,13 @@ export const useZoomableECharts = ({
     }
   }, [width, height]);
 
-  useUnboundedDataZoom({ chart, viewport, setViewport, viewportType });
+  useUnboundedDataZoom({
+    chart,
+    viewport,
+    setViewport,
+    viewportType,
+    gestures,
+  });
 
   return { chartRef, ref, sizeRef };
 };

packages/react-components/stories/anomaly/anomaly.stories.tsx

@@ -20,6 +20,9 @@ export default {
     axis: {
       control: { type: 'object' },
     },
+    gestures: {
+      control: { type: 'boolean' },
+    },
     predictionDefinitionId: {
       control: { type: 'text' },
       defaultValue: 'a85b0fb2-b259-441c-aacc-d7d7495214f5',