styling (elastic#132539)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
klacabane · May 23, 2022 · bdb4966 · bdb4966
1 parent a807c90
commit bdb4966
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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};