[charts] Add color scale #12490

alexfauquette · 2024-03-19T09:48:24Z

The current strategy is to let axes get a colorMap attribute that define the mapping from values to color.

This configuration generate a colorScale: (value) => string thanks to some d3 functions. And some <lineargradient/> used to colorize the line/area charts.

Here are the docs demos to play with this new feature:

The following plan is to ad a notion of zAxis that would allow for example the scatter chart to use color as an additional indication. This z axis might also be used the same way by heat map

Changelog

Breaking change

A tinny breaking change which is a typo fix.

- ContinuouseScaleName
+ ContinuousScaleName

Charts now support the notion of color scale.
To do so, add a colorMap configuration to an axis, and the chart will use it to select colors.
Each impacted chart (bar charts, line charts, scatter charts) has a dedicated section explaining how this color map is impacting it.

scatter chart with gradient along y-axis

github-actions · 2024-03-19T10:05:40Z

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

mui-bot · 2024-03-22T17:21:43Z

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

Updated pages:

Generated by 🚫 dangerJS against a5f2d89

docs/data/charts/styling/styling.md

packages/x-charts/src/BarChart/BarPlot.tsx

docs/data/charts/lines/ColorScale.tsx

docs/data/charts/bars/ColorScale.tsx

docs/data/charts/scatter/ColorScale.tsx

docs/data/charts/styling/styling.md

docs/data/charts/bars/bars.md

flaviendelangle · 2024-04-10T07:36:05Z

docs/data/charts/styling/styling.md

