[charts] Introduce the radar chart

docs/data/charts/radar/BasicRadar.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+export default function BasicRadar() {
+  return (
+    <RadarChart
+      height={300}
+      series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
+      radar={{
+        max: 120,
+        metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
+      }}
+    />
+  );
+}

docs/data/charts/radar/BasicRadar.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+export default function BasicRadar() {
+  return (
+    <RadarChart
+      height={300}
+      series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
+      radar={{
+        max: 120,
+        metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
+      }}
+    />
+  );
+}

docs/data/charts/radar/BasicRadar.tsx.preview

@@ -0,0 +1,8 @@
+<RadarChart
+  height={300}
+  series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
+  radar={{
+    max: 120,
+    metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
+  }}
+/>

docs/data/charts/radar/CompositionExample.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  Unstable_RadarDataProvider as RadarDataProvider,
+  RadarGrid,
+  RadarSeriesArea,
+  RadarSeriesMarks,
+} from '@mui/x-charts/RadarChart';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+
+export default function CompositionExample() {
+  return (
+    <RadarDataProvider
+      height={300}
+      series={[
+        {
+          id: 'usa-id',
+          label: 'USA',
+          data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
+        },
+        {
+          id: 'australia-id',
+          label: 'Australia',
+          data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
+        },
+      ]}
+      radar={{
+        metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other industry', 'Cement'],
+      }}
+    >
+      <ChartsSurface>
+        <RadarGrid divisionNumber={3} />
+        <RadarSeriesArea />
+        <RadarSeriesMarks seriesId="usa-id" />
+      </ChartsSurface>
+    </RadarDataProvider>
+  );
+}

docs/data/charts/radar/CompositionExample.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  Unstable_RadarDataProvider as RadarDataProvider,
+  RadarGrid,
+  RadarSeriesArea,
+  RadarSeriesMarks,
+} from '@mui/x-charts/RadarChart';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+
+export default function CompositionExample() {
+  return (
+    <RadarDataProvider
+      height={300}
+      series={[
+        {
+          id: 'usa-id',
+          label: 'USA',
+          data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
+        },
+        {
+          id: 'australia-id',
+          label: 'Australia',
+          data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
+        },
+      ]}
+      radar={{
+        metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other industry', 'Cement'],
+      }}
+    >
+      <ChartsSurface>
+        <RadarGrid divisionNumber={3} />
+        <RadarSeriesArea />
+        <RadarSeriesMarks seriesId="usa-id" />
+      </ChartsSurface>
+    </RadarDataProvider>
+  );
+}

docs/data/charts/radar/DemoRadarNoSnap.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+export default function DemoRadarNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Alert"
+      data={[
+        {
+          propName: 'startAngle',
+          knob: 'number',
+          defaultValue: 0,
+          min: -180,
+          max: 180,
+        },
+
+        {
+          propName: 'divisionNumber',
+          knob: 'number',
+          defaultValue: 5,
+          min: 0,
+          max: 20,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Box sx={{ width: '100%', maxWidth: 400 }}>
+          <RadarChart
+            height={250}
+            margin={{ top: 20 }}
+            series={[
+              {
+                // label: 'Lisa',
+                data: [120, 98, 86, 99, 85, 65],
+              },
+            ]}
+            divisionNumber={props.divisionNumber}
+            radar={{
+              max: 120,
+              startAngle: props.startAngle,
+              metrics: [
+                'Math',
+                'Chinese',
+                'English',
+                'Geography',
+                'Physics',
+                'History',
+              ],
+            }}
+          />
+        </Box>
+      )}
+      getCode={({ props }) =>
+        [
+          `import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';`,
+          '',
+          `<RadarChart`,
+          '  {/** ... */}',
+          `  divisionNumber={${props.divisionNumber}}`,
+          `  radar={{`,
+          `    startAngle: ${props.startAngle},`,
+          `    metrics: [...],`,
+          '  }}',
+          '/>',
+        ].join('\n')
+      }
+    />
+  );
+}

docs/data/charts/radar/MultiSeriesRadar.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+// Data from https://ourworldindata.org/emissions-by-fuel
+
+const highlightScope = { highlight: 'item', fade: 'global' };
+
+function valueFormatter(v) {
+  if (v === null) {
+    return 'NaN';
+  }
+  return `${v.toLocaleString()}t CO2eq/pers`;
+}
+
+export default function MultiSeriesRadar() {
+  return (
+    <RadarChart
+      height={300}
+      series={[
+        {
+          label: 'USA',
+          data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
+          highlightScope,
+          valueFormatter,
+        },
+        {
+          label: 'Australia',
+          data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
+          highlightScope,
+          valueFormatter,
+        },
+        {
+          label: 'United Kingdom',
+          data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
+          highlightScope,
+          valueFormatter,
+        },
+      ]}
+      radar={{
+        metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other industry', 'Cement'],
+      }}
+    />
+  );
+}

docs/data/charts/radar/MultiSeriesRadar.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+import { HighlightScope } from '@mui/x-charts/context';
+
+// Data from https://ourworldindata.org/emissions-by-fuel
+
+const highlightScope: HighlightScope = { highlight: 'item', fade: 'global' };
+
+function valueFormatter(v: number | null) {
+  if (v === null) {
+    return 'NaN';
+  }
+  return `${v.toLocaleString()}t CO2eq/pers`;
+}
+
+export default function MultiSeriesRadar() {
+  return (
+    <RadarChart
+      height={300}
+      series={[
+        {
+          label: 'USA',
+          data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
+          highlightScope,
+          valueFormatter,
+        },
+        {
+          label: 'Australia',
+          data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
+          highlightScope,
+          valueFormatter,
+        },
+        {
+          label: 'United Kingdom',
+          data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
+          highlightScope,
+          valueFormatter,
+        },
+      ]}
+      radar={{
+        metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other industry', 'Cement'],
+      }}
+    />
+  );
+}

docs/data/charts/radar/RadarAxis.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+export default function RadarAxis() {
+  return (
+    <RadarChart
+      height={300}
+      series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
+      radar={{
+        metrics: [
+          { name: 'Math', max: 120 },
+          { name: 'Chinese', max: 120 },
+          { name: 'English', max: 120 },
+          { name: 'Geography', max: 120 },
+          { name: 'Physics', max: 120 },
+          { name: 'History', max: 120 },
+        ],
+      }}
+    />
+  );
+}

docs/data/charts/radar/RadarAxis.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+export default function RadarAxis() {
+  return (
+    <RadarChart
+      height={300}
+      series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
+      radar={{
+        metrics: [
+          { name: 'Math', max: 120 },
+          { name: 'Chinese', max: 120 },
+          { name: 'English', max: 120 },
+          { name: 'Geography', max: 120 },
+          { name: 'Physics', max: 120 },
+          { name: 'History', max: 120 },
+        ],
+      }}
+    />
+  );
+}

docs/data/charts/radar/RadarAxis.tsx.preview

@@ -0,0 +1,14 @@
+<RadarChart
+  height={300}
+  series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
+  radar={{
+    metrics: [
+      { name: 'Math', max: 120 },
+      { name: 'Chinese', max: 120 },
+      { name: 'English', max: 120 },
+      { name: 'Geography', max: 120 },
+      { name: 'Physics', max: 120 },
+      { name: 'History', max: 120 },
+    ],
+  }}
+/>