Skip to content

Commit

Permalink
Merge commit '7eccbd00caafa6911f8ae3f0a3318614cdc02eaf' into update-t…
Browse files Browse the repository at this point in the history
…ooltip-design
  • Loading branch information
JCQuintas committed Dec 9, 2024
2 parents de958c9 + 7eccbd0 commit 37efd97
Show file tree
Hide file tree
Showing 506 changed files with 11,821 additions and 6,106 deletions.
11 changes: 7 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ jobs:
test_browser:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
Expand Down Expand Up @@ -263,7 +263,7 @@ jobs:
test_e2e:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
Expand All @@ -274,7 +274,7 @@ jobs:
test_e2e_website:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
Expand All @@ -287,11 +287,14 @@ jobs:
test_regressions:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
browsers: true
- run:
name: Install ffmpeg
command: apt update && apt upgrade -y && apt install ffmpeg -y
- run:
name: Run visual regression tests
command: xvfb-run pnpm test:regressions
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
uses: github/codeql-action/init@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
with:
languages: typescript
# If you wish to specify custom queries, you can do so here or in a config file.
Expand All @@ -29,4 +29,4 @@ jobs:
# Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
uses: github/codeql-action/analyze@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
2 changes: 1 addition & 1 deletion .github/workflows/codspeed.yml
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ jobs:
- run: pnpm --filter @mui/x-charts build
- run: pnpm --filter @mui/x-charts-pro build
- name: Run benchmarks
uses: CodSpeedHQ/action@fa1dcde8d58f2ab0b407a6a24d6cc5a8c1444a8c
uses: CodSpeedHQ/action@513a19673a831f139e8717bf45ead67e47f00044
with:
run: pnpm --filter @mui-x-internal/performance-charts test:performance
token: ${{ secrets.CODSPEED_TOKEN }}
1 change: 1 addition & 0 deletions .github/workflows/create-cherry-pick-pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ name: Create cherry-pick PR
on:
pull_request_target:
branches:
- 'next'
- 'v*.x'
- 'master'
types: ['closed']
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/scorecards.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ jobs:

