fix: Drill to detail blocked by tooltip (#22082)

Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx

@@ -31,6 +31,7 @@ export default function EchartsGauge(props: GaugeChartTransformedProps) {
     groupby,
     selectedValues,
     formData: { emitFilter },
+    refs,
   } = props;
   const handleChange = useCallback(
     (values: string[]) => {
@@ -72,6 +73,7 @@ export default function EchartsGauge(props: GaugeChartTransformedProps) {
 
   return (
     <Echart
+      refs={refs}
       height={height}
       width={width}
       echartOptions={echartOptions}

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts

@@ -44,6 +44,8 @@ import {
   FONT_SIZE_MULTIPLIERS,
 } from './constants';
 import { OpacityEnum } from '../constants';
+import { getDefaultPosition } from '../utils/tooltip';
+import { Refs } from '../types';
 
 const setIntervalBoundsAndColors = (
   intervals: string,
@@ -118,6 +120,7 @@ export default function transformProps(
     emitFilter,
     sliceId,
   }: EchartsGaugeFormData = { ...DEFAULT_GAUGE_FORM_DATA, ...formData };
+  const refs: Refs = {};
   const data = (queriesData[0]?.data || []) as DataRecord[];
   const numberFormatter = getNumberFormatter(numberFormat);
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -258,6 +261,7 @@ export default function transformProps(
     color: gaugeSeriesOptions.detail?.color,
   };
   const tooltip = {
+    position: getDefaultPosition(refs),
     formatter: (params: CallbackDataParams) => {
       const { name, value } = params;
       return `${name} : ${formatValue(value as number)}`;
@@ -300,6 +304,7 @@ export default function transformProps(
       axisTick,
       pointer,
       detail,
+      // @ts-ignore
       tooltip,
       radius:
         Math.min(width, height) / 2 - axisLabelDistance - axisTickDistance,
@@ -327,5 +332,6 @@ export default function transformProps(
     groupby,
     selectedValues: filterState.selectedValues || [],
     onContextMenu,
+    refs,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/types.ts

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { QueryFormColumn, QueryFormData } from '@superset-ui/core';
 import {
-  ChartDataResponseResult,
-  ChartProps,
-  QueryFormColumn,
-  QueryFormData,
-} from '@superset-ui/core';
-import { EChartTransformedProps } from '../types';
+  BaseChartProps,
+  BaseTransformedProps,
+  ContextMenuTransformedProps,
+  CrossFilterTransformedProps,
+} from '../types';
 import { DEFAULT_LEGEND_FORM_DATA } from '../constants';
 
 export type AxisTickLineStyle = {
@@ -80,10 +80,11 @@ export const DEFAULT_FORM_DATA: Partial<EchartsGaugeFormData> = {
 };
 
 export interface EchartsGaugeChartProps
-  extends ChartProps<EchartsGaugeFormData> {
+  extends BaseChartProps<EchartsGaugeFormData> {
   formData: EchartsGaugeFormData;
-  queriesData: ChartDataResponseResult[];
 }
 
 export type GaugeChartTransformedProps =
-  EChartTransformedProps<EchartsGaugeFormData>;
+  BaseTransformedProps<EchartsGaugeFormData> &
+    ContextMenuTransformedProps &
+    CrossFilterTransformedProps;