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,
  };
 }