[Uptime] fix double scroll on legend height change (#92155)

elastic · Feb 23, 2021 · 7593a91 · 7593a91
1 parent ef5d5cf
commit 7593a91
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts
@@ -18,4 +18,4 @@ export const FIXED_AXIS_HEIGHT = 32;
 // number of items to display in canvas, since canvas can only have limited size
 export const CANVAS_MAX_ITEMS = 150;
 
-export const CHART_LEGEND_PADDING = 62;
+export const CHART_LEGEND_PADDING = 33;
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { IWaterfallContext } from '../context/waterfall_chart';
-import { WaterfallChartLegendContainer } from './styles';
 import { WaterfallChartProps } from './waterfall_chart';
 
 interface LegendProps {
@@ -18,12 +17,10 @@ interface LegendProps {
 
 export const Legend: React.FC<LegendProps> = ({ items, render }) => {
   return (
-    <WaterfallChartLegendContainer>
-      <EuiFlexGroup gutterSize="none">
-        {items.map((item, index) => {
-          return <EuiFlexItem key={index}>{render(item, index)}</EuiFlexItem>;
-        })}
-      </EuiFlexGroup>
-    </WaterfallChartLegendContainer>
+    <EuiFlexGroup gutterSize="none">
+      {items.map((item, index) => {
+        return <EuiFlexItem key={index}>{render(item, index)}</EuiFlexItem>;
+      })}
+    </EuiFlexGroup>
   );
 };
diff --git a/...ugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall.test.tsx b/...ugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall.test.tsx
@@ -11,6 +11,7 @@ import { renderLegendItem } from '../../step_detail/waterfall/waterfall_chart_wr
 import { render } from '../../../../../lib/helper/rtl_helpers';
 
 import 'jest-canvas-mock';
+import { waitFor } from '@testing-library/dom';
 
 describe('waterfall', () => {
   it('sets the correct height in case of full height', () => {
@@ -38,6 +39,8 @@ describe('waterfall', () => {
 
     const chartWrapper = getByTestId('waterfallOuterContainer');
 
-    expect(chartWrapper).toHaveStyleRule('height', 'calc(100vh - 62px)');
+    waitFor(() => {
+      expect(chartWrapper).toHaveStyleRule('height', 'calc(100vh - 62px)');
+    });
   });
 });
diff --git a/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
@@ -8,6 +8,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
 import { TickFormatter, DomainRange, BarStyleAccessor } from '@elastic/charts';
+import useWindowSize from 'react-use/lib/useWindowSize';
 import { useWaterfallContext } from '../context/waterfall_chart';
 import {
   WaterfallChartOuterContainer,
@@ -18,6 +19,7 @@ import {
   RelativeContainer,
   WaterfallChartFilterContainer,
   WaterfallChartAxisOnlyContainer,
+  WaterfallChartLegendContainer,
 } from './styles';
 import { CHART_LEGEND_PADDING, MAIN_GROW_SIZE, SIDEBAR_GROW_SIZE } from './constants';
 import { Sidebar } from './sidebar';
@@ -67,19 +69,23 @@ export const WaterfallChart = ({
     fetchedNetworkRequests,
   } = useWaterfallContext();
 
+  const { width } = useWindowSize();
+
   const chartWrapperDivRef = useRef<HTMLDivElement | null>(null);
+  const legendDivRef = useRef<HTMLDivElement | null>(null);
 
   const [height, setHeight] = useState<string>(maxHeight);
 
   const shouldRenderSidebar = !!(sidebarItems && renderSidebarItem);
   const shouldRenderLegend = !!(legendItems && legendItems.length > 0 && renderLegendItem);
 
   useEffect(() => {
-    if (fullHeight && chartWrapperDivRef.current) {
+    if (fullHeight && chartWrapperDivRef.current && legendDivRef.current) {
       const chartOffset = chartWrapperDivRef.current.getBoundingClientRect().top;
-      setHeight(`calc(100vh - ${chartOffset + CHART_LEGEND_PADDING}px)`);
+      const legendOffset = legendDivRef.current.getBoundingClientRect().height;
+      setHeight(`calc(100vh - ${chartOffset + CHART_LEGEND_PADDING + legendOffset}px)`);
     }
-  }, [chartWrapperDivRef, fullHeight]);
+  }, [chartWrapperDivRef, fullHeight, legendDivRef, width]);
 
   const chartsToDisplay = useBarCharts({ data });
 
@@ -135,7 +141,11 @@ export const WaterfallChart = ({
           </WaterfallChartAxisOnlyContainer>
         </EuiFlexGroup>
       </WaterfallChartOuterContainer>
-      {shouldRenderLegend && <Legend items={legendItems!} render={renderLegendItem!} />}
+      {shouldRenderLegend && (
+        <WaterfallChartLegendContainer ref={legendDivRef}>
+          <Legend items={legendItems!} render={renderLegendItem!} />
+        </WaterfallChartLegendContainer>
+      )}
       {renderFlyout && renderFlyout()}
     </RelativeContainer>
   );