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,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       });
       stackedData.push(currentStack);
     });
-    this._isMultiStackChart = stackedData && stackedData.length > 1 ? true : false;
+    this._isMultiStackChart = stackedData && stackedData.length >= 1 ? true : false;
     return {
       stackedData,
       maxOfYVal,

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

@@ -24,20 +24,33 @@ 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 isDate = (value: any): boolean => {
+  const parsedDate = new Date(Date.parse(value));
+  if (isNaN(parsedDate.getTime())) {
+    return false;
+  }
+  const parsedYear = parsedDate.getFullYear();
+  const yearInString = /\b\d{4}\b/.test(value);
+  if (!yearInString && (parsedYear === 2000 || parsedYear === 2001)) {
+    return false;
+  }
+  return true;
+};
 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 +160,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,
   };
 };
@@ -401,7 +414,9 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
         };
       });
     })
-    .flat();
+    .flat()
+    //reversing the order to invert the Y bars order.
+    .reverse();
 
   const chartHeight: number = typeof layout.height === 'number' ? layout.height : 450;
   const margin: number = typeof layout.margin?.l === 'number' ? layout.margin?.l : 0;
@@ -576,11 +591,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;
     }
   }