From 380b31158a846bcf2c465a075499f83c0a1284c3 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 23 Feb 2021 10:50:33 -0500 Subject: [PATCH] [Uptime] fix double scroll on legend height change (#92155) (#92405) Co-authored-by: Shahzad --- .../waterfall/components/constants.ts | 2 +- .../synthetics/waterfall/components/legend.tsx | 13 +++++-------- .../waterfall/components/waterfall.test.tsx | 5 ++++- .../waterfall/components/waterfall_chart.tsx | 18 ++++++++++++++---- 4 files changed, 24 insertions(+), 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 index a4b75174543a8..5b49e0fd529b7 100644 --- 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 index 7fa5a3c190e3b..c746a5cc63a9b 100644 --- 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 = ({ items, render }) => { return ( - - - {items.map((item, index) => { - return {render(item, index)}; - })} - - + + {items.map((item, index) => { + return {render(item, index)}; + })} + ); }; diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall.test.tsx index 528d749f576fc..28e82930f3341 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall.test.tsx +++ b/x-pack/plugins/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/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx index a791f099ab9fe..59990b29db5db 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx +++ b/x-pack/plugins/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,7 +69,10 @@ export const WaterfallChart = ({ fetchedNetworkRequests, } = useWaterfallContext(); + const { width } = useWindowSize(); + const chartWrapperDivRef = useRef(null); + const legendDivRef = useRef(null); const [height, setHeight] = useState(maxHeight); @@ -75,11 +80,12 @@ export const WaterfallChart = ({ 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 = ({ - {shouldRenderLegend && } + {shouldRenderLegend && ( + + + + )} {renderFlyout && renderFlyout()} );