@fluentui/react-charting 5.24.9 → 5.24.11

package/src/components/ChartTable/ChartTable.types.ts

@@ -66,4 +66,5 @@ export interface IChartTableStyles {
   table?: IStyle;
   headerCell?: IStyle;
   bodyCell?: IStyle;
+  chart?: IStyle;
 }

package/src/components/CommonComponents/CartesianChart.types.ts

@@ -194,6 +194,11 @@ export interface ICartesianChartStyles {
    * Styles for the svg tooltip
    */
   svgTooltip?: IStyle;
+
+  /**
+   * Styles for the chart svg element
+   */
+  chart?: IStyle;
 }
 
 /**
@@ -564,6 +569,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   /**
    * Legends of the chart.
    */
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   legendBars: JSX.Element | null;
 
   /**

package/src/components/DonutChart/DonutChart.types.ts

@@ -106,4 +106,9 @@ export interface IDonutChartStyles {
    * styles for axis annotation
    */
   axisAnnotation?: IStyle;
+
+  /**
+   * Styles for the chart wrapper div
+   */
+  chartWrapper?: IStyle;
 }

package/src/components/FunnelChart/FunnelChart.types.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';
+import { ILegendsProps } from '../Legends/index';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+
+/**
+ * Data point for funnel chart
+ * {@docCategory FunnelChart}
+ */
+export interface IFunnelChartDataPoint {
+  /**
+   * Stage name or identifier
+   */
+  stage: string | number;
+  /**
+   * Sub-values for stacked funnel charts
+   * Each sub-value represents a category within the stage
+   */
+  subValues?: Array<{ category: string; value: number; color: string }>;
+  /**
+   * Value for the stage (used for non-stacked funnel charts)
+   */
+  value?: number;
+  /**
+   * Color for the stage (used for non-stacked funnel charts)
+   */
+  color?: string;
+}
+
+/**
+ * Funnel Chart component props
+ * {@docCategory FunnelChart}
+ */
+export interface IFunnelChartProps {
+  /**
+   * Data points for the funnel chart
+   */
+  data: IFunnelChartDataPoint[];
+  /**
+   * Title for the chart
+   */
+  chartTitle?: string;
+  /**
+   * Width of the chart
+   */
+  width?: number;
+
+  /**
+   * Height of the chart
+   */
+  height?: number;
+
+  /**
+   * Decides whether to show/hide legends
+   * @defaultvalue false
+   */
+  hideLegend?: boolean;
+
+  /**
+   * Props for the legends in the chart
+   */
+  legendProps?: Partial<ILegendsProps>;
+
+  /**
+   * Props for the callout in the chart
+   */
+  calloutProps?: Partial<ICalloutProps>;
+
+  /**
+   * Theme (provided through customization)
+   */
+  theme?: ITheme;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  styles?: IStyleFunctionOrObject<IFunnelChartStyleProps, IFunnelChartStyles>;
+
+  /**
+   * Defines the culture to localize the numbers and dates
+   */
+  culture?: string;
+
+  /**
+   * Reference to the chart component
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentRef?: React.RefObject<any>;
+
+  /**
+   * Additional CSS class(es) to apply to the chart
+   */
+  className?: string;
+
+  /**
+   * Orientation of the funnel chart
+   * @defaultvalue 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * Funnel Chart style properties
+ * {@docCategory FunnelChart}
+ */
+export interface IFunnelChartStyleProps {
+  /**
+   * Theme (provided through customization)
+   */
+  theme: ITheme;
+  /**
+   * Additional CSS class(es) to apply to the chart
+   */
+  className?: string;
+  /**
+   * Width of the chart
+   */
+  chartWidth: number;
+  /**
+   * Height of the chart
+   */
+  chartHeight: number;
+}
+
+/**
+ * Funnel Chart styles
+ * {@docCategory FunnelChart}
+ */
+export interface IFunnelChartStyles {
+  /**
+   * Styles for the root element
+   */
+  root?: IStyle;
+
+  /**
+   * Styles for the chart
+   */
+  chart?: IStyle;
+
+  /**
+   * Styles for text elements
+   */
+  text?: IStyle;
+
+  /**
+   * Styles for sub-components
+   */
+  subComponentStyles: {
+    calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
+  };
+}

package/src/components/GaugeChart/GaugeChart.types.ts

@@ -331,4 +331,9 @@ export interface IGaugeChartStyles {
    * Styles for the shape object in the callout
    */
   shapeStyles?: IStyle;
+
+  /**
+   * Styles for the chart wrapper div
+   */
+  chartWrapper?: IStyle;
 }

package/src/components/LineChart/LineChart.types.ts

@@ -94,6 +94,13 @@ export interface ILineChartProps extends ICartesianChartProps {
    * @deprecated this prop no longer used to identify scatter mode
    */
   lineMode?: 'default' | 'scatter';
+
+  /**
+   * To enable callout for individual line or complete stack.
+   * @default false
+   * @type \{boolean \}
+   */
+  isCalloutForStack?: boolean;
 }
 
 /**

package/src/components/ResponsiveContainer/ResponsiveContainer.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
+import { IStyleFunctionOrObject } from '@fluentui/react';
 
 /**
  * Responsive Child props
@@ -9,7 +9,8 @@ export interface IResponsiveChildProps {
   width?: number;
   height?: number;
   shouldResize?: number;
-  styles?: IStyleFunctionOrObject<{}, { root: IStyle }>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  styles?: IStyleFunctionOrObject<any, any>;
 }
 
 /**

package/src/components/SankeyChart/SankeyChart.types.ts

@@ -151,6 +151,11 @@ export interface ISankeyChartStyles {
    * Styles for the chart wrapper div
    */
   chartWrapper?: IStyle;
+
+  /**
+   * Styles for the chart svg element
+   */
+  chart?: IStyle;
 }
 
 /**