Skip to content

Commit

Permalink
[charts] Add color scale (#12490)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexfauquette
alexfauquette committed Apr 15, 2024
1 parent 978d544 commit 8efee23
Show file tree
Hide file tree
Showing 60 changed files with 2,251 additions and 72 deletions.
174 changes: 174 additions & 0 deletions docs/data/charts/bars/ColorScaleNoSnap.js
View file
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 ColorScaleNoSnap() {
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' ? [' xAxis={[{}]}'] : []),
...(colorX === 'ordinal'
? [
' xAxis={[',
` {`,
` type: 'ordinal',`,
` colors: ['#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e']`,
` }`,
' ]}',
]
: []),
...(colorX === 'continuous'
? [
' xAxis={[',
` {`,
` type: 'continuous',`,
` min: new Date(2019, 1, 1),`,
` max: new Date(2024, 1, 1),`,
` color: ['green', 'orange']`,
` }`,
' ]}',
]
: []),
...(colorX === 'piecewise'
? [
' xAxis={[{',
` 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/ColorScaleNoSnap.tsx
View file
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 ColorScaleNoSnap() {
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' ? [' xAxis={[{}]}'] : []),
...(colorX === 'ordinal'
? [
' xAxis={[',
` {`,
` type: 'ordinal',`,
` colors: ['#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e']`,
` }`,
' ]}',
]
: []),
...(colorX === 'continuous'
? [
' xAxis={[',
` {`,
` type: 'continuous',`,
` min: new Date(2019, 1, 1),`,
` max: new Date(2024, 1, 1),`,
` color: ['green', 'orange']`,
` }`,
' ]}',
]
: []),
...(colorX === 'piecewise'
? [
' xAxis={[{',
` 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>
);
}
15 changes: 15 additions & 0 deletions docs/data/charts/bars/bars.md
View file
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

As with other charts, you can modify the [series color](/x/react-charts/styling/#colors) either directly, or with the color palette.

You can also modify the color by using axes `colorMap` which maps values to colors.
The bar charts use by priority:

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

Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).

{{"demo": "ColorScaleNoSnap.js"}}

## Click event

Bar charts provides two click handlers:
Expand Down

0 comments on commit 8efee23

Please sign in to comment.