@fluentui/react-charting 5.24.2 → 5.24.4

package/CHANGELOG.json

@@ -2,7 +2,85 @@
   "name": "@fluentui/react-charting",
   "entries": [
     {
-      "date": "Fri, 06 Jun 2025 07:20:09 GMT",
+      "date": "Fri, 13 Jun 2025 07:20:35 GMT",
+      "tag": "@fluentui/react-charting_v5.24.4",
+      "version": "5.24.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "fc903495e657ec509ad87d4139c259e3ca9c9071",
+            "comment": "fix(react-charting): Support for using opacity provided in schema for decalarative charts"
+          },
+          {
+            "author": "kumarkshitij@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "116903a192cd16054d2ca2a8f18d6d623fed5384",
+            "comment": "feat: add support for ordering string tick labels on x and y axes"
+          },
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "a73394f7914fc6051e0e6567caa89b6ff6c9799d",
+            "comment": "fix(react-charting): Fixing color, marker size, yaxis issues for Scatter chart"
+          },
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "e5291abb46493301e00b72a3c65694e21a6f8793",
+            "comment": "fix(react-charting): Fixing resolve color issue"
+          },
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "1023a785befbd8f6e2b20b133e7f4a2e1d5ee639",
+            "comment": "fix(react-charting): Fixing color issue for GVBC"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/chart-utilities to v1.1.17",
+            "commit": "116903a192cd16054d2ca2a8f18d6d623fed5384"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 12 Jun 2025 07:20:13 GMT",
+      "tag": "@fluentui/react-charting_v5.24.3",
+      "version": "5.24.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "anushgupta@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "96ebe14eefb14c65b03856f17ffc03e8120cdea7",
+            "comment": "axis title background fix"
+          },
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "3e902f17659ae2f04fbf92f72dba48b5e9c1cad5",
+            "comment": "feat(react-charting): Adding Scatter chart component"
+          },
+          {
+            "author": "98592573+AtishayMsft@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "4524a28299ce317d53ca354f7c0e202e5a491d04",
+            "comment": "feat(react-charting): Enable support for multiplots in declarative chart"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/chart-utilities to v1.1.16",
+            "commit": "96ebe14eefb14c65b03856f17ffc03e8120cdea7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 Jun 2025 07:20:30 GMT",
       "tag": "@fluentui/react-charting_v5.24.2",
       "version": "5.24.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Fri, 06 Jun 2025 07:20:09 GMT and should not be manually modified.
+This log was last generated on Fri, 13 Jun 2025 07:20:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.24.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.24.4)
+
+Fri, 13 Jun 2025 07:20:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.24.3..@fluentui/react-charting_v5.24.4)
+
+### Patches
+
+- fix(react-charting): Support for using opacity provided in schema for decalarative charts ([PR #34635](https://github.com/microsoft/fluentui/pull/34635) by 120183316+srmukher@users.noreply.github.com)
+- feat: add support for ordering string tick labels on x and y axes ([PR #34623](https://github.com/microsoft/fluentui/pull/34623) by kumarkshitij@microsoft.com)
+- fix(react-charting): Fixing color, marker size, yaxis issues for Scatter chart ([PR #34628](https://github.com/microsoft/fluentui/pull/34628) by 120183316+srmukher@users.noreply.github.com)
+- fix(react-charting): Fixing resolve color issue ([PR #34636](https://github.com/microsoft/fluentui/pull/34636) by 120183316+srmukher@users.noreply.github.com)
+- fix(react-charting): Fixing color issue for GVBC ([PR #34637](https://github.com/microsoft/fluentui/pull/34637) by 120183316+srmukher@users.noreply.github.com)
+- Bump @fluentui/chart-utilities to v1.1.17 ([PR #34623](https://github.com/microsoft/fluentui/pull/34623) by beachball)
+
+## [5.24.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.24.3)
+
+Thu, 12 Jun 2025 07:20:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.24.2..@fluentui/react-charting_v5.24.3)
+
+### Patches
+
+- axis title background fix ([PR #34621](https://github.com/microsoft/fluentui/pull/34621) by anushgupta@microsoft.com)
+- feat(react-charting): Adding Scatter chart component ([PR #34374](https://github.com/microsoft/fluentui/pull/34374) by 120183316+srmukher@users.noreply.github.com)
+- feat(react-charting): Enable support for multiplots in declarative chart ([PR #34626](https://github.com/microsoft/fluentui/pull/34626) by 98592573+AtishayMsft@users.noreply.github.com)
+- Bump @fluentui/chart-utilities to v1.1.16 ([PR #34621](https://github.com/microsoft/fluentui/pull/34621) by beachball)
+
 ## [5.24.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.24.2)
 
-Fri, 06 Jun 2025 07:20:09 GMT 
+Fri, 06 Jun 2025 07:20:30 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.24.1..@fluentui/react-charting_v5.24.2)
 
 ### Patches

package/dist/react-charting.d.ts

@@ -28,6 +28,25 @@ import { TimeLocaleDefinition } from 'd3-time-format';
  */
 export declare const AreaChart: React_2.FunctionComponent<IAreaChartProps>;
 
+/**
+ * Specifies the ordering options for axis categories in Cartesian charts.
+ *
+ * - `'default'`: Uses the original order before custom ordering was supported.
+ *   In some charts, this behaves the same as `'data'`.
+ * - `'data'`: Preserves the order of categories as provided in the input data.
+ * - `string[]`: Explicitly defines the custom order of categories as an array of category names.
+ * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.
+ * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.
+ * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.
+ * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.
+ * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').
+ * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.
+ * - `'median ascending' | 'median descending'`: Orders by the median value of each category.
+ *
+ * {@docCategory CartesianChart}
+ */
+export declare type AxisCategoryOrder = 'default' | 'data' | string[] | 'category ascending' | 'category descending' | 'total ascending' | 'total descending' | 'min ascending' | 'min descending' | 'max ascending' | 'max descending' | 'sum ascending' | 'sum descending' | 'mean ascending' | 'mean descending' | 'median ascending' | 'median descending';
+
 /**
  * Cartesian Chart component
  * {@docCategory CartesianChart}
@@ -58,7 +77,8 @@ declare enum ChartTypes {
     VerticalStackedBarChart = 3,
     GroupedVerticalBarChart = 4,
     HeatMapChart = 5,
-    HorizontalBarChartWithAxis = 6
+    HorizontalBarChartWithAxis = 6,
+    ScatterChart = 7
 }
 
 declare type ColorwayType = 'default' | 'builtin' | 'others' | undefined;
@@ -335,6 +355,46 @@ declare interface IAxisData {
     yAxisDomainValues: number[];
 }
 
+/**
+ * {@docCategory IChartData}
+ */
+export declare interface IBaseDataPoint {
+    /**
+     * 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?: IAccessibilityProps;
+    /**
+     * X axis Accessibility data for callout
+     */
+    xAxisCalloutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Marker size of the points
+     */
+    markerSize?: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
+}
+
 export declare interface IBasestate {
     _width?: number;
     _height?: number;
@@ -594,6 +654,28 @@ export declare interface ICartesianChartProps {
      * @default false
      */
     hideTickOverlap?: boolean;
+    /**
+     * Prop to set the x axis annotation. Used to display additional information on the x-axis.
+     * This is shown on the top of the chart.
+     * @default undefined
+     */
+    xAxisAnnotation?: string;
+    /**
+     * Prop to set the y axis annotation. Used to display additional information on the y-axis.
+     * This is shown on the right side of the chart. Not shown if secondary y-axis is enabled.
+     * @default undefined
+     */
+    yAxisAnnotation?: string;
+    /**
+     * Specifies the ordering logic for categories (or string tick labels) on the x-axis.
+     * @default 'default'
+     */
+    xAxisCategoryOrder?: AxisCategoryOrder;
+    /**
+     * Specifies the ordering logic for categories (or string tick labels) on the y-axis.
+     * @default 'default'
+     */
+    yAxisCategoryOrder?: AxisCategoryOrder;
 }
 
 /**
@@ -709,9 +791,13 @@ export declare interface ICartesianChartStyles {
      */
     tooltip?: IStyle;
     /**
-     * styles for tooltip
+     * styles for axis title
      */
     axisTitle?: IStyle;
+    /**
+     * styles for axis annotation
+     */
+    axisAnnotation?: IStyle;
     /**
      * Style for the chart Title.
      */
@@ -728,6 +814,10 @@ export declare interface ICartesianChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: IStyle;
+    /**
+     * Styles for the svg tooltip
+     */
+    svgTooltip?: IStyle;
 }
 
 /**
@@ -918,6 +1008,10 @@ export declare interface IChartProps {
      * data for the points in the line chart
      */
     lineChartData?: ILineChartPoints[];
+    /**
+     * data for the points in the scatter chart
+     */
+    scatterChartData?: IScatterChartPoints[];
     /**
      * data for the points in the line chart
      */
@@ -2481,7 +2575,7 @@ export declare interface ILegendSubComponentStyles {
 /**
  * {@docCategory IChartData}
  */
-export declare interface ILineChartDataPoint {
+export declare interface ILineChartDataPoint extends IBaseDataPoint {
     /**
      * 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.
@@ -2492,40 +2586,6 @@ export declare interface ILineChartDataPoint {
      * 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?: IAccessibilityProps;
-    /**
-     * X axis Accessibility data for callout
-     */
-    xAxisCalloutAccessibilityData?: IAccessibilityProps;
-    /**
-     * Marker size of the points
-     */
-    markerSize?: number;
-    /**
-     * text labels of marker points
-     */
-    text?: string;
 }
 
 /**
@@ -2943,7 +3003,7 @@ export declare interface IModifiedCartesianChartProps extends ICartesianChartPro
     /**
      * Get the min and max values of the y-axis
      */
-    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
+    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[] | IScatterChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
         startValue: number;
         endValue: number;
     };
@@ -3479,6 +3539,106 @@ export declare interface ISankeyChartStyles {
     chartWrapper?: IStyle;
 }
 
+/**
+ * {@docCategory IChartData}
+ * ScatterChartDataPoint interface.
+ */
+export declare interface IScatterChartDataPoint extends IBaseDataPoint {
+    /**
+     * 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;
+}
+
+/**
+ * {@docCategory IChartData}
+ */
+export declare interface IScatterChartPoints {
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend: string;
+    /**
+     * The shape for the legend
+     * default: show the rect legend
+     */
+    legendShape?: LegendShape;
+    /**
+     * dataPoints for the line chart
+     */
+    data: IScatterChartDataPoint[];
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * opacity for chart fill color
+     */
+    opacity?: number;
+    /**
+     * hide dots for points that are not active
+     */
+    hideNonActiveDots?: boolean;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
+}
+
+/**
+ * Line Chart properties
+ * {@docCategory LineChart}
+ */
+export declare interface IScatterChartProps extends ICartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: IChartProps;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IScatterChartStyles;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+    /**
+     * Callback for getting callout description message
+     */
+    getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+
+/**
+ * Scatter Chart style properties
+ * {@docCategory ScatterChart}
+ */
+export declare interface IScatterChartStyleProps extends ICartesianChartStyleProps {
+}
+
+/**
+ * Scatter Chart styles
+ * {@docCategory ScatterChart}
+ */
+export declare interface IScatterChartStyles extends ICartesianChartStyles {
+    /**
+     * Style for the marker label
+     */
+    markerLabel?: IStyle_2;
+}
+
 export declare interface IShapeProps {
     svgProps: React_2.SVGAttributes<SVGElement>;
     pathProps: React_2.SVGAttributes<SVGPathElement>;
@@ -4604,6 +4764,12 @@ export declare const ResponsiveContainer: React_2.FC<IResponsiveContainerProps>;
  */
 export declare const SankeyChart: React_2.FunctionComponent<ISankeyChartProps>;
 
+/**
+ * Scatterchart component
+ * {@docCategory ScatterChart}
+ */
+export declare const ScatterChart: React_2.FunctionComponent<IScatterChartProps>;
+
 /**
  * DeclarativeChart schema.
  * {@docCategory DeclarativeChart}