diff --git a/docs/user/dashboard/vega-reference.asciidoc b/docs/user/dashboard/vega-reference.asciidoc index 378f7a53a665..d6593143e4f6 100644 --- 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 index 12108c7ba3de..6a0d20246089 100644 --- 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 index 11bdf4f06402..acd35e174762 100644 --- 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 index c9f8e0a4394e..9fb80c6a1b19 100644 --- 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 index 894c34c494c1..9cbb38fa87a7 100644 --- 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 index 7b0274478cea..60f2f6e5a13d 100644 --- 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