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)

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,11 @@ 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] }
+          : typeof series.marker?.size === 'number'
+          ? { markerSize: series.marker.size }
+          : {}),
       })),
       color: lineColor,
     } as ILineChartPoints;