Skip to content

Commit

Permalink
a few more
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Oct 23, 2024
1 parent 551325f commit 64a1475
Show file tree
Hide file tree
Showing 18 changed files with 38 additions and 38 deletions.
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -1225,7 +1225,7 @@ _Jul 5, 2024_
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:

- 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API
- 🌳 Add `selectItem()` and `getItemDOMElement()` methods to the TreeView component public API
- ⛏️ Make the `usePickersTranslations` hook public in the pickers component
- 🐞 Bugfixes

Expand Down Expand Up @@ -1270,7 +1270,7 @@ Same changes as in `@mui/[email protected]`.

#### `@mui/[email protected]`

- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle
- [TreeView] Add `selectItem()` and `getItemDOMElement()` methods to the public API (#13485) @flaviendelangle

### Docs

Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/areas-demo/areas-demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ You can pass this gradient definition as a children of the `<LineChart />` and u
To do so you will need to use the [`<linearGradient />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) and [`<stop />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) SVG elements.

The first part is to get the SVG total height.
Which can be done with the `useDrawingArea` hook.
Which can be done with the `useDrawingArea()` hook.
It's useful to define the `<linearGradient />` as a vector that goes from the top to the bottom of our SVG container.

Then to define where the gradient should switch from one color to another, you can use the `useYScale` hook to get the y coordinate of value 0.
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 @@ -56,7 +56,7 @@ Which expects an array of value coherent with the `scaleType`:
Some series types also require specific axis attributes:

- line plots require an `xAxis` to have `data` provided
- bar plots require an `xAxis` with `scaleType='band'` and some `data` provided.
- bar plots require an `xAxis` with `scaleType="band"` and some `data` provided.

### Axis formatter

Expand Down
6 changes: 3 additions & 3 deletions docs/data/charts/bars/bars.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts

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

### Border Radius
### Border radius

To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots).

Expand All @@ -117,7 +117,7 @@ Or you can pass `'value'` to display the raw value of the bar.

{{"demo": "BarLabel.js"}}

### Custom Labels
### Custom labels

You can display, change, or hide labels based on conditional logic.
To do so, provide a function to the `barLabel`.
Expand Down Expand Up @@ -174,7 +174,7 @@ import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
When set to `true` it skips animation powered by `@react-spring/web`.

Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).

