[charts] Add standalone Pyramid chart page to improve SEO #18527
Conversation
|
Deploy preview: https://deploy-preview-18527--material-ui-x.netlify.app/ Updated pages: Bundle size reportTotal Size Change: 0B(0.00%) - Total Gzip Change: 0B(0.00%) Show details for 100 more bundles (22 more not shown)@mui/x-charts parsed: 0B(0.00%) gzip: 0B(0.00%) |
CodSpeed Performance ReportMerging #18527 will degrade performances by 11.56%Comparing Summary
Benchmarks breakdown
|
There was a problem hiding this comment.
@alexfauquette @prakhargupta1 would it make sense for us to provide a PyramidChart which is just a light wrapper around funnel?
docs/data/pages.ts
Outdated
| { | ||
| pathname: '/x/react-charts-funnel', | ||
| title: 'Funnel', | ||
| plan: 'pro', | ||
| unstable: true, | ||
| children: [ | ||
| { pathname: '/x/react-charts/funnel', title: 'Funnel Overview' }, | ||
| { pathname: '/x/react-charts/pyramid', title: 'Pyramid demo' }, | ||
| ], | ||
| }, |
There was a problem hiding this comment.
Does It make sense for it to be a child of funnel, marketing-wise? It could also be a standalone section by itself.
There was a problem hiding this comment.
For me it's better as a child of the funnel. Optimising the navigation bar for the day to day usage. For which the less entries to brows, the best it is.
It would still solve SEO issues, and the Algolia search could make it easy to find
There was a problem hiding this comment.
We might not have enough content to make it a standalone parent page. So, for now I'll keep it as a child.
docs/data/charts/funnel/pyramid.md
Outdated
|
|
||
| To create a pyramid chart, set the `curve` property to `pyramid` in the series. | ||
|
|
||
| {{"demo": "PyramidFunnel.js"}} |
There was a problem hiding this comment.
We could add more demos, like upside down, and mention other features and link to the funnel chart as well.
There was a problem hiding this comment.
Added upside-down and scaled sections example.
Not sure it's necessary. The important aspect is to let others know we support the use-case. I hope developers willget how to use that |
|
@prakhargupta1 I'll update this with the new changes |
| import { Unstable_FunnelChart as FunnelChart } from '@mui/x-charts-pro/FunnelChart'; | ||
|
|
||
| export default function PyramidInverted() { | ||
| return ( |
There was a problem hiding this comment.
It would be nice to have a toggle to switch between increasing/decreasing so users can easily compare the difference
There was a problem hiding this comment.
Yes, a toggle would be great. After be31484 both demos are uprights. Had to change it for the data to make sense. But a toggle should fix it.
There was a problem hiding this comment.
I've changed thge data to one that is naturally upside-down and added the options to change the direction
| title: Charts - Pyramid demonstration | ||
| productId: x-charts | ||
| components: FunnelChart, FunnelPlot | ||
| --- | ||
|
|
||
| # Charts - Pyramid demonstration |
There was a problem hiding this comment.
Should we just call it Pyramid chart? I had the impression we were going to remove demo pages from our docs and try to document everything in a single page.
Since the pyramid chart is a different chart, it makes sense to have it as a separate page, but I'd treat it just like a normal chart. What do you think?
| unstable: true, | ||
| children: [ | ||
| { pathname: '/x/react-charts/funnel', title: 'Funnel Overview' }, | ||
| { pathname: '/x/react-charts/pyramid', title: 'Pyramid demo' }, |
There was a problem hiding this comment.
| { pathname: '/x/react-charts/pyramid', title: 'Pyramid demo' }, | |
| { pathname: '/x/react-charts/pyramid', title: 'Pyramid chart' }, |
There was a problem hiding this comment.
ah yeah, I had seen this earlier but forgot to change/comment.
There was a problem hiding this comment.
It currently follows the pattern we have in line chart though, where area demo is used
There was a problem hiding this comment.
It currently follows the pattern
Yeah, I'm aware. It's just that I remember we discussing that we should move away from demo pages and have everything in a single page, when possible.
It probably makes sense to rename the area demo page into area chart and add more context.
There was a problem hiding this comment.
It probably makes sense to rename the area demo page into area chart and add more context.
For now, I think we can follow the current structure and do this in a different PR.
I've added the datasource, and made the pyramid upright, for the data to make sense. But as suggested by Bernardo, a toggle for increasing/decreasing would be helpful here.
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Preview: https://deploy-preview-18527--material-ui-x.netlify.app/x/react-charts/pyramid/