Merge branch 'master' into feat/add-eslint-rule-prefer-v9

change/@fluentui-react-charting-346c6b7e-b146-4cb5-a8af-a675243a27eb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Gauge and Pie chart fixes",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/CHANGELOG.json

@@ -1,6 +1,63 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-charting_v5.23.36",
+      "version": "5.23.36",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8",
+            "comment": "fix: resolve css variables in svg image data"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:09 GMT",
+      "tag": "@fluentui/react-charting_v5.23.35",
+      "version": "5.23.35",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2",
+            "comment": "HeatMap chart bug fixes"
+          },
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "db1eb859113249615f1de99d409d330231761420",
+            "comment": "Initialization of state variables and updating for HorizontalBarChartWithAxis chart"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 Dec 2024 07:21:44 GMT",
+      "tag": "@fluentui/react-charting_v5.23.34",
+      "version": "5.23.34",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "98e409211ed673c877e45bbff7ccc08a1ccd34de",
+            "comment": "[Horizontal Bar Chart With Axis] Enable multiple legend selection"
+          },
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "d61ac31da90bf8f73f54262e196b3a83b9a85932",
+            "comment": "[Gauge Chart] Enabling legend multi selection"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 30 Dec 2024 07:21:28 GMT",
       "tag": "@fluentui/react-charting_v5.23.33",

packages/charts/react-charting/CHANGELOG.md

