feat(charts): add support for log scale in scatter charts

change/@fluentui-chart-utilities-1dc31035-0621-4b45-9a49-f793d3e51b9f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add support for log scale in scatter charts",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-2b31e5c0-59b1-4402-9961-7a3ad3f6835f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add support for log scale in scatter charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-utilities/etc/chart-utilities.api.md

@@ -446,6 +446,12 @@ export interface GaugeLine {
     width: number;
 }
 
+// @public (undocumented)
+export const getAxisIds: (data: Partial<PlotData>) => {
+    x: number;
+    y: number;
+};
+
 // @public
 export function getMultiLevelDateTimeFormatOptions(startLevel?: number, endLevel?: number): Intl.DateTimeFormatOptions;
 

packages/charts/chart-utilities/src/PlotlySchemaConverter.UT.test.ts

@@ -772,8 +772,17 @@ describe('mapFluentChart UTs', () => {
       layout: { xaxis: { type: 'log' } },
     };
     const result = mapFluentChart(input);
+    expect(result.isValid).toBe(true);
+  });
+
+  test('unsupported log axis type', () => {
+    const input = {
+      data: [{ type: 'bar', x: [1, 2, 3], y: [4, 5, 6] }],
+      layout: { xaxis: { type: 'log' } },
+    };
+    const result = mapFluentChart(input);
     expect(result.isValid).toBe(false);
-    expect(result.errorMessage).toBe('Log axis type is not supported');
+    expect(result.errorMessage).toContain('log axis type not supported');
   });
 
   test('composite chart with multiple types', () => {

packages/charts/chart-utilities/src/PlotlySchemaConverter.ts

@@ -279,14 +279,14 @@ const validateScatterData = (data: Partial<PlotData>) => {
   }
 };
 
-const invalidateLogAxisType = (layout: Partial<Layout> | undefined): boolean => {
-  const isLogAxisType =
-    layout?.xaxis?.type === 'log' ||
-    layout?.yaxis?.type === 'log' ||
-    layout?.yaxis2?.type === 'log' ||
-    layout?.xaxis2?.type === 'log';
-
-  return isLogAxisType;
+const invalidateLogAxisType = (data: Partial<PlotData>, layout: Partial<Layout> | undefined) => {
+  const axisIds = getAxisIds(data) as Record<string, number>;
+  Object.keys(axisIds).forEach(axLetter => {
+    const axisKey = (`${axLetter}axis` + (axisIds[axLetter] > 1 ? axisIds[axLetter] : '')) as keyof Layout;
+    if (layout?.[axisKey]?.type === 'log') {
+      throw new Error(`${UNSUPPORTED_MSG_PREFIX} ${data.type}, log axis type not supported.`);
+    }
+  });
 };
 
 /**
@@ -344,16 +344,20 @@ function findSankeyCycles(input: Partial<SankeyData>): boolean {
   return false; // No cycles found
 }
 
-const DATA_VALIDATORS_MAP: Record<string, ((data: Data) => void)[]> = {
+const DATA_VALIDATORS_MAP: Record<string, ((data: Data, layout: Partial<Layout> | undefined) => void)[]> = {
   indicator: [
     data => {
       if (!(data as Partial<PlotData>).mode?.includes('gauge')) {
         throw new Error(`${UNSUPPORTED_MSG_PREFIX} ${data.type}, mode: ${(data as Partial<PlotData>).mode}`);
       }
     },
   ],
-  histogram: [data => validateSeriesData(data as Partial<PlotData>, false)],
+  histogram: [
+    (data, layout) => invalidateLogAxisType(data as Partial<PlotData>, layout),
+    data => validateSeriesData(data as Partial<PlotData>, false),
+  ],
   bar: [
+    (data, layout) => invalidateLogAxisType(data as Partial<PlotData>, layout),
     data => {
       validateBarData(data as Partial<PlotData>);
     },
@@ -378,10 +382,12 @@ const DATA_VALIDATORS_MAP: Record<string, ((data: Data) => void)[]> = {
     },
   ],
   funnel: [data => validateSeriesData(data as Partial<PlotData>, false)],
+  histogram2d: [(data, layout) => invalidateLogAxisType(data as Partial<PlotData>, layout)],
+  heatmap: [(data, layout) => invalidateLogAxisType(data as Partial<PlotData>, layout)],
 };
 
 const DEFAULT_CHART_TYPE = '';
-const getValidTraces = (dataArr: Data[]) => {
+const getValidTraces = (dataArr: Data[], layout: Partial<Layout> | undefined) => {
   const errorMessages: string[] = [];
   const validTraces = dataArr
     .map((data, index): [number, string] => {
@@ -391,7 +397,7 @@ const getValidTraces = (dataArr: Data[]) => {
         const validators = DATA_VALIDATORS_MAP[type];
         for (const validator of validators) {
           try {
-            validator(data);
+            validator(data, layout);
           } catch (error) {
             errorMessages.push(`data[${index}] - type: ${data.type}, ${error}`);
             return [-1, DEFAULT_CHART_TYPE];
@@ -426,11 +432,7 @@ export const mapFluentChart = (input: any): OutputChartType => {
       return { isValid: false, errorMessage: `Failed to decode plotly schema: ${error}` };
     }
 
-    if (invalidateLogAxisType(validSchema.layout)) {
-      return { isValid: false, errorMessage: 'Log axis type is not supported' };
-    }
-
-    const validTraces = getValidTraces(validSchema.data);
+    const validTraces = getValidTraces(validSchema.data, validSchema.layout);
     let mappedTraces = validTraces.map(trace => {
       const traceIndex = trace[0];
       const traceData = validSchema.data[traceIndex];
@@ -563,3 +565,20 @@ export const mapFluentChart = (input: any): OutputChartType => {
 const canMapToGantt = (data: Partial<PlotData>) => {
   return isDateArray(data.base) || isNumberArray(data.base);
 };
+
+export const getAxisIds = (data: Partial<PlotData>) => {
+  let xAxisId = 1;
+  if (typeof data.xaxis === 'string' && /^x\d+$/.test(data.xaxis)) {
+    xAxisId = parseInt(data.xaxis.slice(1), 10);
+  }
+
+  let yAxisId = 1;
+  if (typeof data.yaxis === 'string' && /^y\d+$/.test(data.yaxis)) {
+    yAxisId = parseInt(data.yaxis.slice(1), 10);
+  }
+
+  return {
+    x: xAxisId,
+    y: yAxisId,
+  };
+};

packages/charts/chart-utilities/src/index.ts

@@ -114,6 +114,7 @@ export {
   isInvalidValue,
   isStringArray,
   isMonthArray,
+  getAxisIds,
 } from './PlotlySchemaConverter';
 
 export { decodeBase64Fields } from './DecodeBase64Data';

packages/charts/react-charting/bundle-size/ScatterChart.fixture.js

@@ -0,0 +1,7 @@
+import { ScatterChart } from '@fluentui/react-charting';
+
+console.log(ScatterChart);
+
+export default {
+  name: 'ScatterChart',
+};

packages/charts/react-charting/etc/react-charting.api.md

@@ -34,6 +34,9 @@ export const AreaChart: React_2.FunctionComponent<IAreaChartProps>;
 // @public
 export type AxisCategoryOrder = 'default' | 'data' | string[] | 'category ascending' | 'category descending' | 'total ascending' | 'total descending' | 'min ascending' | 'min descending' | 'max ascending' | 'max descending' | 'sum ascending' | 'sum descending' | 'mean ascending' | 'mean descending' | 'median ascending' | 'median descending';
 
+// @public
+export type AxisScaleType = 'default' | 'log';
+
 // @public
 export const CartesianChart: React_2.FunctionComponent<IModifiedCartesianChartProps>;
 
@@ -325,6 +328,7 @@ export interface ICartesianChartProps {
         yMinValue?: number;
         yMaxValue?: number;
     };
+    secondaryYScaleType?: AxisScaleType;
     showXAxisLablesTooltip?: boolean;
     strokeWidth?: number;
     styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
@@ -345,13 +349,15 @@ export interface ICartesianChartProps {
     xAxistickSize?: number;
     xAxisTitle?: string;
     xMaxValue?: number;
+    xScaleType?: AxisScaleType;
     yAxisAnnotation?: string;
     yAxisCategoryOrder?: AxisCategoryOrder;
     yAxisTickCount?: number;
     yAxisTickFormat?: any;
     yAxisTitle?: string;
     yMaxValue?: number;
     yMinValue?: number;
+    yScaleType?: AxisScaleType;
 }
 
 // @public
@@ -1246,7 +1252,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
     // Warning: (ae-forgotten-export) The symbol "IYAxisParams" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "IAxisData" needs to be exported by the entry point index.d.ts
-    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean, scale?: AxisScaleType) => ScaleLinear<number, number, never>;
     culture?: string;
     customizedCallout?: any;
     datasetForXAxisDomain?: string[];
@@ -1259,7 +1265,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[] | IGanttChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: IMargins) => void;
-    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[] | IScatterChartDataPoint[] | IGanttChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
+    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[] | IScatterChartPoints[] | IGanttChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
         startValue: number;
         endValue: number;
     };

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -329,6 +329,7 @@ export class CartesianChartBase
             this.props.tickParams!,
             this.props.chartType,
             culture,
+            this.props.xScaleType,
           ));
           break;
         case XAxisTypes.DateAxis:
@@ -357,6 +358,7 @@ export class CartesianChartBase
             this.props.tickParams!,
             this.props.chartType,
             culture,
+            this.props.xScaleType,
           ));
       }
       this._xScale = xScale;
@@ -430,6 +432,7 @@ export class CartesianChartBase
             true,
             this.props.supportNegativeData!,
             this.props.roundedTicks!,
+            this.props.secondaryYScaleType,
           );
         }
         yScalePrimary = this.props.createYAxis(
@@ -440,6 +443,7 @@ export class CartesianChartBase
           false,
           this.props.supportNegativeData!,
           this.props.roundedTicks!,
+          this.props.yScaleType,
         );
       }
 

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -7,6 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import {
   AxisCategoryOrder,
+  AxisScaleType,
   IAccessibilityProps,
   IChart,
   IDataPoint,
@@ -16,7 +17,7 @@ import {
   IHorizontalBarChartWithAxisDataPoint,
   ILineChartPoints,
   IMargins,
-  IScatterChartDataPoint,
+  IScatterChartPoints,
   IVerticalBarChartDataPoint,
   IVerticalStackedBarDataPoint,
 } from '../../types/index';
@@ -513,6 +514,24 @@ export interface ICartesianChartProps {
    * @default 'default'
    */
   yAxisCategoryOrder?: AxisCategoryOrder;
+
+  /**
+   * Defines the scale type for the x-axis.
+   * @default 'default'
+   */
+  xScaleType?: AxisScaleType;
+
+  /**
+   * Defines the scale type for the primary y-axis.
+   * @default 'default'
+   */
+  yScaleType?: AxisScaleType;
+
+  /**
+   * Defines the scale type for the secondary y-axis.
+   * @default 'default'
+   */
+  secondaryYScaleType?: AxisScaleType;
 }
 
 export interface IYValueHover {
@@ -721,7 +740,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
       | IHorizontalBarChartWithAxisDataPoint[]
       | IVerticalBarChartDataPoint[]
       | IDataPoint[]
-      | IScatterChartDataPoint[]
+      | IScatterChartPoints[]
       | IGanttChartDataPoint[],
     yAxisType: YAxisType | undefined,
     useSecondaryYScale?: boolean,
@@ -738,6 +757,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     useSecondaryYScale?: boolean,
     supportNegativeData?: boolean,
     roundedTicks?: boolean,
+    scale?: AxisScaleType,
   ) => ScaleLinear<number, number, never>;
 
   /**

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

@@ -65,6 +65,7 @@ import {
   isYearArray,
   isInvalidValue,
   formatToLocaleString,
+  getAxisIds,
 } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { IScatterChartProps } from '../ScatterChart/index';
@@ -907,6 +908,7 @@ const transformPlotlyJsonToScatterTraceProps = (
     ...getTitles(input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
     ...yAxisTickFormat,
+    ...getAxisScaleTypeProps(input.data, input.layout),
   };
 
   if (isAreaChart) {
@@ -2515,7 +2517,14 @@ const getBarProps = (
   let padding: number | undefined;
 
   if (typeof layout?.bargap === 'number') {
-    padding = layout.bargap;
+    if (layout.bargap >= 0 && layout.bargap <= 1) {
+      padding = layout.bargap;
+    } else {
+      // Plotly uses a default bargap of 0.2, as noted here: https://github.com/plotly/plotly.js/blob/1d5a249e43dd31ae50acf02117a19e5ac97387e9/src/traces/bar/layout_defaults.js#L58.
+      // However, we don't use this value as our default padding because it causes the bars to
+      // appear disproportionately wide in large containers.
+      padding = 0.2;
+    }
   }
 
   const plotlyBarWidths = data
@@ -2550,3 +2559,37 @@ const getBarProps = (
     xAxisOuterPadding: padding / 2,
   };
 };
+
+type GetAxisScaleTypePropsResult = Pick<ICartesianChartProps, 'xScaleType' | 'yScaleType' | 'secondaryYScaleType'>;
+
+const getAxisScaleTypeProps = (
+  data: Data[],
+  layout: Partial<Layout> | undefined,
+): Pick<ICartesianChartProps, 'xScaleType' | 'yScaleType' | 'secondaryYScaleType'> => {
+  const result: GetAxisScaleTypePropsResult = {};
+
+  const xAxisIds = new Set<number>();
+  const yAxisIds = new Set<number>();
+  data.forEach((series: Partial<PlotData>) => {
+    const axisIds = getAxisIds(series);
+    xAxisIds.add(axisIds.x);
+    yAxisIds.add(axisIds.y);
+  });
+
+  const axisKey = (axLetter: string, axId: number) => `${axLetter}axis${axId > 1 ? axId : ''}` as keyof Layout;
+
+  const sortedXAxisIds = Array.from(xAxisIds).sort();
+  if (sortedXAxisIds.length > 0 && layout?.[axisKey('x', sortedXAxisIds[0])]?.type === 'log') {
+    result.xScaleType = 'log';
+  }
+
+  const sortedYAxisIds = Array.from(yAxisIds).sort();
+  if (sortedYAxisIds.length > 0 && layout?.[axisKey('y', sortedYAxisIds[0])]?.type === 'log') {
+    result.yScaleType = 'log';
+  }
+  if (sortedYAxisIds.length > 1 && layout?.[axisKey('y', sortedYAxisIds[1])]?.type === 'log') {
+    result.secondaryYScaleType = 'log';
+  }
+
+  return result;
+};

packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -7036,8 +7036,8 @@ Object {
     "Apr",
     "May",
   ],
-  "xAxisInnerPadding": 11.864179406671795,
-  "xAxisOuterPadding": 5.9320897033358975,
+  "xAxisInnerPadding": 0.2,
+  "xAxisOuterPadding": 0.1,
   "xAxisTitle": "",
   "yAxisCategoryOrder": "data",
   "yAxisTitle": "",