Feature: Charts/new formatter, rendering data label

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

@@ -41,9 +41,10 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
     noLegend = false,
     onDataPointClick,
     onLegendClick,
-    xAxisFormatter = (el) => el,
-    yAxisFormatter = (el) => formatYAxisTicks(el),
-    dataLabelFormatter = (d) => d,
+    labels,
+    axisInterval,
+    labelFormatter = (el) => formatYAxisTicks(el),
+    valueFormatter = (el) => el,
     dataLabelCustomElement = undefined,
     chartConfig = {
       margin: {},
@@ -55,7 +56,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
       gridHorizontal: true,
       gridVertical: false,
       legendPosition: 'top',
-      barSize: 10,
+      barSize: undefined,
       barGap: 3,
       zoomingTool: false,
       strokeOpacity: 1,
@@ -112,24 +113,25 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
   const BarDataLabel = useDataLabel(
     chartConfig.dataLabel,
     dataLabelCustomElement,
-    dataLabelFormatter,
+    valueFormatter,
     chartConfig.stacked,
     true
   );
 
   const marginChart = useChartMargin(
     dataset,
-    yAxisFormatter,
+    labelFormatter,
     labelKey,
     chartConfig.margin,
     true,
     secondaryDimensionKey,
     chartConfig.zoomingTool
   );
 
-  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
-  const YAxisLabel = useAxisLabel(yAxisFormatter, chartConfig.yAxisUnit, true);
-  const SecondaryDimensionLabel = useSecondaryDimensionLabel(true, yAxisFormatter);
+  const XAxisLabel = useAxisLabel(valueFormatter, chartConfig.xAxisUnit);
+  const YAxisLabel = useAxisLabel(labelFormatter, chartConfig.yAxisUnit, true);
+  const SecondaryDimensionLabel = useSecondaryDimensionLabel(true, labelFormatter);
+  const bigDataSet = dataset?.length > 30 ?? false;
 
   return (
     <ChartContainer
@@ -158,7 +160,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
           tick={YAxisLabel}
           type="category"
           dataKey={labelKey}
-          interval={0}
+          interval={axisInterval ?? bigDataSet ? 2 : 0}
           yAxisId={0}
         />
         {secondaryDimensionKey && (
@@ -179,7 +181,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             fillOpacity={chartConfig.fillOpacity}
             label={BarDataLabel}
             key={key}
-            name={key}
+            name={labels?.[key] || key}
             dataKey={key}
             fill={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
             stroke={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
@@ -195,7 +197,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             label={chartConfig.referenceLine.label}
           />
         )}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} labelFormatter={valueFormatter} />
         {chartConfig.zoomingTool && (
           <Brush y={0} dataKey={labelKey} stroke={`var(--sapUiChartAccent6)`} travellerWidth={10} height={20} />
         )}

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

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean, text } from '@storybook/addon-knobs';
 import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';
 import React from 'react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
+import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
 
 export default {
   title: 'Charts - Unstable /  BarChart',
@@ -31,9 +31,9 @@ export const withCustomColor = () => (
     dataset={simpleDataSet}
     labelKey={'name'}
     color={'red'}
-    width={text('width', '95%')}
-    height={text('height', '70vh')}
-    chartConfig={{ dataLabel: true, barSize: 20 }}
+    width={'100%'}
+    height={'90vh'}
+    chartConfig={{ dataLabel: true }}
   />
 );
 
@@ -52,7 +52,7 @@ export const defaultStackedStory = () => (
     onDataPointClick={action('onDataPointClick')}
     onLegendClick={action('onLegendClick')}
     labelKey={'name'}
-    width={'91%'}
+    width={'100%'}
     dataset={complexDataSet}
     chartConfig={{
       gridStroke: 'white',
@@ -81,7 +81,6 @@ export const defaultFormatterStory = () => (
     width={'91%'}
     height={'90vh'}
     dataset={complexDataSet}
-    dataLabelFormatter={(d) => `${d / 10}%`}
     xAxisFormatter={(el) => el / 10}
     yAxisFormatter={(el) => el.slice(0, 3)}
     chartConfig={{
@@ -109,13 +108,13 @@ export const withReferenceLineStory = () => (
     onLegendClick={action('onLegendClick')}
     labelKey={'name'}
     width={'91%'}
-    dataset={complexDataSet}
+    height={'100vh'}
+    dataset={bigDataSet}
     chartConfig={{
       gridStroke: 'white',
       gridVertical: false,
       fillOpacity: 0.7,
       strokeOpacity: 1,
-      barSize: 20,
       xAxisVisible: true,
       yAxisVisible: true,
       zoomingTool: true,
@@ -143,7 +142,6 @@ export const withSecondardDimension = () => (
     color={'lightblue'}
     width={'100%'}
     height={'60vh'}
-    chartConfig={{ dataLabel: true, barSize: 20 }}
   />
 );
 

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

@@ -38,12 +38,13 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
     height = '300px',
     dataset,
     dataKeys,
+    labels,
     noLegend = false,
     onDataPointClick,
     onLegendClick,
-    xAxisFormatter = (el) => el,
-    yAxisFormatter = (el) => el,
-    dataLabelFormatter = (d) => d,
+    axisInterval,
+    valueFormatter = (el) => el,
+    labelFormatter = (el) => el,
     dataLabelCustomElement = undefined,
     chartConfig = {
       margin: {},
@@ -56,7 +57,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
       gridVertical: false,
       yAxisColor: ThemingParameters.sapList_BorderColor,
       legendPosition: 'top',
-      barSize: 15,
+      barSize: undefined,
       barGap: 3,
       zoomingTool: false,
       strokeOpacity: 1,
@@ -116,19 +117,22 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
   const ColumnDataLabel = useDataLabel(
     chartConfig.dataLabel,
     dataLabelCustomElement,
-    dataLabelFormatter,
+    labelFormatter,
     chartConfig.stacked,
+    false,
     false
   );
 
+  const bigDataSet = dataset?.length > 30 ?? false;
+
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 
-  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
+  const XAxisLabel = useAxisLabel(valueFormatter, chartConfig.xAxisUnit);
 
   const marginChart = useChartMargin(
     dataset,
     labelKey,
-    yAxisFormatter,
+    labelFormatter,
     chartConfig.margin,
     false,
     secondaryDimensionKey,
@@ -154,19 +158,21 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           horizontal={chartConfig.gridHorizontal}
           stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
         />
-        {(chartConfig.xAxisVisible ?? true) && <XAxis interval={0} tick={XAxisLabel} dataKey={labelKey} xAxisId={0} />}
+        {(chartConfig.xAxisVisible ?? true) && (
+          <XAxis interval={axisInterval ?? bigDataSet ? 2 : 0} tick={XAxisLabel} dataKey={labelKey} xAxisId={0} />
+        )}
         {secondaryDimensionKey && (
           <XAxis
             interval={0}
-            dataKey={'dimension'}
+            dataKey={secondaryDimensionKey}
             tickLine={false}
             tick={SecondaryDimensionLabel}
             axisLine={false}
             xAxisId={1}
           />
         )}
         <YAxis
-          tickFormatter={yAxisFormatter}
+          tickFormatter={labelFormatter}
           unit={chartConfig.yAxisUnit}
           axisLine={chartConfig.yAxisVisible ?? false}
           tickLine={false}
@@ -191,7 +197,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
             fillOpacity={chartConfig.fillOpacity}
             label={ColumnDataLabel}
             key={key}
-            name={key}
+            name={labels?.[key] || key}
             dataKey={key}
             fill={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
             stroke={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
@@ -208,7 +214,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
             yAxisId={'left'}
           />
         )}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} labelFormatter={valueFormatter} />
         {chartConfig.zoomingTool && (
           <Brush y={1} dataKey={labelKey} stroke={`var(--sapUiChartAccent6)`} travellerWidth={10} height={20} />
         )}

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

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/next/ColumnChart';
 import React from 'react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
+import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
 
 export default {
   title: 'Charts - Unstable /  ColumnChart',
@@ -71,7 +71,6 @@ export const defaultStackedStory = () => (
       gridVertical: false,
       fillOpacity: 0.7,
       strokeOpacity: 1,
-      barSize: 35,
       xAxisVisible: true,
       yAxisVisible: true,
       zoomingTool: true,
@@ -92,21 +91,17 @@ export const defaultFormatedStory = () => (
     labelKey={'name'}
     dataset={complexDataSet}
     width={'97%'}
-    dataLabelFormatter={(d) => d / 100}
     xAxisFormatter={(el) => el.slice(0, 3)}
     yAxisFormatter={(el) => el / 100}
     chartConfig={{
       gridStroke: 'white',
       gridVertical: false,
-      yAxisUnit: '/100',
       fillOpacity: 0.7,
       strokeOpacity: 1,
-      barSize: 35,
       xAxisVisible: true,
       yAxisVisible: true,
       zoomingTool: true,
-      stacked: true,
-      dataLabel: true
+      stacked: true
     }}
   />
 );
@@ -120,20 +115,18 @@ export const defaultReferenceLineStory = () => (
     onDataPointClick={action('onDataPointClick')}
     onLegendClick={action('onLegendClick')}
     labelKey={'name'}
-    dataset={complexDataSet}
+    dataset={bigDataSet}
     width={'97%'}
-    dataLabelFormatter={(d) => d / 100}
     chartConfig={{
       gridStroke: 'white',
       gridVertical: false,
       fillOpacity: 0.7,
       strokeOpacity: 1,
-      barSize: 35,
       xAxisVisible: true,
       yAxisVisible: true,
       zoomingTool: true,
-      stacked: true,
       dataLabel: true,
+      stacked: true,
       referenceLine: {
         color: 'red',
         label: 'MAX',

packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx

@@ -9,7 +9,7 @@ import {
 
 export const renderComposedChart = () => (
   <ComposedChart
-    width={'95%'}
+    width={'100%'}
     height={'300px'}
     dataset={complexDataSet}
     onLegendClick={action('onLegendClick')}
@@ -181,6 +181,7 @@ export const renderFormatedComposedChart = () => (
     width={'95%'}
     height={'40vh'}
     dataset={complexDataSet}
+    labels={{ users: 'numbers of users' }}
     xAxisFormatter={(el) => el.slice(0, 3)}
     yAxisFormatter={(el) => el / 10}
     onLegendClick={action('onLegendClick')}
@@ -197,11 +198,11 @@ export const renderFormatedComposedChart = () => (
       {
         type: 'line',
         accessor: 'users',
-        dataLabelFormatter: (el) => ''
+        dataValueFormatter: (el) => ''
       },
       {
         type: 'line',
-        dataLabelFormatter: (d) => `${d}/unit`,
+        dataValueFormatter: (d) => `${d}/unit`,
         accessor: 'volume'
       }
     ]}