fix(react-charting): declarative chart bug fixes

change/@fluentui-react-charting-4aabb452-e7e3-47e3-9964-7a7c4814e759.json

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

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

@@ -450,7 +450,9 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       });
       stackedData.push(currentStack);
     });
-    this._isMultiStackChart = stackedData && stackedData.length > 1 ? true : false;
+    this._isMultiStackChart = !!(this.props.legendProps?.selectedLegends
+      ? stackedData?.length >= 1
+      : stackedData?.length > 1);
     return {
       stackedData,
       maxOfYVal,

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

@@ -24,20 +24,22 @@ import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/
 import { ILineChartProps } from '../LineChart/index';
 import { IAreaChartProps } from '../AreaChart/index';
 import { IHeatMapChartProps } from '../HeatMapChart/index';
-import { DataVizPalette, getNextColor } from '../../utilities/colors';
+import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';
 import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
+import { timeParse } from 'd3-time-format';
 
 const isDate = (value: any): boolean => !isNaN(Date.parse(value));
 const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value);
 export const isDateArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isDate);
 export const isNumberArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isNumber);
 export const isMonthArray = (array: any[]): boolean => {
   if (array && array.length > 0) {
-    const presentYear = new Date().getFullYear();
+    const parseFullMonth = timeParse('%B');
+    const parseShortMonth = timeParse('%b');
     return array.every(possiblyMonthValue => {
-      return isDate(`${possiblyMonthValue} 01, ${presentYear}`);
+      return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
     });
   }
   return false;
@@ -147,7 +149,7 @@ export const transformPlotlyJsonToDonutProps = (
     height,
     innerRadius,
     hideLabels,
-    showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true,
+    showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
     styles,
   };
 };
@@ -404,7 +406,9 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
         };
       });
     })
-    .flat();
+    .flat()
+    //reversing the order to invert the Y bars order as required by plotly.
+    .reverse();
 
   const chartHeight: number = typeof layout.height === 'number' ? layout.height : 450;
   const margin: number = typeof layout.margin?.l === 'number' ? layout.margin?.l : 0;
@@ -579,11 +583,11 @@ export const transformPlotlyJsonToGaugeProps = (
     const diff = firstData.value - firstData.delta.reference;
     if (diff >= 0) {
       sublabel = `\u25B2 ${diff}`;
-      const color = getColor(firstData.delta.increasing?.color || '', colorMap, isDarkTheme);
+      const color = getColorFromToken(DataVizPalette.success, isDarkTheme);
       sublabelColor = color;
     } else {
       sublabel = `\u25BC ${Math.abs(diff)}`;
-      const color = getColor(firstData.delta.decreasing?.color || '', colorMap, isDarkTheme);
+      const color = getColorFromToken(DataVizPalette.error, isDarkTheme);
       sublabelColor = color;
     }
   }

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

@@ -102,11 +102,7 @@ describe('isMonthArray', () => {
     expect(isMonthArray([date, date.getDate() + 1, date.getDate() + 2])).toBe(false);
   });
 
