[NDS-815] fix: update recharts

package.json

@@ -46,7 +46,7 @@
     "@types/react-highlight-words": "^0.16.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.0.1",
-    "@types/recharts": "^1.8.16",
+    "@types/recharts": "^1.8.25",
     "@types/styled-components": "^5.1.7",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
@@ -110,7 +110,7 @@
     "react-range": "^1.8.12",
     "react-switch": "^6.0.0",
     "react-window": "^1.8.6",
-    "recharts": "^1.8.5",
+    "recharts": "^2.8.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {

src/components/Chart/BarChart/BarChart.tsx

@@ -115,7 +115,7 @@ const BarChart: React.FC<Props> = ({ data }) => {
       barCategoryGap="20%"
       maxBarSize={32}
     >
-      <CartesianGrid offset={{ left: 0 }} horizontal={false} />
+      <CartesianGrid horizontal={false} />
       <XAxis
         type="number"
         axisLine={false}

src/components/Chart/BarChart/components/CustomLabel/CustomLabel.tsx

@@ -11,8 +11,8 @@ interface CustomLabelProps extends LabelProps {
 
 const CustomLabel: React.FC<CustomLabelProps> = ({ colors, value, x, y, width, height, index }) => {
   const theme = useTheme();
-  const xValue = x && width ? x + width + xValueBase : xValueBase;
-  const yValue = y && height ? y + height / divisor : 0;
+  const xValue = x && width ? Number(x) + Number(width) + xValueBase : xValueBase;
+  const yValue = y && height ? Number(y) + Number(height) / divisor : 0;
   const fill = index && colors[index] ? colors[index] : theme.palette.black;
 
   return (

src/components/Chart/BarChart/components/CustomTooltipContent/CustomTooltipContent.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TooltipProps } from 'recharts';
+import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 
 import { HoverInfo } from '../../BarChart';
 import { tooltipLiStyle, tooltipStyle, tooltipUlStyle } from './CustomTooltipContent.style';
 
-const CustomTooltip: React.FC<TooltipProps> = ({ payload }) => {
-  const options = payload && (payload[0]?.payload?.options?.hoverInfo as HoverInfo[]);
+const CustomTooltipContent: React.FC<TooltipProps<ValueType, NameType>> = ({ payload }) => {
+  const options: HoverInfo[] | undefined = payload && (payload[0]?.payload?.options?.hoverInfo as HoverInfo[]);
 
   return options ? (
     <div className="custom-tooltip" css={tooltipStyle()}>
@@ -26,4 +27,4 @@ const CustomTooltip: React.FC<TooltipProps> = ({ payload }) => {
   ) : null;
 };
 
-export default CustomTooltip;
+export default CustomTooltipContent;

src/components/Chart/DonutChart/components/CustomLabel/CustomLabel.tsx

@@ -1,6 +1,6 @@
 import useTheme from 'hooks/useTheme';
 import React from 'react';
-import { LabelProps, PolarViewBox } from 'recharts';
+import { LabelProps, PolarAngleAxisProps } from 'recharts';
 
 import { flexContainer, labelUnitStyle } from './CustomLabel.style';
 
@@ -10,7 +10,7 @@ type CustomLabelProps = LabelProps & {
 };
 
 const CustomLabel: React.FC<CustomLabelProps> = ({ viewBox, value, units }) => {
-  const { cx, cy } = viewBox as PolarViewBox;
+  const { cx, cy } = viewBox as PolarAngleAxisProps;
   const theme = useTheme();
 
   return (

src/components/Chart/LineChart/components/CustomTooltip/CustomTooltip.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TooltipProps } from 'recharts';
+import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 
 import {
   tooltipHrStyle,
@@ -8,7 +9,7 @@ import {
   tooltipUlStyle,
 } from './CustomTooltip.style';
 
-const CustomTooltip: React.FC<TooltipProps> = ({ label, payload }) => {
+const CustomTooltip: React.FC<TooltipProps<ValueType, NameType>> = ({ label, payload }) => {
   return (
     <div className="custom-tooltip" css={tooltipStyle()}>
       <p className="label" style={{ margin: '0px' }}>

src/components/Chart/Wrapper.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ResponsiveContainer, AreaChartProps, BarChartProps } from 'recharts';
+import { ResponsiveContainer } from 'recharts';
+import { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
 
-type ChartProps = AreaChartProps & BarChartProps;
+type ChartProps = CategoricalChartProps;
 
 type Props = ChartProps & {
   aspect?: number;