[TSVB] Shows wrong labels when we get only one series after splitting (…

…#111736) * 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 <[email protected]>
elastic · Sep 13, 2021 · bfe1c55 · bfe1c55
1 parent 200efca
commit bfe1c55
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 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
@@ -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
@@ -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)})`;