From bdb49661db64b85220d38b3fd36e448022141f04 Mon Sep 17 00:00:00 2001
From: Angela Chuang <6295984+angorayc@users.noreply.github.com>
Date: Mon, 23 May 2022 13:13:23 +0100
Subject: [PATCH] styling (#132539)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../public/common/components/charts/areachart.tsx          | 7 ++++---
 .../public/common/components/charts/barchart.tsx           | 7 ++++---
 .../public/common/components/charts/common.tsx             | 5 +++++
 .../common/components/visualization_actions/index.tsx      | 1 +
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
index 313b216eb19ea6..8da0b0b707be4c 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
@@ -19,7 +19,7 @@ import {
 
 import { getOr, get, isNull, isNumber } from 'lodash/fp';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import { useThrottledResizeObserver } from '../utils';
 import { ChartPlaceHolder } from './chart_place_holder';
 import { useTimeZone } from '../../lib/kibana';
@@ -32,6 +32,7 @@ import {
   WrappedByAutoSizer,
   useTheme,
   Wrapper,
+  ChartWrapper,
 } from './common';
 import { VisualizationActions, HISTOGRAM_ACTIONS_BUTTON_CLASS } from '../visualization_actions';
 import { VisualizationActionsProps } from '../visualization_actions/types';
@@ -165,7 +166,7 @@ export const AreaChartComponent: React.FC<AreaChartComponentProps> = ({
     <Wrapper>
       <HoverVisibilityContainer targetClassNames={[HISTOGRAM_ACTIONS_BUTTON_CLASS]}>
         {isValidSeriesExist && areaChart && (
-          <EuiFlexGroup gutterSize="none">
+          <ChartWrapper gutterSize="none">
             <EuiFlexItem grow={true}>
               <WrappedByAutoSizer ref={measureRef} height={chartHeight}>
                 <AreaChartBase
@@ -176,7 +177,7 @@ export const AreaChartComponent: React.FC<AreaChartComponentProps> = ({
                 />
               </WrappedByAutoSizer>
             </EuiFlexItem>
-          </EuiFlexGroup>
+          </ChartWrapper>
         )}
         {!isValidSeriesExist && (
           <ChartPlaceHolder height={chartHeight} width={chartWidth} data={areaChart} />
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx
index fcea5c8d77dc9f..91e328c8767751 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
 import { getOr, get, isNumber } from 'lodash/fp';
@@ -32,6 +32,7 @@ import {
   WrappedByAutoSizer,
   useTheme,
   Wrapper,
+  ChartWrapper,
 } from './common';
 import { DraggableLegend } from './draggable_legend';
 import { LegendItem } from './draggable_legend_item';
@@ -210,7 +211,7 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
     <Wrapper>
       <HoverVisibilityContainer targetClassNames={[HISTOGRAM_ACTIONS_BUTTON_CLASS]}>
         {isValidSeriesExist && barChart && (
-          <EuiFlexGroup gutterSize="none">
+          <ChartWrapper gutterSize="none">
             <EuiFlexItem grow={true}>
               <WrappedByAutoSizer ref={measureRef} height={chartHeight}>
                 <BarChartBase
@@ -227,7 +228,7 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
             <LegendFlexItem grow={false}>
               <DraggableLegend legendItems={legendItems} height={height} />
             </LegendFlexItem>
-          </EuiFlexGroup>
+          </ChartWrapper>
         )}
         {!isValidSeriesExist && (
           <ChartPlaceHolder height={chartHeight} width={chartWidth} data={barChart} />
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
index b96d016d9b186d..cc24da4f27eb71 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
@@ -20,6 +20,7 @@ import {
   AxisStyle,
   BarSeriesStyle,
 } from '@elastic/charts';
+import { EuiFlexGroup } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -152,3 +153,7 @@ export const checkIfAllValuesAreZero = (data: ChartSeriesData[] | null | undefin
 export const Wrapper = styled.div`
   position: relative;
 `;
+
+export const ChartWrapper = styled(EuiFlexGroup)`
+  z-index: 0;
+`;
diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/index.tsx
index 4ee0034ed4d02a..e22865c18bd997 100644
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/index.tsx
@@ -30,6 +30,7 @@ const Wrapper = styled.div`
     position: absolute;
     top: 0;
     right: 0;
+    z-index: 1;
   }
   &.histogram-viz-actions {
     padding: ${({ theme }) => theme.eui.paddingSizes.s};