@fluentui/react-charts 9.0.0 → 9.0.2

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Wed, 26 Mar 2025 15:52:05 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Apr 2025 14:05:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.0.2)
+
+Tue, 01 Apr 2025 14:05:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.0.1..@fluentui/react-charts_v9.0.2)
+
+### Patches
+
+- Migrate Gauge chart to V9 ([PR #33998](https://github.com/microsoft/fluentui/pull/33998) by 74965306+Anush2303@users.noreply.github.com)
+- (feat) Implement grouped vertical bar and scatter chart ([PR #34091](https://github.com/microsoft/fluentui/pull/34091) by 98592573+AtishayMsft@users.noreply.github.com)
+- Bump @fluentui/react-button to v9.4.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+- Bump @fluentui/react-overflow to v9.3.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+- Bump @fluentui/react-popover to v9.10.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+- Bump @fluentui/react-tabster to v9.24.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+- Bump @fluentui/react-tooltip to v9.6.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+
+## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.0.1)
+
+Thu, 27 Mar 2025 21:12:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.0.0..@fluentui/react-charts_v9.0.1)
+
+### Patches
+
+- Bump @fluentui/react-button to v9.4.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.53 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-overflow to v9.3.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-popover to v9.10.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-tabster to v9.24.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-tooltip to v9.6.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+
 ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.0.0)
 
-Wed, 26 Mar 2025 15:52:05 GMT 
+Wed, 26 Mar 2025 15:52:37 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts-preview_v0.2.2..@fluentui/react-charts_v9.0.0)
 
 ### Patches

package/dist/index.d.ts

@@ -22,6 +22,40 @@ export declare interface AccessibilityProps {
     ariaDescribedBy?: string;
 }
 
+export declare const ARC_PADDING = 2;
+
+/**
+ * {@docCategory ChartData}
+ */
+declare interface BaseDataPoint {
+    /**
+     * Defines the function that is executed on clicking  line
+     */
+    onDataPointClick?: () => void;
+    /**
+     * Callout data for x axis
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     */
+    yAxisCalloutData?: string | {
+        [id: string]: number;
+    };
+    /**
+     * Whether to hide callout data for the point.
+     */
+    hideCallout?: boolean;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * X axis Accessibility data for callout
+     */
+    xAxisCalloutAccessibilityData?: AccessibilityProps;
+}
+
 export declare interface Basestate {
     _width?: number;
     _height?: number;
@@ -48,6 +82,14 @@ export declare interface Basestate {
     containerHeight?: number;
 }
 
+export declare const BREAKPOINTS: {
+    minRadius: number;
+    arcWidth: number;
+    fontSize: number;
+}[];
+
+export declare const calcNeedleRotation: (chartValue: number, minValue: number, maxValue: number) => number;
+
 /**
  * Cartesian Chart component
  * {@docCategory CartesianChart}
@@ -538,7 +580,8 @@ declare enum ChartTypes {
     VerticalStackedBarChart = 3,
     GroupedVerticalBarChart = 4,
     HeatMapChart = 5,
-    HorizontalBarChartWithAxis = 6
+    HorizontalBarChartWithAxis = 6,
+    ScatterChart = 7
 }
 
 export declare interface ChildProps {
@@ -835,10 +878,231 @@ export declare interface EventsAnnotationProps {
     mergedLabel: (count: number) => string;
 }
 
+export declare interface ExtendedSegment extends GaugeChartSegment {
+    start: number;
+    end: number;
+}
+
+export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
+
+/**
+ * Gauge Chart properties
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartProps {
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+    /**
+     * Title of the chart
+     */
+    chartTitle?: string;
+    /**
+     * Current value of the gauge
+     */
+    chartValue: number;
+    /**
+     * Sections of the gauge
+     */
+    segments: GaugeChartSegment[];
+    /**
+     * Minimum value of the gauge
+     * @defaultvalue 0
+     */
+    minValue?: number;
+    /**
+     * Maximum value of the gauge
+     */
+    maxValue?: number;
+    /**
+     * Additional text to display below the chart value
+     */
+    sublabel?: string;
+    /**
+     * Hide the min and max values of the gauge
+     * @defaultvalue false
+     */
+    hideMinMax?: boolean;
+    /**
+     * Format of the chart value
+     * @defaultvalue GaugeValueFormat.Percentage
+     */
+    chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);
+    /**
+     * Decides whether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * Do not show tooltips in chart
+     * @defaultvalue false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: GaugeChartStyles;
+    /**
+     * Defines the culture to localize the numbers and dates
+     */
+    culture?: string;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: Partial<ChartPopoverProps>;
+    /**
+     * Specifies the variant of GaugeChart to be rendered
+     * @defaultvalue GaugeChartVariant.MultipleSegments
+     */
+    variant?: GaugeChartVariant;
+    /**
+     * Prop to enable the gradient in the chart
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: boolean;
+}
+
+/**
+ * Gauge Chart segment interface.
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartSegment {
+    /**
+     * Legend text for a segment
+     */
+    legend: string;
+    /**
+     * Size of the segment
+     */
+    size: number;
+    /**
+     * Color of the segment
+     */
+    color?: string;
+    /**
+     * Gradient color of the segment
+     */
+    gradient?: [string, string];
+    /**
+     * Accessibility data for the segment
+     */
+    accessibilityData?: AccessibilityProps;
+}
+
+/**
+ * Gauge Chart styles
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartStyles {
+    /**
+     * Styles for the root element
+     */
+    root?: string;
+    /**
+     * Styles for the chart
+     */
+    chart?: string;
+    /**
+     * Styles for the min and max values
+     */
+    limits?: string;
+    /**
+     * Styles for the chart value
+     */
+    chartValue?: string;
+    /**
+     * Styles for the sublabel
+     */
+    sublabel?: string;
+    /**
+     * Styles for the needle
+     */
+    needle?: string;
+    /**
+     * Styles for the chart title
+     */
+    chartTitle?: string;
+    /**
+     * Styles for the segments
+     */
+    segment?: string;
+    /**
+     * Styles for gradient segments
+     */
+    gradientSegment?: string;
+    /**
+     * Styles for the legends container
+     */
+    legendsContainer?: string;
+    /**
+     * Styles for callout root-content
+     */
+    calloutContentRoot?: string;
+    /**
+     * Styles for callout x-content
+     */
+    calloutContentX?: string;
+    /**
+     * Styles for callout y-content
+     */
+    calloutContentY?: string;
+    /**
+     * Styles for description message
+     */
+    descriptionMessage?: string;
+    /**
+     * Styles for callout Date time container
+     */
+    calloutDateTimeContainer?: string;
+    /**
+     * Styles for callout info container
+     */
+    calloutInfoContainer?: string;
+    /**
+     * Styles for callout block container
+     */
+    calloutBlockContainer?: string;
+    /**
+     * Styles for callout legend text
+     */
+    calloutlegendText?: string;
+    /**
+     * Styles for the shape object in the callout
+     */
+    shapeStyles?: string;
+}
+
+/**
+ * {@docCategory GaugeChart}
+ */
+export declare type GaugeChartVariant = 'single-segment' | 'multiple-segments';
+
+/**
+ * {@docCategory GaugeChart}
+ */
+export declare type GaugeValueFormat = 'percentage' | 'fraction';
+
+export declare const getChartValueLabel: (chartValue: number, minValue: number, maxValue: number, chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string) | undefined, forCallout?: boolean) => string;
+
 export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
 
 export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
 
