From 1d8ef4c26890f5f1949d0da85675d6d496a42473 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 13 Sep 2021 15:44:48 +0300
Subject: [PATCH] [TSVB] Shows wrong labels when we get only one series after
 splitting (#111736) (#111936)

* use correct styles when after split we have only one series

* Fix lint

* Fix comments

* remove unused styles

* Update _vis_with_splits.scss

* Fix lint

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../application/components/_vis_with_splits.scss    | 13 +++++++++++++
 .../application/components/vis_with_splits.js       | 10 +++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

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 86c0af1c97980..b8ce63bd35dca 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';
@@ -41,8 +42,7 @@ export function visWithSplits(WrappedComponent) {
       [fieldFormatMap, model.id, model.series, palettesService, syncColors, visData]
     );
 
-    if (!model || !visData || !visData[model.id] || visData[model.id].series.length === 1)
-      return <WrappedComponent {...props} />;
+    if (!model || !visData || !visData[model.id]) return <WrappedComponent {...props} />;
     if (visData[model.id].series.every((s) => s.id.split(':').length === 1)) {
       return <WrappedComponent {...props} />;
     }
@@ -121,7 +121,11 @@ export function visWithSplits(WrappedComponent) {
       );
     });
 
-    return <div className="tvbSplitVis">{rows}</div>;
+    const hasOneVis = visData[model.id].series.length === 1;
+
+    return (
+      <div className={classNames('tvbSplitVis', { 'tvbSplitVis--one': hasOneVis })}>{rows}</div>
+    );
   }
 
   SplitVisComponent.displayName = `SplitVisComponent(${getDisplayName(WrappedComponent)})`;