feat(charts): Declarative chart component to render chart using plotly json schema (#33348)

Co-authored-by: krkshitij <110246001+krkshitij@users.noreply.github.com>
Co-authored-by: srmukher <120183316+srmukher@users.noreply.github.com>
Co-authored-by: Anush Gupta <74965306+Anush2303@users.noreply.github.com>

Author: 4 people

change/@fluentui-react-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Create declarative chart component",
+  "packageName": "@fluentui/react-charting",
+  "email": "atisjai@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -119,6 +119,15 @@ export const DataVizPalette: {
     highSuccess: string;
 };
 
+// @public
+export const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
+
+// @public
+export interface DeclarativeChartProps extends React_2.RefAttributes<HTMLDivElement> {
+    chartSchema: Schema;
+    onSchemaChange?: (eventData: Schema) => void;
+}
+
 // @public
 export const DonutChart: React_2.FunctionComponent<IDonutChartProps>;
 
@@ -1591,6 +1600,15 @@ export const PieChart: React_2.FunctionComponent<IPieChartProps>;
 // @public
 export const SankeyChart: React_2.FunctionComponent<ISankeyChartProps>;
 
+// @public (undocumented)
+export interface Schema {
+    accesibilityLabels?: {
+        [key: string]: string;
+    };
+    plotlySchema: any;
+    selectedLegends?: string[];
+}
+
 // @public (undocumented)
 export const Shape: React_2.FC<IShapeProps>;
 

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

@@ -0,0 +1 @@
+export * from './components/DeclarativeChart/DeclarativeChart';

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

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { DonutChart } from '../DonutChart/index';
+import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
+import {
+  transformPlotlyJsonToDonutProps,
+  transformPlotlyJsonToColumnProps,
+  transformPlotlyJsonToScatterChartProps,
+  transformPlotlyJsonToHorizontalBarWithAxisProps,
+  isDateArray,
+  isNumberArray,
+  transformPlotlyJsonToHeatmapProps,
+  transformPlotlyJsonToSankeyProps,
+  transformPlotlyJsonToGaugeProps,
+} from './PlotlySchemaAdapter';
+import { LineChart } from '../LineChart/index';
+import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';
+import { AreaChart } from '../AreaChart/index';
+import { HeatMapChart } from '../HeatMapChart/index';
+import { SankeyChart } from '../SankeyChart/SankeyChart';
+import { GaugeChart } from '../GaugeChart/index';
+
+export interface Schema {
+  /**
+   * Plotly schema represented as JSON object
+   */
+  plotlySchema: any;
+
+  /**
+   * The legends selected by the user to persist in the chart
+   */
+  selectedLegends?: string[];
+
+  /**
+   * Dictionary for localizing the accessibility labels
+   */
+  accesibilityLabels?: { [key: string]: string };
+}
+
+/**
+ * DeclarativeChart props.
+ * {@docCategory DeclarativeChart}
+ */
+export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {
+  /**
+   * The schema representing the chart data, layout and configuration
+   */
+  chartSchema: Schema;
+
+  /**
+   * Callback when an event occurs
+   */
+  onSchemaChange?: (eventData: Schema) => void;
+}
+
+const useColorMapping = () => {
+  const colorMap = React.useRef(new Map<string, string>());
+  return colorMap;
+};
+
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */
+export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<
+  HTMLDivElement,
+  DeclarativeChartProps
+>((props, forwardedRef) => {
+  const { plotlySchema } = props.chartSchema;
+  const xValues = plotlySchema.data[0].x;
+  const isXDate = isDateArray(xValues);
+  const isXNumber = isNumberArray(xValues);
+  const colorMap = useColorMapping();
+
+  switch (plotlySchema.data[0].type) {
+    case 'pie':
+      return <DonutChart {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap)} />;
+    case 'bar':
+      const orientation = plotlySchema.data[0].orientation;
+      if (orientation === 'h') {
+        return (
+          <HorizontalBarChartWithAxis {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap)} />
+        );
+      } else {
+        return <VerticalStackedBarChart {...transformPlotlyJsonToColumnProps(plotlySchema, colorMap)} />;
+      }
+    case 'scatter':
+      const isAreaChart = plotlySchema.data.some((series: any) => series.fill === 'tonexty');
+      if (isXDate || isXNumber) {
+        if (isAreaChart) {
+          return <AreaChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, true, colorMap)} />;
+        }
+        return <LineChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, false, colorMap)} />;
+      }
+      return <VerticalStackedBarChart {...transformPlotlyJsonToColumnProps(plotlySchema, colorMap)} />;
+    case 'heatmap':
+      return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} />;
+    case 'sankey':
+      return <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap)} />;
+    case 'indicator':
+      if (plotlySchema?.data?.[0]?.mode?.includes('gauge')) {
+        return <GaugeChart {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap)} />;
+      }
+      return <div>Unsupported Schema</div>;
+    default:
+      return <div>Unsupported Schema</div>;
+  }
+});
+DeclarativeChart.displayName = 'DeclarativeChart';