```jsx
// For a single component chart
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/components/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Charts dimensions are defined by a few props:
The term **drawing area** refers to the space available to plot data (scatter points, lines, or pie arcs).
The `margin` is used to leave some space for extra elements, such as the axes, the legend, or the title.

You can use the `useDrawingArea` hook in the charts subcomponents to get the coordinates of the **drawing area**.
You can use the `useDrawingArea()` hook in the charts subcomponents to get the coordinates of the **drawing area**.

```jsx
import { useDrawingArea } from '@mui/x-charts';
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/gauge/gauge.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ import {

### Creating your components

To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration:
To create your own components, use the `useGaugeState()` hook which provides all you need about the gauge configuration:

- information about the value: `value`, `valueMin`, `valueMax`
- information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/lines/lines.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ sx={{
To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
When set to `true` it skips animation powered by `@react-spring/web`.

Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).

:::warning
If you support interactive ways to add or remove series from your chart, you have to provide the series' id.
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/pie/pie.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const onItemClick = (
To skip animation at the creation and update of your chart you can use the `skipAnimation` prop.
When set to `true` it skips animation powered by `@react-spring/web`.

Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).

```jsx
// For a single component chart
Expand Down
18 changes: 9 additions & 9 deletions docs/data/charts/tooltip/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ If you are using composition, you can add the `<ChartsTooltip />` component and

The tooltip can be triggered by two kinds of events:

- `'item'`—when the user's mouse hovers over an item on the chart, the tooltip will display data about this specific item.
- `'axis'`—the user's mouse position is associated with a value of the x-axis. The tooltip will display data about all series at this specific x value.
- `'item'`—when the user's mouse hovers over an item on the chart, the tooltip displays data about this specific item.
- `'axis'`—the user's mouse position is associated with a value of the x-axis. The tooltip displays data about all series at this specific x value.
- `'none'`—disable the tooltip.

{{"demo": "Interaction.js"}}
Expand Down Expand Up @@ -79,7 +79,7 @@ See [Label—Conditional formatting](/x/react-charts/label/#conditional-formatti
### Hiding values

You can hide the axis value with `hideTooltip` in the `xAxis` props.
It will remove the header showing the x-axis value from the tooltip.
It removes the header showing the x-axis value from the tooltip.

```jsx
<LineChart
Expand Down Expand Up @@ -116,7 +116,7 @@ The second one when trigger is set to `"axis"`.

## Composition

If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values.
If you're using composition, by default, the axis listens for mouse events to get its current x/y values.
If you don't need it, you can disable those listeners with the `disableAxisListener` prop.

You need those listeners if you are using [axes highlight](/x/react-charts/highlighting/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#tooltip-trigger).
Expand All @@ -131,34 +131,34 @@ You need those listeners if you are using [axes highlight](/x/react-charts/highl

#### Item Tooltip

You can create your own tooltip by using `useItemTooltip`.
You can create your own tooltip by using `useItemTooltip()`.
This hook returns the information about the current item user is interacting with.
It contains:

- `identifier`: An object that identify the item. Which often contains its series type, series id, and data index.
- `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color).
- `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation.

To follow the mouse position, you can use the `useMouseTracker`, or track events on the SVG thanks to `useSvgRef`.
To follow the mouse position, you can use the `useMouseTracker()`, or track events on the SVG thanks to `useSvgRef()`.

{{"demo": "CustomTooltipContent.js"}}

#### Axis Tooltip

Like in previous section, you can create your own tooltip by using `useAxisTooltip`.
Like in previous section, you can create your own tooltip by using `useAxisTooltip()`.
This hook returns the information about the current axis user is interacting with and the relevant series.
It contains:

- `identifier`: An object that identify the axis. Which often contains its series type, series id, and data index.
- `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color).
- `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation.

To follow the mouse position, you can use the `useMouseTracker`, or track events on the SVG thanks to `useSvgRef`.
To follow the mouse position, you can use the `useMouseTracker()`, or track events on the SVG thanks to `useSvgRef()`.

{{"demo": "CustomAxisTooltipContent.js"}}

### Tooltip position

This demo show example about how to use additional hooks such as `useXAxis` or `useDrawingArea` to customize the tooltip position.
This demo show example about how to use additional hooks such as `useXAxis()` or `useDrawingArea()` to customize the tooltip position.

{{"demo": "CustomTooltipPosition.js"}}
6 changes: 3 additions & 3 deletions docs/data/data-grid/column-definition/column-definition.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ Read more in the [handling autogenerated rows](/x/react-data-grid/column-definit
:::

:::warning
[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
The value passed to the `groupingValueGetter` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter()`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
The value passed to the `groupingValueGetter()` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
:::

### Value formatter
Expand Down Expand Up @@ -137,7 +137,7 @@ It resolves the rendered output in the following order:

1. `renderCell() => ReactElement`
2. `valueFormatter() => string`
3. `valueGetter() => string`
3. `valueGetter => string`
4. `row[field]`

The `renderCell` method of the column definitions is similar to `valueFormatter`.
Expand Down
10 changes: 5 additions & 5 deletions docs/data/data-grid/editing/editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ When the user performs an action to [stop editing](#stop-editing), the `processR
Use it to send the new values to the server and save them into a database or other storage method.
The callback is called with three arguments:

1. The updated row with the new values returned by the [`valueSetter`](#value-parser-and-value-setter).
1. The updated row with the new values returned by the [`valueSetter()`](#value-parser-and-value-setter).
2. The original values of the row before editing.
3. An object with additional properties such as `rowId`.

Expand Down Expand Up @@ -238,10 +238,10 @@ const columns: GridColDef[] = [
];
```

You can use the `valueSetter` property of the column definition to customize how the row is updated with a new value.
You can use the `valueSetter()` property of the column definition to customize how the row is updated with a new value.
This lets you insert a value from a nested object.
It is called with an object containing the new cell value to be saved as well as the row that the cell belongs to.
If you are already using a `valueGetter` to extract the value from a nested object, then the `valueSetter` will probably also be necessary.
If you are already using a `valueGetter` to extract the value from a nested object, then the `valueSetter()` will probably also be necessary.

Check warning on line 244 in docs/data/data-grid/editing/editing.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [Google.Will] Avoid using 'will'. Raw Output: {"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/data-grid/editing/editing.md", "range": {"start": {"line": 244, "column": 110}}}, "severity": "WARNING"}

```tsx
const columns: GridColDef[] = [
Expand All @@ -254,8 +254,8 @@ const columns: GridColDef[] = [
];
```

In the following demo, both the `valueParser` and the `valueSetter` are defined for the **Full name** column.
The `valueParser` capitalizes the value entered, and the `valueSetter` splits the value and saves it correctly into the row model:
In the following demo, both the `valueParser` and the `valueSetter()` are defined for the **Full name** column.
The `valueParser` capitalizes the value entered, and the `valueSetter()` splits the value and saves it correctly into the row model:

{{"demo": "ValueParserSetterGrid.js", "bg": "inline", "defaultCodeOpen": false}}

Expand Down
2 changes: 1 addition & 1 deletion docs/data/tree-view/rich-tree-view/focus/focus.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ apiRef.current.focusItem(

:::info
This method only works with items that are currently visible.
Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing.
Calling `apiRef.focusItem()` on an item whose parent is collapsed does nothing.
:::

{{"demo": "ApiMethodFocusItem.js"}}
2 changes: 1 addition & 1 deletion docs/data/tree-view/rich-tree-view/items/items.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ const item = apiRef.current.getItem(

### Get an item's DOM element by ID

Use the `getItemDOMElement` API method to get an item's DOM element by its ID.
Use the `getItemDOMElement()` API method to get an item's DOM element by its ID.

```ts
const itemElement = apiRef.current.getItemDOMElement(
Expand Down
4 changes: 2 additions & 2 deletions docs/data/tree-view/rich-tree-view/selection/selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,13 @@ const apiRef = useTreeViewApiRef();
return <RichTreeView apiRef={apiRef} items={ITEMS}>;
```

When your component first renders, `apiRef` will be `undefined`.
When your component first renders, `apiRef` is `undefined`.
After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
:::

### Select or deselect an item

Use the `selectItem` API method to select or deselect an item:
Use the `selectItem()` API method to select or deselect an item:

```ts
apiRef.current.selectItem({
Expand Down
2 changes: 1 addition & 1 deletion docs/data/tree-view/simple-tree-view/focus/focus.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ apiRef.current.focusItem(

:::info
This method only works with items that are currently visible.
Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing.
Calling `apiRef.focusItem()` on an item whose parent is collapsed does nothing.
:::

{{"demo": "ApiMethodFocusItem.js"}}
4 changes: 2 additions & 2 deletions docs/data/tree-view/simple-tree-view/items/items.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,13 +91,13 @@ const apiRef = useTreeViewApiRef();
return <SimpleTreeView apiRef={apiRef}>{children}</SimpleTreeView>;
```

When your component first renders, `apiRef` will be `undefined`.
When your component first renders, `apiRef` is `undefined`.
After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
:::

### Get an item's DOM element by ID

Use the `getItemDOMElement` API method to get an item's DOM element by its ID.
Use the `getItemDOMElement()` API method to get an item's DOM element by its ID.

```ts
const itemElement = apiRef.current.getItemDOMElement(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ After this initial render, `apiRef` holds methods to interact imperatively with

### Select or deselect an item

Use the `selectItem` API method to select or deselect an item:
Use the `selectItem()` API method to select or deselect an item:

```ts
apiRef.current.selectItem({
Expand Down
4 changes: 2 additions & 2 deletions packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface LegendRendererProps
series: FormattedSeries;
seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
/**
* @deprecated Use the `useDrawingArea` hook instead.
* @deprecated Use the `useDrawingArea()` hook instead.
*/
drawingArea: Omit<DrawingArea, 'isPointInside'>;
/**
Expand Down Expand Up @@ -76,7 +76,7 @@ DefaultChartsLegend.propTypes = {
*/
direction: PropTypes.oneOf(['column', 'row']).isRequired,
/**
* @deprecated Use the `useDrawingArea` hook instead.
* @deprecated Use the `useDrawingArea()` hook instead.
*/
drawingArea: PropTypes.shape({
bottom: PropTypes.number.isRequired,
Expand Down

0 comments on commit 64a1475

Please sign in to comment.