Merge remote-tracking branch 'origin/master' into feat(Bubble-Chart)-new-bubble/scatter-chart

Author: MarcusNotheis

packages/charts/src/components/BarChart/BarChart.tsx

@@ -20,6 +20,7 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
@@ -40,6 +41,10 @@ const measureDefaults = {
   opacity: 1
 };
 
+const valueAccessor = (attribute) => ({ payload }) => {
+  return getValueByDataKey(payload, attribute);
+};
+
 interface MeasureConfig extends IChartMeasure {
   /**
    * Bar Width
@@ -164,9 +169,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
   const [width, legendPosition] = useLongestYAxisLabelBar(dataset, dimensions);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const [xAxisHeight] = useObserveXAxisHeights(chartRef, 1);
-  const valueAccessor = (attribute) => ({ payload }) => {
-    return payload[attribute];
-  };
 
   return (
     <ChartContainer

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -20,6 +20,7 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
@@ -88,6 +89,10 @@ const measureDefaults = {
   opacity: 1
 };
 
+const valueAccessor = (attribute) => ({ payload }) => {
+  return getValueByDataKey(payload, attribute);
+};
+
 /**
  * <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';</code>
  */
@@ -169,9 +174,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
-  const valueAccessor = (attribute) => ({ payload }) => {
-    return payload[attribute];
-  };
 
   return (
     <ChartContainer

packages/main/src/components/Form/index.tsx

@@ -1,8 +1,7 @@
-import { useConsolidatedRef } from '@ui5/webcomponents-react-base/hooks/useConsolidatedRef';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { Device } from '@ui5/webcomponents-react-base/lib/Device';
+import { useConsolidatedRef, usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/hooks';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
-import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, {