bump(ui): recharts deps to v2 (#8203)

* bump(ui): recharts deps to v2

* fix legend rendering

* fix console warnings

openmetadata-ui/src/main/resources/ui/jest.config.js

@@ -39,8 +39,6 @@ module.exports = {
   // "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
   // "moduleFileExtensions": ["js", "json","jsx" ],
 
-  // Test Environment
-  testEnvironment: 'jest-environment-jsdom-fourteen',
   setupFilesAfterEnv: ['./src/setupTests.js'],
   clearMocks: true,
   moduleNameMapper: {

openmetadata-ui/src/main/resources/ui/package.json

@@ -82,7 +82,7 @@
     "react-toastify": "^8.2.0",
     "reactflow": "^11.1.1",
     "reactjs-localstorage": "^1.0.1",
-    "recharts": "^1.8.5",
+    "recharts": "2.1.0",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "showdown": "^2.1.0",
@@ -192,7 +192,6 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^26.6.3",
-    "jest-environment-jsdom-fourteen": "^1.0.1",
     "jest-sonar-reporter": "^2.0.0",
     "lint-staged": "^10.3.0",
     "mini-css-extract-plugin": "0.9.0",

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerDetailsCard.tsx

@@ -15,7 +15,6 @@ import { Card, Col, Row, Space, Statistic } from 'antd';
 import React from 'react';
 import {
   Legend,
-  LegendValueFormatter,
   Line,
   LineChart,
   ResponsiveContainer,
@@ -34,8 +33,22 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
 }) => {
   const { data, information } = chartCollection;
 
-  const renderColorfulLegendText: LegendValueFormatter = (value, entry) => {
+  const renderColorfulLegendText = (
-    return <span style={{ color: entry?.color }}>{value}</span>;
+    value: string,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    entry: any
+  ) => <span style={{ color: entry?.color }}>{value}</span>;
+
+  const tooltipFormatter = (value: string | number | (string | number)[]) => {
+    const numValue = value as number;
+
+    return (
+      <>
+        {tickFormatter
+          ? `${numValue.toFixed(2)}${tickFormatter}`
+          : formatNumberWithComma(numValue)}
+      </>
+    );
   };
 
   return (
@@ -78,13 +91,7 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
                     tickFormatter ? `${props}${tickFormatter}` : props
                   }
                 />
-                <Tooltip
+                <Tooltip formatter={tooltipFormatter} />
-                  formatter={(value) =>
-                    tickFormatter
-                      ? `${(value as number).toFixed(2)}${tickFormatter}`
-                      : formatNumberWithComma(value as number)
-                  }
-                />
                 {information.map((info) => (
                   <Line
                     dataKey={info.dataKey}

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx

@@ -14,7 +14,7 @@
 import { Col, Row, Select, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
 import {
   Legend,
   Line,
@@ -104,7 +104,10 @@ const TestSummary: React.FC<TestSummaryProps> = ({ data }) => {
     });
   };
 
-  const updatedDot: LineProps['dot'] = (props) => {
+  const updatedDot: LineProps['dot'] = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: any
+  ): ReactElement<SVGElement> => {
     const { cx = 0, cy = 0, payload } = props;
     const fill =
       payload.status === TestCaseStatus.Success

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerGraph.component.tsx

@@ -11,33 +11,17 @@
  *  limitations under the License.
  */
 
-import React from 'react';
+import React, { FC, ReactNode } from 'react';
 import { Area, AreaChart, Tooltip } from 'recharts';
 
-type Props = {
-  data: Array<{ date: Date | undefined; value: number | undefined }>;
-  margin?: { top: number; left: number; right: number; bottom: number };
-  toolTipPos?: { x: number; y: number };
-  height?: number;
-  className?: string;
-  width?: number;
-};
-const TableProfilerGraph = ({
-  data,
-  margin,
-  toolTipPos,
-  height,
-  className = '',
-  width = 150,
-}: Props) => {
 const CustomTooltip = ({
   active,
   payload,
 }: {
-    active: boolean;
+  active?: boolean;
   // eslint-disable-next-line
-    payload: any;
+  payload?: any;
-  }) => {
+}): ReactNode => {
   if (active && payload && payload.length) {
     return (
       <div className="tw-py-1.5 tw-px-1 tw-bg-black tw-opacity-50 tw-rounded tw-text-white tw-text-xs tw-font-medium">
@@ -47,9 +31,26 @@ const TableProfilerGraph = ({
     );
   }
 
-    return null;
+  return <></>;
 };
 
+type Props = {
+  data: Array<{ date: Date | undefined; value: number | undefined }>;
+  margin?: { top: number; left: number; right: number; bottom: number };
+  toolTipPos?: { x: number; y: number };
+  height?: number;
+  className?: string;
+  width?: number;
+};
+
+const TableProfilerGraph: FC<Props> = ({
+  data,
+  margin,
+  toolTipPos,
+  height,
+  className = '',
+  width = 150,
+}: Props) => {
   return (
     <div className={className}>
       <AreaChart