+export declare const getSegmentLabel: (segment: ExtendedSegment, minValue: number, maxValue: number, variant?: GaugeChartVariant, isAriaLabel?: boolean) => string;
+
+export declare const GroupedVerticalBarChart: React_2.FC<GroupedVerticalBarChartProps>;
+
 /**
  * {@docCategory ChartData}
  */
@@ -857,6 +1121,96 @@ export declare interface GroupedVerticalBarChartData {
     stackCallOutAccessibilityData?: AccessibilityProps;
 }
 
+/**
+ * Vertical Bar Chart properties
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface GroupedVerticalBarChartProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: GroupedVerticalBarChartData[];
+    /**
+     * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,
+     * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.
+     * @default 16
+     */
+    barWidth?: number | 'default' | 'auto';
+    /**
+     * Colors from which to select the color of each bar.
+     */
+    colors?: string[];
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * This prop makes sure that all the bars are of same color.
+     * it will take the first color from the array of colors in
+     * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight
+     * @default false
+     */
+    useSingleColor?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: GroupedVerticalBarChartStyles;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * To display multi stack callout or single callout
+     * @default false
+     */
+    isCalloutForStack?: boolean;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * Maximum width of a bar, in pixels.
+     * @default 24
+     */
+    maxBarWidth?: number;
+    /**
+     * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).
+     * Takes a number in the range [0, 1]. Only applicable to string x-axis.
+     * @default 2/3
+     */
+    xAxisInnerPadding?: number;
+    /**
+     * Padding before the first bar and after the last bar as a fraction of
+     * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].
+     * Only applicable to string x-axis.
+     */
+    xAxisOuterPadding?: number;
+    /**
+     * Specifies the mode of the chart.
+     * @default 'default'
+     */
+    mode?: 'default' | 'plotly';
+}
+
+/**
+ * Vertical Bar Chart style properties
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface GroupedVerticalBarChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Vertical Bar Chart styles
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface GroupedVerticalBarChartStyles extends CartesianChartStyles {
+    /**
+     * Style for the bar labels
+     */
+    barLabel: string;
+}
+
 /**
  * {@docCategory ChartData}
  */
