fix(react-charting): Enable rounded corners and improve schema validation errors (#34473)

Author: AtishayMsft

change/@fluentui-chart-utilities-1a8fd974-1c51-4a88-a2da-0526c2e9c56b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(chart-utilities): Improve schema error handling",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "98592573+AtishayMsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-d19134cd-4a1d-45a8-8238-e03e6bc4857e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Enable rounded corners",
+  "packageName": "@fluentui/react-charting",
+  "email": "98592573+AtishayMsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-utilities/src/PlotlySchemaConverter.ts

@@ -125,8 +125,11 @@ export const getValidSchema = (input: any): PlotlySchema => {
     if (!validatedSchema) {
       throw new Error('Plotly input is null or undefined');
     }
-    if (!validatedSchema.data) {
-      throw new Error('Plotly input data is null or undefined');
+    if (typeof validatedSchema !== 'object') {
+      throw new Error(`Plotly input is not an object. Input type: ${typeof validatedSchema}`);
+    }
+    if (!isArrayOrTypedArray(validatedSchema.data)) {
+      throw new Error('Plotly input data is not a valid array or typed array');
     }
     if (validatedSchema.data.length === 0) {
       throw new Error('Plotly input data is empty');

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

@@ -279,6 +279,7 @@ export const transformPlotlyJsonToDonutProps = (
     innerRadius,
     hideLabels,
     showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
+    roundCorners: true,
   };
 };
 
@@ -362,6 +363,7 @@ export const transformPlotlyJsonToVSBCProps = (
     ...secondaryYAxisValues,
     hideTickOverlap: true,
     hideLegend,
+    roundCorners: true,
   };
 };
 
@@ -419,6 +421,7 @@ export const transformPlotlyJsonToGVBCProps = (
     ...secondaryYAxisValues,
     hideTickOverlap: true,
     hideLegend,
+    roundCorners: true,
   };
 };
 
@@ -500,6 +503,7 @@ export const transformPlotlyJsonToVBCProps = (
     hideTickOverlap: true,
     maxBarWidth: 50,
     hideLegend,
+    roundCorners: true,
   };
 };
 
@@ -664,6 +668,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     hideLegend,
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
+    roundCorners: true,
   };
 };
 
