use correct styles when after split we have only one series

elastic · Sep 9, 2021 · 1bb82a8 · 1bb82a8
1 parent 29142a6
commit 1bb82a8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 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,12 @@
     min-height: $tvbSplitBlockVisMinSize / 1.25;
   }
 }
+
+.tvbSplitVis__split__one {
+  display: flex;
+  flex: 1 0 25%;
+}
+
+.tvbSplitVis__one {
+  flex: 1;
+}
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
@@ -40,8 +40,7 @@ export function visWithSplits(WrappedComponent) {
       [model, 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} />;
     }
@@ -105,7 +104,10 @@ export function visWithSplits(WrappedComponent) {
         },
       };
       return (
-        <div key={key} className="tvbSplitVis__split">
+        <div
+          key={key}
+          className={visData[model.id].series.length === 1 ? 'tvbSplitVis__split__one' : 'tvbSplitVis__split'}
+        >
           <WrappedComponent
             model={model}
             visData={newVisData}
@@ -119,7 +121,13 @@ export function visWithSplits(WrappedComponent) {
       );
     });
 
-    return <div className="tvbSplitVis">{rows}</div>;
+    return (
+      <div
+        className={`tvbSplitVis ${visData[model.id].series.length === 1 ? 'tvbSplitVis__one' : ''}`}
+      >
+        {rows}
+      </div>
+    );
   }
 
   SplitVisComponent.displayName = `SplitVisComponent(${getDisplayName(WrappedComponent)})`;