+
+Learn more on how to use this feature with each chart component on their dedicated docs section:
+
+- [bar chart](/x/react-charts/bars/#color-scale)


You sometime use plural, sometime singular for for these (bar chart vs bar charts, same for line and scatter).
It would be nice to unify

Intuitively, I tend to use:

plural for charts in general (The bar charts have options for ...)

singular if describing the impact of a feature because I consider the chart the dev is working on "when clicking on the chart, ..."

Bar charts provides two click handlers: - `onItemClick` for click on a specific bar. - `onAxisClick` for a click anywhere in the chart

But could be simplified with only plural/singular @samuelsycamore do you have some insight on this point?

If there is an internal coherence I'm good, but yeah @samuelsycamore opinion will have more weight 👌

In general I would say it's ok to vary singular and plural in this usage and there aren't really hard and fast rules. That said, I would probably lean more toward singular and capitalize them like proper nouns—the most important distinction here is between the Bar Chart component and the concept of bar charts in general, and the proper noun helps to make that more clear.

In the example you gave above @alexfauquette I would go with:

Bar Charts provide two click handlers, or

The Bar Chart (component) provides two click handlers

docs/data/charts/styling/styling.md

alexfauquette · 2024-04-10T10:50:31Z

I moved the demos to NoSnap because the snapshot faces an issue when using the <HighlighCode />

docs/data/charts/styling/styling.md

samuelsycamore · 2024-04-10T21:49:17Z

docs/data/charts/styling/styling.md

+
+Learn more on how to use this feature with each chart component on their dedicated docs section:
+
+- [bar chart](/x/react-charts/bars/#color-scale)


In general I would say it's ok to vary singular and plural in this usage and there aren't really hard and fast rules. That said, I would probably lean more toward singular and capitalize them like proper nouns—the most important distinction here is between the Bar Chart component and the concept of bar charts in general, and the proper noun helps to make that more clear.

In the example you gave above @alexfauquette I would go with:

Bar Charts provide two click handlers, or

The Bar Chart (component) provides two click handlers

docs/data/charts/styling/styling.md

docs/data/charts/scatter/scatter.md

samuelsycamore · 2024-04-10T21:59:09Z

docs/data/charts/scatter/scatter.md

+
+Like other charts, you can modify the [series color](/x/react-charts/styling/#colors) by using series color, or some color palette.
+
+You can also modify color by using axes `colorMap` which maps values to colors.


Suggested change

You can also modify color by using axes `colorMap` which maps values to colors.

You can also modify the color of any given axis using `colorMap` which maps values to colors.

This formulation give me the feeling that the axes color will be impacted. But iit's more subtle. You provide a color instruction to the axis and it impact the series plot.

samuelsycamore · 2024-04-10T21:59:22Z

docs/data/charts/scatter/scatter.md

+Like other charts, you can modify the [series color](/x/react-charts/styling/#colors) by using series color, or some color palette.
+
+You can also modify color by using axes `colorMap` which maps values to colors.
+The scatter charts use by priority:


what does "by priority" mean here?

If the y-axis color is defined it's applied.
If the y-axis color is not defined, we look at the x-axis color, and if it's defined we apply it.
If the y-axis color is not defined, we apply the series color.

docs/data/charts/scatter/scatter.md

docs/data/charts/styling/styling.md

flaviendelangle

Nothing more to add, it's a massive improvement to the customizability of the charts 🥳

LukasTy

Great customization improvement! 👏
The API looks nice and intuitive. 👍
Sorry for the late review, leaving a few total nitpicks. 😉

LukasTy · 2024-04-15T10:34:54Z

scripts/x-charts.exports.json

@@ -107,7 +107,7 @@
  { "name": "cheerfulFiestaPaletteDark", "kind": "Variable" },
  { "name": "cheerfulFiestaPaletteLight", "kind": "Variable" },
  { "name": "ComputedPieRadius", "kind": "Interface" },
-  { "name": "ContinuouseScaleName", "kind": "TypeAlias" },
+  { "name": "ContinuousScaleName", "kind": "TypeAlias" },


Nitpick: This is technically a BC, have you considered mentioning it in the release changelog? 🤔

I could also do something like export ContinuousScaleName as ContinuouseScaleName to avoid the breaking change, but it looks more problematic than the breaking change it tries to fix

Oh yeah, to it also looks like a small BC that's not worth creating extra redundant technical debt for. 🙈

LukasTy · 2024-04-15T10:38:01Z

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

+   */
+  max?: Value;
+  /**
+   * The colors to render. Can either be and array with the extrem colors, or an interpolation function.


-The colors to render. Can either be and array with the extrem colors, or an interpolation function. +The colors to render. It can be an array with the extremum colors, or an interpolation function.

I added those feedback in the followup PR

LukasTy · 2024-04-15T10:39:00Z

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

+  thresholds: Value[];
+  /**
+   * The colors used for each band defined by `thresholds`.
+   * Should contain N+1 colors with N the number of thresholds.


-Should contain N+1 colors with N the number of thresholds. +Should contain N+1 colors, where N is the number of thresholds.

LukasTy · 2024-04-15T11:14:06Z

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

+   */
+  values?: Value[];
+  /**
+   * The color palette.


Nitpick: Is this comment accurate? 🤔
WDYT, would mentioning the relation between values and colors make sense here? 🤔

alexfauquette added the component: charts This is the name of the generic UI component, not the React module! label Mar 19, 2024

alexfauquette changed the title ~~[charts] Add color scale~~ [charts][WIP] Add color scale Mar 19, 2024

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

alexfauquette force-pushed the add-coloreAxis branch from 7bf37e8 to f734ecb Compare March 22, 2024 14:46

alexfauquette changed the base branch from next to master March 22, 2024 17:16

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

alexfauquette changed the title ~~[charts][WIP] Add color scale~~ [charts] Add color scale Mar 28, 2024

flaviendelangle reviewed Mar 28, 2024

View reviewed changes

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

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

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

docs/data/charts/styling/styling.md Show resolved Hide resolved

This was referenced Mar 28, 2024

[charts] Fix tickInterval usage for y-axis #12592

Merged

[charts] Allows to customize elements color based on its value #11277

Closed

alexfauquette force-pushed the add-coloreAxis branch from 91e0d49 to 29a9dcd Compare April 5, 2024 14:51

alexfauquette added 9 commits April 5, 2024 16:59

create the pipeline to generate colorMap from axis config

19ad55a

Support bar chart

4adb42c

adapt pie chart

bc14e2b

support scatter

bceea02

Generate gradients for the line chart

89ccb18

support line chart

931fe0e

Addapt color in the tooltip

9bcf879

typo fixes

a326876

scripts

f5d6720

alexfauquette force-pushed the add-coloreAxis branch from 29a9dcd to f5d6720 Compare April 5, 2024 15:07

alexfauquette marked this pull request as ready for review April 5, 2024 15:08

alexfauquette requested review from LukasTy, JCQuintas and flaviendelangle April 5, 2024 15:08

JCQuintas reviewed Apr 8, 2024

View reviewed changes

alexfauquette added 2 commits April 8, 2024 15:15

Fix typos in demos preview

975df32

remove comments

e5913da

flaviendelangle reviewed Apr 10, 2024

View reviewed changes

Remove Snap due to code highlight issue

8f77391

Flavien's feedback

0cef86d

alexfauquette mentioned this pull request Apr 10, 2024

[charts] Add z-axis to colorize scatter charts #12738

Merged

4 tasks

samuelsycamore reviewed Apr 10, 2024

View reviewed changes

Sam feedback

b68298b

flaviendelangle approved these changes Apr 12, 2024

View reviewed changes

prettier

a5f2d89

alexfauquette merged commit 8efee23 into mui:master Apr 15, 2024
17 checks passed

LukasTy reviewed Apr 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[charts] Add color scale #12490

[charts] Add color scale #12490

alexfauquette commented Mar 19, 2024 •

edited

github-actions bot commented Mar 19, 2024

mui-bot commented Mar 22, 2024 •

edited

flaviendelangle Apr 10, 2024

alexfauquette Apr 10, 2024

flaviendelangle Apr 10, 2024

samuelsycamore Apr 10, 2024

alexfauquette commented Apr 10, 2024

samuelsycamore Apr 10, 2024

samuelsycamore Apr 10, 2024

alexfauquette Apr 12, 2024

samuelsycamore Apr 10, 2024

alexfauquette Apr 12, 2024

flaviendelangle left a comment

LukasTy left a comment

LukasTy Apr 15, 2024

alexfauquette Apr 15, 2024

LukasTy Apr 15, 2024

LukasTy Apr 15, 2024

alexfauquette Apr 15, 2024

LukasTy Apr 15, 2024

LukasTy Apr 15, 2024

LukasTy Apr 15, 2024


		Learn more on how to use this feature with each chart component on their dedicated docs section:

		- [bar chart](/x/react-charts/bars/#color-scale)


		Like other charts, you can modify the [series color](/x/react-charts/styling/#colors) by using series color, or some color palette.

		You can also modify color by using axes `colorMap` which maps values to colors.

	You can also modify color by using axes `colorMap` which maps values to colors.
	You can also modify the color of any given axis using `colorMap` which maps values to colors.

[charts] Add color scale #12490

[charts] Add color scale #12490

Conversation

alexfauquette commented Mar 19, 2024 • edited

Changelog

Breaking change

github-actions bot commented Mar 19, 2024

mui-bot commented Mar 22, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented Apr 10, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flaviendelangle left a comment

Choose a reason for hiding this comment

LukasTy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented Mar 19, 2024 •

edited

mui-bot commented Mar 22, 2024 •

edited