[charts] Add `domainLimit` to axis config #15294

GuillaumeMeheut · 2024-11-06T09:02:23Z

@alexfauquette Not sure if thats all it take ? Should I add docs?
Is it useful to add it to axisX aswell or should only be axisY?
Also why here #13316 (comment) you wanted to add function since we already have min/max on the axis, supposed to replace it ?

Preview: https://deploy-preview-15294--material-ui-x.netlify.app/x/react-charts/axis/#relative-axis-sub-domain

mui-bot · 2024-11-06T09:06:11Z

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

Updated pages:

Generated by 🚫 dangerJS against d644ae0

codspeed-hq · 2024-11-06T09:08:51Z

CodSpeed Performance Report

Merging #15294 will not alter performance

_{Comparing GuillaumeMeheut:skip-nice (d644ae0) with master (f55e159)}

Summary

✅ 3 untouched benchmarks

alexfauquette · 2024-11-06T09:13:48Z

Also why here you wanted to add function since we already have min/max on the axis, supposed to replace it ?

It's to simplify user life. for example if you just want to start/end at a multiple of 10 you could do something like

([min, max]) => [ min - (min % 10), max + 10 - (max % 10)]

Effectively user could do the same with min/max but they will have to find by themself what is the min/max of their data. Since we already did the computation we can let them reuse the result with a function

It replace the 'dataMin', 'dataMax' in recharts domain.

alexfauquette · 2024-11-06T09:35:25Z

Is it useful to add it to axisX aswell or should only be axisY ?

I assume they both work the same way since the processing of axis config is the same for x and y. We don't talk about it in the docs because the spark line uses band/point scale which are not impacted by the nice()

The failing CI is because you need to run pnpm docs:api to update the content of API pages

What about adding a demo in sparline docs such that other user can know about this new feature https://github.com/mui/mui-x/blob/master/docs/data/charts/sparkline/sparkline.md

It could be a subsection of "Y-axis range".

To add a demo, create a .tsx file in the same folder as the markdown, and you can run pnpm docs:typescript:formatted to generate the .js version

packages/x-charts/src/models/axis.ts

GuillaumeMeheut · 2024-11-06T11:39:18Z

Effectively user could do the same with min/max but they will have to find by themself what is the min/max of their data. Since we already did the computation we can let them reuse the result with a function

Make sense now, thanks for explanation also I prioritize the domain limit function over min-max hope its okay

Also added example in docs

alexfauquette

It's good for me @JCQuintas Do you want to have a second look, especially to the docs aspect

docs/data/charts/sparkline/CustomDomainYAxis.js

packages/x-charts/src/internals/computeAxisValue.ts

packages/x-charts/src/models/axis.ts

docs/data/charts/sparkline/sparkline.md

alexfauquette · 2024-11-07T08:59:44Z

@JCQuintas @GuillaumeMeheut I moved the detail explanation into the axis page, and kept a smaller one in the sparkling.

After some test, I think having a select to chose between the different option make it simpler to see the differences between the values of domainLimit instead of showing all of them at the same time.

github-actions · 2024-11-07T15:07:42Z

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

JCQuintas · 2024-11-07T15:15:34Z

@alexfauquette should we cherry pick this into v7?

alexfauquette · 2024-11-07T15:26:14Z

We could, but If we have conflict, it might not worths resolving them

github-actions · 2024-11-07T16:36:10Z

Cherry-pick PRs will be created targeting branches: v7.x

Co-authored-by: alex <[email protected]> Co-authored-by: Jose Quintas <[email protected]>

oliviertassinari · 2024-11-07T20:00:09Z

docs/data/charts/sparkline/sparkline.md

@@ -58,3 +58,11 @@ The following demo shows two sparklines, one with small and another with large v
 The first row has the default y-axis values, while on the second row a fixed range from `0` to `100` has been set.

 {{"demo": "CustomYAxis.js"}}
