feat(react-charting): Add support for line curves

change/@fluentui-chart-utilities-650f8e63-5d74-49aa-a65d-87360696a05f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: modify check for scatter plot",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "110246001+krkshitij@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-224d8554-1255-497c-bb7f-c83a5b44a106.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add support for line curves",
+  "packageName": "@fluentui/react-charting",
+  "email": "110246001+krkshitij@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -191,11 +191,11 @@ export const mapFluentChart = (input: any): OutputChartType => {
       case 'histogram':
         return validateSeriesData(validSchema, 'verticalbar', false);
       case 'scatter':
-        if (validSchema.data[0]?.mode?.includes('markers') && !isNumberArray(validSchema.data[0].y!)) {
+        if (validSchema.data[0]?.mode === 'markers' && !isNumberArray(validSchema.data[0].y!)) {
           return {
             isValid: false,
             errorMessage: `Unsupported chart - type :${validSchema.data[0]?.type}, mode: ${validSchema.data[0]?.mode}
-           , xAxisType: String or Date`,
+           , yAxisType: String or Date`,
           };
         }
         const isAreaChart = validSchema.data.some(

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

@@ -4,6 +4,7 @@
 
 ```ts
 
+import { CurveFactory } from 'd3-shape';
 import { FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout';
 import { ICalloutContentStyles } from '@fluentui/react/lib/Callout';
@@ -986,6 +987,7 @@ export interface ILineChartGap {
 
 // @public (undocumented)
 export interface ILineChartLineOptions extends React_2.SVGProps<SVGPathElement> {
+    curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;
     lineBorderColor?: string;
     lineBorderWidth?: string | number;
     strokeDasharray?: string | number;

packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -43,6 +43,7 @@ import {
   formatDate,
   getSecureProps,
   areArraysEqual,
+  getCurveFactory,
 } from '../../utilities/index';
 import { ILegend, ILegendContainer, Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
@@ -734,25 +735,26 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _drawGraph = (containerHeight: number, xScale: any, yScale: any, xElement: SVGElement): JSX.Element[] => {
     const points = this._addDefaultColors(this.props.data.lineChartData);
     const { pointOptions, pointLineOptions } = this.props.data;
-    const area = d3Area()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .x((d: any) => xScale(d.xVal))
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .y0((d: any) => yScale(d.values[0]))
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .y1((d: any) => yScale(d.values[1]))
-      .curve(d3CurveBasis);
-    const line = d3Line()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .x((d: any) => xScale(d.xVal))
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .y((d: any) => yScale(d.values[1]))
-      .curve(d3CurveBasis);
 
     const graph: JSX.Element[] = [];
     let lineColor: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     this._data.forEach((singleStackedData: Array<any>, index: number) => {
+      const curveFactory = getCurveFactory(points[index].lineOptions?.curve, d3CurveBasis);
+      const area = d3Area()
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .x((d: any) => xScale(d.xVal))
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .y0((d: any) => yScale(d.values[0]))
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .y1((d: any) => yScale(d.values[1]))
+        .curve(curveFactory);
+      const line = d3Line()
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .x((d: any) => xScale(d.xVal))
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .y((d: any) => yScale(d.values[1]))
+        .curve(curveFactory);
       const layerOpacity = this.props.mode === 'tozeroy' ? 0.8 : this._opacity[index];
       graph.push(
         <React.Fragment key={`${index}-graph-${this._uniqueIdForGraph}`}>
@@ -828,7 +830,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         graph.push(
           <g
             key={`${index}-dots-${this._uniqueIdForGraph}`}
-            d={area(singleStackedData)!}
             clipPath="url(#clip)"
             role="region"
             aria-label={`${points[index].legend}, series ${index + 1} of ${points.length} with ${

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

@@ -139,7 +139,6 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         <g
           aria-label="metaData1, series 1 of 1 with 2 data points."
           clipPath="url(#clip)"
-          d="M40,115.625L-20,20L-20,275L40,275Z"
           key="0-dots-areaChart_0"
           role="region"
         >
@@ -708,7 +707,6 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         <g
           aria-label="metaData1, series 1 of 1 with 2 data points."
           clipPath="url(#clip)"
-          d="M40,115.625L-20,20L-20,275L40,275Z"
           key="0-dots-areaChart_0"
           role="region"
         >
@@ -1174,7 +1172,6 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         <g
           aria-label="metaData1, series 1 of 1 with 2 data points."
           clipPath="url(#clip)"
-          d="M40,115.625L-20,20L-20,275L40,275Z"
           key="0-dots-areaChart_0"
           role="region"
         >