fix: Drill to detail blocked by tooltip

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

@@ -23,10 +23,13 @@ import {
   extractTimegrain,
   QueryFormData,
 } from '@superset-ui/core';
-import { BigNumberTotalChartProps } from '../types';
+import { BigNumberTotalChartProps, BigNumberVizProps } from '../types';
 import { getDateFormatter, parseMetricValue } from '../utils';
+import { Refs } from '../../types';
 
-export default function transformProps(chartProps: BigNumberTotalChartProps) {
+export default function transformProps(
+  chartProps: BigNumberTotalChartProps,
+): BigNumberVizProps {
   const { width, height, queriesData, formData, rawFormData, hooks } =
     chartProps;
   const {
@@ -38,6 +41,7 @@ export default function transformProps(chartProps: BigNumberTotalChartProps) {
     timeFormat,
     yAxisFormat,
   } = formData;
+  const refs: Refs = {};
   const { data = [], coltypes = [] } = queriesData[0];
   const granularity = extractTimegrain(rawFormData as QueryFormData);
   const metricName = getMetricLabel(metric);
@@ -76,5 +80,6 @@ export default function transformProps(chartProps: BigNumberTotalChartProps) {
     subheaderFontSize,
     subheader: formattedSubheader,
     onContextMenu,
+    refs,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -20,17 +20,14 @@ import React, { MouseEvent } from 'react';
 import {
   t,
   getNumberFormatter,
-  NumberFormatter,
   smartDateVerboseFormatter,
-  TimeFormatter,
   computeMaxFontSize,
   BRAND_COLOR,
   styled,
   BinaryQueryObjectFilterClause,
 } from '@superset-ui/core';
-import { EChartsCoreOption } from 'echarts';
 import Echart from '../components/Echart';
-import { BigNumberWithTrendlineFormData, TimeSeriesDatum } from './types';
+import { BigNumberVizProps } from './types';
 import { EventHandlers } from '../types';
 
 const defaultNumberFormatter = getNumberFormatter();
@@ -44,36 +41,7 @@ const PROPORTION = {
   TRENDLINE: 0.3,
 };
 
-type BigNumberVisProps = {
-  className?: string;
-  width: number;
-  height: number;
-  bigNumber?: number | null;
-  bigNumberFallback?: TimeSeriesDatum;
-  headerFormatter: NumberFormatter | TimeFormatter;
-  formatTime: TimeFormatter;
-  headerFontSize: number;
-  kickerFontSize: number;
-  subheader: string;
-  subheaderFontSize: number;
-  showTimestamp?: boolean;
-  showTrendLine?: boolean;
-  startYAxisAtZero?: boolean;
-  timeRangeFixed?: boolean;
-  timestamp?: number;
-  trendLineData?: TimeSeriesDatum[];
-  mainColor: string;
-  echartOptions: EChartsCoreOption;
-  onContextMenu?: (
-    clientX: number,
-    clientY: number,
-    filters?: BinaryQueryObjectFilterClause[],
-  ) => void;
-  xValueFormatter?: TimeFormatter;
-  formData?: BigNumberWithTrendlineFormData;
-};
-
-class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
+class BigNumberVis extends React.PureComponent<BigNumberVizProps> {
   static defaultProps = {
     className: '',
     headerFormatter: defaultNumberFormatter,
@@ -108,7 +76,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
 
   renderFallbackWarning() {
     const { bigNumberFallback, formatTime, showTimestamp } = this.props;
-    if (!bigNumberFallback || showTimestamp) return null;
+    if (!formatTime || !bigNumberFallback || showTimestamp) return null;
     return (
       <span
         className="alert alert-warning"
@@ -125,7 +93,13 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
 
   renderKicker(maxHeight: number) {
     const { timestamp, showTimestamp, formatTime, width } = this.props;
-    if (!showTimestamp) return null;
+    if (
+      !formatTime ||
+      !showTimestamp ||
+      typeof timestamp === 'string' ||
+      typeof timestamp === 'boolean'
+    )
+      return null;
 
     const text = timestamp === null ? '' : formatTime(timestamp);
 
@@ -155,6 +129,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
 
   renderHeader(maxHeight: number) {
     const { bigNumber, headerFormatter, width } = this.props;
+    // @ts-ignore
     const text = bigNumber === null ? t('No data') : headerFormatter(bigNumber);
 
     const container = this.createTemporaryContainer();
@@ -231,7 +206,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
   }
 
   renderTrendline(maxHeight: number) {
-    const { width, trendLineData, echartOptions } = this.props;
+    const { width, trendLineData, echartOptions, refs } = this.props;
 
     // if can't find any non-null values, no point rendering the trendline
     if (!trendLineData?.some(d => d[1] !== null)) {
@@ -264,12 +239,15 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
     };
 
     return (
-      <Echart
-        width={Math.floor(width)}
-        height={maxHeight}
-        echartOptions={echartOptions}
-        eventHandlers={eventHandlers}
-      />
+      echartOptions && (
+        <Echart
+          refs={refs}
+          width={Math.floor(width)}
+          height={maxHeight}
+          echartOptions={echartOptions}
+          eventHandlers={eventHandlers}
+        />
+      )
     );
   }
 
@@ -292,7 +270,9 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
           <div className="text-container" style={{ height: allTextHeight }}>
             {this.renderFallbackWarning()}
             {this.renderKicker(
-              Math.ceil(kickerFontSize * (1 - PROPORTION.TRENDLINE) * height),
+              Math.ceil(
+                (kickerFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
+              ),
             )}
             {this.renderHeader(
               Math.ceil(headerFontSize * (1 - PROPORTION.TRENDLINE) * height),
@@ -311,7 +291,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
     return (
       <div className={className} style={{ height }}>
         {this.renderFallbackWarning()}
-        {this.renderKicker(kickerFontSize * height)}
+        {this.renderKicker((kickerFontSize || 0) * height)}
         {this.renderHeader(Math.ceil(headerFontSize * height))}
         {this.renderSubheader(Math.ceil(subheaderFontSize * height))}
       </div>

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

@@ -30,11 +30,14 @@ import {
 } from '@superset-ui/core';
 import { EChartsCoreOption, graphic } from 'echarts';
 import {
+  BigNumberVizProps,
   BigNumberDatum,
   BigNumberWithTrendlineChartProps,
   TimeSeriesDatum,
 } from '../types';
 import { getDateFormatter, parseMetricValue } from '../utils';
+import { getDefaultPosition } from '../../utils/tooltip';
+import { Refs } from '../../types';
 
 const defaultNumberFormatter = getNumberFormatter();
 export function renderTooltipFactory(
@@ -60,7 +63,7 @@ const formatPercentChange = getNumberFormatter(
 
 export default function transformProps(
   chartProps: BigNumberWithTrendlineChartProps,
-) {
+): BigNumberVizProps {
   const {
     width,
     height,
@@ -95,6 +98,7 @@ export default function transformProps(
     from_dttm: fromDatetime,
     to_dttm: toDatetime,
   } = queriesData[0];
+  const refs: Refs = {};
   const metricName = getMetricLabel(metric);
   const compareLag = Number(compareLag_) || 0;
   let formattedSubheader = subheader;
@@ -103,7 +107,7 @@ export default function transformProps(
   const mainColor = `rgb(${r}, ${g}, ${b})`;
 
   const xAxisLabel = getXAxisLabel(rawFormData) as string;
-  let trendLineData;
+  let trendLineData: TimeSeriesDatum[] | undefined;
   let percentChange = 0;
   let bigNumber = data.length === 0 ? null : data[0][metricName];
   let timestamp = data.length === 0 ? null : data[0][xAxisLabel];
@@ -144,6 +148,7 @@ export default function transformProps(
       }
     }
     sortedData.reverse();
+    // @ts-ignore
     trendLineData = showTrendLine ? sortedData : undefined;
   }
 
@@ -229,10 +234,10 @@ export default function transformProps(
           bottom: 0,
         },
         tooltip: {
+          position: getDefaultPosition(refs),
           appendToBody: true,
           show: !inContextMenu,
           trigger: 'axis',
-          confine: true,
           formatter: renderTooltipFactory(formatTime, headerFormatter),
         },
         aria: {
@@ -250,6 +255,7 @@ export default function transformProps(
     width,
     height,
     bigNumber,
+    // @ts-ignore
     bigNumberFallback,
     className,
     headerFormatter,
@@ -267,5 +273,6 @@ export default function transformProps(
     echartOptions,
     onContextMenu,
     xValueFormatter: formatTime,
+    refs,
   };
 }

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

@@ -17,12 +17,17 @@
  * under the License.
  */
 
+import { EChartsCoreOption } from 'echarts';
 import {
+  BinaryQueryObjectFilterClause,
   ChartDataResponseResult,
-  ChartProps,
+  DataRecordValue,
+  NumberFormatter,
   QueryFormData,
   QueryFormMetric,
+  TimeFormatter,
 } from '@superset-ui/core';
+import { BaseChartProps, Refs } from '../types';
 
 export interface BigNumberDatum {
   [key: string]: number | null;
@@ -43,15 +48,50 @@ export type BigNumberWithTrendlineFormData = BigNumberTotalFormData & {
   compareLag?: string | number;
 };
 
-export type BigNumberTotalChartProps = ChartProps<QueryFormData> & {
-  formData: BigNumberTotalFormData;
-  queriesData: (ChartDataResponseResult & {
-    data?: BigNumberDatum[];
-  })[];
-};
+export interface BigNumberTotalChartDataResponseResult
+  extends ChartDataResponseResult {
+  data: BigNumberDatum[];
+}
 
-export type BigNumberWithTrendlineChartProps = BigNumberTotalChartProps & {
-  formData: BigNumberWithTrendlineFormData;
-};
+export type BigNumberTotalChartProps =
+  BaseChartProps<BigNumberTotalFormData> & {
+    formData: BigNumberTotalFormData;
+    queriesData: BigNumberTotalChartDataResponseResult[];
+  };
+
+export type BigNumberWithTrendlineChartProps =
+  BaseChartProps<BigNumberWithTrendlineFormData> & {
+    formData: BigNumberWithTrendlineFormData;
+  };
 
 export type TimeSeriesDatum = [number, number | null];
+
+export type BigNumberVizProps = {
+  className?: string;
+  width: number;
+  height: number;
+  bigNumber?: DataRecordValue;
+  bigNumberFallback?: TimeSeriesDatum;
+  headerFormatter: NumberFormatter | TimeFormatter;
+  formatTime?: TimeFormatter;
+  headerFontSize: number;
+  kickerFontSize?: number;
+  subheader: string;
+  subheaderFontSize: number;
+  showTimestamp?: boolean;
+  showTrendLine?: boolean;
+  startYAxisAtZero?: boolean;
+  timeRangeFixed?: boolean;
+  timestamp?: DataRecordValue;
+  trendLineData?: TimeSeriesDatum[];
+  mainColor?: string;
+  echartOptions?: EChartsCoreOption;
+  onContextMenu?: (
+    clientX: number,
+    clientY: number,
+    filters?: BinaryQueryObjectFilterClause[],
+  ) => void;
+  xValueFormatter?: TimeFormatter;
+  formData?: BigNumberWithTrendlineFormData;
+  refs: Refs;
+};

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/EchartsBoxPlot.tsx

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

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

@@ -36,9 +36,11 @@ import {
   sanitizeHtml,
 } from '../utils/series';
 import { convertInteger } from '../utils/convertInteger';
-import { defaultGrid, defaultTooltip, defaultYAxis } from '../defaults';
+import { defaultGrid, defaultYAxis } from '../defaults';
 import { getPadding } from '../Timeseries/transformers';
 import { OpacityEnum } from '../constants';
+import { getDefaultPosition } from '../utils/tooltip';
+import { Refs } from '../types';
 
 export default function transformProps(
   chartProps: EchartsBoxPlotChartProps,
@@ -71,6 +73,7 @@ export default function transformProps(
     yAxisTitlePosition,
     sliceId,
   } = formData as BoxPlotQueryFormData;
+  const refs: Refs = {};
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
   const metricLabels = metrics.map(getMetricLabel);
@@ -270,7 +273,7 @@ export default function transformProps(
       nameLocation: yAxisTitlePosition === 'Left' ? 'middle' : 'end',
     },
     tooltip: {
-      ...defaultTooltip,
+      position: getDefaultPosition(refs),
       show: !inContextMenu,
       trigger: 'item',
       axisPointer: {
@@ -291,5 +294,6 @@ export default function transformProps(
     groupby,
     selectedValues,
     onContextMenu,
+    refs,
   };
 }