Enabling titles for x and y axes for Declarative charts (#33533)

Author: srmukher

change/@fluentui-react-charting-53aba566-bfc1-481b-83f3-c61bbb18fa5a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enabling titles for x and y axes for Declarative charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -43,6 +43,26 @@ export const isMonthArray = (array: any[]): boolean => {
   return false;
 };
 
+function getTitles(layout: any) {
+  const titles = {
+    chartTitle:
+      typeof layout.title === 'string' ? layout.title : typeof layout.title?.text === 'string' ? layout.title.text : '',
+    xAxisTitle:
+      typeof layout?.xaxis?.title === 'string'
+        ? layout?.xaxis?.title
+        : typeof layout?.xaxis?.title?.text === 'string'
+        ? layout?.xaxis?.title?.text
+        : '',
+    yAxisTitle:
+      typeof layout?.yaxis?.title === 'string'
+        ? layout?.yaxis?.title
+        : typeof layout?.yaxis?.title?.text === 'string'
+        ? layout?.yaxis?.title?.text
+        : '',
+  };
+  return titles;
+}
+
 export const updateXValues = (xValues: any[]): any[] => {
   const presentYear = new Date().getFullYear();
   const dates = xValues.map(possiblyMonthValue => {
@@ -115,9 +135,11 @@ export const transformPlotlyJsonToDonutProps = (
     },
   };
 
+  const { chartTitle } = getTitles(layout);
+
   return {
     data: {
-      chartTitle: layout?.title,
+      chartTitle,
       chartData: donutData,
     },
     hideLegend: layout?.showlegend === false ? true : false,
@@ -165,13 +187,17 @@ export const transformPlotlyJsonToVSBCProps = (
     });
   });
 
+  const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
+
   return {
     data: Object.values(mapXToDataPoints),
-    chartTitle: layout?.title,
     // width: layout?.width,
     // height: layout?.height,
     barWidth: 'auto',
     yMaxValue,
+    chartTitle,
+    xAxisTitle,
+    yAxisTitle,
   };
 };
 
@@ -203,12 +229,16 @@ export const transformPlotlyJsonToGVBCProps = (
     });
   });
 
+  const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
+
   return {
     data: Object.values(mapXToDataPoints),
-    chartTitle: layout?.title,
     // width: layout?.width,
     // height: layout?.height,
     barwidth: 'auto',
+    chartTitle,
+    xAxisTitle,
+    yAxisTitle,
   };
 };
 
@@ -288,13 +318,17 @@ export const transformPlotlyJsonToVBCProps = (
     });
   });
 
+  const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
+
   return {
     data: vbcData,
-    chartTitle: typeof layout?.title === 'string' ? layout?.title : '',
     // width: layout?.width,
     // height: layout?.height,
     barWidth: 24,
     supportNegativeData: true,
+    chartTitle,
+    xAxisTitle,
+    yAxisTitle,
   };
 };
 
@@ -324,20 +358,26 @@ export const transformPlotlyJsonToScatterChartProps = (
     };
   });
 
+  const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
+
   const chartProps: IChartProps = {
-    chartTitle: typeof layout.title === 'string' ? layout.title : '',
+    chartTitle,
     lineChartData: chartData,
   };
 
   if (isAreaChart) {
     return {
       data: chartProps,
       supportNegativeData: true,
+      xAxisTitle,
+      yAxisTitle,
     } as IAreaChartProps;
   } else {
     return {
       data: chartProps,
       supportNegativeData: true,
+      xAxisTitle,
+      yAxisTitle,
     } as ILineChartProps;
   }
 };
@@ -372,9 +412,15 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
   const gapFactor = 1 / (1 + scalingFactor * numberOfBars);
   const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
 
+  const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
+
   return {
     data: chartData,
-    chartTitle: typeof layout.title === 'string' ? layout.title : '',
+    chartTitle,
+    xAxisTitle,
+    yAxisTitle,
+    secondaryYAxistitle:
+      typeof layout?.yaxis2?.title === 'string' ? layout?.yaxis2?.title : layout?.yaxis2?.title?.text || '',
     barHeight,
     showYAxisLables: true,
     styles: {
@@ -419,13 +465,17 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
     ? firstData.colorscale.map((arr: any) => arr[0] * (zMax - zMin) + zMin)
     : [];
   const rangeValuesForColorScale: string[] = firstData.colorscale ? firstData.colorscale.map((arr: any) => arr[1]) : [];
+  const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
 
   return {
     data: [heatmapData],
     domainValuesForColorScale,
     rangeValuesForColorScale,
     hideLegend: true,
     showYAxisLables: true,
+    chartTitle,
+    xAxisTitle,
+    yAxisTitle,
     sortOrder: 'none',
   };
 };
@@ -473,9 +523,12 @@ export const transformPlotlyJsonToSankeyProps = (
     },
   };
   const shouldResize: number = width + height;
+
+  const { chartTitle } = getTitles(layout);
+
   return {
     data: {
-      chartTitle: typeof layout?.title === 'string' ? layout?.title : '',
+      chartTitle,
       SankeyChartData: sankeyChartData,
     },
     width,
@@ -538,10 +591,12 @@ export const transformPlotlyJsonToGaugeProps = (
     },
   };
 
+  const { chartTitle } = getTitles(layout);
+
   return {
     segments,
     chartValue: typeof firstData.value === 'number' ? firstData.value : 0,
-    chartTitle: typeof firstData.title?.text === 'string' ? firstData.title?.text : '',
+    chartTitle,
     sublabel,
     // range values can be null
     minValue: typeof firstData.gauge?.axis?.range?.[0] === 'number' ? firstData.gauge?.axis?.range?.[0] : undefined,