+
+You can adjust the y-axis range of a sparkline relatively to its data by using the `domainLimit` option in the `yAxis` configuration.
+See the [axis docs page](http://localhost:3001/x/react-charts/axis/#relative-axis-sub-domain) form more information.


Broken link and typo

Suggested change

See the [axis docs page](http://localhost:3001/x/react-charts/axis/#relative-axis-sub-domain) form more information.

See the [axis docs page](/x/react-charts/axis/#relative-axis-subdomain) for more information.

oliviertassinari · 2024-11-07T20:00:34Z

packages/x-charts/src/models/axis.ts

+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extras space is added.
+   * - function: eceives the calculated extremums as parameters, and should return the axis domain.


Suggested change

* - function: eceives the calculated extremums as parameters, and should return the axis domain.

* - function: Receives the calculated extremums as parameters, and should return the axis domain.

oliviertassinari · 2024-11-07T20:01:19Z

docs/data/charts/sparkline/CustomDomainYAxis.tsx

+        </TextField>
+        <Typography>y-axis range: {yRange[domainLimitKey]}</Typography>
+      </Stack>
+


Suggested change

oliviertassinari · 2024-11-07T20:02:59Z

docs/data/charts/sparkline/CustomDomainYAxis.tsx

+import { Theme } from '@mui/material/styles';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';


To avoid the blank line in the JavaScript generated demo?

Suggested change

import { Theme } from '@mui/material/styles';

import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

import { Theme } from '@mui/material/styles';

oliviertassinari · 2024-11-07T20:03:30Z

docs/data/charts/axis/axis.md

@@ -86,6 +86,20 @@ xAxis={[

 {{"demo": "MinMaxExample.js"}}

+### Relative axis sub domain


?

Suggested change

### Relative axis sub domain

### Relative axis subdomain

oliviertassinari · 2024-11-07T20:04:30Z

docs/data/charts/axis/CustomDomainYAxis.tsx

+        <MenuItem value="strict">strict</MenuItem>
+        <MenuItem value="function">function</MenuItem>
+      </TextField>
+


Suggested change

oliviertassinari · 2024-11-07T20:05:21Z

docs/data/charts/sparkline/CustomDomainYAxis.tsx

+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  valueFormatter: (v: number | null) => `${v}%`,


Suggested change

valueFormatter: (v: number | null) => `${v}%`,

valueFormatter: (value: number | null) => `${value}%`,

oliviertassinari · 2024-11-07T20:05:40Z

docs/data/charts/axis/CustomDomainYAxis.tsx

+import MenuItem from '@mui/material/MenuItem';
+
+const settings = {
+  valueFormatter: (v: number | null) => `${v}%`,


Suggested change

valueFormatter: (v: number | null) => `${v}%`,

valueFormatter: (value: number | null) => `${value}%`,

GuillaumeMeheut added 2 commits November 6, 2024 09:29

skip nice if domainLimit is strict

5bfa923

run proptypes and remove func

2cc0a91

michelengelen requested review from alexfauquette and JCQuintas November 6, 2024 09:02

michelengelen added enhancement This is not a bug, nor a new feature component: charts This is the name of the generic UI component, not the React module! labels Nov 6, 2024

JCQuintas reviewed Nov 6, 2024

View reviewed changes

packages/x-charts/src/models/axis.ts Outdated Show resolved Hide resolved

GuillaumeMeheut added 2 commits November 6, 2024 11:48

add function domain

1f9d34e

add doc

64d07e3

review

6ac5194

alexfauquette approved these changes Nov 6, 2024

View reviewed changes

docs/data/charts/sparkline/CustomDomainYAxis.js Outdated Show resolved Hide resolved

docs/data/charts/sparkline/CustomDomainYAxis.js Outdated Show resolved Hide resolved

packages/x-charts/src/internals/computeAxisValue.ts Show resolved Hide resolved

alexfauquette changed the title ~~[charts] Add domainLimit to skip nice~~ [charts] Add domainLimit to axis config. Nov 6, 2024

JCQuintas reviewed Nov 6, 2024

View reviewed changes

packages/x-charts/src/models/axis.ts Outdated Show resolved Hide resolved

JCQuintas reviewed Nov 6, 2024

View reviewed changes

packages/x-charts/src/models/axis.ts Outdated Show resolved Hide resolved

JCQuintas reviewed Nov 6, 2024

View reviewed changes

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

update docs

8c906db

JCQuintas approved these changes Nov 7, 2024

View reviewed changes

docs:api

43a057e

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

Merge commit '6fc63cccab168a158a8bf4f50fd140866c330389' into skip-nice

0b0b96f

JCQuintas enabled auto-merge (squash) November 7, 2024 15:11

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

Merge remote-tracking branch 'upstream/master' into skip-nice

1f4dbce

alexfauquette added the needs cherry-pick The PR should be cherry-picked to master after merge label Nov 7, 2024

JCQuintas added 2 commits November 7, 2024 16:45

abb3f88

d644ae0

JCQuintas added the v7.x label Nov 7, 2024

JCQuintas merged commit a62b88f into mui:master Nov 7, 2024
19 checks passed

github-actions bot pushed a commit that referenced this pull request Nov 7, 2024

[charts] Add domainLimit to axis config. (#15294)

a41a38e

Co-authored-by: alex <[email protected]> Co-authored-by: Jose Quintas <[email protected]>

github-actions bot mentioned this pull request Nov 7, 2024

[charts] Add domainLimit to axis config. (@GuillaumeMeheut) #15325

Merged

oliviertassinari changed the title ~~[charts] Add domainLimit to axis config.~~ [charts] Add domainLimit to axis config Nov 7, 2024

oliviertassinari reviewed Nov 7, 2024

View reviewed changes

oliviertassinari mentioned this pull request Nov 8, 2024

[charts] Fix applyDomain docs #15332

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[charts] Add `domainLimit` to axis config #15294

[charts] Add `domainLimit` to axis config #15294

GuillaumeMeheut commented Nov 6, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Nov 6, 2024 •

edited

Loading

codspeed-hq bot commented Nov 6, 2024 •

edited

Loading

alexfauquette commented Nov 6, 2024

alexfauquette commented Nov 6, 2024

GuillaumeMeheut commented Nov 6, 2024

alexfauquette left a comment

alexfauquette commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024

JCQuintas commented Nov 7, 2024

alexfauquette commented Nov 7, 2024

github-actions bot commented Nov 7, 2024

oliviertassinari Nov 7, 2024 •

edited

Loading

oliviertassinari Nov 7, 2024 •

edited

Loading

oliviertassinari Nov 7, 2024

oliviertassinari Nov 7, 2024

oliviertassinari Nov 7, 2024

oliviertassinari Nov 7, 2024

oliviertassinari Nov 7, 2024

oliviertassinari Nov 7, 2024

	See the [axis docs page](http://localhost:3001/x/react-charts/axis/#relative-axis-sub-domain) form more information.
	See the [axis docs page](/x/react-charts/axis/#relative-axis-subdomain) for more information.

	* - function: eceives the calculated extremums as parameters, and should return the axis domain.
	* - function: Receives the calculated extremums as parameters, and should return the axis domain.

		import { Theme } from '@mui/material/styles';
		import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

		@@ -86,6 +86,20 @@ xAxis={[

		{{"demo": "MinMaxExample.js"}}

		### Relative axis sub domain

	valueFormatter: (v: number \| null) => `${v}%`,
	valueFormatter: (value: number \| null) => `${value}%`,

[charts] Add domainLimit to axis config #15294

[charts] Add domainLimit to axis config #15294

Conversation

GuillaumeMeheut commented Nov 6, 2024 • edited by oliviertassinari Loading

mui-bot commented Nov 6, 2024 • edited Loading

codspeed-hq bot commented Nov 6, 2024 • edited Loading

CodSpeed Performance Report

Merging #15294 will not alter performance

Summary

alexfauquette commented Nov 6, 2024

alexfauquette commented Nov 6, 2024

GuillaumeMeheut commented Nov 6, 2024

alexfauquette left a comment

Choose a reason for hiding this comment

alexfauquette commented Nov 7, 2024 • edited Loading

github-actions bot commented Nov 7, 2024

JCQuintas commented Nov 7, 2024

alexfauquette commented Nov 7, 2024

github-actions bot commented Nov 7, 2024

oliviertassinari Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024

Choose a reason for hiding this comment

oliviertassinari Nov 7, 2024

Choose a reason for hiding this comment

[charts] Add `domainLimit` to axis config #15294

[charts] Add `domainLimit` to axis config #15294

GuillaumeMeheut commented Nov 6, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Nov 6, 2024 •

edited

Loading

codspeed-hq bot commented Nov 6, 2024 •

edited

Loading

alexfauquette commented Nov 7, 2024 •

edited

Loading

oliviertassinari Nov 7, 2024 •

edited

Loading

oliviertassinari Nov 7, 2024 •

edited

Loading