# Upload the results to GitHub's code scanning dashboard.
- name: Upload to code-scanning
uses: github/codeql-action/upload-sarif@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
uses: github/codeql-action/upload-sarif@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
with:
sarif_file: results.sarif
325 changes: 324 additions & 1 deletion CHANGELOG.md

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion docs/data/charts/axis/AxisWithComposition.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ export default function AxisWithComposition() {
>
<BarPlot />
<LinePlot />
<ChartsXAxis axisId="quarters" label="2021 quarters" labelFontSize={18} />
<ChartsXAxis
axisId="quarters"
label="2021 quarters"
labelStyle={{ fontSize: 18 }}
/>
<ChartsYAxis axisId="quantities" label="# units sold" />
<ChartsYAxis axisId="money" position="right" label="revenue" />
</ChartContainer>
Expand Down
6 changes: 5 additions & 1 deletion docs/data/charts/axis/AxisWithComposition.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ export default function AxisWithComposition() {
>
<BarPlot />
<LinePlot />
<ChartsXAxis axisId="quarters" label="2021 quarters" labelFontSize={18} />
<ChartsXAxis
axisId="quarters"
label="2021 quarters"
labelStyle={{ fontSize: 18 }}
/>
<ChartsYAxis axisId="quantities" label="# units sold" />
<ChartsYAxis axisId="money" position="right" label="revenue" />
</ChartContainer>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/axis.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ The x-axis label placement is based on the axis configuration, and the y-axis is
### Position

Charts components provide 4 props: `topAxis`, `rightAxis`, `bottomAxis`, and `leftAxis` allowing to define the 4 axes of the chart.
Those pros can accept three type of value:
Those props can accept three type of value:

- `null` to not display the axis
- `string` which should correspond to the id of a `xAxis` for top and bottom. Or to the id of a `yAxis` for left and right.
Expand Down
37 changes: 37 additions & 0 deletions docs/data/charts/styling/GradientTooltip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function GradientTooltip() {
return (
<BarChart
sx={{
'--my-custom-gradient': 'url(#GlobalGradient)',
}}
slotProps={{
tooltip: {
sx: {
'--my-custom-gradient': 'linear-gradient(0deg, #123456, #81b2e4);',
},
},
}}
series={[
{
label: 'series A',
data: [50],
},
{
label: 'series B',
data: [100],
color: 'var(--my-custom-gradient, #123456)',
},
]}
width={400}
height={200}
>
<linearGradient id="GlobalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0" stopColor="#123456" />
<stop offset="1" stopColor="#81b2e4" />
</linearGradient>
</BarChart>
);
}
37 changes: 37 additions & 0 deletions docs/data/charts/styling/GradientTooltip.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function GradientTooltip() {
return (
<BarChart
sx={{
'--my-custom-gradient': 'url(#GlobalGradient)',
}}
slotProps={{
tooltip: {
sx: {
'--my-custom-gradient': 'linear-gradient(0deg, #123456, #81b2e4);',
},
},
}}
series={[
{
label: 'series A',
data: [50],
},
{
label: 'series B',
data: [100],
color: 'var(--my-custom-gradient, #123456)',
},
]}
width={400}
height={200}
>
<linearGradient id="GlobalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0" stopColor="#123456" />
<stop offset="1" stopColor="#81b2e4" />
</linearGradient>
</BarChart>
);
}
44 changes: 44 additions & 0 deletions docs/data/charts/styling/PatternPie.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';

export default function PatternPie() {
return (
<PieChart
sx={{
'--my-custom-pattern': 'url(#Pattern)',
}}
series={[
{
data: [
{ id: 0, value: 10, label: 'series A' },
{ id: 1, value: 15, label: 'series B' },
{
id: 2,
value: 20,
label: 'series C',
color: 'var(--my-custom-pattern, #123456)',
},
],
},
]}
width={400}
height={200}
>
<pattern
id="Pattern"
patternUnits="userSpaceOnUse"
width="20"
height="40"
patternTransform="scale(0.5)"
>
<rect x="0" y="0" width="100%" height="100%" fill="#123456" />
<path
d="M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z"
strokeWidth="1"
stroke="#81b2e4"
fill="none"
/>
</pattern>
</PieChart>
);
}
44 changes: 44 additions & 0 deletions docs/data/charts/styling/PatternPie.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';

export default function PatternPie() {
return (
<PieChart
sx={{
'--my-custom-pattern': 'url(#Pattern)',
}}
series={[
{
data: [
{ id: 0, value: 10, label: 'series A' },
{ id: 1, value: 15, label: 'series B' },
{
id: 2,
value: 20,
label: 'series C',
color: 'var(--my-custom-pattern, #123456)',
},
],
},
]}
width={400}
height={200}
>
<pattern
id="Pattern"
patternUnits="userSpaceOnUse"
width="20"
height="40"
patternTransform="scale(0.5)"
>
<rect x="0" y="0" width="100%" height="100%" fill="#123456" />
<path
d="M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z"
strokeWidth="1"
stroke="#81b2e4"
fill="none"
/>
</pattern>
</PieChart>
);
}
19 changes: 19 additions & 0 deletions docs/data/charts/styling/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,22 @@ Chart components accept the `sx` props.
From here, you can target any subcomponents with its class name.

{{"demo": "SxStyling.js"}}

### Gradients and patterns

It is possible to use gradients and patterns to fill the charts.
This can be done by passing your gradient or pattern definition as children of the chart component.

Note that the gradient or pattern defined that way is only usable for SVG.
So a direct definition like `color: "url(#Pattern)'` would cause undefined colors in HTML elements such as the tooltip.
The demo solves this issue by using a CSS variable `'--my-custom-pattern': 'url(#Pattern)'` to specify fallback color with `color: 'var(--my-custom-pattern, #123456)'`.

{{"demo": "PatternPie.js"}}

#### Using gradients on tooltips

Gradients defined as SVG elements are not directly supported in HTML.
However you can use the [gradient functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#gradient_functions) to define a gradient in CSS.
This gradient can be used in the tooltip by setting the `sx` prop on the tooltip component, instead of the fallback color used in the previous examples.

{{"demo": "GradientTooltip.js"}}
Loading

0 comments on commit 37efd97

Please sign in to comment.