@@ -937,6 +942,7 @@ export const transformPlotlyJsonToGaugeProps = (
     height: input.layout?.height ?? 220,
     styles,
     variant: firstData.gauge?.steps?.length ? GaugeChartVariant.MultipleSegments : GaugeChartVariant.SingleSegment,
+    roundCorners: true,
   };
 };
 const cleanText = (text: string): string => {

packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap

@@ -1528,7 +1528,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M0.58,-41.996A42,42,0,0,1,7.882,-41.254L-8.616,39.061Z"
+                  d="M0.58,-38.835A3,3,0,0,1,3.855,-41.823A42,42,0,0,1,4.639,-41.743A3,3,0,0,1,7.246,-38.158L-8.616,39.061Z"
                   data-is-focusable="false"
                   id="_Pie_1AMC1"
                   role="img"
@@ -1550,7 +1550,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M9.018,-41.02A42,42,0,0,1,16.022,-38.824L-16.299,36.528Z"
+                  d="M8.382,-37.924A3,3,0,0,1,12.192,-40.192A42,42,0,0,1,12.943,-39.956A3,3,0,0,1,14.776,-35.919L-16.299,36.528Z"
                   data-is-focusable="true"
                   id="_Pie_1Cadillac1"
                   role="img"
@@ -1572,7 +1572,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M17.088,-38.367A42,42,0,0,1,23.506,-34.806L-23.316,32.502Z"
+                  d="M15.842,-35.462A3,3,0,0,1,20.03,-36.916A42,42,0,0,1,20.718,-36.534A3,3,0,0,1,21.701,-32.211L-23.316,32.502Z"
                   data-is-focusable="false"
                   id="_Pie_1Camaro1"
                   role="img"
@@ -1594,7 +1594,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M24.458,-34.144A42,42,0,0,1,30.029,-29.364L-29.379,27.145Z"
+                  d="M22.653,-31.549A3,3,0,0,1,27.048,-32.131A42,42,0,0,1,27.646,-31.618A3,3,0,0,1,27.739,-27.186L-29.379,27.145Z"
                   data-is-focusable="false"
                   id="_Pie_1Chrysler1"
                   role="img"
@@ -1616,7 +1616,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M30.828,-28.524A42,42,0,0,1,35.323,-22.721L-34.24,20.678Z"
+                  d="M28.538,-26.345A3,3,0,0,1,32.96,-26.031A42,42,0,0,1,33.443,-25.409A3,3,0,0,1,32.642,-21.048L-34.24,20.678Z"
                   data-is-focusable="false"
                   id="_Pie_1Datsun1"
                   role="img"
@@ -1638,7 +1638,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M35.937,-21.737A42,42,0,0,1,39.173,-15.149L-37.701,13.366Z"
+                  d="M33.256,-20.064A3,3,0,0,1,37.524,-18.867A42,42,0,0,1,37.871,-18.16A3,3,0,0,1,36.209,-14.05L-37.701,13.366Z"
                   data-is-focusable="false"
                   id="_Pie_1Dodge1"
                   role="img"
@@ -1660,7 +1660,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M39.576,-14.061A42,42,0,0,1,41.42,-6.957L-39.619,5.506Z"
+                  d="M36.613,-12.962A3,3,0,0,1,40.553,-10.93A42,42,0,0,1,40.751,-10.168A3,3,0,0,1,38.296,-6.477L-39.619,5.506Z"
                   data-is-focusable="false"
                   id="_Pie_1Duster1"
                   role="img"
@@ -1682,7 +1682,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M41.596,-5.81A42,42,0,0,1,41.972,1.52L-39.917,-2.578Z"
+                  d="M38.472,-5.33A3,3,0,0,1,41.923,-2.547A42,42,0,0,1,41.963,-1.76A3,3,0,0,1,38.816,1.362L-39.917,-2.578Z"
                   data-is-focusable="false"
                   id="_Pie_1Ferrari1"
                   role="img"
@@ -1704,7 +1704,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M41.915,2.678A42,42,0,0,1,38.326,17.179L-36.023,-17.388Z"
+                  d="M38.758,2.52A3,3,0,0,1,41.578,5.941A42,42,0,0,1,39.55,14.136A3,3,0,0,1,35.46,15.847L-36.023,-17.388Z"
                   data-is-focusable="false"
                   id="_Pie_1Fiat2"
                   role="img"
@@ -1726,7 +1726,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M37.837,18.231A42,42,0,0,1,34.085,24.54L-31.788,-24.281Z"
+                  d="M34.971,16.899A3,3,0,0,1,36.299,21.128A42,42,0,0,1,35.896,21.805A3,3,0,0,1,31.546,22.658L-31.788,-24.281Z"
                   data-is-focusable="false"
                   id="_Pie_1Ford1"
                   role="img"
@@ -1748,7 +1748,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M33.395,25.472A42,42,0,0,1,28.45,30.896L-26.252,-30.18Z"
+                  d="M30.855,23.59A3,3,0,0,1,31.305,28A42,42,0,0,1,30.775,28.582A3,3,0,0,1,26.342,28.542L-26.252,-30.18Z"
                   data-is-focusable="false"
                   id="_Pie_1Honda1"
                   role="img"
@@ -1770,7 +1770,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M27.586,31.67A42,42,0,0,1,14.757,39.322L-12.988,-37.833Z"
+                  d="M25.478,29.316A3,3,0,0,1,25.031,33.726A42,42,0,0,1,17.78,38.051A3,3,0,0,1,13.687,36.348L-12.988,-37.833Z"
                   data-is-focusable="false"
                   id="_Pie_1Hornet2"
                   role="img"
@@ -1792,7 +1792,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M13.665,39.715A42,42,0,0,1,6.542,41.487L-5.11,-39.672Z"
+                  d="M12.595,36.741A3,3,0,0,1,10.524,40.66A42,42,0,0,1,9.76,40.85A3,3,0,0,1,6.093,38.359L-5.11,-39.672Z"
                   data-is-focusable="false"
                   id="_Pie_1Lincoln1"
                   role="img"
@@ -1814,7 +1814,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M5.394,41.652A42,42,0,0,1,-1.939,41.955L2.977,-39.889Z"
+                  d="M4.945,38.524A3,3,0,0,1,2.127,41.946A42,42,0,0,1,1.341,41.979A3,3,0,0,1,-1.75,38.8L2.977,-39.889Z"
                   data-is-focusable="false"
                   id="_Pie_1Lotus1"
                   role="img"
@@ -1836,7 +1836,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-3.097,41.886A42,42,0,0,1,-10.342,40.707L10.943,-38.474Z"
+                  d="M-2.908,38.731A3,3,0,0,1,-6.356,41.516A42,42,0,0,1,-7.134,41.39A3,3,0,0,1,-9.521,37.655L10.943,-38.474Z"
                   data-is-focusable="false"
                   id="_Pie_1Maserati1"
                   role="img"
@@ -1858,7 +1858,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-11.462,40.406A42,42,0,0,1,-24.879,33.838L24.597,-31.543Z"
+                  d="M-10.641,37.353A3,3,0,0,1,-14.58,39.388A42,42,0,0,1,-22.163,35.676A3,3,0,0,1,-22.972,31.318L24.597,-31.543Z"
                   data-is-focusable="false"
                   id="_Pie_1Mazda2"
                   role="img"
@@ -1880,7 +1880,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-25.804,33.138A42,42,0,0,1,-39.287,-14.85L37.001,15.196Z"
+                  d="M-23.897,30.618A3,3,0,0,1,-28.311,31.024A42,42,0,0,1,-40.326,-11.739A3,3,0,0,1,-36.346,-13.692L37.001,15.196Z"
                   data-is-focusable="false"
                   id="_Pie_1Merc7"
                   role="img"
@@ -1902,7 +1902,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-38.862,-15.929A42,42,0,0,1,-35.495,-22.452L33.186,22.331Z"
+                  d="M-35.921,-14.771A3,3,0,0,1,-37.5,-18.913A42,42,0,0,1,-37.139,-19.613A3,3,0,0,1,-32.848,-20.725L33.186,22.331Z"
                   data-is-focusable="false"
                   id="_Pie_1Pontiac1"
                   role="img"
@@ -1924,7 +1924,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-34.862,-23.423A42,42,0,0,1,-30.252,-29.135L28.014,28.552Z"
+                  d="M-32.214,-21.697A3,3,0,0,1,-32.928,-26.072A42,42,0,0,1,-32.433,-26.685A3,3,0,0,1,-28.006,-26.911L28.014,28.552Z"
                   data-is-focusable="false"
                   id="_Pie_1Porsche1"
                   role="img"
@@ -1946,7 +1946,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-29.436,-29.959A42,42,0,0,1,-17.088,-38.367L15.233,36.986Z"
+                  d="M-27.19,-27.735A3,3,0,0,1,-27.008,-32.165A42,42,0,0,1,-20.03,-36.916A3,3,0,0,1,-15.842,-35.462L15.233,36.986Z"
                   data-is-focusable="false"
                   id="_Pie_1Toyota2"
                   role="img"
@@ -1968,7 +1968,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-16.022,-38.824A42,42,0,0,1,-9.018,-41.02L7.48,39.294Z"
+                  d="M-14.776,-35.919A3,3,0,0,1,-12.943,-39.956A42,42,0,0,1,-12.192,-40.192A3,3,0,0,1,-8.382,-37.924L7.48,39.294Z"
                   data-is-focusable="false"
                   id="_Pie_1Valiant1"
                   role="img"
@@ -1990,7 +1990,7 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
                       &::-moz-focus-inner {
                         border: 0;
                       }
-                  d="M-7.882,-41.254A42,42,0,0,1,-0.58,-41.996L-0.58,39.996Z"
+                  d="M-7.246,-38.158A3,3,0,0,1,-4.639,-41.743A42,42,0,0,1,-3.855,-41.823A3,3,0,0,1,-0.58,-38.835L-0.58,39.996Z"
                   data-is-focusable="false"
                   id="_Pie_1Volvo1"
                   role="img"

packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -202,6 +202,7 @@ Object {
   "hideLabels": false,
   "hideLegend": false,
   "innerRadius": 42,
+  "roundCorners": true,
   "showLabelsInPercent": true,
   "width": undefined,
 }
@@ -238,6 +239,7 @@ Object {
   "hideLabels": false,
   "hideLegend": false,
   "innerRadius": 0,
+  "roundCorners": true,
   "showLabelsInPercent": false,
   "width": undefined,
 }
@@ -358,6 +360,7 @@ Object {
   "hideLegend": true,
   "hideTickOverlap": true,
   "mode": "plotly",
+  "roundCorners": true,
   "width": 850,
   "xAxisTitle": "Votes",
   "yAxisTitle": "Framework",
@@ -372,6 +375,7 @@ Object {
   "height": 400,
   "maxValue": 500,
   "minValue": undefined,
+  "roundCorners": true,
   "segments": Array [
     Object {
       "color": "#00ffff",
@@ -2993,6 +2997,7 @@ Object {
   "hideLegend": true,
   "hideTickOverlap": true,
   "noOfCharsToTruncate": 20,
+  "roundCorners": true,
   "secondaryYAxistitle": "",
   "showYAxisLables": true,
   "showYAxisLablesTooltip": true,
@@ -4890,6 +4895,7 @@ Object {
   "hideTickOverlap": true,
   "maxBarWidth": 50,
   "mode": "histogram",
+  "roundCorners": true,
   "supportNegativeData": true,
   "width": undefined,
   "xAxisTitle": "",
@@ -4987,6 +4993,7 @@ Object {
   "hideLegend": true,
   "hideTickOverlap": true,
   "mode": "plotly",
+  "roundCorners": true,
   "width": undefined,
   "xAxisTitle": "",
   "yAxisTitle": "",