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

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

@@ -119,6 +119,14 @@ export const DataVizPalette: {
     highSuccess: string;
 };
 
+// @public (undocumented)
+export const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
+
+// @public (undocumented)
+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,67 @@
+/* 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,
+  transformPlotlyJsonToHeatmapProps,
+  transformPlotlyJsonToSankeyProps,
+} from './PlotlySchemaAdapter';
+import { LineChart } from '../LineChart/index';
+import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';
+import { AreaChart } from '../AreaChart/index';
+import { HeatMapChart } from '../HeatMapChart/index';
+
+const isDate = (value: any): boolean => !isNaN(Date.parse(value));
+const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value);
+export const isDateArray = (array: any[]): boolean => Array.isArray(array) && array.every(isDate);
+export const isNumberArray = (array: any[]): boolean => Array.isArray(array) && array.every(isNumber);
+import { SankeyChart } from '../SankeyChart/SankeyChart';
+
+export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {
+  /**
+   * The schema representing the chart
+   */
+  chartSchema: any;
+}
+
+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)} />;
+    default:
+      return <div>Unsupported Schema</div>;
+  }
+});
+DeclarativeChart.displayName = 'DeclarativeChart';