feat(react-charts): Add PolarChart

packages/charts/chart-utilities/src/PlotlySchemaConverter.ts

@@ -422,9 +422,9 @@ const DATA_VALIDATORS_MAP: Record<string, ((data: Data, layout: Partial<Layout>
       if (!isNumberArray((data as Partial<PlotData>).theta) && !isStringArray((data as Partial<PlotData>).theta)) {
         throw new Error(`${UNSUPPORTED_MSG_PREFIX} ${data.type}, theta values must be array of numbers or strings`);
       }
-      if (!isNumberArray((data as Partial<PlotData>).r)) {
-        throw new Error(`${UNSUPPORTED_MSG_PREFIX} ${data.type}, Non numeric r values`);
-      }
+      // if (!isNumberArray((data as Partial<PlotData>).r)) {
+      //   throw new Error(`${UNSUPPORTED_MSG_PREFIX} ${data.type}, Non numeric r values`);
+      // }
     },
   ],
   funnel: [data => validateSeriesData(data as Partial<PlotData>, false)],

packages/charts/react-charts/library/src/PolarChart.ts

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

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

@@ -32,13 +32,13 @@ import {
   transformPlotlyJsonToVBCProps,
   transformPlotlyJsonToChartTableProps,
   transformPlotlyJsonToScatterChartProps,
-  projectPolarToCartesian,
   getAllupLegendsProps,
   NON_PLOT_KEY_PREFIX,
   SINGLE_REPEAT,
   transformPlotlyJsonToFunnelChartProps,
   transformPlotlyJsonToGanttChartProps,
   transformPlotlyJsonToAnnotationChartProps,
+  transformPlotlyJsonToPolarChartProps,
 } from './PlotlySchemaAdapter';
 import type { ColorwayType } from './PlotlyColorAdapter';
 import { AnnotationOnlyChart } from '../AnnotationOnlyChart/AnnotationOnlyChart';
@@ -56,6 +56,7 @@ import { Chart, ImageExportOptions } from '../../types/index';
 import { ScatterChart } from '../ScatterChart/index';
 import { FunnelChart } from '../FunnelChart/FunnelChart';
 import { GanttChart } from '../GanttChart/index';
+import { PolarChart } from '../PolarChart/index';
 
 import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
 import { ChartTable } from '../ChartTable/index';
@@ -79,6 +80,7 @@ const ResponsiveChartTable = withResponsiveContainer(ChartTable);
 const ResponsiveGanttChart = withResponsiveContainer(GanttChart);
 // Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart
 //const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);
+const ResponsivePolarChart = withResponsiveContainer(PolarChart);
 
 // Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
 const DEFAULT_XAXIS = 'x';
@@ -243,6 +245,10 @@ type ChartTypeMap = {
     transformer: typeof transformPlotlyJsonToFunnelChartProps;
     renderer: typeof FunnelChart;
   } & PreTransformHooks;
+  scatterpolar: {
+    transformer: typeof transformPlotlyJsonToPolarChartProps;
+    renderer: typeof ResponsivePolarChart;
+  } & PreTransformHooks;
   fallback: {
     transformer: typeof transformPlotlyJsonToVSBCProps;
     renderer: typeof ResponsiveVerticalStackedBarChart;
@@ -317,6 +323,10 @@ const chartMap: ChartTypeMap = {
     transformer: transformPlotlyJsonToFunnelChartProps,
     renderer: FunnelChart,
   },
+  scatterpolar: {
+    transformer: transformPlotlyJsonToPolarChartProps,
+    renderer: ResponsivePolarChart,
+  },
   fallback: {
     transformer: transformPlotlyJsonToVSBCProps,
     renderer: ResponsiveVerticalStackedBarChart,
@@ -458,23 +468,6 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     [exportAsImage],
   );
 
-  if (chart.type === 'scatterpolar') {
-    const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
-    plotlyInputWithValidData.data = cartesianProjection.data;
-    plotlyInputWithValidData.layout = cartesianProjection.layout;
-    validTracesFilteredIndex.forEach((trace, index) => {
-      if (trace.type === 'scatterpolar') {
-        const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';
-        if (mode.includes('line')) {
-          validTracesFilteredIndex[index].type = 'line';
-        } else if (mode.includes('markers') || mode === 'text') {
-          validTracesFilteredIndex[index].type = 'scatter';
-        } else {
-          validTracesFilteredIndex[index].type = 'line';
-        }
-      }
-    });
-  }
   const groupedTraces: Record<string, number[]> = {};
   let nonCartesianTraceCount = 0;
 
@@ -488,7 +481,9 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;
         nonCartesianTraceCount++;
       } else {
-        traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;
+        traceKey = ['scatterpolar'].includes(trace.type!)
+          ? (trace as { subplot?: string }).subplot ?? 'polar'
+          : (trace as PlotData).xaxis ?? DEFAULT_XAXIS;
       }
       if (!groupedTraces[traceKey]) {
         groupedTraces[traceKey] = [];