Added showTooltip.

elastic · Apr 19, 2022 · 4d5eea1 · 4d5eea1
1 parent dfccec6
commit 4d5eea1
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 0 deletions.
diff --git a/src/plugins/chart_expressions/expression_xy/common/__mocks__/index.ts b/src/plugins/chart_expressions/expression_xy/common/__mocks__/index.ts
@@ -67,6 +67,7 @@ export const createArgsWithLayers = (
   xTitle: '',
   yTitle: '',
   yRightTitle: '',
+  showTooltip: true,
   legend: {
     type: 'legendConfig',
     isVisible: false,

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.ts
@@ -171,6 +171,13 @@ export const layeredXyVisFunction: ExpressionFunctionDefinition<
       }),
       required: false,
     },
+    showTooltip: {
+      types: ['boolean'],
+      default: true,
+      help: i18n.translate('expressionXY.layeredXyVis.showTooltip.help', {
+        defaultMessage: 'Show tooltip',
+      }),
+    },
   },
   fn(data, args, handlers) {
     const layers = (args.layers ?? []).filter<XYExtendedLayerConfigResult>(
@@ -185,6 +192,7 @@ export const layeredXyVisFunction: ExpressionFunctionDefinition<
       value: {
         args: {
           ...args,
+          showTooltip: args.showTooltip ?? false,
           layers,
           ariaLabel:
             args.ariaLabel ??

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.ts
@@ -243,6 +243,13 @@ export const xyVisFunction: ExpressionFunctionDefinition<
         defaultMessage: 'Specifies the aria label of the xy chart',
       }),
     },
+    showTooltip: {
+      types: ['boolean'],
+      default: true,
+      help: i18n.translate('expressionXY.xyVis.showTooltip.help', {
+        defaultMessage: 'Show tooltip',
+      }),
+    },
   },
   fn(data, args, handlers) {
     const { dataLayers = [], referenceLineLayers = [], annotationLayers = [], ...restArgs } = args;
@@ -293,6 +300,7 @@ export const xyVisFunction: ExpressionFunctionDefinition<
       value: {
         args: {
           ...restArgs,
+          showTooltip: args.showTooltip ?? false,
           layers,
           ariaLabel:
             args.ariaLabel ??

diff --git a/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts
@@ -202,6 +202,7 @@ export interface XYArgs {
   hideEndzones?: boolean;
   valuesInLegend?: boolean;
   ariaLabel?: string;
+  showTooltip?: boolean;
 }
 
 export interface LayeredXYArgs {
@@ -225,6 +226,7 @@ export interface LayeredXYArgs {
   hideEndzones?: boolean;
   valuesInLegend?: boolean;
   ariaLabel?: string;
+  showTooltip?: boolean;
 }
 
 export interface XYProps {
@@ -248,6 +250,7 @@ export interface XYProps {
   hideEndzones?: boolean;
   valuesInLegend?: boolean;
   ariaLabel?: string;
+  showTooltip: boolean;
 }
 
 export interface AnnotationLayerArgs {

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
@@ -2064,6 +2064,7 @@ describe('XYChart component', () => {
     };
 
     const args: XYProps = {
+      showTooltip: true,
       xTitle: '',
       yTitle: '',
       yRightTitle: '',
@@ -2151,6 +2152,7 @@ describe('XYChart component', () => {
     };
 
     const args: XYProps = {
+      showTooltip: true,
       xTitle: '',
       yTitle: '',
       yRightTitle: '',
@@ -2222,6 +2224,7 @@ describe('XYChart component', () => {
     };
 
     const args: XYProps = {
+      showTooltip: true,
       xTitle: '',
       yTitle: '',
       yRightTitle: '',

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
@@ -24,6 +24,7 @@ import {
   DisplayValueStyle,
   RecursivePartial,
   AxisStyle,
+  TooltipType,
 } from '@elastic/charts';
 import { IconType } from '@elastic/eui';
 import { PaletteRegistry } from '@kbn/coloring';
@@ -526,6 +527,7 @@ export function XYChart({
         tooltip={{
           boundary: document.getElementById('app-fixed-viewport') ?? undefined,
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
+          type: args.showTooltip ? TooltipType.VerticalCursor : TooltipType.None,
         }}
         allowBrushingLastHistogramBin={isTimeViz}
         rotation={shouldRotate ? 90 : 0}