fix(charts): resolve minor Gantt chart bugs and optimize logic (#34841)

Author: krkshitij

change/@fluentui-chart-utilities-0796e2e1-6ce2-45bd-80cf-142cc11cdbf1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: correct check for string x-values in horizontal bar trace",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-c47c9a2c-5e3d-4a27-9012-78bbc1828485.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: resolve minor Gantt chart bugs and optimize logic",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -225,7 +225,7 @@ const validateSeriesData = (series: Partial<PlotData>, validateNumericY: boolean
 
 const validateBarData = (data: Partial<PlotData>) => {
   if (data.orientation === 'h') {
-    if (isStringArray(data.x) && !isDateArray(data.x)) {
+    if (!isNumberArray(data.x) && !isDateArray(data.x)) {
       throw new Error(
         `${UNSUPPORTED_MSG_PREFIX} ${data.type}, orientation: ${data.orientation}, string x values not supported.`,
       );

packages/charts/react-charting/etc/react-charting.api.md

@@ -689,6 +689,7 @@ export interface IGanttChartProps extends ICartesianChartProps {
     culture?: string;
     data?: IGanttChartDataPoint[];
     enableGradient?: boolean;
+    maxBarHeight?: number;
     onRenderCalloutPerDataPoint?: IRenderFunction<IGanttChartDataPoint>;
     roundCorners?: boolean;
     showYAxisLables?: boolean;

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -444,19 +444,6 @@ export class CartesianChartBase
       }
 
       if (chartTypesWithStringYAxis.includes(this.props.chartType) && this.props.yAxisType === YAxisType.StringAxis) {
-        // To create y axis tick values by if specified truncating the rest of the text
-        // and showing elipsis or showing the whole string,
-        yScalePrimary &&
-          // Note: This function should be invoked within the showYAxisLablesTooltip check,
-          // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
-          createYAxisLabels(
-            this.yAxisElement,
-            yScalePrimary,
-            this.props.noOfCharsToTruncate || 4,
-            this.props.showYAxisLablesTooltip || false,
-            this._isRtl,
-          );
-
         // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
         // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
         // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
@@ -468,6 +455,19 @@ export class CartesianChartBase
         }
         // Used to display tooltip at y axis labels.
         if (this.props.showYAxisLablesTooltip) {
+          // To create y axis tick values by if specified truncating the rest of the text
+          // and showing elipsis or showing the whole string,
+          yScalePrimary &&
+            // Note: This function should be invoked within the showYAxisLablesTooltip check,
+            // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
+            createYAxisLabels(
+              this.yAxisElement,
+              yScalePrimary,
+              this.props.noOfCharsToTruncate || 4,
+              this.props.showYAxisLablesTooltip || false,
+              this._isRtl,
+            );
+
           const yAxisElement = d3Select(this.yAxisElement).call(yScalePrimary);
           try {
             document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();

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

@@ -1021,7 +1021,7 @@ export const transformPlotlyJsonToGanttChartProps = (
       const isXDate = input.layout?.xaxis?.type === 'date' || isDateArray(series.x);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const convertXValueToNumber = (value: any) => {
-        return isInvalidValue(value) ? 0 : isXDate ? new Date(value as string | number).getTime() : (value as number);
+        return isInvalidValue(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
       };
 
       return (series.y as Datum[])
@@ -2434,7 +2434,7 @@ const getAxisCategoryOrderProps = (data: Data[], layout: Partial<Layout> | undef
 
     if (!ax?.categoryorder || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
       const categoriesInTraceOrder = Array.from(new Set(values as string[]));
-      result[propName] = categoriesInTraceOrder;
+      result[propName] = ax?.autorange === 'reversed' ? categoriesInTraceOrder.reverse() : categoriesInTraceOrder;
       return;
     }
 
@@ -2443,3 +2443,31 @@ const getAxisCategoryOrderProps = (data: Data[], layout: Partial<Layout> | undef
 
   return result;
 };
+
+/**
+ * This is experimental. Use it only with valid datetime strings to verify if they conform to the ISO 8601 format.
+ */
+const isoDateRegex = /^\d{4}(-\d{2}(-\d{2})?)?(T\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?(Z)?)?$/;
+
+/**
+ * We want to display localized date and time in the charts, so the useUTC prop is set to false.
+ * But this can sometimes cause the formatters to display the datetime incorrectly.
+ * To work around this issue, we use this function to adjust datetime strings so that they are always interpreted
+ * as local time, allowing the formatters to produce the correct output.
+ *
+ * FIXME: The formatters should always produce a clear and accurate localized output, regardless of the
+ * format used to create the date object.
+ */
+const parseLocalDate = (value: string | number) => {
+  if (typeof value === 'string') {
+    const match = value.match(isoDateRegex);
+    if (match) {
+      if (!match[3]) {
+        value += 'T00:00';
+      } else if (match[6]) {
+        value = value.replace('Z', '');
+      }
+    }
+  }
+  return new Date(value);
+};