diff --git a/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss b/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss index 36ab49c0cc807..6fa931f7ec80b 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss @@ -23,3 +23,16 @@ min-height: $tvbSplitBlockVisMinSize / 1.25; } } + +// When there is only one visualization, expand the full height and remove all minimum sizes +.tvbSplitVis--one { + flex: 1; + + .tvbSplitVis__split { + min-width: 0; + + > .tvbVis { + min-height: 0; + } + } +} diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js b/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js index 945a7ac986d3e..ad93e4dc4b4a1 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js @@ -7,6 +7,7 @@ */ import React, { useCallback } from 'react'; +import classNames from 'classnames'; import { getDisplayName } from './lib/get_display_name'; import { labelDateFormatter } from './lib/label_date_formatter'; import { findIndex, first } from 'lodash'; @@ -40,8 +41,7 @@ export function visWithSplits(WrappedComponent) { [model, palettesService, syncColors, visData] ); - if (!model || !visData || !visData[model.id] || visData[model.id].series.length === 1) - return ; + if (!model || !visData || !visData[model.id]) return ; if (visData[model.id].series.every((s) => s.id.split(':').length === 1)) { return ; } @@ -119,7 +119,11 @@ export function visWithSplits(WrappedComponent) { ); }); - return
{rows}
; + const hasOneVis = visData[model.id].series.length === 1; + + return ( +
{rows}
+ ); } SplitVisComponent.displayName = `SplitVisComponent(${getDisplayName(WrappedComponent)})`;