feat(PieChart/DonutChart - New): expose innerRadius and outerRadius in chartConfig prop (#503)

Author: MarcusNotheis

packages/charts/src/components/DonutChart/DonutRechart.stories.tsx renamed to packages/charts/src/components/DonutChart/DonutChart.stories.tsx

@@ -92,7 +92,8 @@ export const withCustomRadiusStory = () =>
       style={{ width: '50%' }}
       dataset={simpleDataSet}
       chartConfig={{
-        innerRadius: text('innerRadius', '20%')
+        innerRadius: text('innerRadius', '20%'),
+        outerRadius: text('outerRadius', '90%'),
       }}
       dimension={{
         accessor: 'name'

packages/charts/src/components/PieChart/PieRechart.stories.tsx renamed to packages/charts/src/components/PieChart/PieChart.stories.tsx

@@ -20,7 +20,8 @@ export const renderStory = () => {
       style={{ width: '50%' }}
       dataset={simpleDataSet}
       chartConfig={{
-        innerRadius: text('innerRadius', '0%')
+        innerRadius: text('innerRadius', '0%'),
+        outerRadius: text('outerRadius', '80%')
       }}
       dimension={{
         accessor: 'name'

packages/charts/src/components/PieChart/PieChart.tsx

@@ -7,6 +7,7 @@ import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from
 import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip } from 'recharts';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
+import { IPolarChartConfig } from "../../interfaces/IPolarChartConfig";
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { defaultFormatter } from '../../internal/defaults';
 import { tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
@@ -35,7 +36,7 @@ interface DimensionConfig {
   formatter?: (value: any) => string;
 }
 
-export interface PieChartProps extends RechartBaseProps {
+export interface PieChartProps extends RechartBaseProps<IPolarChartConfig> {
   centerLabel?: string;
   dimension: DimensionConfig;
   /**
@@ -79,6 +80,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
       legendPosition: 'bottom',
       legendHorizontalAlign: 'center',
       paddingAngle: 0,
+      outerRadius: '80%',
       ...props.chartConfig
     };
   }, [props.chartConfig]);
@@ -144,6 +146,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
       <PieChartLib onClick={onDataPointClickInternal} margin={chartConfig.margin}>
         <Pie
           innerRadius={chartConfig.innerRadius}
+          outerRadius={chartConfig.outerRadius}
           paddingAngle={chartConfig.paddingAngle}
           nameKey={dimension.accessor}
           dataKey={measure.accessor}

packages/charts/src/interfaces/ICartesianChartConfig.ts

@@ -0,0 +1,25 @@
+export interface ICartesianChartConfig {
+  yAxisVisible?: boolean;
+  xAxisVisible?: boolean;
+
+  gridStroke?: string;
+  gridVertical?: boolean;
+  gridHorizontal?: boolean;
+
+  zoomingTool?: boolean;
+
+  barGap?: number;
+
+
+  secondYAxis?: {
+    dataKey: string;
+    name?: string;
+    color?: string;
+  };
+
+  referenceLine?: {
+    label: string;
+    value: number;
+    color: string;
+  };
+}

packages/charts/src/interfaces/IPolarChartConfig.ts

@@ -0,0 +1,8 @@
+export interface IPolarChartConfig {
+  paddingAngle?: number;
+
+  innerRadius?: string;
+  outerRadius?: string;
+
+  polarGridType?: string;
+}

packages/charts/src/interfaces/LabelObject.ts

@@ -1,8 +1,7 @@
 import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
-import { CSSProperties } from 'react';
-import { ChartContainerProps } from './ChartContainerProps';
+import { ICartesianChartConfig } from './ICartesianChartConfig';
 
-export interface RechartBaseProps extends CommonProps {
+export interface RechartBaseProps<T = ICartesianChartConfig> extends CommonProps {
   loading?: boolean;
   dataset?: Record<string, any>[];
 
@@ -12,40 +11,15 @@ export interface RechartBaseProps extends CommonProps {
 
   noAnimation?: boolean;
 
-  chartConfig?: {
+  chartConfig?: T & {
     margin?: {
       right: number;
       left: number;
       top: number;
       bottom: number;
     };
 
-    yAxisVisible?: boolean;
-    xAxisVisible?: boolean;
-
-    gridStroke?: string;
-    gridVertical?: boolean;
-    gridHorizontal?: boolean;
     legendPosition?: string;
-    zoomingTool?: boolean;
-
-    barGap?: number;
-
-    paddingAngle?: number;
-    innerRadius?: string;
-
-    polarGridType?: string;
-
-    secondYAxis?: {
-      dataKey: string;
-      name?: string;
-      color?: string;
-    };
-
-    referenceLine?: {
-      label: string;
-      value: number;
-      color: string;
-    };
+    legendHorizontalAlign?: string;
   };
 }