@@ -1,9 +1,38 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Mon, 30 Dec 2024 07:21:28 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.36)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.35..@fluentui/react-charting_v5.23.36)
+
+### Patches
+
+- fix: resolve css variables in svg image data ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by [email protected])
+
+## [5.23.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.35)
+
+Wed, 01 Jan 2025 07:21:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.34..@fluentui/react-charting_v5.23.35)
+
+### Patches
+
+- HeatMap chart bug fixes ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by [email protected])
+- Initialization of state variables and updating for HorizontalBarChartWithAxis chart ([PR #33532](https://github.com/microsoft/fluentui/pull/33532) by [email protected])
+
+## [5.23.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.34)
+
+Tue, 31 Dec 2024 07:21:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.33..@fluentui/react-charting_v5.23.34)
+
+### Patches
+
+- [Horizontal Bar Chart With Axis] Enable multiple legend selection ([PR #33484](https://github.com/microsoft/fluentui/pull/33484) by [email protected])
+- [Gauge Chart] Enabling legend multi selection ([PR #33524](https://github.com/microsoft/fluentui/pull/33524) by [email protected])
+
 ## [5.23.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.33)
 
 Mon, 30 Dec 2024 07:21:28 GMT 

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

@@ -722,6 +722,7 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
     legendProps?: Partial<ILegendsProps>;
     rangeValuesForColorScale: string[];
     showYAxisLables?: boolean;
+    sortOrder?: 'none' | 'alphabetical';
     styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;
     xAxisDateFormatString?: string;
     xAxisNumberFormatString?: string;

packages/charts/react-charting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.33",
+  "version": "5.23.36",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -127,7 +127,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   const exportAsImage = React.useCallback(
     (opts?: IImageExportOptions) => {
       return toImage(chartRef.current?.chartContainer, {
-        background: theme.palette.white,
+        background: theme.semanticColors.bodyBackground,
         ...opts,
       });
     },
@@ -247,7 +247,6 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
       return (
         <HeatMapChart
           {...transformPlotlyJsonToHeatmapProps(plotlySchema)}
-          legendProps={legendProps}
           componentRef={chartRef}
           calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -24,8 +24,8 @@ import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/
 import { ILineChartProps } from '../LineChart/index';
 import { IAreaChartProps } from '../AreaChart/index';
 import { IHeatMapChartProps } from '../HeatMapChart/index';
-import { getNextColor } from '../../utilities/colors';
-import { IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
+import { DataVizPalette, getNextColor } from '../../utilities/colors';
+import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
 
@@ -98,7 +98,9 @@ export const transformPlotlyJsonToDonutProps = (
 
   const width: number = typeof layout?.width === 'number' ? layout?.width : 440;
   const height: number = typeof layout?.height === 'number' ? layout?.height : 220;
-  const hideLabels: boolean = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false;
+  const hideLabels: boolean = firstData.textinfo
+    ? !['value', 'percent', 'label+percent'].includes(firstData.textinfo)
+    : false;
   const donutMarginHorizontal: number = hideLabels ? 0 : 80;
   const donutMarginVertical: number = 40 + (hideLabels ? 0 : 40);
   const innerRadius: number = firstData.hole
@@ -399,6 +401,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
         x: layout.xaxis?.type === 'date' ? new Date(xVal) : xVal,
         y: layout.yaxis?.type === 'date' ? new Date(yVal) : yVal,
         value: zVal,
+        rectText: zVal,
       });
 
       zMin = Math.min(zMin, zVal);
@@ -423,6 +426,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
     rangeValuesForColorScale,
     hideLegend: true,
     showYAxisLables: true,
+    sortOrder: 'none',
   };
 };
 
@@ -442,7 +446,7 @@ export const transformPlotlyJsonToSankeyProps = (
     // eslint-disable-next-line @typescript-eslint/no-shadow
     //@ts-expect-error Dynamic link object. Ignore for now.
     // Filter out negative nodes, unequal nodes and self-references (circular links)
-    .filter(x => x.source > 0 && x.target > 0 && x.source !== x.target);
+    .filter(x => x.source >= 0 && x.target >= 0 && x.source !== x.target);
 
   const sankeyChartData = {
     nodes: node.label.map((label: string, index: number) => {
@@ -502,9 +506,14 @@ export const transformPlotlyJsonToGaugeProps = (
       })
     : [
         {
-          legend: 'Segment 1',
-          size: (firstData.gauge?.range?.[1] ?? 0) - (firstData.gauge?.range?.[0] ?? 0),
-          color: getColor('Segment 1', colorMap, isDarkTheme),
+          legend: 'Current',
+          size: firstData.value ?? 0 - (firstData.gauge?.range?.[0] ?? 0),
+          color: getColor('Current', colorMap, isDarkTheme),
+        },
+        {
+          legend: 'Target',
+          size: (firstData.gauge?.range?.[1] ?? 100) - (firstData.value ?? 0),
+          color: DataVizPalette.disabled,
         },
       ];
 
@@ -538,9 +547,10 @@ export const transformPlotlyJsonToGaugeProps = (
     minValue: typeof firstData.gauge?.axis?.range?.[0] === 'number' ? firstData.gauge?.axis?.range?.[0] : undefined,
     maxValue: typeof firstData.gauge?.axis?.range?.[1] === 'number' ? firstData.gauge?.axis?.range?.[1] : undefined,
     chartValueFormat: () => firstData.value,
-    width: typeof layout?.width === 'number' ? layout?.width : 0,
-    height: typeof layout?.height === 'number' ? layout?.height : 0,
+    width: typeof layout?.width === 'number' ? layout?.width : 440,
+    height: typeof layout?.height === 'number' ? layout?.height : 220,
     styles,
+    variant: firstData.gauge?.steps?.length ? GaugeChartVariant.MultipleSegments : GaugeChartVariant.SingleSegment,
   };
 };
 

packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts

@@ -17,7 +17,8 @@ export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportO
     }
 
     try {
-      const background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9
+      const background =
+        typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';
       const svg = toSVG(chartContainer, background);
 
       const svgData = new XMLSerializer().serializeToString(svg.node);
@@ -65,7 +66,7 @@ function toSVG(chartContainer: HTMLElement, background: string) {
 
   const svgElements = svg.getElementsByTagName('*');
   const styleSheets = document.styleSheets;
-  const styleRules: string[] = [];
+  let styleRules: string = '';
 
   for (let i = svgElements.length - 1; i--; ) {
     svgElements[i].classList.forEach(className => {
@@ -81,14 +82,15 @@ function toSVG(chartContainer: HTMLElement, background: string) {
         const hasClassName = selectorText.split(' ').some(word => classNames.has(word));
 
         if (hasClassName) {
-          styleRules.push(rules[j].cssText);
+          styleRules += rules[j].cssText + ' ';
         }
       }
     }
   }
+  styleRules = resolveCSSVariables(chartContainer, styleRules);
 
   const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');
-  const styleNode = xmlDocument.createCDATASection(styleRules.join(' '));
+  const styleNode = xmlDocument.createCDATASection(styleRules);
   clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);
 
   clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);
@@ -161,12 +163,14 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
       textOffset = 8;
     }
 
+    const { color: textColor } = getComputedStyle(legendText!);
     legendItem
       .append('text')
       .attr('x', legendX + textOffset)
       .attr('y', svgHeight + legendY + 8)
       .attr('dominant-baseline', 'hanging')
       .attr('class', legendText!.getAttribute('class'))
+      .attr('fill', textColor)
       .text(legendText!.textContent);
     legendX += legendWidth;
   }
@@ -192,6 +196,15 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
   };
 }
 
+const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
+
+function resolveCSSVariables(chartContainer: HTMLElement, styleRules: string) {
+  const containerStyles = getComputedStyle(chartContainer);
+  return styleRules.replace(cssVarRegExp, (match, group1) => {
+    return containerStyles.getPropertyValue(group1);
+  });
+}
+
 function svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {
   return new Promise((resolve, reject) => {
     const scale = opts.scale || 1;

packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx

@@ -129,7 +129,8 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     const outerRadius =
       Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;
     const chartData = this._elevateToMinimums(points.filter((d: IChartDataPoint) => d.data! >= 0));
-    const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);
+    const valueInsideDonut =
+      this.props.innerRadius !== 0 ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!) : '';
     return !this._isChartEmpty() ? (
       <div
         className={this._classNames.root}