fix(BarChart/ColumnChart): fix data labels for nested data accessors (#579)

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<a
   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