Adds right click to big number trendline

apache · Aug 9, 2022 · 5eccb92 · 5eccb92
1 parent db3f21b
commit 5eccb92
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
@@ -30,7 +30,8 @@ import {
 } from '@superset-ui/core';
 import { EChartsCoreOption } from 'echarts';
 import Echart from '../components/Echart';
-import { TimeSeriesDatum } from './types';
+import { BigNumberWithTrendlineFormData, TimeSeriesDatum } from './types';
+import { EventHandlers } from '../types';
 
 const defaultNumberFormatter = getNumberFormatter();
 
@@ -68,6 +69,8 @@ type BigNumberVisProps = {
     offsetX: number,
     offsetY: number,
   ) => void;
+  xValueFormatter?: TimeFormatter;
+  formData?: BigNumberWithTrendlineFormData;
 };
 
 class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
@@ -231,19 +234,45 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
     return null;
   }
 
-  renderTrendline(maxHeight: number) {
+  renderTrendline(maxHeight: number, chartHeight: number) {
     const { width, trendLineData, echartOptions } = this.props;
 
     // if can't find any non-null values, no point rendering the trendline
     if (!trendLineData?.some(d => d[1] !== null)) {
       return null;
     }
 
+    const eventHandlers: EventHandlers = {
+      contextmenu: eventParams => {
+        if (this.props.onContextMenu) {
+          eventParams.event.stop();
+          const { data } = eventParams;
+          if (data) {
+            const pointerEvent = eventParams.event.event;
+            const filters: QueryObjectFilterClause[] = [];
+            filters.push({
+              col: this.props.formData?.granularitySqla,
+              grain: this.props.formData?.timeGrainSqla,
+              op: '==',
+              val: data[0],
+              formattedVal: this.props.xValueFormatter?.(data[0]),
+            });
+            this.props.onContextMenu(
+              filters,
+              pointerEvent.offsetX,
+              chartHeight - 100,
+            );
+          }
+        }
+      },
+    };
+
     return (
       <Echart
         width={Math.floor(width)}
         height={maxHeight}
         echartOptions={echartOptions}
+        eventHandlers={eventHandlers}
       />
     );
   }
@@ -278,7 +307,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
               ),
             )}
           </div>
-          {this.renderTrendline(chartHeight)}
+          {this.renderTrendline(chartHeight, height)}
         </div>
       );
     }

diff --git a/...ntend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/...ntend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -62,8 +62,16 @@ const formatPercentChange = getNumberFormatter(
 export default function transformProps(
   chartProps: BigNumberWithTrendlineChartProps,
 ) {
-  const { width, height, queriesData, formData, rawFormData, theme, hooks } =
-    chartProps;
+  const {
+    width,
+    height,
+    queriesData,
+    formData,
+    rawFormData,
+    theme,
+    hooks,
+    inContextMenu,
+  } = chartProps;
   const {
     colorPicker,
     compareLag: compareLag_,
@@ -221,7 +229,7 @@ export default function transformProps(
         },
         tooltip: {
           appendToBody: true,
-          show: true,
+          show: !inContextMenu,
           trigger: 'axis',
           confine: true,
           formatter: renderTooltipFactory(formatTime, headerFormatter),
@@ -245,6 +253,7 @@ export default function transformProps(
     className,
     headerFormatter,
     formatTime,
+    formData,
     headerFontSize,
     subheaderFontSize,
     mainColor,
@@ -256,5 +265,6 @@ export default function transformProps(
     trendLineData,
     echartOptions,
     onContextMenu,
+    xValueFormatter: formatTime,
   };
 }
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/superset-frontend/src/components/Chart/ChartRenderer.jsx
@@ -202,7 +202,7 @@ class ChartRenderer extends React.Component {
   }
 
   handleContextMenuSelected(filters) {
-    const extraFilters = this.props.formData.extra_form_data.filters || [];
+    const extraFilters = this.props.formData.extra_form_data?.filters || [];
     // eslint-disable-next-line no-alert
     alert(JSON.stringify(filters.concat(extraFilters)));
     this.setState({ inContextMenu: false });