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 00000000000000..3b3875551478e1 --- /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" +} 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 d7d5191ef66f31..6a6ec582bc4de7 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, @@ -2458,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( @@ -2477,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/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index 77f956db3828c2..e3c4a9c32c1e8b 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, @@ -5578,6 +5593,7 @@ Object { "mode": "plotly", "noOfCharsToTruncate": 20, "roundCorners": true, + "roundedTicks": true, "showYAxisLables": true, "showYAxisLablesTooltip": true, "width": undefined, 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 22e36abf139f28..03aa36efc5a478 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(); 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 32bacec74ed562..cf0d6f8aaa2381 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 : selectedNode ? selectedNode.color : gradientUrl; } }; 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 ab598e7ab08945..1db495d5aebfc2 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 ;