Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[charts] Add color scale #12490

Merged
merged 15 commits into from
Apr 15, 2024
Merged

[charts] Add color scale #12490

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
19ad55a
create the pipeline to generate colorMap from axis config
alexfauquette Apr 5, 2024
4adb42c
Support bar chart
alexfauquette Apr 5, 2024
bc14e2b
adapt pie chart
alexfauquette Apr 5, 2024
bceea02
support scatter
alexfauquette Apr 5, 2024
89ccb18
Generate gradients for the line chart
alexfauquette Apr 5, 2024
931fe0e
support line chart
alexfauquette Apr 5, 2024
9bcf879
Addapt color in the tooltip
alexfauquette Apr 5, 2024
a326876
typo fixes
alexfauquette Apr 5, 2024
f5d6720
scripts
alexfauquette Apr 5, 2024
975df32
Fix typos in demos preview
alexfauquette Apr 8, 2024
e5913da
remove comments
alexfauquette Apr 8, 2024
8f77391
Remove Snap due to code highlight issue
alexfauquette Apr 10, 2024
0cef86d
Flavien's feedback
alexfauquette Apr 10, 2024
b68298b
Sam feedback
alexfauquette Apr 12, 2024
a5f2d89
prettier
alexfauquette Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
174 changes: 174 additions & 0 deletions docs/data/charts/bars/ColorScale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
// @ts-ignore
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';

const series = [{ data: [-2, -9, 12, 11, 6, -4] }];

export default function ColorScale() {
const [colorX, setColorX] = React.useState('piecewise');
const [colorY, setColorY] = React.useState('None');

return (
<Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
<Stack direction="row" spacing={1}>
<TextField
select
sx={{ minWidth: 150 }}
label="x-axis colorMap"
value={colorX}
onChange={(event) => setColorX(event.target.value)}
>
<MenuItem value="None">None</MenuItem>
<MenuItem value="piecewise">piecewise</MenuItem>
<MenuItem value="continuous">continuous</MenuItem>
<MenuItem value="ordinal">ordinal</MenuItem>
</TextField>
<TextField
select
sx={{ minWidth: 150 }}
label="y-axis colorMap"
value={colorY}
onChange={(event) => setColorY(event.target.value)}
>
<MenuItem value="None">None</MenuItem>
<MenuItem value="piecewise">piecewise</MenuItem>
<MenuItem value="continuous">continuous</MenuItem>
</TextField>
</Stack>

<BarChart
height={300}
grid={{ horizontal: true }}
series={series}
margin={{
top: 10,
bottom: 20,
}}
yAxis={[
{
colorMap:
(colorY === 'continuous' && {
type: 'continuous',
min: -10,
max: 10,
color: ['red', 'green'],
}) ||
(colorY === 'piecewise' && {
type: 'piecewise',
thresholds: [0],
colors: ['red', 'green'],
}) ||
undefined,
},
]}
xAxis={[
{
scaleType: 'band',
data: [
new Date(2019, 1, 1),
new Date(2020, 1, 1),
new Date(2021, 1, 1),
new Date(2022, 1, 1),
new Date(2023, 1, 1),
new Date(2024, 1, 1),
],
valueFormatter: (value) => value.getFullYear().toString(),
colorMap:
(colorX === 'ordinal' && {
type: 'ordinal',
colors: [
'#ccebc5',
'#a8ddb5',
'#7bccc4',
'#4eb3d3',
'#2b8cbe',
'#08589e',
],
}) ||
(colorX === 'continuous' && {
type: 'continuous',
min: new Date(2019, 1, 1),
max: new Date(2024, 1, 1),
color: ['green', 'orange'],
}) ||
(colorX === 'piecewise' && {
type: 'piecewise',
thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
colors: ['blue', 'red', 'blue'],
}) ||
undefined,
},
]}
/>
<HighlightedCode
code={[
`<ScatterChart`,
' /* ... */',
// ColorX
...(colorX === 'None' ? [' yAxis={[{}]}'] : []),
...(colorX === 'ordinal'
? [
' yAxis={[',
` {`,
` type: 'ordinal',`,
` colors: ['#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e']`,
` }`,
' ]}',
]
: []),
...(colorX === 'continuous'
? [
' yAxis={[',
` {`,
` type: 'continuous',`,
` min: new Date(2019, 1, 1),`,
` max: new Date(2024, 1, 1),`,
` color: ['green', 'orange']`,
` }`,
' ]}',
]
: []),
...(colorX === 'piecewise'
? [
' yAxis={[{',
` type: 'piecewise',`,
` thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],`,
` colors: ['blue', 'red', 'blue'],`,
' }]}',
]
: []),
// ColorY
...(colorY === 'None' ? [' yAxis={[{}]}'] : []),
...(colorY === 'continuous'
? [
' yAxis={[',
` {`,
` type: 'continuous',`,
` min: -10,`,
` max: 10,`,
` color: ['red', 'green'],`,
` }`,
' ]}',
]
: []),
...(colorY === 'piecewise'
? [
' yAxis={[{',
` type: 'piecewise',`,
` thresholds: [0],`,
` colors: ['red', 'green'],`,
' }]}',
]
: []),
`/>`,
].join('\n')}
language="jsx"
copyButtonHidden
/>
</Stack>
);
}
187 changes: 187 additions & 0 deletions docs/data/charts/bars/ColorScale.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
// @ts-ignore
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';

