refactor(Charts - New): update to recharts beta 6 (#506)

Author: MarcusNotheis

config/jest.config.js

@@ -21,8 +21,7 @@ module.exports = {
     '!packages/base/src/styling/HSLColor.ts', // no deprecated HSL Util
     '!packages/base/src/styling/font72.ts', // no deprecated font
     '!packages/base/src/Scroller/*', // no scroll lib as it is not longer used
-    '!packages/base/src/utils/Event.ts', // event is deprecated
-    '!packages/charts/src/internal/ChartLabel.tsx' // temp copy of recharts label
+    '!packages/base/src/utils/Event.ts' // event is deprecated
   ],
   setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['./config/jestsetup.ts'],

packages/charts/package.json

@@ -29,7 +29,7 @@
     "lodash.merge": "^4.6.2",
     "react-chartjs-2": "^2.8.0",
     "react-content-loader": "^5.0.4",
-    "recharts": "2.0.0-beta.5"
+    "recharts": "2.0.0-beta.6"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.8"

packages/charts/src/internal/ChartDataLabel.tsx

@@ -1,8 +1,8 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
-import React, { FC } from 'react';
+import React, { FC, createElement } from 'react';
 import { IChartMeasure } from '../interfaces/IChartMeasure';
-import Label from './ChartLabel';
+import { Label } from 'recharts';
 
 interface CustomDataLabelProps {
   config: IChartMeasure;
@@ -14,16 +14,14 @@ interface CustomDataLabelProps {
 }
 
 export const ChartDataLabel: FC<CustomDataLabelProps> = (props: CustomDataLabelProps) => {
-  const { config, chartType } = props;
-
-  const viewBox = Label.parseViewBox(props);
+  const { config, chartType, viewBox } = props;
 
   if (config.hideDataLabel) {
     return null;
   }
 
   if (config.DataLabel) {
-    return config.DataLabel(props);
+    return createElement(config.DataLabel, props);
   }
 
   const formattedLabel = config.formatter(props.value ?? props.children);