diff --git a/change/@fluentui-react-charting-bf866374-fbce-4eb8-b415-858fe0b29df9.json b/change/@fluentui-react-charting-bf866374-fbce-4eb8-b415-858fe0b29df9.json new file mode 100644 index 0000000000000..fbc1998a9119f --- /dev/null +++ b/change/@fluentui-react-charting-bf866374-fbce-4eb8-b415-858fe0b29df9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Adding secondary y-axis for Declarative charts", + "packageName": "@fluentui/react-charting", + "email": "120183316+srmukher@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 089fc1ea41219..b1d55462b7678 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -99,6 +99,27 @@ export const getColor = ( return colorMap.current.get(legendLabel) as string; }; +const getSecondaryYAxisValues = (series: any, layout: any) => { + let secondaryYAxistitle: string = ''; + let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {}; + 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), + }; + } + } + return { secondaryYAxistitle, secondaryYScaleOptions }; +}; + export const transformPlotlyJsonToDonutProps = ( jsonObj: any, colorMap: React.MutableRefObject>, @@ -160,8 +181,10 @@ export const transformPlotlyJsonToVSBCProps = ( const { data, layout } = jsonObj; const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; let yMaxValue = 0; - let secondaryYAxistitle: string = ''; - let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {}; + let secondaryYAxisValues: { + secondaryYAxistitle: string; + secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number }; + } = { secondaryYAxistitle: '', secondaryYScaleOptions: {} }; data.forEach((series: any, index1: number) => { series.x?.forEach((x: string | number, index2: number) => { @@ -188,21 +211,7 @@ 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), - }; - } - } + secondaryYAxisValues = getSecondaryYAxisValues(series, layout); } }); @@ -217,8 +226,8 @@ export const transformPlotlyJsonToVSBCProps = ( chartTitle, xAxisTitle, yAxisTitle, - secondaryYAxistitle, - secondaryYScaleOptions, + secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle, + secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions, }; }; @@ -229,8 +238,10 @@ export const transformPlotlyJsonToGVBCProps = ( ): IGroupedVerticalBarChartProps => { const { data, layout } = jsonObj; const mapXToDataPoints: Record = {}; - let secondaryYAxistitle: string = ''; - let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {}; + let secondaryYAxisValues: { + secondaryYAxistitle: string; + secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number }; + } = { secondaryYAxistitle: '', secondaryYScaleOptions: {} }; data.forEach((series: any, index1: number) => { series.x?.forEach((x: string | number, index2: number) => { @@ -251,21 +262,7 @@ 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), - }; - } - } + secondaryYAxisValues = getSecondaryYAxisValues(series, layout); } }); @@ -279,8 +276,8 @@ export const transformPlotlyJsonToGVBCProps = ( chartTitle, xAxisTitle, yAxisTitle, - secondaryYAxistitle, - secondaryYScaleOptions, + secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle, + secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions, }; };