chore(Charts-New): Minor Customizings (#398)

SAP · Apr 1, 2020 · e0716cc · e0716cc
1 parent fb282c7
commit e0716cc
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 69 deletions.
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -61,7 +61,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
       strokeOpacity: 1,
       fillOpacity: 1,
       stacked: false,
-      dataLabel: false,
+      dataLabel: true,
       referenceLine: {
         label: undefined,
         value: undefined,
@@ -117,9 +117,18 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
     true
   );
 
-  const marginChart = useChartMargin(dataset, yAxisFormatter, labelKey, chartConfig.margin, true);
+  const marginChart = useChartMargin(
+    dataset,
+    yAxisFormatter,
+    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);
 
   return (
@@ -143,10 +152,10 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
         />
         {(chartConfig.xAxisVisible ?? true) && <XAxis interval={0} type="number" tick={XAxisLabel} />}
         <YAxis
-          tickFormatter={yAxisFormatter}
           unit={chartConfig.yAxisUnit}
           axisLine={chartConfig.yAxisVisible ?? false}
           tickLine={false}
+          tick={YAxisLabel}
           type="category"
           dataKey={labelKey}
           interval={0}
@@ -178,15 +187,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             onClick={onDataPointClickInternal}
           />
         ))}
-        {!noLegend && (
-          <Legend
-            wrapperStyle={{
-              paddingBottom: 20
-            }}
-            verticalAlign={chartConfig.legendPosition ?? 'top'}
-            onClick={onItemLegendClick}
-          />
-        )}
+        {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {chartConfig.referenceLine && (
           <ReferenceLine
             stroke={chartConfig.referenceLine.color}

diff --git a/packages/charts/src/components/BarChart/BarRechart.stories.tsx b/packages/charts/src/components/BarChart/BarRechart.stories.tsx
@@ -14,7 +14,7 @@ export const defaultStory = () => (
     onDataPointClick={action('onDataPointClick')}
     onLegendClick={action('onLegendClick')}
     dataset={complexDataSet}
-    width={text('width', '97%')}
+    width={text('width', '100%')}
     height={text('height', '95vh')}
     loading={boolean('loading', false)}
     noLegend={boolean('noLegend', false)}
@@ -141,8 +141,8 @@ export const withSecondardDimension = () => (
     labelKey={'name'}
     secondaryDimensionKey={'dimension'}
     color={'lightblue'}
-    width={text('width', '95%')}
-    height={text('height', '70vh')}
+    width={'100%'}
+    height={'60vh'}
     chartConfig={{ dataLabel: true, barSize: 20 }}
   />
 );

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -62,7 +62,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
       strokeOpacity: 1,
       fillOpacity: 1,
       stacked: false,
-      dataLabel: false,
+      dataLabel: true,
       secondYAxis: {
         dataKey: undefined,
         name: undefined,
@@ -131,7 +131,8 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
     yAxisFormatter,
     chartConfig.margin,
     false,
-    secondaryDimensionKey
+    secondaryDimensionKey,
+    chartConfig.zoomingTool
   );
 
   return (
@@ -198,15 +199,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
             onClick={onDataPointClickInternal}
           />
         ))}
-        {!noLegend && (
-          <Legend
-            wrapperStyle={{
-              paddingBottom: 20
-            }}
-            verticalAlign={chartConfig.legendPosition ?? 'top'}
-            onClick={onItemLegendClick}
-          />
-        )}
+        {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {chartConfig.referenceLine && (
           <ReferenceLine
             stroke={chartConfig.referenceLine.color}

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -97,7 +97,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
       yAxisColor: ThemingParameters.sapList_BorderColor,
       legendPosition: 'top',
       zoomingTool: false,
-      dataLabel: false,
+      dataLabel: true,
       barSize: undefined,
       barGap: undefined,
       secondYAxis: {
@@ -180,7 +180,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     labelKey,
     chartConfig.margin,
     false,
-    secondaryDimensionKey
+    secondaryDimensionKey,
+    chartConfig.zoomingTool
   );
 
   return (
@@ -240,15 +241,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
           />
         )}
         <Tooltip />
-        {!noLegend && (
-          <Legend
-            onClick={onItemLegendClick}
-            verticalAlign={chartConfig.legendPosition ?? 'top'}
-            wrapperStyle={{
-              paddingBottom: 20
-            }}
-          />
-        )}
+        {!noLegend && <Legend onClick={onItemLegendClick} verticalAlign={chartConfig.legendPosition ?? 'top'} />}
         {elements?.map((config, index) => {
           const {
             type,

diff --git a/packages/charts/src/components/DonutChart/DonutChart.tsx b/packages/charts/src/components/DonutChart/DonutChart.tsx
@@ -12,7 +12,7 @@ const DonutChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref) =>
   const {
     chartConfig = {
       legendPosition: 'bottom',
-      dataLabel: false,
+      dataLabel: true,
       paddingAngle: 0,
       innerRadius: undefined
     }

diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -57,7 +57,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
       strokeWidth: 1,
       zoomingTool: false,
       strokeOpacity: 1,
-      dataLabel: false,
+      dataLabel: true,
       xAxisUnit: '',
       yAxisUnit: '',
       secondYAxis: {
@@ -116,7 +116,8 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
     labelKey,
     chartConfig.margin,
     false,
-    secondaryDimensionKey
+    secondaryDimensionKey,
+    chartConfig.zoomingTool
   );
 
   return (
@@ -181,15 +182,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
             activeDot={{ onClick: onDataPointClickInternal }}
           />
         ))}
-        {!noLegend && (
-          <Legend
-            wrapperStyle={{
-              paddingBottom: 20
-            }}
-            verticalAlign={chartConfig.legendPosition ?? 'top'}
-            onClick={onItemLegendClick}
-          />
-        )}
+        {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {chartConfig.referenceLine && (
           <ReferenceLine
             stroke={chartConfig.referenceLine.color}

diff --git a/packages/charts/src/components/LineChart/LineRechart.stories.tsx b/packages/charts/src/components/LineChart/LineRechart.stories.tsx
@@ -14,9 +14,8 @@ export const renderStory = () => {
       onDataPointClick={action('onDataPointClick')}
       onLegendClick={action('onLegendClick')}
       dataset={complexDataSet}
-      width={'95%'}
-      height={'40vh'}
-      loading={true}
+      width={'100%'}
+      height={'60vh'}
     />
   );
 };

diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -43,7 +43,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
       strokeWidth: 1,
       zoomingTool: false,
       strokeOpacity: 1,
-      dataLabel: false,
+      dataLabel: true,
       paddingAngle: 0,
       innerRadius: undefined
     },
@@ -57,7 +57,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
 
   const chartRef = useConsolidatedRef<any>(ref);
 
-  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
+  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, undefined);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick, () => currentDataKeys[0]);
 

diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -45,7 +45,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
     chartConfig = {
       margin: {},
       legendPosition: 'bottom',
-      dataLabel: false,
+      dataLabel: true,
       polarGridType: 'circle'
     },
     style,
@@ -58,7 +58,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
 
   const chartRef = useConsolidatedRef<any>(ref);
 
-  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
+  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, undefined);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
 

diff --git a/packages/charts/src/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { getTextWidth } from '../util/Utils';
 
-export const useChartMargin = (dataset, formatter, labelKey, margin, bar?, secondaryDimension?) =>
+export const useChartMargin = (dataset, formatter, labelKey, margin, bar?, secondaryDimension?, zoomingTool?) =>
   useMemo(() => {
     let marginLeft = 0;
     if (dataset && bar && typeof margin?.left !== 'number') {
@@ -13,9 +13,9 @@ export const useChartMargin = (dataset, formatter, labelKey, margin, bar?, secon
       );
     }
     return {
-      right: margin?.right ?? 30,
-      top: margin?.top ?? 40,
-      bottom: margin?.bottom ?? secondaryDimension ? 100 : 30,
-      left: margin?.left ?? bar ? marginLeft / 2 : secondaryDimension ? 20 : 0
+      right: margin?.right ?? 60,
+      top: margin?.top ?? zoomingTool ? 40 : 10,
+      bottom: margin?.bottom ?? (!bar && secondaryDimension) ? 100 : 30,
+      left: margin?.left ?? bar ? (secondaryDimension ? marginLeft : marginLeft / 2) : secondaryDimension ? 20 : 0
     };
   }, [dataset, labelKey, margin]);
diff --git a/packages/charts/src/hooks/useLabelElements.ts b/packages/charts/src/hooks/useLabelElements.ts
@@ -1,5 +1,10 @@
 import { useCallback, useMemo } from 'react';
-import { DataLabel, SecondaryDimensionTicksXAxis, SecondaryDimensionTicksYAxis } from '../internal/CustomElements';
+import {
+  DataLabel,
+  SecondaryDimensionTicksXAxis,
+  SecondaryDimensionTicksYAxis,
+  YAxisTicks
+} from '../internal/CustomElements';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { renderAxisTicks } from '../util/Utils';
 
@@ -25,10 +30,12 @@ export const usePieDataLabel = (dataLabel, dataLabelCustomElement, dataLabelForm
       : false;
   }, [dataLabelFormatter, dataLabelCustomElement, dataLabel]);
 
-export const useAxisLabel = (AxisFormatter, AxisUnit) => {
+export const useAxisLabel = (AxisFormatter, AxisUnit, yAxis?) => {
   return useCallback(
     (labelProps) => {
-      return renderAxisTicks(labelProps, AxisFormatter, AxisUnit);
+      return yAxis
+        ? YAxisTicks(labelProps, AxisFormatter, AxisUnit)
+        : renderAxisTicks(labelProps, AxisFormatter, AxisUnit);
     },
     [AxisFormatter, AxisUnit]
   );

diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
@@ -24,15 +24,27 @@ export const XAxisTicks = (props, formatter, unit = '', rotate) => {
   );
 };
 
+export const YAxisTicks = (props, formatter, unit = '') => {
+  const { x, y, payload } = props;
+  const tickValue =
+    formatter(payload.value).length > 10 ? `${formatter(payload.value).slice(0, 13)}...` : formatter(payload.value);
+  return (
+    <g transform={`translate(${x},${y + 3})`}>
+      <text fill={ThemingParameters.sapNeutralBorderColor} textAnchor={'end'}>
+        {`${tickValue}${unit}`}
+      </text>
+    </g>
+  );
+};
+
 export const SecondaryDimensionTicksXAxis = (props) => {
   const { x, y, payload } = props;
 
   const tickValue = payload.value.length > 12 && globalRotate ? payload.value.slice(0, 12) + '...' : payload.value;
-  const dy = globalRotate ? 40 : 10;
+  const dy = globalRotate ? 40 : 0;
 
   return (
     <g transform={`translate(${x},${y + dy})`}>
-      {' '}
       <text fill={ThemingParameters.sapNeutralBorderColor}>|</text>
       <text
         fill={ThemingParameters.sapNeutralBorderColor}
@@ -52,9 +64,8 @@ export const SecondaryDimensionTicksYAxis = (props, yAxisFormatter) => {
   const tickValue = yAxisFormatter(payload.value);
 
   return (
-    <g transform={`translate(${x - 90},${y})`}>
-      {' '}
-      <text fill={ThemingParameters.sapNeutralBorderColor} textAnchor={'start'}>
+    <g transform={`translate(${x - 35},${y})`}>
+      <text fill={ThemingParameters.sapNeutralBorderColor} transform={'rotate(-35)'} textAnchor={'end'}>
         {`${tickValue}`}
       </text>
     </g>