Remove unnecessary props

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

@@ -63,14 +63,12 @@ export interface Basestate {
     }[];
 }
 
-// @public (undocumented)
+// @public
 export const CartesianChart: React_2.FunctionComponent<ModifiedCartesianChartProps>;
 
 // @public
 export interface CartesianChartProps {
     calloutProps?: Partial<ChartPopoverProps>;
-    // @deprecated
-    chartLabel?: string;
     className?: string;
     customDateTimeFormatter?: (dateTime: Date) => string;
     customProps?: (dataPointCalloutProps: any) => ChartPopoverProps;
@@ -88,9 +86,7 @@ export interface CartesianChartProps {
     legendsOverflowText?: any;
     margins?: Margins;
     noOfCharsToTruncate?: number;
-    onResize?: (width: number, height: number) => void;
     parentRef?: HTMLElement | null;
-    responsive?: boolean;
     rotateXAxisLables?: boolean;
     secondaryYAxistitle?: string;
     secondaryYScaleOptions?: {
@@ -355,21 +351,31 @@ 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;
+    className?: string;
     culture?: string;
     customProps?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
     data?: ChartProps;
+    height?: number;
     hideLabels?: boolean;
+    hideLegend?: 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
@@ -766,6 +772,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 +866,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) => {
@@ -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;
 
@@ -413,19 +407,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

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_');
@@ -321,22 +320,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.
    */
@@ -58,6 +59,48 @@ 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;
 }
 
 /**

packages/charts/react-charts/library/src/components/CommonComponents/ResponsiveContainer/ResponsiveContainer.tsx → packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx

@@ -55,7 +55,12 @@ export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props =>
 
   return (
     <div ref={containerRef} className={classes.root} style={{ width: props.width, height: props.height }}>
-      {props.children(size)}
+      {React.Children.map(props.children, child => {
+        return React.cloneElement(child, {
+          width: size.containerWidth,
+          height: size.containerHeight,
+        });
+      })}
     </div>
   );
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface ResponsiveContainerProps {
-  children: (props: { containerWidth?: number; containerHeight?: number }) => React.ReactNode;
+  children: React.ReactElement;
   onResize?: (width: number, height: number) => void;
   width?: number | string;
   height?: number | string;

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

@@ -122,24 +122,6 @@ export interface VerticalBarChartStyleProps extends CartesianChartStyleProps {
  * {@docCategory VerticalBarChart}
  */
 export interface VerticalBarChartStyles extends CartesianChartStyles {
-  /**
-   * Style for the lines representing the ticks along the x-axis.
-   * @deprecated This style cannot be customized anymore
-   */
-  xAxisTicks?: string;
-
-  /**
-   * Style for the line representing the domain of the y-axis.
-   * @deprecated This style cannot be customized anymore
-   */
-  yAxisDomain?: string;
-
-  /**
-   * Style for the lines representing the ticks along the y-axis.
-   * @deprecated This style cannot be customized anymore
-   */
-  yAxisTicks?: string;
-
   /**
    * Style for the bar labels
    */

packages/charts/react-charts/library/src/components/VerticalBarChart/useVerticalBarChartStyles.styles.ts

@@ -5,9 +5,6 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
 
 export const verticalbarchartClassNames: SlotClassNames<VerticalBarChartStyles> = {
   opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',
-  xAxisTicks: 'fui-vbc__xAxisTicks',
-  yAxisTicks: 'fui-vbc__yAxisTicks',
-  yAxisDomain: 'fui-vbc__yAxisDomain',
   tooltip: 'fui-vbc__tooltip',
   barLabel: 'fui-vbc__barLabel',
   root: '',
@@ -32,13 +29,6 @@ export const verticalbarchartClassNames: SlotClassNames<VerticalBarChartStyles>
 };
 const useStyles = makeStyles({
   opacityChangeOnHover: {},
-  xAxisTicks: {},
-  yAxisTicks: {
-    transform: 'scaleX(-1)',
-  },
-  yAxisDomain: {
-    transform: 'scaleX(-1)',
-  },
   tooltip: {
     ...typographyStyles.body1,
     display: 'flex',
@@ -68,9 +58,6 @@ export const useVerticalBarChartStyles_unstable = (props: VerticalBarChartProps)
       verticalbarchartClassNames.opacityChangeOnHover,
       baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,
     ),
-    xAxisTicks: mergeClasses(baseStyles.xAxisTicks /*props.styles?.xAxisTicks*/),
-    yAxisTicks: mergeClasses(baseStyles.yAxisTicks /*props.styles?.yAxisTicks*/),
-    yAxisDomain: mergeClasses(baseStyles.yAxisDomain /*props.styles?.yAxisDomain*/),
     tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),
     barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),
   };

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

@@ -8,3 +8,4 @@ export * from './types/index';
 export * from './Sparkline';
 export * from './utilities/colors';
 export * from './Popover';
+export * from './ResponsiveContainer';