const series = [{ data: [-2, -9, 12, 11, 6, -4] }];

export default function ColorScale() {
const [colorX, setColorX] = React.useState<
'None' | 'piecewise' | 'continuous' | 'ordinal'
>('piecewise');
const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>(
'None',
);

return (
<Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
<Stack direction="row" spacing={1}>
<TextField
select
sx={{ minWidth: 150 }}
label="x-axis colorMap"
value={colorX}
onChange={(event) =>
setColorX(
event.target.value as 'None' | 'piecewise' | 'continuous' | 'ordinal',
)
}
>
<MenuItem value="None">None</MenuItem>
<MenuItem value="piecewise">piecewise</MenuItem>
<MenuItem value="continuous">continuous</MenuItem>
<MenuItem value="ordinal">ordinal</MenuItem>
</TextField>
<TextField
select
sx={{ minWidth: 150 }}
label="y-axis colorMap"
value={colorY}
onChange={(event) =>
setColorY(event.target.value as 'None' | 'piecewise' | 'continuous')
}
>
<MenuItem value="None">None</MenuItem>
<MenuItem value="piecewise">piecewise</MenuItem>
<MenuItem value="continuous">continuous</MenuItem>
</TextField>
</Stack>

<BarChart
height={300}
grid={{ horizontal: true }}
series={series}
margin={{
top: 10,
bottom: 20,
}}
yAxis={[
{
colorMap:
(colorY === 'continuous' && {
type: 'continuous',
min: -10,
max: 10,
color: ['red', 'green'],
}) ||
(colorY === 'piecewise' && {
type: 'piecewise',
thresholds: [0],
colors: ['red', 'green'],
}) ||
undefined,
},
]}
xAxis={[
{
scaleType: 'band',
data: [
new Date(2019, 1, 1),
new Date(2020, 1, 1),
new Date(2021, 1, 1),
new Date(2022, 1, 1),
new Date(2023, 1, 1),
new Date(2024, 1, 1),
],
valueFormatter: (value) => value.getFullYear().toString(),
colorMap:
(colorX === 'ordinal' && {
type: 'ordinal',
colors: [
'#ccebc5',
'#a8ddb5',
'#7bccc4',
'#4eb3d3',
'#2b8cbe',
'#08589e',
],
}) ||
(colorX === 'continuous' && {
type: 'continuous',
min: new Date(2019, 1, 1),
max: new Date(2024, 1, 1),
color: ['green', 'orange'],
}) ||
(colorX === 'piecewise' && {
type: 'piecewise',
thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
colors: ['blue', 'red', 'blue'],
}) ||
undefined,
},
]}
/>
<HighlightedCode
code={[
`<ScatterChart`,
' /* ... */',
// ColorX
...(colorX === 'None' ? [' yAxis={[{}]}'] : []),
...(colorX === 'ordinal'
? [
' yAxis={[',
` {`,
` type: 'ordinal',`,
` colors: ['#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e']`,
` }`,
' ]}',
]
: []),
...(colorX === 'continuous'
? [
' yAxis={[',
` {`,
` type: 'continuous',`,
` min: new Date(2019, 1, 1),`,
` max: new Date(2024, 1, 1),`,
` color: ['green', 'orange']`,
` }`,
' ]}',
]
: []),
...(colorX === 'piecewise'
? [
' yAxis={[{',
` type: 'piecewise',`,
` thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],`,
` colors: ['blue', 'red', 'blue'],`,
' }]}',
]
: []),
alexfauquette marked this conversation as resolved.
Show resolved Hide resolved

// ColorY
...(colorY === 'None' ? [' yAxis={[{}]}'] : []),
...(colorY === 'continuous'
? [
' yAxis={[',
` {`,

` type: 'continuous',`,
` min: -10,`,
` max: 10,`,
` color: ['red', 'green'],`,
` }`,
' ]}',
]
: []),
...(colorY === 'piecewise'
? [
' yAxis={[{',
` type: 'piecewise',`,
` thresholds: [0],`,
` colors: ['red', 'green'],`,

' }]}',
]
: []),
`/>`,
].join('\n')}
language="jsx"
copyButtonHidden
/>
</Stack>
);
}
15 changes: 15 additions & 0 deletions docs/data/charts/bars/bars.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,21 @@ See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information

{{"demo": "GridDemo.js"}}

### Color scale

Like other charts, you can modify the [series color](/x/react-charts/styling/#colors) by using series color, or some color palette.
alexfauquette marked this conversation as resolved.
Show resolved Hide resolved

You can also modify color by using axes `colorMap` which maps values to colors.
Scatter charts use by priority:
alexfauquette marked this conversation as resolved.
Show resolved Hide resolved

1. The value axis color
2. The band axis color
3. The series color

You can find additional information about those `colorMap` properties in the [styling page](/x/react-charts/styling/#values-color).

{{"demo": "ColorScale.js"}}

## Click event

Bar charts provides two click handlers:
Expand Down