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) => {
-    return <span style={{ color: entry?.color }}>{value}</span>;
+  const renderColorfulLegendText = (
+    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
-                  formatter={(value) =>
-                    tickFormatter
-                      ? `${(value as number).toFixed(2)}${tickFormatter}`
-                      : formatNumberWithComma(value as number)
-                  }
-                />
+                <Tooltip formatter={tooltipFormatter} />
                 {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,9 +11,29 @@
  *  limitations under the License.
  */
 
-import React from 'react';
+import React, { FC, ReactNode } from 'react';
 import { Area, AreaChart, Tooltip } from 'recharts';
 
+const CustomTooltip = ({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  // eslint-disable-next-line
+  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">
+        <div>Value {payload[0].value}</div>
+        <div>Date {payload[0].payload.date.toString()}</div>
+      </div>
+    );
+  }
+
+  return <></>;
+};
+
 type Props = {
   data: Array<{ date: Date | undefined; value: number | undefined }>;
   margin?: { top: number; left: number; right: number; bottom: number };
@@ -22,7 +42,8 @@ type Props = {
   className?: string;
   width?: number;
 };
-const TableProfilerGraph = ({
+
+const TableProfilerGraph: FC<Props> = ({
   data,
   margin,
   toolTipPos,
@@ -30,26 +51,6 @@ const TableProfilerGraph = ({
   className = '',
   width = 150,
 }: Props) => {
-  const CustomTooltip = ({
-    active,
-    payload,
-  }: {
-    active: boolean;
-    // eslint-disable-next-line
-    payload: any;
-  }) => {
-    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">
-          <div>Value {payload[0].value}</div>
-          <div>Date {payload[0].payload.date.toString()}</div>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
   return (
     <div className={className}>
       <AreaChart