feat(declarative-chart): Create Scatter plot

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

@@ -961,6 +961,7 @@ export interface ILegendSubComponentStyles {
 export interface ILineChartDataPoint {
     callOutAccessibilityData?: IAccessibilityProps;
     hideCallout?: boolean;
+    markerSize?: number;
     onDataPointClick?: () => void;
     x: number | Date;
     xAxisCalloutAccessibilityData?: IAccessibilityProps;
@@ -1011,6 +1012,7 @@ export interface ILineChartProps extends ICartesianChartProps {
     enablePerfOptimization?: boolean;
     eventAnnotationProps?: IEventsAnnotationProps;
     getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;
+    lineMode?: 'default' | 'scatter';
     onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
     onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
     // (undocumented)
@@ -1094,7 +1096,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | undefined, shiftX: number) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: IMargins) => void;
-    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined) => {
+    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined, containerHeight?: number, margins?: IMargins) => {
         startValue: number;
         endValue: number;
     };

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

@@ -307,7 +307,12 @@ export class CartesianChartBase
         yMaxValue: this.props.yMaxValue || 0,
         tickPadding: 10,
         maxOfYVal: this.props.maxOfYVal,
-        yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType),
+        yMinMaxValues: this.props.getMinMaxOfYAxis(
+          points,
+          this.props.yAxisType,
+          this.state.containerHeight - this.state._removalValueForTextTuncate!,
+          this.margins,
+        ),
         // please note these padding default values must be consistent in here
         // and the parent chart(HBWA/Vertical etc..) for more details refer example
         // http://using-d3js.com/04_07_ordinal_scales.html

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

@@ -659,6 +659,8 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   getMinMaxOfYAxis: (
     points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[],
     yAxisType: YAxisType | undefined,
+    containerHeight?: number,
+    margins?: IMargins,
   ) => { startValue: number; endValue: number };
 
   /**

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -225,17 +225,21 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         );
       }
     case 'scatter':
-      if (plotlyInput.data[0].mode === 'markers') {
-        throw new Error(`Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);
+      if (plotlyInput.data[0].mode === 'markers' && !isNumberArray(plotlyInput.data[0].y!)) {
+        throw new Error(
+          `Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}
+          , xAxisType: String or Date`,
+        );
       }
       const isAreaChart = plotlyInput.data.some(
         (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy',
       );
+      const isScatterMarkers = plotlyInput.data[0]?.mode?.includes('markers');
       const renderChartJsx = (chartProps: ILineChartProps | IAreaChartProps) => {
         if (isAreaChart) {
           return <AreaChart {...chartProps} />;
         }
-        return <LineChart {...chartProps} />;
+        return <LineChart {...chartProps} lineMode={isScatterMarkers ? 'scatter' : 'default'} />;
       };
       return checkAndRenderChart(renderChartJsx, isAreaChart);
     case 'heatmap':

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

@@ -511,6 +511,7 @@ export const transformPlotlyJsonToScatterChartProps = (
       data: xValues.map((x, i: number) => ({
         x: isString ? (isXDate ? new Date(x as string) : isXNumber ? parseFloat(x as string) : x) : x,
         y: series.y[i],
+        ...(Array.isArray(series.marker?.size) ? { markerSize: series.marker.size[i] } : {}),
       })),
       color: lineColor,
     } as ILineChartPoints;