Adding secondary y-axis for Declarative Charts

microsoft · Jan 9, 2025 · 0e77369 · 0e77369
1 parent b4a12e8
commit 0e77369
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -160,6 +160,8 @@ export const transformPlotlyJsonToVSBCProps = (
   const { data, layout } = jsonObj;
   const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {};
   let yMaxValue = 0;
+  let secondaryYAxistitle: string = '';
+  let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {};
 
   data.forEach((series: any, index1: number) => {
     series.x?.forEach((x: string | number, index2: number) => {
@@ -185,6 +187,23 @@ export const transformPlotlyJsonToVSBCProps = (
 
       yMaxValue = Math.max(yMaxValue, series.y?.[index2]);
     });
+    if (layout.yaxis2 && series.name === layout.yaxis2.title) {
+      secondaryYAxistitle = layout.yaxis2.title;
+      if (layout.yaxis2.range) {
+        secondaryYScaleOptions = {
+          yMinValue: layout.yaxis2.range[0],
+          yMaxValue: layout.yaxis2.range[1],
+        };
+      } else {
+        const yValues = series.y;
+        if (yValues) {
+          secondaryYScaleOptions = {
+            yMinValue: Math.min(...yValues),
+            yMaxValue: Math.max(...yValues),
+          };
+        }
+      }
+    }
   });
 
   const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
@@ -198,6 +217,8 @@ export const transformPlotlyJsonToVSBCProps = (
     chartTitle,
     xAxisTitle,
     yAxisTitle,
+    secondaryYAxistitle,
+    secondaryYScaleOptions,
   };
 };
 
@@ -208,6 +229,8 @@ export const transformPlotlyJsonToGVBCProps = (
 ): IGroupedVerticalBarChartProps => {
   const { data, layout } = jsonObj;
   const mapXToDataPoints: Record<string, IGroupedVerticalBarChartData> = {};
+  let secondaryYAxistitle: string = '';
+  let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {};
 
   data.forEach((series: any, index1: number) => {
     series.x?.forEach((x: string | number, index2: number) => {
@@ -227,6 +250,23 @@ export const transformPlotlyJsonToGVBCProps = (
         });
       }
     });
+    if (layout.yaxis2 && series.name === layout.yaxis2.title) {
+      secondaryYAxistitle = layout.yaxis2.title;
+      if (layout.yaxis2.range) {
+        secondaryYScaleOptions = {
+          yMinValue: layout.yaxis2.range[0],
+          yMaxValue: layout.yaxis2.range[1],
+        };
+      } else {
+        const yValues = series.y;
+        if (yValues) {
+          secondaryYScaleOptions = {
+            yMinValue: Math.min(...yValues),
+            yMaxValue: Math.max(...yValues),
+          };
+        }
+      }
+    }
   });
 
   const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout);
@@ -239,6 +279,8 @@ export const transformPlotlyJsonToGVBCProps = (
     chartTitle,
     xAxisTitle,
     yAxisTitle,
+    secondaryYAxistitle,
+    secondaryYScaleOptions,
   };
 };