[charts] Introduce the radar chart #16406

alexfauquette · 2025-01-30T16:25:36Z

This PR is a rough first version of the Radar chart #7925. Lots of features are missing.

The idea is to validate the data structure, and it's mapping to a rotation/radius scale system. If ok, we can merge this one and add features in distinct PR such that we keep them small enough to be relevant (I don't expect someone to read 200 files with 10 different features and spot any bug or room for improvement)

Main idea

The polar plugin introduce the support of rotatio/radius axes that work similarly to the x/y axes

The radar don't expose directly those axies. It uses an intermediate metrics to make sure the radar has only one rotation axis with scale point, and one radius axis per metric.

Then we have one component per item rendered (grid, area, and marks)

Features

Preview: https://deploy-preview-16406--material-ui-x.netlify.app/x/react-charts/radar/

mui-bot · 2025-01-30T16:29:57Z

Deploy preview: https://deploy-preview-16406--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/radar/radar.md

Generated by 🚫 dangerJS against a6d0342

github-actions · 2025-01-31T11:09:03Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

codspeed-hq · 2025-01-31T15:21:45Z

CodSpeed Performance Report

Merging #16406 will not alter performance

_{Comparing alexfauquette:radar-chart (a6d0342) with master (e71e831)}

Summary

✅ 6 untouched benchmarks

github-actions · 2025-02-04T08:14:29Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior · 2025-02-05T10:49:08Z

Is it just me or are the circles not being affected by the area above them?

For example, I think it's clear the blue area is below the yellow area because its color is affected by the yellow area's. However, this doesn't seem to be the case for the circles in blue, which seem unaffected.

docs/data/charts/radar/radar.md

packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.ts

bernardobelchior · 2025-02-05T11:08:55Z

...s/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.ts

+    params: UseChartPolarAxisParameters;
+    defaultizedParams: UseChartPolarAxisDefaultizedParameters;
+    state: UseChartPolarAxisState;
+    // instance: UseChartPolarAxisInstance;


Just double-checking: is this commented on purpose?

packages/x-charts/src/models/seriesType/config.ts

JCQuintas · 2025-02-05T12:54:25Z

Is it just me or are the circles not being affected by the area above them?

I assume this got carried over because of how we handle the Line/Area charts as well. Should we start rendering the series fully one on top of eachother and only then adding "click/markhandlers" without styling on top of the charts? 🤔

This would make the styles more consistent, but might create other issues 🫠

docs/data/charts/radar/radar.md

packages/x-charts/src/ChartContainer/useChartContainerProps.ts

JCQuintas · 2025-02-05T13:11:50Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.ts

+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartPolarAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one


I didn't understand this comment

It's a copy past from the data grid.

We skip the first useEffect, to be in sync with other part of the stor we needs to be sure this hook does not depend on other variable that could be modified by other pluggins running after it.

For charts I don't se a usecases, but for datagrid you might have weird case with the focus, scroll position, and other interaction features.

We can remove the comment if it's confusing.

JCQuintas · 2025-02-05T13:13:01Z

...s/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.test.tsx

+  testSkipIf(!isJSDOM)('should throw an error when axis have duplicate ids', () => {
+    const expectedError = [
+      'MUI X: The following axis ids are duplicated: qwerty.',
+      'Please make sure that each axis has a unique id.',
+    ].join('\n');
+
+    expect(() =>
+      render(
+        <BarChart
+          xAxis={[
+            { scaleType: 'band', id: 'qwerty', data: ['a', 'b', 'c'] },
+            { scaleType: 'band', id: 'qwerty', data: ['a', 'b', 'c'] },
+          ]}
+          series={[{ data: [1, 2, 3] }]}
+          height={100}
+          width={100}
+        />,
+      ),
+    ).toErrorDev(expectedError);
+  });
+
+  // can't catch render errors in the browser for unknown reason
+  // tried try-catch + error boundary + window onError preventDefault
+  testSkipIf(!isJSDOM)(
+    'should throw an error when axis have duplicate ids across different directions (x,y)',
+    () => {
+      const expectedError = [
+        'MUI X: The following axis ids are duplicated: qwerty.',
+        'Please make sure that each axis has a unique id.',
+      ].join('\n');
+
+      expect(() =>
+        render(
+          <BarChart
+            xAxis={[{ scaleType: 'band', id: 'qwerty', data: ['a', 'b', 'c'] }]}
+            yAxis={[{ id: 'qwerty' }]}
+            series={[{ data: [1, 2, 3] }]}
+            height={100}
+            width={100}
+          />,
+        ),
+      ).toErrorDev(expectedError);
+    },
+  );


I guess you missed the tests here 😆

JCQuintas · 2025-02-05T13:18:22Z

packages/x-charts/src/RadarChart/RadarDataProvider/RadarDataProvider.tsx

+export interface RadarDataProviderProps
+  extends Omit<
+    ChartContainerProps<'radar', RadarPluginSignatures>,
+    'series' | 'plugins' | 'rotationAxis' | 'radiusAxis' | 'dataset'
+  > {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeriesType]] objects.
+   */
+  series: MakeOptional<RadarSeriesType, 'type'>[];
+  /**
+   * The configuration of the radar scales.
+   */
+  radar: RadarConfig;
+}


