Draft changes for a declarative chart using plotly json schema

apps/public-docsite-resources/config/api-docs.js

@@ -108,6 +108,7 @@ module.exports = {
       'MultiStackedBarChart',
       'TreeChart',
       'VerticalStackedBarChart',
+      'DeclarativeChart',
     ],
   },
 };

apps/public-docsite-resources/src/AppDefinition.tsx

@@ -627,6 +627,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'TreeChart',
           url: '#/examples/TreeChart',
         },
+        {
+          component: require<any>('./components/pages/Charting/DeclarativeChartPage').DeclarativeChartPage,
+          key: 'DeclarativeChart',
+          name: 'DeclarativeChart',
+          url: '#/examples/DeclarativeChart',
+        },
       ],
     },
     {

apps/public-docsite-resources/src/components/pages/Charting/DeclarativeChartPage.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DemoPage } from '../../DemoPage';
+
+import { DeclarativeChartPageProps } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/DeclarativeChart.doc';
+
+export const DeclarativeChartPage = (props: { isHeaderVisible: boolean }) => (
+  <DemoPage
+    jsonDocs={require('../../../../dist/api/react-charting/DeclarativeChart.page.json')}
+    {...{ ...DeclarativeChartPageProps, ...props }}
+  />
+);

apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx

@@ -131,6 +131,7 @@ export const categories: { [name: string]: ICategory } = {
     SankeyChart: {},
     SparklineChart: {},
     TreeChart: {},
+    DeclarativeChart: {},
   },
   Utilities: {
     Announced: {

apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.doc.ts

@@ -0,0 +1,8 @@
+import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
+import { DeclarativeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/DeclarativeChart.doc';
+
+export const DeclarativeChartPageProps: TFabricPlatformPageProps = {
+  web: {
+    ...(ExternalProps as any),
+  },
+};

apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
+import { DeclarativeChartPageProps } from './DeclarativeChartPage.doc';
+
+export const DeclarativeChartPage: React.FunctionComponent<IControlsPageProps> = props => {
+  const { platform } = props;
+  return <ControlsAreaPage {...props} {...DeclarativeChartPageProps[platform!]} />;
+};

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -119,6 +119,14 @@ export const DataVizPalette: {
     highSuccess: string;
 };
 
+// @public
+export const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
+
+// @public
+export interface DeclarativeChartProps extends React_2.RefAttributes<HTMLDivElement> {
+    chartSchema: any;
+}
+
 // @public
 export const DonutChart: React_2.FunctionComponent<IDonutChartProps>;
 

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,79 @@
+/* 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';
+
+/**
+ * DeclarativeChart props.
+ * {@docCategory DeclarativeChart}
+ */
+export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {
+  /**
+   * The schema representing the chart
+   */
+  chartSchema: any;
+}
+
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */
+export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<
+  HTMLDivElement,
+  DeclarativeChartProps
+>((props, forwardedRef) => {
+  const xValues = props.chartSchema.data[0].x;
+  const isXDate = isDateArray(xValues);
+  const isXNumber = isNumberArray(xValues);
+
+  switch (props.chartSchema.data[0].type) {
+    case 'pie':
+      return <DonutChart {...transformPlotlyJsonToDonutProps(props.chartSchema)} />;
+    case 'bar':
+      const orientation = props.chartSchema.data[0].orientation;
+      if (orientation === 'h') {
+        return <HorizontalBarChartWithAxis {...transformPlotlyJsonToHorizontalBarWithAxisProps(props.chartSchema)} />;
+      } else {
+        return <VerticalStackedBarChart {...transformPlotlyJsonToColumnProps(props.chartSchema)} />;
+      }
+    case 'scatter':
+      const isAreaChart = props.chartSchema.data.some((series: any) => series.fill === 'tonexty');
+      if (isXDate || isXNumber) {
+        if (isAreaChart) {
+          return <AreaChart {...transformPlotlyJsonToScatterChartProps(props.chartSchema, true)} />;
+        }
+        return <LineChart {...transformPlotlyJsonToScatterChartProps(props.chartSchema, false)} />;
+      }
+      return <VerticalStackedBarChart {...transformPlotlyJsonToColumnProps(props.chartSchema)} />;
+    case 'heatmap':
+      return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(props.chartSchema)} />;
+    case 'sankey':
+      return <SankeyChart {...transformPlotlyJsonToSankeyProps(props.chartSchema)} />;
+    case 'indicator':
+      if (props.chartSchema?.data?.[0]?.mode?.includes('gauge')) {
+        return <GaugeChart {...transformPlotlyJsonToGaugeProps(props.chartSchema)} />;
+      }
+      return <div>Unsupported Schema</div>;
+    default:
+      return <div>Unsupported Schema</div>;
+  }
+});
+DeclarativeChart.displayName = 'DeclarativeChart';