From 587f6e8a54437238da33fb1a5e852bee0a1ed819 Mon Sep 17 00:00:00 2001 From: Anush Date: Thu, 13 Nov 2025 10:17:37 +0530 Subject: [PATCH 1/6] fix feedbacks --- .../components/DeclarativeChart/PlotlySchemaAdapter.ts | 1 + .../library/src/components/DonutChart/Pie/Pie.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index d7d5191ef66f3..45b9be1823497 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1485,6 +1485,7 @@ export const transformPlotlyJsonToVSBCProps = ( showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, + roundedTicks: true, ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, diff --git a/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.tsx b/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.tsx index 22e36abf139f2..03aa36efc5a47 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.tsx @@ -92,13 +92,17 @@ export const Pie: React.FunctionComponent = React.forwardRef d.data!)); + + // Filter out data points with value 0 to avoid gaps in the donut chart + const filteredData = data.filter((d: ChartDataPoint) => d.data !== 0); + + const focusData = pieForFocusRing(filteredData.map(d => d.data!)); const piechart = d3Pie() .sort(null) // eslint-disable-next-line @typescript-eslint/no-explicit-any .value((d: any) => d.data) - .padAngle(0.02)(data); + .padAngle(0.02)(filteredData); const translate = `translate(${props.width / 2}, ${props.height / 2})`; _totalValue = _computeTotalValue(); From 56c3bc05d37b8c18effe91d6abc58bec5f7a58ed Mon Sep 17 00:00:00 2001 From: Anush Date: Thu, 13 Nov 2025 10:23:55 +0530 Subject: [PATCH 2/6] Add change file --- ...-react-charts-44cdab38-ba7b-4ad2-8c07-62086389920b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-44cdab38-ba7b-4ad2-8c07-62086389920b.json diff --git a/change/@fluentui-react-charts-44cdab38-ba7b-4ad2-8c07-62086389920b.json b/change/@fluentui-react-charts-44cdab38-ba7b-4ad2-8c07-62086389920b.json new file mode 100644 index 0000000000000..3b3875551478e --- /dev/null +++ b/change/@fluentui-react-charts-44cdab38-ba7b-4ad2-8c07-62086389920b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix incomplete donut and VSBC bug", + "packageName": "@fluentui/react-charts", + "email": "anushgupta@microsoft.com", + "dependentChangeType": "patch" +} From 6e6ab49453123dc0a01fb01ecae8a3f9b793de79 Mon Sep 17 00:00:00 2001 From: Anush Date: Thu, 13 Nov 2025 10:34:54 +0530 Subject: [PATCH 3/6] update snapshots --- .../__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index 77f956db3828c..a9eec7f494e01 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap @@ -5578,6 +5578,7 @@ Object { "mode": "plotly", "noOfCharsToTruncate": 20, "roundCorners": true, + "roundedTicks": true, "showYAxisLables": true, "showYAxisLablesTooltip": true, "width": undefined, From 35572e87a62698ac7bd1c32924f5aed09a25642f Mon Sep 17 00:00:00 2001 From: Anush Date: Thu, 13 Nov 2025 16:08:19 +0530 Subject: [PATCH 4/6] honor link color for sankey chart --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 17 +++++++++++++++++ .../src/components/SankeyChart/SankeyChart.tsx | 2 +- .../react-charts/library/src/types/DataPoint.ts | 1 + 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 45b9be1823497..6a6ec582bc4de 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -2459,6 +2459,14 @@ export const transformPlotlyJsonToSankeyProps = ( colorMap, isDarkTheme, ); + const extractedLinkColors = extractColor( + input.layout?.template?.layout?.colorway, + colorwayType, + link?.color, + colorMap, + isDarkTheme, + ); + const sankeyChartData = { nodes: node.label?.map((label: string, index: number) => { const color = resolveColor( @@ -2478,8 +2486,17 @@ export const transformPlotlyJsonToSankeyProps = ( }), // eslint-disable-next-line @typescript-eslint/no-explicit-any links: validLinks.map((validLink: any, index: number) => { + const color = resolveColor( + extractedLinkColors, + index, + validLink.target, + colorMap, + input.layout?.template?.layout?.colorway, + isDarkTheme, + ); return { ...validLink, + color, }; }), } as SankeyChartData; diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx index 32bacec74ed56..fe88fe2a8596c 100644 --- a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx +++ b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx @@ -944,7 +944,7 @@ export const SankeyChart: React.FunctionComponent = React.forw const _fillStreamColors = (singleLink: SLink, gradientUrl: string): string | undefined => { if (selectedState && selectedLinks.has(singleLink.index!)) { - return selectedNode ? selectedNode.color : gradientUrl; + return singleLink ? singleLink.color : gradientUrl; } }; diff --git a/packages/charts/react-charts/library/src/types/DataPoint.ts b/packages/charts/react-charts/library/src/types/DataPoint.ts index 265c72a8e8d29..61d0d9b6c9c82 100644 --- a/packages/charts/react-charts/library/src/types/DataPoint.ts +++ b/packages/charts/react-charts/library/src/types/DataPoint.ts @@ -905,6 +905,7 @@ interface SLinkExtra { */ value: number; unnormalizedValue?: number; + color?: string; } export type SNode = SankeyNode; From f07cf46d0b559bfca17958fcd78b26cbafdfce63 Mon Sep 17 00:00:00 2001 From: Anush Date: Thu, 13 Nov 2025 16:17:30 +0530 Subject: [PATCH 5/6] update snapshots --- .../PlotlySchemaAdapterUT.test.tsx.snap | 15 +++++++++++++++ .../__snapshots__/SankeyChart.test.tsx.snap | 12 ------------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index a9eec7f494e01..e3c4a9c32c1e8 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap @@ -4639,76 +4639,91 @@ Object { "SankeyChartData": Object { "links": Array [ Object { + "color": "#fde3d4", "source": 0, "target": 5, "value": 20, }, Object { + "color": "#f27420", "source": 0, "target": 6, "value": 3, }, Object { + "color": "#fde3d4", "source": 0, "target": 7, "value": 5, }, Object { + "color": "#dbe9f6", "source": 1, "target": 5, "value": 14, }, Object { + "color": "#4994ce", "source": 1, "target": 6, "value": 1, }, Object { + "color": "#dbe9f6", "source": 1, "target": 7, "value": 1, }, Object { + "color": "#fabc13", "source": 2, "target": 5, "value": 3, }, Object { + "color": "#fabc13", "source": 2, "target": 6, "value": 17, }, Object { + "color": "#fabc13", "source": 2, "target": 7, "value": 2, }, Object { + "color": "#7fc241", "source": 3, "target": 5, "value": 3, }, Object { + "color": "#7fc241", "source": 3, "target": 6, "value": 9, }, Object { + "color": "#7fc241", "source": 3, "target": 7, "value": 2, }, Object { + "color": "#d3d3d3", "source": 4, "target": 5, "value": 5, }, Object { + "color": "#d3d3d3", "source": 4, "target": 6, "value": 9, }, Object { + "color": "#d3d3d3", "source": 4, "target": 7, "value": 8, diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap index ab598e7ab0894..1db495d5aebfc 100644 --- a/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap @@ -10405,7 +10405,6 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover Date: Fri, 14 Nov 2025 16:33:17 +0530 Subject: [PATCH 6/6] resolve comments --- .../library/src/components/SankeyChart/SankeyChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx index fe88fe2a8596c..cf0d6f8aaa238 100644 --- a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx +++ b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx @@ -944,7 +944,7 @@ export const SankeyChart: React.FunctionComponent = React.forw const _fillStreamColors = (singleLink: SLink, gradientUrl: string): string | undefined => { if (selectedState && selectedLinks.has(singleLink.index!)) { - return singleLink ? singleLink.color : gradientUrl; + return singleLink ? singleLink.color : selectedNode ? selectedNode.color : gradientUrl; } };