From 0e77369230156fd40e6f5aa46e1f3e48ff757272 Mon Sep 17 00:00:00 2001
From: srmukher <120183316+srmukher@users.noreply.github.com>
Date: Thu, 9 Jan 2025 08:19:40 +0000
Subject: [PATCH] Adding secondary y-axis for Declarative Charts

---
 .../DeclarativeChart/PlotlySchemaAdapter.ts   | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
index 181f88c9b5a60..089fc1ea41219 100644
--- 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,
   };
 };