I like the API, sounds reasonable. series handles the series, radar is the chart config 👍

bernardobelchior · 2025-02-05T13:36:44Z

Is it just me or are the circles not being affected by the area above them?

I assume this got carried over because of how we handle the Line/Area charts as well. Should we start rendering the series fully one on top of eachother and only then adding "click/markhandlers" without styling on top of the charts? 🤔

This would make the styles more consistent, but might create other issues 🫠

Hm, good points. I don't have any suggestions at the moment, but I'll let you know if I can think of something.

github-actions · 2025-02-07T08:44:34Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-02-11T14:01:31Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

distinguish polar from cartesian

d60a12a

alexfauquette added new feature New feature or request component: charts This is the name of the generic UI component, not the React module! labels Jan 30, 2025

alexfauquette added 6 commits January 31, 2025 12:02

create a polar plugin

21d0c35

basic hooks and type definitions

ea3a57b

Update data providers to create a RadarDataProvider

ebf6158

Add basic radar chart

5d5b532

docs

21fa10d

scripts

a95fddc

alexfauquette force-pushed the radar-chart branch from 37ed9fc to a95fddc Compare January 31, 2025 11:08

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 31, 2025

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 31, 2025

alexfauquette marked this pull request as ready for review January 31, 2025 11:11

alexfauquette added 2 commits January 31, 2025 14:03

Merge remote-tracking branch 'upstream/master' into radar-chart

0f09e9f

fix errors due to highlight modification

e1b7842

alexfauquette force-pushed the radar-chart branch from a589b3a to e1b7842 Compare January 31, 2025 13:43

fix

a254ea1

alexfauquette marked this pull request as draft January 31, 2025 15:28

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

alexfauquette added 2 commits February 4, 2025 09:52

Merge remote-tracking branch 'upstream/master' into radar-chart

98f500e

fix luggins signatures

e1b19f5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

alexfauquette added 2 commits February 4, 2025 11:14

fix

9f68947

fix

8cf53e3

alexfauquette marked this pull request as ready for review February 4, 2025 10:59

alexfauquette requested a review from JCQuintas February 4, 2025 11:00

bernardobelchior reviewed Feb 5, 2025

View reviewed changes

JCQuintas reviewed Feb 5, 2025

View reviewed changes

docs/data/charts/radar/radar.md Outdated Show resolved Hide resolved

JCQuintas reviewed Feb 5, 2025

View reviewed changes

packages/x-charts/src/ChartContainer/useChartContainerProps.ts Outdated Show resolved Hide resolved

JCQuintas reviewed Feb 5, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 7, 2025

alexfauquette added 3 commits February 11, 2025 10:19

Merge remote-tracking branch 'upstream/master' into radar-chart

81b4ede

PR feedback

d157d66

ts fixes

a6d0342

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Feb 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[charts] Introduce the radar chart #16406

[charts] Introduce the radar chart #16406

alexfauquette commented Jan 30, 2025 •

edited by oliviertassinari

Loading

mui-bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 31, 2025

codspeed-hq bot commented Jan 31, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025

bernardobelchior commented Feb 5, 2025

bernardobelchior Feb 5, 2025

JCQuintas commented Feb 5, 2025

JCQuintas Feb 5, 2025

alexfauquette Feb 11, 2025

JCQuintas Feb 5, 2025

JCQuintas Feb 5, 2025

bernardobelchior commented Feb 5, 2025

github-actions bot commented Feb 7, 2025

github-actions bot commented Feb 11, 2025

		// The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartPolarAxis`
		// As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one

[charts] Introduce the radar chart #16406

Are you sure you want to change the base?

[charts] Introduce the radar chart #16406

Conversation

alexfauquette commented Jan 30, 2025 • edited by oliviertassinari Loading

Main idea

Features

mui-bot commented Jan 30, 2025 • edited Loading

github-actions bot commented Jan 31, 2025

codspeed-hq bot commented Jan 31, 2025 • edited Loading

CodSpeed Performance Report

Merging #16406 will not alter performance

Summary

github-actions bot commented Feb 4, 2025

bernardobelchior commented Feb 5, 2025

bernardobelchior Feb 5, 2025

Choose a reason for hiding this comment

JCQuintas commented Feb 5, 2025

JCQuintas Feb 5, 2025

Choose a reason for hiding this comment

alexfauquette Feb 11, 2025

Choose a reason for hiding this comment

JCQuintas Feb 5, 2025

Choose a reason for hiding this comment

JCQuintas Feb 5, 2025

Choose a reason for hiding this comment

bernardobelchior commented Feb 5, 2025

github-actions bot commented Feb 7, 2025

github-actions bot commented Feb 11, 2025

alexfauquette commented Jan 30, 2025 •

edited by oliviertassinari

Loading

mui-bot commented Jan 30, 2025 •

edited

Loading

codspeed-hq bot commented Jan 31, 2025 •

edited

Loading