@@ -1280,16 +1634,51 @@ export declare interface LegendsProps {
      */
     onChange?: (selectedLegends: string[], event: React_2.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;
     /**
-     * Keys (title) that will be initially used to set selected items.
-     * This prop is used for multiSelect scenarios.
-     * In other cases, defaultSelectedLegend should be used.
+     * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when
+     * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegends instead.
+     *
+     * @see selectedLegends for setting the selected legends in controlled mode.
+     * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.
      */
     defaultSelectedLegends?: string[];
     /**
-     * Key that will be initially used to set selected item.
-     * This prop is used for singleSelect scenarios.
+     * Key that will be initially used to set selected item. This prop is used for single-select scenarios when
+     * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegend instead.
+     *
+     * @see selectedLegend for setting the selected legend in controlled mode.
+     * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.
      */
     defaultSelectedLegend?: string;
+    /**
+     * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is
+     * true. For single-select, use selectedLegend.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.
+     * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.
+     */
+    selectedLegends?: string[];
+    /**
+     * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is
+     * false or unspecified. For multi-select, use selectedLegends.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.
+     * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.
+     */
+    selectedLegend?: string;
     /**
      * The shape for the legend.
      */
@@ -1366,43 +1755,15 @@ export declare const LineChart: React_2.FunctionComponent<LineChartProps>;
 /**
  * {@docCategory ChartData}
  */
-export declare interface LineChartDataPoint {
+export declare interface LineChartDataPoint extends BaseDataPoint {
     /**
      * Independent value of the data point, rendered along the x-axis.
-     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
-     * If data type on x is Date, then the data is spaced evenly by d3-scale
      */
     x: number | Date;
     /**
      * Dependent value of the data point, rendered along the y-axis.
      */
     y: number;
-    /**
-     * Defines the function that is executed on clicking  line
-     */
-    onDataPointClick?: () => void;
-    /**
-     * Callout data for x axis
-     */
-    xAxisCalloutData?: string;
-    /**
-     * Callout data for y axis
-     */
-    yAxisCalloutData?: string | {
-        [id: string]: number;
-    };
-    /**
-     * Whether to hide callout data for the point.
-     */
-    hideCallout?: boolean;
-    /**
-     * Accessibility data for callout
-     */
-    callOutAccessibilityData?: AccessibilityProps;
-    /**
-     * X axis Accessibility data for callout
-     */
-    xAxisCalloutAccessibilityData?: AccessibilityProps;
 }
 
 /**
@@ -1471,7 +1832,7 @@ export declare interface LineChartPoints {
     /**
      * dataPoints for the line chart
      */
-    data: LineChartDataPoint[];
+    data: LineChartDataPoint[] | ScatterChartDataPoint[];
     /**
      * gaps in the line chart where a line is not drawn
      */
@@ -1790,6 +2151,72 @@ declare interface ResponsiveContainerProps {
     height?: number | string;
 }
 
+/**
+ * ScatterChart component
+ * {@docCategory ScatterChart}
+ */
+export declare const ScatterChart: React_2.FunctionComponent<ScatterChartProps>;
+
+/**
+ * {@docCategory ChartData}
+ * ScatterChartDataPoint interface.
+ */
+export declare interface ScatterChartDataPoint extends BaseDataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     */
+    x: number | Date | string;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
+     */
+    y: number;
+    /**
+     * Marker size of the points
+     */
+    markerSize?: number;
+}
+
+/**
+ * Line Chart properties
+ * {@docCategory LineChart}
+ */
+export declare interface ScatterChartProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: ChartProps;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: ScatterChartStyles;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
+    /**
+     * Callback for getting callout description message
+     */
+    getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+
+/**
+ * Scatter Chart style properties
+ * {@docCategory ScatterChart}
+ */
+export declare interface ScatterChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Scatter Chart styles
+ * {@docCategory ScatterChart}
+ */
+export declare interface ScatterChartStyles extends CartesianChartStyles {
+}
+
 /**
  * DeclarativeChart schema.
  * {@docCategory DeclarativeChart}

package/lib/GaugeChart.js

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

package/lib/GaugeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GaugeChart.ts"],"sourcesContent":["export * from './components/GaugeChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,gCAAgC"}

package/lib/GroupedVerticalBarChart.js

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

package/lib/GroupedVerticalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GroupedVerticalBarChart.ts"],"sourcesContent":["export * from './components/GroupedVerticalBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6CAA6C"}

package/lib/ScatterChart.js

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

package/lib/ScatterChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ScatterChart.ts"],"sourcesContent":["export * from './components/ScatterChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,kCAAkC"}