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

Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>
2026-04-23 18:14:56 +00:00 · 2022-11-23 14:50:06 -05:00
parent 1809d2b957
commit 3bc0865d90
45 changed files with 572 additions and 255 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts
+++ b/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,
  };
 }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
+++ b/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>
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/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,
  };
 }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts
+++ b/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;
+};