Remove unnecessary props

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -63,20 +63,17 @@ export interface Basestate {
     }[];
 }
 
-// @public (undocumented)
+// @public
 export const CartesianChart: React_2.FunctionComponent<ModifiedCartesianChartProps>;
 
 // @public
 export interface CartesianChartProps {
     calloutProps?: Partial<ChartPopoverProps>;
-    // @deprecated
-    chartLabel?: string;
+    calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;
     className?: string;
     customDateTimeFormatter?: (dateTime: Date) => string;
-    customProps?: (dataPointCalloutProps: any) => ChartPopoverProps;
     dateLocalizeOptions?: Intl.DateTimeFormatOptions;
     enabledLegendsWrapLines?: boolean;
-    enableReflow?: boolean;
     height?: number;
     hideLegend?: boolean;
     hideTickOverlap?: boolean;
@@ -88,9 +85,10 @@ export interface CartesianChartProps {
     legendsOverflowText?: any;
     margins?: Margins;
     noOfCharsToTruncate?: number;
-    onResize?: (width: number, height: number) => void;
     parentRef?: HTMLElement | null;
-    responsive?: boolean;
+    reflowProps?: {
+        mode: 'none' | 'min-width';
+    };
     rotateXAxisLables?: boolean;
     secondaryYAxistitle?: string;
     secondaryYScaleOptions?: {
@@ -355,21 +353,32 @@ export const DataVizPalette: {
     highSuccess: string;
 };
 
-// @public (undocumented)
+// @public
 export const DonutChart: React_2.FunctionComponent<DonutChartProps>;
 
 // @public
-export interface DonutChartProps extends CartesianChartProps {
+export interface DonutChartProps {
     calloutProps?: ChartPopoverProps;
+    calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
+    className?: string;
     culture?: string;
-    customProps?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
     data?: ChartProps;
+    height?: number;
     hideLabels?: boolean;
+    hideLegend?: boolean;
+    hideTooltip?: boolean;
+    href?: string;
     innerRadius?: number;
+    // (undocumented)
+    legendProps?: Partial<LegendsProps>;
+    // (undocumented)
+    legendsOverflowText?: any;
     onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSX.Element | undefined;
+    parentRef?: HTMLElement | null;
     showLabelsInPercent?: boolean;
     styles?: DonutChartStyles;
     valueInsideDonut?: string | number;
+    width?: number;
 }
 
 // @public
@@ -447,11 +456,11 @@ export const HorizontalBarChart: React_2.FunctionComponent<HorizontalBarChartPro
 export interface HorizontalBarChartProps extends React_2.RefAttributes<HTMLDivElement> {
     barHeight?: number;
     calloutProps?: ChartPopoverProps;
+    calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
     chartDataMode?: ChartDataMode;
     className?: string;
     color?: string;
     culture?: string;
-    customProps?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
     data?: ChartProps[];
     hideLabels?: boolean;
     hideRatio?: boolean[];
@@ -766,6 +775,9 @@ export interface RefArrayData {
     refElement?: SVGGElement;
 }
 
+// @public (undocumented)
+export const ResponsiveContainer: React_2.FC<ResponsiveContainerProps>;
+
 // @public (undocumented)
 export const Shape: React_2.FunctionComponent<ShapeProps>;
 
@@ -857,12 +869,6 @@ export interface VerticalBarChartStyleProps extends CartesianChartStyleProps {
 // @public
 export interface VerticalBarChartStyles extends CartesianChartStyles {
     barLabel: string;
-    // @deprecated
-    xAxisTicks?: string;
-    // @deprecated
-    yAxisDomain?: string;
-    // @deprecated
-    yAxisTicks?: string;
 }
 
 // @public (undocumented)

packages/charts/react-charts/library/src/ResponsiveContainer.ts

@@ -0,0 +1 @@
+export * from './components/ResponsiveContainer/index';

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -25,13 +25,12 @@ import {
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 import { ChartPopover } from './ChartPopover';
 import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { ResponsiveContainer } from './ResponsiveContainer';
 
 /**
  * Cartesian Chart component
  * {@docCategory CartesianChart}
  */
-const CartesianChartBase: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<
+export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<
   HTMLDivElement,
   ModifiedCartesianChartProps
 >((props, forwardedRef) => {
@@ -422,7 +421,7 @@ const CartesianChartBase: React.FunctionComponent<ModifiedCartesianChartProps> =
     if (props.parentRef || chartContainer.current) {
       const container = props.parentRef ? props.parentRef : chartContainer.current!;
       const currentContainerWidth =
-        props.enableReflow && !_isFirstRender.current
+        props.reflowProps?.mode === 'min-width' && !_isFirstRender.current
           ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth())
           : container.getBoundingClientRect().width;
       const currentContainerHeight =
@@ -620,21 +619,4 @@ const CartesianChartBase: React.FunctionComponent<ModifiedCartesianChartProps> =
     </div>
   );
 });
-
-export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = props => {
-  if (!props.responsive) {
-    return <CartesianChartBase {...props} />;
-  }
-
-  return (
-    <ResponsiveContainer onResize={props.onResize} width={props.width} height={props.height}>
-      {({ containerWidth, containerHeight }) => (
-        <CartesianChartBase {...props} width={containerWidth} height={containerHeight} />
-      )}
-    </ResponsiveContainer>
-  );
-};
 CartesianChart.displayName = 'CartesianChart';
-CartesianChart.defaultProps = {
-  responsive: true,
-};

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts

@@ -303,12 +303,6 @@ export interface CartesianChartProps {
    */
   href?: string;
 
-  /**
-   * Label to apply to the whole chart.
-   * @deprecated - Use your chart label for the chart.
-   */
-  chartLabel?: string;
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   legendsOverflowText?: any;
 
@@ -378,10 +372,16 @@ export interface CartesianChartProps {
   svgProps?: React.SVGProps<SVGSVGElement>;
 
   /**
-   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
-   * @default True for LineChart but False for other charts
+   * Props related to reflow behavior of the chart
    */
-  enableReflow?: boolean;
+  reflowProps?: {
+    /**
+     * Determines the reflow behavior of the chart.
+     * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.
+     * @default 'none'
+     */
+    mode: 'none' | 'min-width';
+  };
 
   /**
    * Prop to set the x axis title
@@ -413,19 +413,6 @@ export interface CartesianChartProps {
    */
   useUTC?: string | boolean;
 
-  /**
-   * Enables the chart to automatically adjust its size based on the container's dimensions.
-   * @default true
-   */
-  responsive?: boolean;
-
-  /**
-   * The function that is called when the chart is resized.
-   * @param width - The new width of the chart.
-   * @param height - The new height of the chart.
-   */
-  onResize?: (width: number, height: number) => void;
-
   /**
    * Determines whether overlapping x-axis tick labels should be hidden.
    * @default false
@@ -436,7 +423,7 @@ export interface CartesianChartProps {
    * Define a custom callout props override
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  customProps?: (dataPointCalloutProps: any) => ChartPopoverProps;
+  calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;
 }
 
 export interface YValueHover {

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.test.tsx

@@ -89,7 +89,7 @@ describe('DonutChart snapShot testing', () => {
   it('renders enabledLegendsWrapLines correctly', () => {
     let component: any;
     rendererAct(() => {
-      component = renderer.create(<DonutChart data={chartPointsDC} enabledLegendsWrapLines={true} />);
+      component = renderer.create(<DonutChart data={chartPointsDC} legendProps={{ enabledWrapLines: true }} />);
     });
     const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx

@@ -10,7 +10,6 @@ import { Legend, Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
-import { ResponsiveContainer } from '../CommonComponents/ResponsiveContainer';
 
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 
@@ -19,7 +18,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
  * Donutchart component.
  * {@docCategory DonutChart}
  */
-const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(
+export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(
   (props, forwardedRef) => {
     const _rootElem = React.useRef<HTMLDivElement | null>(null);
     const _uniqText: string = useId('_Pie_');
@@ -296,7 +295,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
           yCalloutValue={yCalloutValue}
           culture={props.culture ?? 'en-us'}
           clickPosition={clickPosition}
-          isPopoverOpen={isPopoverOpen}
+          isPopoverOpen={!props.hideTooltip && isPopoverOpen}
           legend={legend!}
           YValue={value!}
           color={color}
@@ -305,7 +304,9 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
             customizedCallout: props.onRenderCalloutPerDataPoint
               ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)
               : undefined,
-            customCalloutProps: props.customProps ? props.customProps(dataPointCalloutProps!) : undefined,
+            customCalloutProps: props.calloutPropsPerDataPoint
+              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)
+              : undefined,
           }}
           isCartesian={false}
         />
@@ -321,22 +322,8 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
   },
 );
 
-export const DonutChart: React.FunctionComponent<DonutChartProps> = props => {
-  if (!props.responsive) {
-    return <DonutChartBase {...props} />;
-  }
-
-  return (
-    <ResponsiveContainer onResize={props.onResize} width={props.width} height={props.height}>
-      {({ containerWidth, containerHeight }) => (
-        <DonutChartBase {...props} width={containerWidth} height={containerHeight} />
-      )}
-    </ResponsiveContainer>
-  );
-};
 DonutChart.displayName = 'DonutChart';
 DonutChart.defaultProps = {
   innerRadius: 0,
   hideLabels: true,
-  responsive: true,
 };

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.types.ts

@@ -1,12 +1,13 @@
-import { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';
+import { CartesianChartStyleProps } from '../CommonComponents/index';
 import { ChartProps, ChartDataPoint } from './index';
 import { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';
+import { LegendsProps } from '../Legends/index';
 
 /**
  * Donut Chart properties.
  * {@docCategory DonutChart}
  */
-export interface DonutChartProps extends CartesianChartProps {
+export interface DonutChartProps {
   /**
    * Data to render in the chart.
    */
@@ -35,7 +36,7 @@ export interface DonutChartProps extends CartesianChartProps {
   /**
    * Define a custom callout props override
    */
-  customProps?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
+  calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
 
   /**
    * props for the callout in the chart
@@ -58,6 +59,54 @@ export interface DonutChartProps extends CartesianChartProps {
    * @default true
    */
   hideLabels?: boolean;
+
+  /**
+   * Below height used for resizing of the chart
+   * Wrap chart in your container and send the updated height and width to these props.
+   * These values decide wheather chart re render or not. Please check examples for reference
+   */
+  height?: number;
+
+  /**
+   * Below width used for resizing of the chart
+   * Wrap chart in your container and send the updated height and width to these props.
+   * These values decide wheather chart re render or not. Please check examples for reference
+   */
+  width?: number;
+
+  /**
+   * this prop takes its parent as a HTML element to define the width and height of the chart
+   */
+  parentRef?: HTMLElement | null;
+
+  /**
+   * Additional CSS class(es) to apply to the Chart.
+   */
+  className?: string;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  legendsOverflowText?: any;
+
+  /*
+   * props for the legends in the chart
+   */
+  legendProps?: Partial<LegendsProps>;
+
+  /** decides wether to show/hide legends
+   * @defaultvalue false
+   */
+  hideLegend?: boolean;
+
+  /**
+   * Url that the data-viz needs to redirect to upon clicking on it
+   */
+  href?: string;
+
+  /**
+   * Do not show tooltips in chart
+   * @default false
+   */
+  hideTooltip?: boolean;
 }
 
 /**