[Vega] user should be able to toggle "textTruncate" option for toolti…

…ps (#80524) * [Vega] user should be able to override the default tooltip width Closes: #80325 * fix jest * fix PR comments Co-authored-by: Kibana Machine <[email protected]>
elastic · Oct 19, 2020 · f68e0a3 · f68e0a3
1 parent 90a7a9c
commit f68e0a3
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 6 deletions.
diff --git a/docs/user/dashboard/vega-reference.asciidoc b/docs/user/dashboard/vega-reference.asciidoc
@@ -296,7 +296,8 @@ a configuration option for changing the tooltip position and padding:
     kibana: {
       tooltips: {
         position: 'top',
-        padding: 15
+        padding: 15,
+        textTruncate: true,
       }
     }
   }

diff --git a/src/plugins/vis_type_vega/public/_vega_vis.scss b/src/plugins/vis_type_vega/public/_vega_vis.scss
@@ -113,14 +113,19 @@
     margin-bottom: $euiSizeS;
   }
 
+  &--textTruncate {
+    td {
+      @include euiTextTruncate;
+    }
+  }
+
   td {
-    @include euiTextTruncate;
     padding-top: $euiSizeXS;
     padding-bottom: $euiSizeXS;
 
     &.key {
-      color: $euiColorMediumShade;
       max-width: $euiSize * 10;
+      color: $euiColorMediumShade;
       text-align: right;
       padding-right: $euiSizeXS;
     }
@@ -131,7 +136,6 @@
     }
   }
 
-
   @media only screen and (max-width: map-get($euiBreakpoints, 'm')) {
     td {
       &.key {

diff --git a/src/plugins/vis_type_vega/public/data_model/types.ts b/src/plugins/vis_type_vega/public/data_model/types.ts
@@ -207,6 +207,7 @@ export interface TooltipConfig {
   position?: ToolTipPositions;
   padding?: number | Padding;
   centerOnMark?: boolean | number;
+  textTruncate?: boolean;
 }
 
 export interface DstObj {

diff --git a/src/plugins/vis_type_vega/public/data_model/vega_parser.test.js b/src/plugins/vis_type_vega/public/data_model/vega_parser.test.js
@@ -243,7 +243,7 @@ describe('VegaParser.parseSchema', () => {
 });
 
 describe('VegaParser._parseTooltips', () => {
-  function check(tooltips, position, padding, centerOnMark) {
+  function check(tooltips, position, padding, centerOnMark, textTruncate = false) {
     return () => {
       const vp = new VegaParser(tooltips !== undefined ? { config: { kibana: { tooltips } } } : {});
       vp._config = vp._parseConfig();
@@ -253,7 +253,7 @@ describe('VegaParser._parseTooltips', () => {
       } else if (position === false) {
         expect(vp._parseTooltips()).toEqual(false);
       } else {
-        expect(vp._parseTooltips()).toEqual({ position, padding, centerOnMark });
+        expect(vp._parseTooltips()).toEqual({ position, padding, centerOnMark, textTruncate });
       }
     };
   }
@@ -267,6 +267,7 @@ describe('VegaParser._parseTooltips', () => {
   test('centerOnMark=10', check({ centerOnMark: 10 }, 'top', 16, 10));
   test('centerOnMark=true', check({ centerOnMark: true }, 'top', 16, Number.MAX_VALUE));
   test('centerOnMark=false', check({ centerOnMark: false }, 'top', 16, -1));
+  test('textTruncate=false', check({ textTruncate: true }, 'top', 16, 50, true));
 
   test('false', check(false, false));
 

diff --git a/src/plugins/vis_type_vega/public/data_model/vega_parser.ts b/src/plugins/vis_type_vega/public/data_model/vega_parser.ts
@@ -409,6 +409,17 @@ The URL is an identifier only. Kibana and your browser will never access this UR
       );
     }
 
+    if (result.textTruncate === undefined) {
+      result.textTruncate = false;
+    } else if (typeof result.textTruncate !== 'boolean') {
+      throw new Error(
+        i18n.translate('visTypeVega.vegaParser.textTruncateConfigValueTypeErrorMessage', {
+          defaultMessage: '{configName} is expected to be a boolean',
+          values: { configName: 'textTruncate' },
+        })
+      );
+    }
+
     if (result.centerOnMark === undefined) {
       // if mark's width & height is less than this value, center on it
       result.centerOnMark = 50;

diff --git a/src/plugins/vis_type_vega/public/vega_view/vega_tooltip.js b/src/plugins/vis_type_vega/public/vega_view/vega_tooltip.js
@@ -50,6 +50,7 @@ export class TooltipHandler {
     this.position = opts.position;
     this.padding = opts.padding;
     this.centerOnMark = opts.centerOnMark;
+    this.textTruncate = opts.textTruncate;
 
     view.tooltip(this.handler.bind(this));
   }
@@ -73,6 +74,10 @@ export class TooltipHandler {
       }
     );
 
+    if (this.textTruncate) {
+      el.classList.add('vgaVis__tooltip--textTruncate');
+    }
+
     // Sanitized HTML is created by the tooltip library,
     // with a large number of tests, hence suppressing eslint here.
     // eslint-disable-next-line no-unsanitized/property