SAP · MarcusNotheis · Apr 28, 2020 · Apr 23, 2020 · Apr 23, 2020 · Apr 23, 2020
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,6 +1,7 @@
 <style>
     body {
         font-family: '72', Arial, Helvetica, sans-serif;
+        background-color: var(--sapBackgroundColor);
     }
 
     .pageWithPadding > section {

diff --git a/packages/charts/package.json b/packages/charts/package.json
@@ -28,7 +28,7 @@
     "lodash.merge": "^4.6.2",
     "react-chartjs-2": "^2.8.0",
     "react-content-loader": "^5.0.4",
-    "recharts": "2.0.0-beta.1"
+    "recharts": "2.0.0-beta.5"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.8"

diff --git a/packages/charts/rollup.config.js b/packages/charts/rollup.config.js
@@ -1,4 +1,4 @@
 const rollupConfigFactory = require('../../shared/rollup/configFactory');
 
-const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base']);
+const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base', 'lodash', 'classnames']);
 module.exports = config;
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -17,14 +17,17 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
-const formatYAxisTicks = (tick) => {
+const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
   return splitTick.length > 3
     ? `${splitTick.slice(0, 3).join(' ')}...`
@@ -164,16 +167,13 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
-    primaryDimensionAccessor,
+    dimensions,
     chartConfig.margin,
     true,
     dimensions.length > 1,
     chartConfig.zoomingTool
   );
 
-  const XAxisLabel = useAxisLabel(primaryMeasure?.formatter);
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -185,7 +185,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
       tooltip={tooltip}
       slot={slot}
     >
-      <BarChartLib margin={marginChart} layout={'vertical'} data={dataset} barGap={chartConfig.barGap}>
+      <BarChartLib margin={marginChart} layout="vertical" data={dataset} barGap={chartConfig.barGap}>
         <CartesianGrid
           vertical={chartConfig.gridVertical ?? false}
           horizontal={chartConfig.gridHorizontal}
@@ -195,17 +195,15 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
           <XAxis
             interval={0}
             type="number"
-            tick={XAxisLabel}
+            tick={<XAxisTicks config={primaryMeasure} />}
             axisLine={chartConfig.xAxisVisible ?? true}
             tickFormatter={primaryMeasure?.formatter}
           />
         )}
         {(chartConfig.yAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
             const YAxisLabel =
-              index > 0
-                ? useSecondaryDimensionLabel(true, dimension.formatter)
-                : useAxisLabel(dimension.formatter, true);
+              index > 0 ? useSecondaryDimensionLabel(true, dimension.formatter) : <YAxisTicks config={dimension} />;
             return (
               <YAxis
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
@@ -221,22 +219,14 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             );
           })}
         {measures.map((element, index) => {
-          const BarDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            false,
-            true,
-            false
-          );
           return (
             <Bar
               stackId={element.stackId}
               fillOpacity={element.opacity}
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={BarDataLabel}
+              label={<ChartDataLabel config={element} chartType="bar" position="insideRight" />}
               type="monotone"
               dataKey={element.accessor}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}

diff --git a/packages/charts/src/components/BarChart/BarRechart.stories.tsx b/packages/charts/src/components/BarChart/BarRechart.stories.tsx
@@ -165,7 +165,21 @@ export const withReferenceLineStory = () => {
           accessor: 'volume'
         }
       ]}