-  test('Should return true when input array contains months data', () => {
-    expect(isMonthArray([10, 11, 1])).toBe(true);
-  });
-
-  test('Should return false when input array contains numeric data(apart from months 1 to 12)', () => {
+  test('Should return false when input array contains numeric data', () => {
     expect(isMonthArray([20, 30, 40])).toBe(false);
   });
 

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

@@ -4187,7 +4187,7 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = `
             class=
 
                 {
-                  fill: #9373c0;
+                  fill: #107c10;
                   font-size: 12px;
                   font-weight: 600;
                 }

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

@@ -384,7 +384,7 @@ Object {
   ],
   "styles": Object {
     "sublabel": Object {
-      "fill": "#f7adda",
+      "fill": "#54b054",
     },
   },
   "sublabel": "▲ 20",
@@ -2844,70 +2844,70 @@ Object {
   "chartTitle": "PHP Framework Popularity at Work - SitePoint, 2015",
   "data": Array [
     Object {
-      "color": "#cf87da",
-      "legend": "Laravel",
-      "x": 1659,
-      "y": "Laravel",
+      "color": "#4f6bed",
+      "legend": "Aura",
+      "x": 10,
+      "y": "Aura",
     },
     Object {
-      "color": "#dac157",
-      "legend": "Symfony2",
-      "x": 1067,
-      "y": "Symfony2",
+      "color": "#d0b232",
+      "legend": "Drupal",
+      "x": 11,
+      "y": "Drupal",
     },
     Object {
-      "color": "#637cef",
-      "legend": "Nette",
-      "x": 671,
-      "y": "Nette",
+      "color": "#c36bd1",
+      "legend": "TYPO3 Flow",
+      "x": 17,
+      "y": "TYPO3 Flow",
     },
     Object {
-      "color": "#e3008c",
-      "legend": "CodeIgniter",
-      "x": 597,
-      "y": "CodeIgniter",
+      "color": "#73aa24",
+      "legend": "FuelPHP",
+      "x": 25,
+      "y": "FuelPHP",
     },
     Object {
-      "color": "#2aa0a4",
-      "legend": "Yii 2",
-      "x": 504,
-      "y": "Yii 2",
+      "color": "#d77440",
+      "legend": "Kohana",
+      "x": 35,
+      "y": "Kohana",
     },
     Object {
-      "color": "#9373c0",
-      "legend": "PHPixie",
-      "x": 418,
-      "y": "PHPixie",
+      "color": "#4fa1e1",
+      "legend": "Typo 3",
+      "x": 35,
+      "y": "Typo 3",
     },
     Object {
-      "color": "#13a10e",
-      "legend": "Yii 1",
-      "x": 407,
-      "y": "Yii 1",
+      "color": "#27ac22",
+      "legend": "Simple MVC Framework",
+      "x": 42,
+      "y": "Simple MVC Framework",
     },
     Object {
-      "color": "#3a96dd",
-      "legend": "Zend Framework 2",
-      "x": 390,
-      "y": "Zend Framework 2",
+      "color": "#a083c9",
+      "legend": "Silex",
+      "x": 65,
+      "y": "Silex",
     },
     Object {
-      "color": "#ca5010",
-      "legend": "Company Internal Framework",
-      "x": 378,
-      "y": "Company Internal Framework",
+      "color": "#4cb4b7",
+      "legend": "Slim",
+      "x": 79,
+      "y": "Slim",
     },
     Object {
-      "color": "#57811b",
-      "legend": "Zend Framework 1",
-      "x": 274,
-      "y": "Zend Framework 1",
+      "color": "#ee5fb7",
+      "legend": "Phalcon",
+      "x": 169,
+      "y": "Phalcon",
     },
     Object {
-      "color": "#b146c2",
-      "legend": "CakePHP",
-      "x": 255,
-      "y": "CakePHP",
+      "color": "#93a4f4",
+      "legend": "We use a CMS for everything",
+      "x": 203,
+      "y": "We use a CMS for everything",
     },
     Object {
       "color": "#ae8c00",
@@ -2916,70 +2916,70 @@ Object {
       "y": "No Framework",
     },
     Object {
-      "color": "#93a4f4",
-      "legend": "We use a CMS for everything",
-      "x": 203,
-      "y": "We use a CMS for everything",
+      "color": "#b146c2",
+      "legend": "CakePHP",
+      "x": 255,
+      "y": "CakePHP",
     },
     Object {
-      "color": "#ee5fb7",
-      "legend": "Phalcon",
-      "x": 169,
-      "y": "Phalcon",
+      "color": "#57811b",
+      "legend": "Zend Framework 1",
+      "x": 274,
+      "y": "Zend Framework 1",
     },
     Object {
-      "color": "#4cb4b7",
-      "legend": "Slim",
-      "x": 79,
-      "y": "Slim",
+      "color": "#ca5010",
+      "legend": "Company Internal Framework",
+      "x": 378,
+      "y": "Company Internal Framework",
     },
     Object {
-      "color": "#a083c9",
-      "legend": "Silex",
-      "x": 65,
-      "y": "Silex",
+      "color": "#3a96dd",
+      "legend": "Zend Framework 2",
+      "x": 390,
+      "y": "Zend Framework 2",
     },
     Object {
-      "color": "#27ac22",
-      "legend": "Simple MVC Framework",
-      "x": 42,
-      "y": "Simple MVC Framework",
+      "color": "#13a10e",
+      "legend": "Yii 1",
+      "x": 407,
+      "y": "Yii 1",
     },
     Object {
-      "color": "#4fa1e1",
-      "legend": "Typo 3",
-      "x": 35,
-      "y": "Typo 3",
+      "color": "#9373c0",
+      "legend": "PHPixie",
+      "x": 418,
+      "y": "PHPixie",
     },
     Object {
-      "color": "#d77440",
-      "legend": "Kohana",
-      "x": 35,
-      "y": "Kohana",
+      "color": "#2aa0a4",
+      "legend": "Yii 2",
+      "x": 504,
+      "y": "Yii 2",
     },
     Object {
-      "color": "#73aa24",
-      "legend": "FuelPHP",
-      "x": 25,
-      "y": "FuelPHP",
+      "color": "#e3008c",
+      "legend": "CodeIgniter",
+      "x": 597,
+      "y": "CodeIgniter",
     },
     Object {
-      "color": "#c36bd1",
-      "legend": "TYPO3 Flow",
-      "x": 17,
-      "y": "TYPO3 Flow",
+      "color": "#637cef",
+      "legend": "Nette",
+      "x": 671,
+      "y": "Nette",
     },
     Object {
-      "color": "#d0b232",
-      "legend": "Drupal",
-      "x": 11,
-      "y": "Drupal",
+      "color": "#dac157",
+      "legend": "Symfony2",
+      "x": 1067,
+      "y": "Symfony2",
     },
     Object {
-      "color": "#4f6bed",
-      "legend": "Aura",
-      "x": 10,
-      "y": "Aura",
+      "color": "#cf87da",
+      "legend": "Laravel",
+      "x": 1659,
+      "y": "Laravel",
     },
   ],
   "secondaryYAxistitle": "",