fix double scroll

elastic · Feb 22, 2021 · 58ec724 · 58ec724
1 parent fde2c84
commit 58ec724
Show file tree

Hide file tree

Showing 3 changed files with 21 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,22 +8,19 @@
 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 {
   items: Required<IWaterfallContext>['legendItems'];
   render: Required<WaterfallChartProps>['renderLegendItem'];
 }
 
-export const Legend: React.FC<LegendProps> = ({ items, render }) => {
+export const Legend: React.FC<LegendProps> = ({ items, ref, 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/...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>
   );