-      style={{ width: '95%', height: '70vh' }}
+      style={{
+        width: '95%',
+        height: '70vh',
+        '--sapChart_OrderedColor_1': '#0f828f',
+        '--sapChart_OrderedColor_2': '#5ac2ce',
+        '--sapChart_OrderedColor_3': '#03734d',
+        '--sapChart_OrderedColor_4': '#66c2a3',
+        '--sapChart_OrderedColor_5': '#3c6372',
+        '--sapChart_OrderedColor_6': '#adbcc3',
+        '--sapChart_OrderedColor_7': '#144b7f',
+        '--sapChart_OrderedColor_8': '#698caf',
+        '--sapChart_OrderedColor_9': '#d62f2f',
+        '--sapChart_OrderedColor_10': '#f8a6a6',
+        '--sapChart_OrderedColor_11': '#921473'
+      }}
       noLegend={false}
       loading
       chartConfig={{

diff --git a/packages/charts/src/components/BarChart/Placeholder.tsx b/packages/charts/src/components/BarChart/Placeholder.tsx
@@ -5,8 +5,10 @@ import ContentLoader from 'react-content-loader';
 export const BarChartPlaceholder = () => {
   return (
     <ContentLoader
-      height={145}
-      width={165}
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
       speed={2}
       backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
       foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}

diff --git a/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap b/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`BarRechart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 60vh; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`BarRechart Renders with data 1`] = `
 
 exports[`BarRechart loading placeholder 1`] = `
 <div
-  style="width: 30%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"

diff --git a/packages/charts/src/components/BarChart/index.tsx b/packages/charts/src/components/BarChart/index.tsx
@@ -11,13 +11,8 @@ import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import {
-  formatAxisCallback,
-  formatDataLabel,
-  formatTooltipLabel,
-  getTextWidth,
-  useMergedConfig
-} from '../../util/Utils';
+import { getTextWidth } from '../../util/Utils';
+import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { BarChartPlaceholder } from './Placeholder';
 
 export interface BarChartPropTypes extends ChartBaseProps {}

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -1,6 +1,6 @@
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ColumnChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/ColumnChartPlaceholder';
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
@@ -16,13 +16,16 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { useChartMargin } from '../../hooks/useChartMargin';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
+import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { useDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
-import { useChartMargin } from '../../hooks/useChartMargin';
-import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -168,8 +171,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
-    primaryDimensionAccessor,
+    measures,
     chartConfig.margin,
     false,
     dimensions.length > 1,
@@ -195,14 +197,13 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
         />
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
-            const XAxisLabel = useAxisLabel(dimension.formatter);
             return (
               <XAxis
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
+                tick={index === 0 ? <XAxisTicks config={dimension} /> : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
               />
@@ -212,8 +213,8 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           axisLine={chartConfig.yAxisVisible ?? false}
           tickLine={false}
           yAxisId="left"
-          tickFormatter={primaryMeasure?.formatter}
           interval={0}
+          tick={<YAxisTicks config={primaryMeasure} />}
         />
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
           <YAxis
@@ -226,13 +227,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           />
         )}
         {measures.map((element, index) => {
-          const ColumnDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            !!element.stackId,
-            false
-          );
           return (
             <Column
               yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
@@ -241,7 +235,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={ColumnDataLabel}
+              label={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
               type="monotone"
               dataKey={element.accessor}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}

diff --git a/packages/charts/src/components/ColumnChart/Placeholder.tsx b/packages/charts/src/components/ColumnChart/Placeholder.tsx
@@ -5,8 +5,10 @@ import ContentLoader from 'react-content-loader';
 export const ColumnChartPlaceholder = (props) => {
   return (
     <ContentLoader
-      height={145}
-      width={165}
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
       speed={2}
       backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
       foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}

diff --git a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ColumnRechart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 60vh; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`ColumnRechart Renders with data 1`] = `
 
 exports[`ColumnRechart loading placeholder 1`] = `
 <div
-  style="width: 30%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"

diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx
@@ -11,14 +11,8 @@ import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import {
-  formatAxisCallback,
-  formatDataLabel,
-  formatTooltipLabel,
-  getTextHeight,
-  getTextWidth,
-  useMergedConfig
-} from '../../util/Utils';
+import { getTextHeight, getTextWidth } from '../../util/Utils';
+import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { ColumnChartPlaceholder } from './Placeholder';
 
 export interface ColumnChartPropTypes extends ChartBaseProps {}

diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/next/ComposedChart';
 import React from 'react';
 import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 
 export default {
   title: 'Charts - Unstable /  ComposedChart',
@@ -17,6 +17,7 @@ export const renderStory = () => {
       onLegendClick={action('onLegendClick')}
       dataset={complexDataSet}
       style={{ height: '60vh' }}
+      layout={select('layout', ['horizontal', 'vertical'], 'horizontal')}
       dimensions={[
         {
           accessor: 'name',
@@ -34,7 +35,7 @@ export const renderStory = () => {
           accessor: 'users',
           label: 'Users',
           formatter: (val) => val.toLocaleString(),
-          type: 'line'
+          type: 'area'
         },
         {
           accessor: 'volume',
@@ -162,6 +163,7 @@ export const withReferenceLineStory = () => {
       onLegendClick={action('onLegendClick')}
       dataset={bigDataSet}
       dimensions={[{ accessor: 'name' }]}
+      layout={select('layout', ['horizontal', 'vertical'], 'horizontal')}
       measures={[
         {
           accessor: 'users',

diff --git a/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap b/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ComposedChart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 60vh; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`ComposedChart Renders with data 1`] = `
 
 exports[`ComposedChart loading placeholder 1`] = `
 <div
-  style="width: 50%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"