[SecuritySolution] Replace risk score over time with Lens Embeddable

x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx

@@ -17,6 +17,7 @@ import {
   PartitionLayout,
   defaultPartitionValueFormatter,
 } from '@elastic/charts';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled from 'styled-components';
 import { useTheme } from './common';
 import { DraggableLegend } from './draggable_legend';
@@ -56,21 +57,31 @@ export interface DonutChartProps {
 export interface DonutChartWrapperProps {
   children?: React.ReactElement;
   dataExists: boolean;
+  donutTextWrapperClassName?: string;
+  donutTextWrapperStyles?: FlattenSimpleInterpolation;
+  isChartEmbeddablesEnabled?: boolean;
   label?: React.ReactElement | string;
   title: React.ReactElement | string | number | null;
-  isChartEmbeddablesEnabled?: boolean;
 }
 
 /* Make this position absolute in order to overlap the text onto the donut */
 export const DonutTextWrapper = styled(EuiFlexGroup)<
-  EuiFlexGroupProps & { $isChartEmbeddablesEnabled?: boolean; $dataExists?: boolean }
+  EuiFlexGroupProps & {
+    $isChartEmbeddablesEnabled?: boolean;
+    $dataExists?: boolean;
+    className?: string;
+    donutTextWrapperStyles?: FlattenSimpleInterpolation;
+  }
 >`
   top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
     $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`};
   width: 100%;
   max-width: 77px;
   position: absolute;
   z-index: 1;
+
+  ${({ className, donutTextWrapperStyles }) =>
+    className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''}
 `;
 
 export const StyledEuiFlexItem = styled(EuiFlexItem)`
@@ -81,6 +92,8 @@ export const StyledEuiFlexItem = styled(EuiFlexItem)`
 const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   children,
   dataExists,
+  donutTextWrapperClassName,
+  donutTextWrapperStyles,
   isChartEmbeddablesEnabled,
   label,
   title,
@@ -106,7 +119,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
           $dataExists={dataExists}
           $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
           alignItems="center"
+          className={donutTextWrapperClassName}
           direction="column"
+          donutTextWrapperStyles={donutTextWrapperStyles}
           gutterSize="none"
           justifyContent="center"
         >

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/risk_scores/risk_score_donut.ts

@@ -28,13 +28,13 @@ export const getRiskScoreDonutAttributes: GetLensAttributes = (
             metrics: ['75179122-96fc-40e1-93b4-8e9310af5f06'],
             numberDisplay: 'value',
             categoryDisplay: 'hide',
-            legendDisplay: 'hide',
+            legendDisplay: 'show',
             nestedLegend: true,
             layerType: 'data',
-            legendSize: 'small',
-            legendPosition: 'right',
+            legendSize: 'medium',
+            legendPosition: 'left',
             percentDecimals: 2,
-            emptySizeRatio: 0.8,
+            emptySizeRatio: 0.82,
           },
         ],
       },

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/risk_scores/risk_score_over_time_area.test.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { wrapper } from '../../../mocks';
+
+import { useLensAttributes } from '../../../use_lens_attributes';
+
+import { getRiskScoreOverTimeAreaAttributes } from './risk_score_over_time_area';
+
+jest.mock('../../../../../containers/sourcerer', () => ({
+  useSourcererDataView: jest.fn().mockReturnValue({
+    selectedPatterns: ['auditbeat-mytest-*'],
+    dataViewId: 'security-solution-my-test',
+    indicesExist: true,
+  }),
+}));
+
+jest.mock('../../../../../utils/route/use_route_spy', () => ({
+  useRouteSpy: jest.fn().mockReturnValue([
+    {
+      detailName: 'mockHost',
+      pageName: 'hosts',
+      tabName: 'hostRisk',
+    },
+  ]),
+}));
+
+jest.mock('uuid', () => ({
+  v4: jest
+    .fn()
+    .mockReturnValueOnce('d594baeb-5eca-480c-8885-ba79eaf41372')
+    .mockReturnValueOnce('c604baeb-5eca-480c-8885-ba79eaf41372')
+    .mockReturnValueOnce('e614baeb-5eca-480c-8885-ba79eaf41372')
+    .mockReturnValue('1dd5663b-f062-43f8-8688-fc8166c2ca8e'),
+}));
+
+describe('getRiskScoreOverTimeAreaAttributes', () => {
+  it('should render', () => {
+    const { result } = renderHook(
+      () =>
+        useLensAttributes({
+          getLensAttributes: getRiskScoreOverTimeAreaAttributes,
+          stackByField: 'host',
+          extraOptions: {
+            spaceId: 'mockSpaceId',
+          },
+        }),
+      { wrapper }
+    );
+
+    expect(result?.current).toMatchSnapshot();
+  });
+});