[Dashboard] Fix Lens and TSVB chart tooltip positioning relative to g…

…lobal headers (#94247)
elastic · Apr 5, 2021 · d4b0f92 · d4b0f92
1 parent 7da1b82
commit d4b0f92
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 2 deletions.
diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
@@ -11,6 +11,16 @@
   min-height: 100%;
 }
 
+#app-fixed-viewport {
+  pointer-events: none;
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .app-wrapper {
   display: flex;
   flex-flow: column nowrap;
@@ -35,6 +45,10 @@
 @mixin kbnAffordForHeader($headerHeight) {
   padding-top: $headerHeight;
 
+  #app-fixed-viewport {
+    top: $headerHeight;
+  }
+
   .euiFlyout,
   .euiCollapsibleNav {
     top: $headerHeight;

diff --git a/src/core/public/rendering/rendering_service.tsx b/src/core/public/rendering/rendering_service.tsx
@@ -52,6 +52,7 @@ export class RenderingService {
           {chromeHeader}
           <AppWrapper chromeVisible$={chrome.getIsVisible$()}>
             <div className="app-wrapper-panel">
+              <div id="app-fixed-viewport" />
               <div id="globalBannerList">{bannerComponent}</div>
               <AppContainer classes$={chrome.getApplicationClasses$()}>{appComponent}</AppContainer>
             </div>

diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -149,6 +149,7 @@ export const TimeSeries = ({
         tooltip={{
           snap: true,
           type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor,
+          boundary: document.getElementById('app-fixed-viewport') ?? undefined,
           headerFormatter: tooltipFormatter,
         }}
         externalPointerEvents={{ tooltip: { visible: false } }}

diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -148,13 +148,15 @@ export const XYSettings: FC<XYSettingsProps> = ({
       : headerValueFormatter &&
         (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
 
+  const boundary = document.getElementById('app-fixed-viewport') ?? undefined;
   const tooltipProps: TooltipProps = tooltip.detailedTooltip
     ? {
         ...tooltip,
+        boundary,
         customTooltip: tooltip.detailedTooltip(headerFormatter),
         headerFormatter: undefined,
       }
-    : { ...tooltip, headerFormatter };
+    : { ...tooltip, boundary, headerFormatter };
 
   return (
     <Settings

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -251,6 +251,7 @@ export function PieComponent(
 
     onClickValue(desanitizeFilterContext(context));
   };
+
   return (
     <VisualizationContainer
       reportTitle={props.args.title}
@@ -260,6 +261,7 @@ export function PieComponent(
     >
       <Chart>
         <Settings
+          tooltip={{ boundary: document.getElementById('app-fixed-viewport') ?? undefined }}
           debugState={window._echDebugStateFlag ?? false}
           // Legend is hidden in many scenarios
           // - Tiny preview

diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -333,7 +333,6 @@ export function XYChart({
   const { legend, layers, fittingFunction, gridlinesVisibilitySettings, valueLabels } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
-
   const filteredLayers = getFilteredLayers(layers, data);
 
   if (filteredLayers.length === 0) {
@@ -547,6 +546,7 @@ export function XYChart({
         }}
         baseTheme={chartBaseTheme}
         tooltip={{
+          boundary: document.getElementById('app-fixed-viewport') ?? undefined,
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
         }}
         rotation={shouldRotate ? 90 : 0}