fix(react-components): minor anomaly widget style changes

Author: corteggiano

packages/react-components/e2e/tests/anomaly/anomaly.spec.ts-snapshots/anomaly-chart-chromium-darwin.png

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import {
   colorBackgroundContainerContent,
   colorBorderControlDefault,
@@ -89,8 +91,14 @@ export const ANOMALY_TOOLTIP = {
   // These only work because the tooltip is rendered as html
   borderColor: colorBorderControlDefault,
   backgroundColor: colorBackgroundContainerContent,
-  position: (point: [number, number]) => {
-    return [point[0] + 20, '0%'];
+  position: (
+    point: [number, number],
+    _params: any,
+    _dom: any,
+    _rect: any,
+    size: { viewSize: [number, number]; contentSize: [number, number] }
+  ) => {
+    return [point[0] + 20, size.viewSize[1] / 2 - 40 - size.contentSize[1] / 2];
   },
 };
 

packages/react-components/e2e/tests/anomaly/anomaly.spec.ts-snapshots/anomaly-chart-chromium-linux.png

@@ -51,7 +51,7 @@ export const DEFAULT_X_AXIS: XAXisComponentOption = {
   nameLocation: 'middle',
   nameTextStyle: {
     fontWeight: 'bold',
-    padding: [24, 0, 0, 0],
+    padding: [20, 0, 0, 0],
   },
   // hardcoding the x axis so that all viewport logic is managed exclusively by useDataZoom hooks
   min: 0,
@@ -61,6 +61,7 @@ export const DEFAULT_X_AXIS: XAXisComponentOption = {
 export const DEFAULT_TOOLBOX_GESTURES_ENABLED: ToolboxComponentOption = {
   show: true,
   top: 4,
+  itemGap: 12,
   right: 8,
   feature: {
     dataZoom: {