From 559810bfc1a2991de1adbdd6d868128e459209ac Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 22 Jul 2019 19:28:16 +0200 Subject: [PATCH 1/8] Fix tooltip text overflow --- .../tooltip/_hierarchical_tooltip.html | 12 +++++- .../tooltip/_pointseries_tooltip.html | 11 +++-- .../vis/components/tooltip/_tooltip.scss | 5 +++ .../public/vis/components/tooltip/tooltip.js | 41 +++++++++++++++++++ 4 files changed, 64 insertions(+), 5 deletions(-) diff --git a/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html index e57b078595401..6651fd021b0fa 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html +++ b/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html @@ -16,8 +16,16 @@ - {{row.field}} - {{row.bucket}} + +
+ + {{row.field}} +
+ + +
+ {{row.bucket}} + {{row.metric}} diff --git a/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html index d6054594ec776..0a9c7cd5cc95b 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html +++ b/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html @@ -1,10 +1,15 @@ - + diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss index 280c843247bd5..3e31dbee19569 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss +++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss @@ -23,6 +23,7 @@ td, th { padding: $euiSizeXS; + overflow-wrap: break-word; } } } @@ -41,6 +42,10 @@ margin-top: $euiSizeS; } } +.visTooltip__labelContainer, +.visTooltip__valueContainer { + overflow-wrap: break-word; +} .visTooltip__headerIcon { flex: 0 0 auto; diff --git a/src/legacy/ui/public/vis/components/tooltip/tooltip.js b/src/legacy/ui/public/vis/components/tooltip/tooltip.js index 6008d5cf7961a..2f546c898c9ee 100644 --- a/src/legacy/ui/public/vis/components/tooltip/tooltip.js +++ b/src/legacy/ui/public/vis/components/tooltip/tooltip.js @@ -22,9 +22,13 @@ import _ from 'lodash'; import { Binder } from '../../../binder'; import { positionTooltip } from './position_tooltip'; import $ from 'jquery'; +import theme from '@elastic/eui/dist/eui_theme_light.json'; let allContents = []; +const tooltipColumnPadding = Number(theme.euiSizeXS.slice('px')[0]) * 2; +const tooltipTableMargin = Number(theme.euiSizeS.slice('px')[0]) * 2; +const tooltipMaxWidth = Number(theme.euiSizeXL.slice('px')[0]) * 10; /** * Add tooltip and listeners to visualization elements * @@ -97,6 +101,43 @@ Tooltip.prototype.show = function () { left: placement.left, top: placement.top }); + + const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length; + if (tooltipColumns === 2) { + // on pointseries tooltip + const tooltipWidth = $tooltip.outerWidth(); + const valueColumn = $tooltip.find('tr:nth-of-type(1) > td:nth-child(2)'); + if (valueColumn.length !== 1) { + return; + } + const valueColumnSize = valueColumn.outerWidth(); + const isGratherThanHalf = valueColumnSize > tooltipWidth / 2; + const containerMaxWidth = isGratherThanHalf + ? tooltipWidth / 2 - tooltipTableMargin - tooltipColumnPadding * 2 + : tooltipWidth - valueColumnSize - tooltipTableMargin - tooltipColumnPadding; + + $tooltip.find('.visTooltip__labelContainer').css({ + 'max-width': containerMaxWidth, + }); + if (isGratherThanHalf && tooltipWidth === tooltipMaxWidth) { + $tooltip.find('.visTooltip__valueContainer').css({ + 'max-width': containerMaxWidth, + }); + } + } else if(tooltipColumns === 3) { + // on hierarchical tooltip + const tooltipWidth = $tooltip.outerWidth(); + const valueColumn = $tooltip.find('tr:nth-of-type(1) > td:nth-child(3)'); + if (valueColumn.length !== 1) { + return; + } + const valueColumnSize = valueColumn.outerWidth(); + const containerMaxWidth = (tooltipWidth - valueColumnSize - tooltipTableMargin) / 2 - tooltipColumnPadding; + + $tooltip.find('.visTooltip__labelContainer').css({ + 'max-width': containerMaxWidth + }); + } }; /** From fa2e046d7b5498c6c5f1730732cc5e7523820ef6 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 22 Jul 2019 21:24:50 +0200 Subject: [PATCH 2/8] Fix added spaces on td --- .../vis/components/tooltip/_hierarchical_tooltip.html | 8 ++------ .../vis/components/tooltip/_pointseries_tooltip.html | 10 +++------- src/legacy/ui/public/vis/components/tooltip/tooltip.js | 8 ++++---- 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html index 6651fd021b0fa..43c4793384bf1 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html +++ b/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html @@ -17,14 +17,10 @@ diff --git a/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html index 0a9c7cd5cc95b..9e82739a57f0f 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html +++ b/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html @@ -2,14 +2,10 @@ +
{{detail.label}}
+ diff --git a/src/legacy/ui/public/vis/components/tooltip/tooltip.js b/src/legacy/ui/public/vis/components/tooltip/tooltip.js index 2f546c898c9ee..04d8753e36caf 100644 --- a/src/legacy/ui/public/vis/components/tooltip/tooltip.js +++ b/src/legacy/ui/public/vis/components/tooltip/tooltip.js @@ -26,9 +26,10 @@ import theme from '@elastic/eui/dist/eui_theme_light.json'; let allContents = []; -const tooltipColumnPadding = Number(theme.euiSizeXS.slice('px')[0]) * 2; -const tooltipTableMargin = Number(theme.euiSizeS.slice('px')[0]) * 2; -const tooltipMaxWidth = Number(theme.euiSizeXL.slice('px')[0]) * 10; +const tooltipColumnPadding = Number(theme.euiSizeXS.split('px')[0]) * 2; +const tooltipTableMargin = Number(theme.euiSizeS.split('px')[0]) * 2; +const tooltipMaxWidth = Number(theme.euiSizeXL.split('px')[0]) * 10; + /** * Add tooltip and listeners to visualization elements * @@ -101,7 +102,6 @@ Tooltip.prototype.show = function () { left: placement.left, top: placement.top }); - const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length; if (tooltipColumns === 2) { // on pointseries tooltip From cabd2ef0470c45a82799976630f1895f5c565674 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 22 Jul 2019 21:54:55 +0200 Subject: [PATCH 3/8] Add IE11 support --- src/legacy/ui/public/vis/components/tooltip/_tooltip.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss index 3e31dbee19569..cf963f7bd2ee7 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss +++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss @@ -24,6 +24,7 @@ th { padding: $euiSizeXS; overflow-wrap: break-word; + word-wrap: break-word; } } } @@ -45,6 +46,7 @@ .visTooltip__labelContainer, .visTooltip__valueContainer { overflow-wrap: break-word; + word-wrap: break-word; } .visTooltip__headerIcon { From 34c25827abd407311bb0d0560d3aac345bd9f2bf Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 31 Jul 2019 11:17:53 +0200 Subject: [PATCH 4/8] Fix parsing css eui styles --- src/legacy/ui/public/vis/components/tooltip/tooltip.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legacy/ui/public/vis/components/tooltip/tooltip.js b/src/legacy/ui/public/vis/components/tooltip/tooltip.js index 04d8753e36caf..dc6dd23f6938e 100644 --- a/src/legacy/ui/public/vis/components/tooltip/tooltip.js +++ b/src/legacy/ui/public/vis/components/tooltip/tooltip.js @@ -26,9 +26,9 @@ import theme from '@elastic/eui/dist/eui_theme_light.json'; let allContents = []; -const tooltipColumnPadding = Number(theme.euiSizeXS.split('px')[0]) * 2; -const tooltipTableMargin = Number(theme.euiSizeS.split('px')[0]) * 2; -const tooltipMaxWidth = Number(theme.euiSizeXL.split('px')[0]) * 10; +const tooltipColumnPadding = parseInt(theme.euiSizeXS || 0, 10) * 2; +const tooltipTableMargin = parseInt(theme.euiSizeS || 0, 10) * 2; +const tooltipMaxWidth = parseInt(theme.euiSizeXL || 0, 10) * 10; /** * Add tooltip and listeners to visualization elements From 33bb3d7c1edff287b710cbead97527fbd8db8d44 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 31 Jul 2019 11:19:37 +0200 Subject: [PATCH 5/8] Apply euiTextOverflowWrap --- src/legacy/ui/public/vis/components/tooltip/_tooltip.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss index cf963f7bd2ee7..75fa432c85a95 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss +++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss @@ -45,8 +45,7 @@ } .visTooltip__labelContainer, .visTooltip__valueContainer { - overflow-wrap: break-word; - word-wrap: break-word; + @include euiTextOverflowWrap; } .visTooltip__headerIcon { From da74cc7d85801d1284ed00fc8bb5044e783afc85 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 12 Aug 2019 12:41:05 +0200 Subject: [PATCH 6/8] Add euiTextOverflowWrap to table td/th --- src/legacy/ui/public/vis/components/tooltip/_tooltip.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss index 75fa432c85a95..7602bd721d33b 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss +++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss @@ -23,8 +23,7 @@ td, th { padding: $euiSizeXS; - overflow-wrap: break-word; - word-wrap: break-word; + @include euiTextOverflowWrap; } } } From e9f3120dd81b4cbaacd52da887d7f430ae4ddc4f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 13 Aug 2019 18:08:16 +0200 Subject: [PATCH 7/8] Revert to overflow-wrap and word-wrap css --- src/legacy/ui/public/vis/components/tooltip/_tooltip.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss index 7602bd721d33b..cf963f7bd2ee7 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss +++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss @@ -23,7 +23,8 @@ td, th { padding: $euiSizeXS; - @include euiTextOverflowWrap; + overflow-wrap: break-word; + word-wrap: break-word; } } } @@ -44,7 +45,8 @@ } .visTooltip__labelContainer, .visTooltip__valueContainer { - @include euiTextOverflowWrap; + overflow-wrap: break-word; + word-wrap: break-word; } .visTooltip__headerIcon { From 0ac76fa1c8754078b80dbd460aeb06eb243a1dc6 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 13 Aug 2019 18:23:20 +0200 Subject: [PATCH 8/8] Add text-align: left for IE11, add few comments --- src/legacy/ui/public/vis/components/tooltip/_tooltip.scss | 1 + src/legacy/ui/public/vis/components/tooltip/tooltip.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss index cf963f7bd2ee7..451ecc80844dd 100644 --- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss +++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss @@ -22,6 +22,7 @@ table { td, th { + text-align: left; padding: $euiSizeXS; overflow-wrap: break-word; word-wrap: break-word; diff --git a/src/legacy/ui/public/vis/components/tooltip/tooltip.js b/src/legacy/ui/public/vis/components/tooltip/tooltip.js index dc6dd23f6938e..7c395a2f4dc0e 100644 --- a/src/legacy/ui/public/vis/components/tooltip/tooltip.js +++ b/src/legacy/ui/public/vis/components/tooltip/tooltip.js @@ -102,10 +102,13 @@ Tooltip.prototype.show = function () { left: placement.left, top: placement.top }); + // The number of columns on the tooltip is currently the only + // thing that differenciate one tooltip; from another const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length; if (tooltipColumns === 2) { // on pointseries tooltip const tooltipWidth = $tooltip.outerWidth(); + // get the last column to the right const valueColumn = $tooltip.find('tr:nth-of-type(1) > td:nth-child(2)'); if (valueColumn.length !== 1) { return; @@ -127,6 +130,7 @@ Tooltip.prototype.show = function () { } else if(tooltipColumns === 3) { // on hierarchical tooltip const tooltipWidth = $tooltip.outerWidth(); + // get the last column to the right (3rd column) const valueColumn = $tooltip.find('tr:nth-of-type(1) > td:nth-child(3)'); if (valueColumn.length !== 1) { return;
{{detail.label}} +
+ {{detail.label}} +
+ 		- {{detail.value}} - ({{detail.percent}}) +
+ {{detail.value}} ({{detail.percent}}) +
-
- - {{row.field}} -
+
{{row.field}}
 -
- {{row.bucket}} +
{{row.bucket}}
{{row.metric}}
-
- {{detail.label}} -
- 		-
- {{detail.value}} ({{detail.percent}}) -
+
{{detail.value}} ({{detail.percent}})