Plotly examples bug fixes

change/@fluentui-react-charting-93685ac9-5787-4456-9159-5670992837e0.json

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

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

@@ -12,6 +12,8 @@ import {
   transformPlotlyJsonToHorizontalBarWithAxisProps,
   isDateArray,
   isNumberArray,
+  isMonthArray,
+  updateXValues,
   transformPlotlyJsonToHeatmapProps,
   transformPlotlyJsonToSankeyProps,
   transformPlotlyJsonToGaugeProps,
@@ -87,6 +89,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   const xValues = data[0].x;
   const isXDate = isDateArray(xValues);
   const isXNumber = isNumberArray(xValues);
+  const isXMonth = isMonthArray(xValues);
   const colorMap = useColorMapping();
   const theme = useTheme();
   const isDarkTheme = theme?.isInverted ?? false;
@@ -163,27 +166,39 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
       }
     case 'scatter':
       const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');
-      if (isXDate || isXNumber) {
+      const renderChart = (chartProps: any) => {
         if (isAreaChart) {
-          return (
-            <AreaChart
-              {...transformPlotlyJsonToScatterChartProps({ data, layout }, true, colorMap, isDarkTheme)}
-              legendProps={legendProps}
-              componentRef={chartRef}
-            />
-          );
+          return <AreaChart {...chartProps} />;
         }
         return (
           <LineChart
-            {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}
-            legendProps={{
-              onChange: onActiveLegendsChange,
-              canSelectMultipleLegends: true,
-              selectedLegends: activeLegends,
+            {...{
+              ...chartProps,
+              legendProps: {
+                onChange: onActiveLegendsChange,
+                canSelectMultipleLegends: true,
+                selectedLegends: activeLegends,
+              },
             }}
-            componentRef={chartRef}
           />
         );
+      };
+      if (isXDate || isXNumber) {
+        const chartProps = {
+          ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),
+          legendProps,
+        };
+        return renderChart(chartProps);
+      } else if (isXMonth) {
+        const updatedData = data.map((dataPoint: any) => ({
+          ...dataPoint,
+          x: updateXValues(dataPoint.x),
+        }));
+        const chartProps = {
+          ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),
+          legendProps,
+        };
+        return renderChart(chartProps);
       }
       return (
         <VerticalStackedBarChart

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

@@ -33,7 +33,38 @@ 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();
+    return array.every(possiblyMonthValue => {
+      return isDate(`${possiblyMonthValue} 01, ${presentYear}`);
+    });
+  }
+  return false;
+};
 
+export const updateXValues = (xValues: any[]): any[] => {
+  const presentYear = new Date().getFullYear();
+  const dates = xValues.map(possiblyMonthValue => {
+    const parsedDate = `${possiblyMonthValue} 01, ${presentYear}`;
+    return isDate(parsedDate) ? new Date(parsedDate) : null;
+  });
+  for (let i = dates.length - 1; i > 0; i--) {
+    const currentMonth = dates[i]!.getMonth();
+    const previousMonth = dates[i - 1]!.getMonth();
+    const currentYear = dates[i]!.getFullYear();
+    const previousYear = dates[i - 1]!.getFullYear();
+    if (previousMonth >= currentMonth) {
+      dates[i - 1]!.setFullYear(dates[i]!.getFullYear() - 1);
+    } else if (previousYear > currentYear) {
+      dates[i - 1]!.setFullYear(currentYear);
+    }
+  }
+  xValues = xValues.map((month, index) => {
+    return `${month} 01, ${dates[index]!.getFullYear()}`;
+  });
+  return xValues;
+};
 export const getColor = (
   legendLabel: string,
   colorMap: React.MutableRefObject<Map<string, string>>,
@@ -112,7 +143,7 @@ export const transformPlotlyJsonToVSBCProps = (
         mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] };
       }
       const legend: string = series.name || `Series ${index1 + 1}`;
-      if (series.type === 'bar') {
+      if (series.type === 'bar' || series.type === 'scatter') {
         const color = getColor(legend, colorMap, isDarkTheme);
         mapXToDataPoints[x].chartData.push({
           legend,
@@ -162,6 +193,7 @@ export const transformPlotlyJsonToGVBCProps = (
         mapXToDataPoints[x].series.push({
           key: legend,
           data: series.y?.[index2],
+          xAxisCalloutData: x as string,
           color,
           legend,
         });
@@ -458,15 +490,23 @@ export const transformPlotlyJsonToGaugeProps = (
   const { data, layout } = jsonObj;
   const firstData = data[0];
 
-  const segments = firstData.gauge?.steps?.map((step: any, index: number): IGaugeChartSegment => {
-    const legend = step.name || `Segment ${index + 1}`;
-    const color = getColor(legend, colorMap, isDarkTheme);
-    return {
-      legend,
-      size: step.range?.[1] - step.range?.[0],
-      color,
-    };
-  });
+  const segments = firstData.gauge?.steps?.length
+    ? firstData.gauge.steps.map((step: any, index: number): IGaugeChartSegment => {
+        const legend = step.name || `Segment ${index + 1}`;
+        const color = getColor(legend, colorMap, isDarkTheme);
+        return {
+          legend,
+          size: step.range?.[1] - step.range?.[0],
+          color,
+        };
+      })
+    : [
+        {
+          legend: 'Segment 1',
+          size: (firstData.gauge?.range?.[1] ?? 0) - (firstData.gauge?.range?.[0] ?? 0),
+          color: getColor('Segment 1', colorMap, isDarkTheme),
+        },
+      ];
 
   let sublabel: string | undefined;
   let sublabelColor: string | undefined;