[charts] Add hook documentation pages #19334
Conversation
|
Deploy preview: https://deploy-preview-19334--material-ui-x.netlify.app/ Updated pages:
Bundle size report
|
…hooks package Co-authored-by: JCQuintas <[email protected]>
Copilot
AI
changed the title
useLegend
Signed-off-by: Jose C Quintas Jr <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR adds comprehensive documentation for the useLegend hook and introduces a complete hooks documentation section for the @mui/x-charts/hooks package. The documentation was previously missing, addressing user feedback about the lack of documentation for the useLegend hook and the hooks package.
- Creates a dedicated hooks documentation section with overview and individual hook pages
- Documents the
useLegendhook with API reference, usage examples, and TypeScript support - Adds documentation for other key hooks including
useSeries,useDrawingArea, anduseScale
Reviewed Changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
docs/data/pages.ts |
Adds hooks navigation structure to the charts documentation |
docs/pages/x/react-charts/hooks/*.js |
Creates documentation pages for individual hooks |
docs/data/charts/hooks/*.md |
Comprehensive documentation content for hooks with usage examples |
docs/data/charts/hooks/*.js/.tsx |
Interactive demos showing practical hook usage |
packages/x-charts/src/hooks/useDrawingArea.ts |
Adds JSDoc comments to ChartDrawingArea type properties |
packages/x-charts/src/hooks/useAxis.ts |
Adds TypeScript generics to useXAxis and useYAxis functions |
Comments suppressed due to low confidence (1)
docs/data/charts/hooks/UseScale.js:37
- The CSS
color()function with thefromkeyword is not widely supported in browsers. Consider using a more compatible approach likergba()or a hex color with opacity.
fill="red"
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
@copilot update the pr description |
Co-authored-by: JCQuintas <[email protected]>
| | Property | Type | Description | | ||
| | :------- | :------- | :----------------------------------------------------------------- | | ||
| | `left` | `number` | The gap between the left border of the SVG and the drawing area. | | ||
| | `right` | `number` | The gap between the right border of the SVG and the drawing area. | | ||
| | `top` | `number` | The gap between the top border of the SVG and the drawing area. | | ||
| | `bottom` | `number` | The gap between the bottom border of the SVG and the drawing area. | | ||
| | `width` | `number` | The width of the drawing area. | | ||
| | `height` | `number` | The height of the drawing area. | |
There was a problem hiding this comment.
Don't think a table is the more appropriate structure. Maybe a bullet point, and a sentence to say they are all number
Co-authored-by: Prakhar Gupta <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>
docs/data/charts/hooks/use-series.md
Outdated
|
|
||
| <p class="description">Access raw series data for all chart types.</p> | ||
|
|
||
| The `useXxxSeries` hook provides access to specific series data for a particular chart type. |
There was a problem hiding this comment.
Should we always use useSeries to be consistent? Otherwise sometimes we use useSeries and some other times we use useXxxSeries
| The `useXxxSeries` hook provides access to specific series data for a particular chart type. | |
| The `useSeries` hook provides access to specific series data for a particular chart type. |
There was a problem hiding this comment.
In this case it is meant to be all the specific hooks.
useBarSeries
useLineSeries
useScatterSeries
usePieSeries
useRadarSeries
useHeatmapSeries
useFunnelSeries
when I use it alone, it means the exact useSeries which is also a hook. I needed to differentiate them, though I'm open to suggestion.
There was a problem hiding this comment.
Some suggestions: useXSeries, use*Series, use[ChartType]Series, "series hooks"
| export function useYAxis(axisId?: AxisId) { | ||
| export function useYAxis<T extends keyof AxisScaleConfig>( | ||
| axisId?: AxisId, | ||
| ): ComputedAxis<T, any, ChartsYAxisProps> { |
There was a problem hiding this comment.
Can't it also return undefined?
There was a problem hiding this comment.
It can, but it would only happen if the provided id doesn't exist.
Not sure how to fix this though, since the previous type didn't correctly account for undefined, so adding undefined would be a breaking change.
Co-authored-by: Bernardo Belchior <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>
6 participants
Adds comprehensive documentation for the
useLegendhook and the@mui/x-charts/hookspackage that was missing from the charts documentation.What's New
Complete Hooks Package Documentation
useLegendhook documentation with full API referenceuseSeries,useBarSeries,useLineSeries, etc.)useDrawingAreahook for layout and positioninguseXScale,useYScale) for coordinate transformationsInteractive Demo Components
Created working examples for all documented hooks:
UseLegend.tsx- Custom legend implementationUseSeries.tsx- Series data accessUseDrawingArea.tsx- Chart layout utilitiesUseScale.tsx- Coordinate transformationUseBarSeries.tsx- Bar chart specific dataThe documentation includes context requirements, usage patterns, and practical examples for building custom chart components.
Fixes #18238.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.