diff --git a/docs/pages/blog/developer-survey-impacts.js b/docs/pages/blog/developer-survey-impacts.js new file mode 100644 index 00000000000000..8bafe9710fcf0c --- /dev/null +++ b/docs/pages/blog/developer-survey-impacts.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutSurvey from 'docs/src/modules/components/TopLayoutSurvey'; +import { docs } from './developer-survey-impacts.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/developer-survey-impacts.md b/docs/pages/blog/developer-survey-impacts.md new file mode 100644 index 00000000000000..d05e588ff31665 --- /dev/null +++ b/docs/pages/blog/developer-survey-impacts.md @@ -0,0 +1,356 @@ +--- +title: 'The MUI developer survey and some of its impacts.' +description: Your feedback helped us to build better products. Here's what we learned about your needs in the past developer surveys. +date: 2024-12-03T00:00:00.000Z +authors: ['josefreitas', 'oliviertassinari'] +tags: ['Developer Survey'] +manualCard: false +--- + +Your participation in the previous developer survey has been vital to our growth, and we are grateful for the time you took to share your invaluable thoughts. +The feedback you provided catalyzed many meaningful actions and improvements in key areas. +And today, we are poised to present last year's survey report and show the tangible improvements your previous feedback has already spurred. +We look forward to your continued engagement as we strive to create an even better experience for our entire community. +And please accept our sincere apologies for the late delivery, especially if you're one of the 1934 respondents. + +Here's what we've learned. + +## Table of contents + +- [About the community](#about-the-community) + - [Which of the following best describes your current job role?](#which-of-the-following-best-describes-your-current-job-role) + - [How did you first hear about MUI?](#how-did-you-first-hear-about-mui) + - [What are you building?](#what-are-you-building) + - [Who are you building the app for?](#who-are-you-building-the-app-for) +- [About Your Needs](#about-your-needs) + - [How disappointed would you be if you could no longer use MUI libraries?](#how-disappointed-would-you-be-if-you-could-no-longer-use-mui-libraries) + - [How likely is it that you would recommend MUI to a friend or colleague?](#how-likely-is-it-that-you-would-recommend-mui-to-a-friend-or-colleague) + - [What are your most important criteria for choosing a UI library?](#what-are-your-most-important-criteria-for-choosing-a-ui-library) + - [How satisfied are you with MUI products?](#how-satisfied-are-you-with-mui-products) + - [What is the main benefit you receive from using mui libraries?](#what-is-the-main-benefit-you-receive-from-using-mui-libraries) + - [How can we improve MUI for you?](#how-can-we-improve-mui-for-you) + - [Please rate the following statements (our differentiators)](#please-rate-the-following-statements-our-differentiators) + - [Please rate the following statements (our initiatives)](#please-rate-the-following-statements-our-initiatives) +- [Community workspaces](#community-workspaces) + - [Where is your company based? (Country or Region)](#where-is-your-company-based-country-or-region) + - [How many front-end or full-stack developers are on your team?](#how-many-front-end-or-full-stack-developers-are-on-your-team) + - [How many front-end or full-stack developers are in your company?](#how-many-front-end-or-full-stack-developers-are-in-your-company) +- [Community technical environment](#community-technical-environment) + - [How experienced do you consider yourself in the following technologies?](#how-experienced-do-you-consider-yourself-in-the-following-technologies) + - [What styling solutions are you using?](#what-styling-solutions-are-you-using) +- [Experience with MUI X](#experience-with-mui-x) + - [Are you using MUI X components (Data Grid or Date Pickers)?](#are-you-using-mui-x-components-data-grid-or-date-pickers) + - [What benefits do you get from the Data Grid?](#what-benefits-do-you-get-from-the-data-grid) + - [How can we improve MUI X for you?](#how-can-we-improve-mui-x-for-you) + - [What challenges do you face today that if solved could make you consider purchasing a commercial license](#what-challenges-do-you-face-today-that-if-solved-could-make-you-consider-purchasing-a-commercial-license) + - [Is a perpetual license in development important for you?](#is-a-perpetual-license-in-development-important-for-you) +- [Perception of low code tools](#perception-of-low-code-tools) + - [How familiar are you with low-code development tools?](#how-familiar-are-you-with-low-code-development-tools) + - [What are your 3 most important features in a low-code tool to build admin apps?](#what-are-your-3-most-important-features-in-a-low-code-tool-to-build-admin-apps) + - [How many internal apps (interfaces for business operation) do you currently have in your organization?](#how-many-internal-apps-interfaces-for-business-operation-do-you-currently-have-in-your-organization) + - [How do your existing internal tools integrate the front end with the back end?](#how-do-your-existing-internal-tools-integrate-the-front-end-with-the-back-end) + - [Which low-code products did you use?](#which-low-code-products-did-you-use) + +## About the community + +### Which of the following best describes your current job role? + +As in the previous survey, most of the community members identified themselves as full-stack developers and represent today 41% of the total; that number was 52% that year, so we might be seeing a trend of specialization on front-end development, which increased 5%. +Overall, the community is more diverse, and virtually every other category had their representation increased this year. + +{{"chart": "2024/CommunityJobs"}} + +

1907 respondents.

+ +### How did you first hear about MUI? + +The majority of community members heard about MUI through their workplaces, indicating MUI's widespread use in various companies. Interestingly but not surpring, a substantial number of people are learning about MUI through online videos. +We plan on starting doing some videos as well, but we'd like to leave a big shout-out to all MUI-content creators out there: + +Thank you, and let us know what you're making! + +{{"chart": "2024/FirstHearAboutMUI"}} + +

1895 respondents.

+ +### What are you building? + +Almost half of the community, around 45%, are engaged in building enterprise products on a variety of usages; 41% are involved in user-facing dashboards, and 35% are using MUI products to quickly build internal tools. + +{{"chart": "2024/WhatCommunityIsBuilding"}} + +

1899 respondents.

+ +### Who are you building the app for? + +Very similar to the previous survey, a significant proportion of the community (65%) is developing products for the companies they work at, but we've seen a significant rise in work for clients, from 12% previously to over 45% in 2022. + +{{"chart": "2024/WhoCommunityBuildsFor"}} + +

1896 respondents.

+ +## About Your Needs + +### How disappointed would you be if you could no longer use MUI libraries? + +If MUI ceased to exist, 64% of the community would be very disappointed. A very slight increase compared to the previous survey. +This rise is within the survey's margin of error, though. Our goal is to continuously focus on user feedback and innovating our offerings to get a more significant increase in the future. + +{{"chart": "2024/HowDisappointingWithoutMUI"}} + +

1163 respondents.

+ +### How likely is it that you would recommend MUI to a friend or colleague? + +Just over half of the community, 51%, would recommend MUI to others. +We deeply appreciate this show of support and trust! + +Nonetheless, we acknowledge that there is room for improvement. +Our NPS decreased 6 points, and roughly 5% of the community stopped being a promoter to be a passive user. + +{{"chart": "2024/HowLikelyToRecommend"}} + +

1163 respondents.

+ +### What are your most important criteria for choosing a UI library? + +When it comes to community priorities for choosing a library, “design and look and feel” still ranks first when looking the percentages for the first priority. But overall, documentation quality reached for the first time the highest score. The score is based on the weight of the option overall in all the answers. +Documentation along with design and customizability, are paramount to both the community and MUI. + +{{"chart": "2024/MostImportantCriteriaToPickLibrary"}} + +

1151 respondents.

+ +### How satisfied are you with MUI products? + +We're happy to see how satisfied you're with Material UI. +Almost 90% of the respondents would use it again, and most of the community seem to be increasingly interested over all the other MUI products. + +On a side note, 65%, a significant portion of the community, has not yet heard about Toolpad, and 40% have not discovered Joy. +It is crucial for us to increase the visibility of these tools and encourage more community members to try them out. +We also see a big opportunity to reach those that are already interested in trying other MUI products. + +{{"chart": "2024/HowSatisfied"}} + +

1161 respondents.

+ +### What is the main benefit you receive from using MUI libraries? + +With a significant 41% of respondents highlighting 'Fast development' as a benefit, it is clear that developers and businesses are seeking solutions that streamline processes and reduce the time to market. + +14% of participants emphasized the importance of a 'Large portfolio of quality components'. But 'Design / Look and Feel' is the second most flagged benefit, with 30% of participants mentioning MUI out-of-the-box UI/UX. + +Surprisingly, only 3% explicitly mentioned Material design as a requirement for their projects. + +The following chart is the top 20 most flagged benefits. + +{{"chart": "2024/BenefitsMUI"}} + +

826 respondents

+ +### How can we improve MUI for you? + +There's a clear desire for More components, and Charts is the top1 mention in this regard. +But the community is also mostly interested in more examples, more customization and a better way to apply custom themes and styles. + +We hear you, and we've already started many efforts to cover this gap, like the new documentation to guide you on customizing your [themes](https://mui.com/material-ui/customization/theming/). + +Here are the Top 25 Categorized community requests. + +{{"chart": "2024/HowCanWeImproveMUI"}} + +

716 respondents

+ +### Please rate the following statements (our differentiators) + +We are pleased to know that 88% of the community finds it easy to create visually appealing UIs using MUI. +However, we are keen to understand and address the concerns of the 10% who find the components not as easily customizable; we passionately want to fix your pain points, and we're exploring BaseUI and other solutions to bring a concrete answer to your needs. + +{{"chart": "2024/MUIDiferentiators"}} + +

1107 respondents

+ +### Please rate the following statements (our initiatives) + +We were surprised with the number of people that would benefit from kitchen sink examples (47%), so we're working to bring more of them, and we're super glad to see that more than 50% of you are excited to see Joy UI. + +Also, over 78% of you think it'd be good to have a discord server, so we've finally launched one. Join our [new community hub](https://mui.com/r/discord/)! + +Another point worth noticing is that a good share of the community would also gladly have the opportunity to pay for support on the Core components. +We're now testing a priority support offering that covers Material UI, Base UI and Joy UI as well as MUI X components. The plan is still on pilot, but we hope to be able to make it public soon. + +{{"chart": "2024/MUIInitiatives"}} + +

1094 respondents.

+ +## Community workspaces + +### Where is your company based? (Country or Region) + +Almost a quarter of the respondents are based in the US, but this data doesn't match exactly the user traffic we have in our doc pages. +This likely means that the channels we use to reach the community might be a bit biased. + +{{"chart": "2024/WhereAreCompaniesBased"}} + +

1068 respondents

+ +### How many front-end or full-stack developers are on your team? + +Teams with more than 5 developers are the most common, followed by teams with a single developer responsible for UIs. + +{{"chart": "2024/HowManyFETeam"}} + +

1077 respondents.

+ +### How many front-end or full-stack developers are in your company? + +Almost half, 48%, of the respondents, work in small tech departments with up to 5 developers, which might indicate a big presence of web startups and perhaps some businesses not strongly oriented to web development. + +{{"chart": "2024/HowManyFECompany"}} + +

1069 respondents.

+ +### How many total employees work at your company? + +{{"chart": "2024/HowManyEmployeesTotal"}} + +

1068 respondent

+ +## Community technical environment + +### How experienced do you consider yourself in the following technologies? + +Most developers are comfortable with Javascript and React. However, we see a drop in the level of comfort when it comes to CSS and MUI libraries, suggesting the need for more resources or support in these areas. + +{{"chart": "2024/HowComfortableWithTechnologies"}} + +

1077 respondents.

+ +### What styling solutions are you using? + +It is encouraging to see that 79% have adopted the MUI System to build styles, indicating a positive shift away from the legacy style system. +A significant share of the community, 20%, also uses Tailwind. +We hear you, and we want to provide the best platform to connect with your favorite libraries. + +{{"chart": "2024/WhatStylingSolutions"}} + +

1074 respondents.

+ +### What other UI libraries do you use? What would you say are their strongest and weakest points? + +{{"chart": "2024/WhatOtherLibrariesDoYouUse"}} + +

354 respondents.

+ +## Experience with MUI X + +### Are you using MUI X components (Data Grid or Date Pickers)? + +Over 65% of the community uses MUI X components, showcasing the popularity and validating the need for these components. We're working to increase our advanced components portfolio to supply other community demands. + +{{"chart": "2024/UsingMUIX"}} + +

1108 respondents.

+ +### What benefits do you get from the Data Grid? + +The survey results highlight that development speed is an important benefit the community get. +Surprisingly, column management emerged as the top use case among users of the commercial plans. +The community seem to value a lot the ability to effectively control and manipulate data presentation on the user level. + +{{"chart": "2024/BenefitsDataGrid"}} + +

323 respondents.

+ +### How can we improve MUI X for you? + +There is a high demand for more components, features, and examples. +Efforts are underway to meet this demand and improve use case coverage. + +We've already starting putting some gas on the development of new components, and we've recently launched the pre-release of [Charts](https://mui.com/x/react-charts/) and [Treeview](https://mui.com/x/react-treeview/) (in fact, some of the charts you see on this report were developed using MUI X Charts). + +Your Feedback also indicate a specific pain point with server-side integration, which is now being addressed as a priority in our plans for 2023. + +{{"chart": "2024/HowCanWeImproveMUIX"}} + +

123 respondents.

+ +### What challenges do you face today that, if solved, could make you consider purchasing a commercial license? + +{{"chart": "2024/WhatChallengesMakeYouConsiderCommercialLicense"}} + +

124 respondents.

+ +### Is a perpetual license in development important for you? + +All our licenses, MIT and Commercial, are already perpetual in production. +But we understand the importance of providing a perpetual alternative in development mode, as indicated by 77% of the community. Considering your feedback, We're bringing more alternative to the current model, so you can use MUI X libraries on the model that best suits your requirements. You can already access a perpetual in development license in our [pricing page](https://www.mui.com/pricing/). + +{{"chart": "2024/PerpetualLicenseImportance"}} + +

436 respondents.

+ +## Perception of low code tools + +### How familiar are you with low-code development tools? + +Our survey revealed that over 60% of respondents have not been exposed to low-code tools yet, and among those who have used these tools, a slight majority indicated they would not use them again. This feedback presents a significant opportunity to identify and address the challenges professional developers face with low-code tools. + +{{"chart": "2024/LowCodeToolsFamiliarity"}} + +

955 respondents.

+ +### What are your 3 most important features in a low-code tool to build admin apps? + +The ability to import and export code freely and easily emerged as a key expectation for low code for our community members, along with great documentation and look and feel of the output. We are attempting to address them through [MUI Toolpad](https://mui.com/toolpad/). + +{{"chart": "2024/MostImportantLowCodeTools"}} + +

467 respondents.

+ +### How many internal apps (interfaces for business operation) do you currently have in your organization? + +About 60% of respondents have between 1-5 internal applications within their companies, and surprisingly, over 10% reported having more than 21 internal applications, indicating that a sizeable portion of our community is engaged in large-scale, complex environments with a likely high degree of demand for diverse use cases in these applications. + +{{"chart": "2024/HowManyInternalApps"}} + +

775 respondents.

+ +### How many people have access to the above apps? + +{{"chart": "2024/HowManyInternalAppUsers"}} + +

724 respondents.

+ +### How do your existing internal tools integrate the front end with the back end? + +The vast majority, 88%, utilize REST APIs as the backend for their internal applications, reflecting the popularity of this approach. + +{{"chart": "2024/ServerAPIs"}} + +

790 respondents.

+ +### Which low-code products did you use? + +The community uses a wide variety of low-code products for use cases like internal tools, websites and automation. This indicates a high level of adaptability and comfort with different development tools and systems. + +Note: It was a broad question and in the chart below, we only showed products whose occurence was 3 or more. Apart from these, 90 more such tools were mentioned! + +{{"chart": "2024/LowCodeToolsNames"}} + +

160 respondents.

+ +## Conclusion + +The annual survey is one of the most important resources we have for deciding on our next steps. +We appreciate all the time you invested in answering our questions, and we can't stress enough how much we value your input. + +[expand] + +Thanks again and until the next survey! + +### Read more + +- [2021 edition](/blog/2021-developer-survey-results/) +- [2020 edition](/blog/2020-developer-survey-results/) +- [2019 edition](/blog/2019-developer-survey-results/) diff --git a/docs/pages/blog/survey-charts/2024/01.jsx b/docs/pages/blog/survey-charts/2024/01.jsx new file mode 100644 index 00000000000000..00560ffbda181c --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/01.jsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +export default function Demo2024_01() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/BaseHorizontalBar.tsx b/docs/pages/blog/survey-charts/2024/BaseHorizontalBar.tsx new file mode 100644 index 00000000000000..c980bad0a2e8f2 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/BaseHorizontalBar.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; +import { BarChart } from "@mui/x-charts/BarChart"; + +function generateTickValues(maxValue) { + let maxValueRoundedUp = Math.ceil(maxValue / 10) * 10; + let tickValues = []; + + for (let i = 0; i <= maxValueRoundedUp; i += 1) { + tickValues.push(i); + } + + return tickValues; +} + +function XBar(props) { + const data = props.data; + const dataX = data.map((d) => d.label); + const dataY = data.map((d) => d.value); + return ( + + ); +} + +export default function BaseHorizontalBar(props) { + const { data } = props; + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/BasePercentageHorizontalBar.tsx b/docs/pages/blog/survey-charts/2024/BasePercentageHorizontalBar.tsx new file mode 100644 index 00000000000000..34790242539dd8 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/BasePercentageHorizontalBar.tsx @@ -0,0 +1,50 @@ +import * as React from "react"; +import { BarChart } from "@mui/x-charts/BarChart"; + +function roundToNearest(num) { + if (num < 7) return 5; + + return 10; +} + +function generateTickValues(maxValue, tickSize = 10) { + let tickValues = []; + const roundedTickSize = roundToNearest(tickSize); + let maxValueRoundedUp = + Math.ceil(maxValue / roundedTickSize) * roundedTickSize; + + for (let i = 0; i < maxValue; i += roundedTickSize) { + tickValues.push(i); + } + tickValues.push(maxValueRoundedUp); + + return tickValues; +} + +function XBar(props) { + const data = props.data; + const dataX = data.map((d) => d.label); + const dataY = data.map((d) => d.value); + + return ( + + ); +} + + +export default function BasePercentageHorizontalBar(props) { + const { data, total } = props; + + const dataWithPercentage = data.map((d) => ({ + ...d, + value: ((d.value / total) * 100).toFixed(2), + originalValue: d.value + })); + + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/BasePie.tsx b/docs/pages/blog/survey-charts/2024/BasePie.tsx new file mode 100644 index 00000000000000..e02cb32f82b4cf --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/BasePie.tsx @@ -0,0 +1,60 @@ +import * as React from "react"; +import { PieChart, pieArcLabelClasses } from "@mui/x-charts/PieChart"; +import { DefaultizedPieValueType } from "@mui/x-charts/models"; + + +export default function BasePie(props) { + const data = props.data; + + const legend = props.legend + ? props.legend + : { + direction: "column", + position: { + vertical: "bottom", + horizontal: "right" + } + }; + + + const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0); + + const getArcLabel = (params: DefaultizedPieValueType) => { + const percent = params.value / TOTAL; + return percent > 0.04 ? `${(percent * 100).toFixed(2)}%` : ""; + }; + const startAngle = props.angle ? props.angle : 0; + const endAngle = props.angle ? 360 + props.angle : 360; + const margin = props.margin || { right: 260, bottom: 10, top: -80 }; + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/BaseStackedHorizontalBar.tsx b/docs/pages/blog/survey-charts/2024/BaseStackedHorizontalBar.tsx new file mode 100644 index 00000000000000..4a3d99d0ebbca8 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/BaseStackedHorizontalBar.tsx @@ -0,0 +1,35 @@ +import * as React from "react"; +import { BarChart } from "@mui/x-charts/BarChart"; + +function generateTickValues(maxValue) { + let maxValueRoundedUp = Math.ceil(maxValue / 10) * 10; + let tickValues = []; + + for (let i = 0; i <= maxValueRoundedUp; i += 10) { + tickValues.push(i); + } + + return tickValues; +} + +export default function BaseStackedHorizontalBar(props) { + const { data, barProperties } = props; + const dataX = data.map((d) => d.label); + const series = barProperties.map((p) => { + const barPropertyData = data.map((d)=>{ + const propName = p.property + return { data: d[propName], label: p.label, stack: d.label } + }); + }); + + console.log("series", series); + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/BenefitsDataGrid.tsx b/docs/pages/blog/survey-charts/2024/BenefitsDataGrid.tsx new file mode 100644 index 00000000000000..91963bf9a216b0 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/BenefitsDataGrid.tsx @@ -0,0 +1,67 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; +const mitData = [ + { id: 0, label: "Development speed", value: 65.02 }, + { id: 1, label: "Basic features (filtering and sorting)", value: 63.47 }, + { id: 2, label: "Pagination", value: 59.75 }, + { id: 3, label: "Design considentency with MUI components", value: 50.77 }, + { id: 7, label: "Quick display for large datasets", value: 48.92 }, + { id: 6, label: "Performance", value: 40.25 }, + { id: 7, label: "Docs with easy-to-copy examples", value: 39.63 }, + { id: 8, label: "Adaptable to your design", value: 32.2 }, + { id: 9, label: "Accessibility", value: 27.55 }, + { id: 10, label: "inline editing", value: 25.08 }, + { id: 12, label: "Others", value: 11.46 } +]; + +const commercialData = [ + { id: 0, label: "Development speed", value: 70.71 }, + { + id: 1, + label: "Column management (visibility, reordering, pinning)", + value: 66.53 + }, + { id: 2, label: "Basic features (filtering and sorting)", value: 64.02 }, + { id: 3, label: "Design considentency with MUI components", value: 63.6 }, + { id: 4, label: "Pagination", value: 59.83 }, + { id: 5, label: "Advanced filtering", value: 59.41 }, + { id: 6, label: "Quick display for large datasets", value: 57.74 }, + { id: 7, label: "Performance", value: 46.44 }, + { id: 8, label: "Rows with custom actions", value: 46.03 }, + { id: 9, label: "Virtualization", value: 44.35 }, + { id: 10, label: "Excel export", value: 37.24 }, + { id: 11, label: "Docs with easy-to-copy examples", value: 34.31 }, + { id: 12, label: "inline editing", value: 33.89 }, + { id: 13, label: "Flexibility when customizing behavior", value: 33.05 }, + { id: 14, label: "State management", value: 31.38 }, + { + id: 15, + label: "Advanced data analysis (Row grouping and Aggregation)", + value: 29.71 + }, + { id: 16, label: "Adaptable to your design", value: 22.18 }, + { id: 17, label: "Accessibility", value: 19.67 }, + { id: 18, label: "Others", value: 4.6 } +]; + +export default function BenefitsDataGrid() { + return ( + +

MIT

+ +

Commercial

+ +
+ ); +} diff --git a/docs/pages/blog/survey-charts/2024/BenefitsMUI.tsx b/docs/pages/blog/survey-charts/2024/BenefitsMUI.tsx new file mode 100644 index 00000000000000..eae085f4bf574b --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/BenefitsMUI.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; +const data = [ + { id: 1, label: "Fast development", value: 342 }, + { id: 2, label: "Design/Look and Feel", value: 248 }, + { id: 3, label: "Large portfolio of high quality components", value: 119 }, + { id: 4, label: "Customization", value: 96 }, + { id: 5, label: "Documentation", value: 84 }, + { id: 6, label: "Easy to use", value: 64 }, + { id: 7, label: "Design system", value: 48 }, + { id: 8, label: "Consistent dx", value: 40 }, + { id: 9, label: "Material design", value: 26 }, + { id: 10, label: "Accessibility", value: 26 }, + { id: 11, label: "Theming", value: 24 }, + { id: 12, label: "Community support", value: 21 }, + { id: 13, label: "Reliability", value: 21 }, + { id: 14, label: "Datagrid", value: 14 }, + { id: 15, label: "Integration with the ecosystem", value: 8 }, + { id: 16, label: "Open source", value: 7 }, + { id: 17, label: "Performance", value: 7 }, + { id: 18, label: "Advanced components", value: 6 }, + { id: 19, label: "Mui system", value: 5 }, + { id: 20, label: "SX prop", value: 3 } + /*{ id: 21, label: "Typescript", value: 2 }, + { id: 24, label: "Server side rendering", value: 2 }, + { id: 25, label: "Integration with streamlit", value: 1 }, + { id: 26, label: "Autocomplete", value: 1 }, + { id: 27, label: "Slots", value: 1 }, + { id: 29, label: "Mobile first approach", value: 1 }, + { id: 30, label: "Templates", value: 1 }, + { id: 31, label: "Design kit (figma)", value: 1 }, + { id: 32, label: "Long term support", value: 1 }, + { id: 33, label: "Rtl support", value: 1 }*/ +]; + +export default function BenefitsMUI() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/CommunityJobs.tsx b/docs/pages/blog/survey-charts/2024/CommunityJobs.tsx new file mode 100644 index 00000000000000..d23eed8662ecd0 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/CommunityJobs.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import BasePie from "./BasePie"; + +const data = [ + { id: 0, label: "Full-stack Developer", value: 788 }, + { id: 1, label: "Front-end Developer", value: 651 }, + { id: 2, label: "Entrepreneur (I do it all!)", value: 155 }, + { id: 3, label: "Learning web development", value: 83 }, + { id: 4, label: "Engineering Manager", value: 62 }, + { id: 5, label: "Others", value: 60 }, + { id: 6, label: "Designer", value: 45 }, + { id: 7, label: "Product Manager", value: 33 }, + { id: 8, label: "Back-end Developer", value: 30 } +]; + +export default function CommunityJobs() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/FirstHearAboutMUI.tsx b/docs/pages/blog/survey-charts/2024/FirstHearAboutMUI.tsx new file mode 100644 index 00000000000000..461cb44a87433e --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/FirstHearAboutMUI.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import BasePie from "./BasePie"; + +const data = [ + { id: 6, label: "Already used at my company", value: 643 }, + { id: 5, label: "Tutorial, e.g. on Youtube", value: 368 }, + { id: 3, label: "Organic search", value: 303 }, + { id: 4, label: "Word of mouth", value: 359 }, + { id: 2, label: "On a blog", value: 119 }, + { id: 1, label: "Social media", value: 89 }, + { id: 0, label: "Conference", value: 14 } +]; + +export default function FirstHearAboutMUI() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/HowCanWeImproveMUI.tsx b/docs/pages/blog/survey-charts/2024/HowCanWeImproveMUI.tsx new file mode 100644 index 00000000000000..f0fb78f3000a32 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowCanWeImproveMUI.tsx @@ -0,0 +1,103 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; +const data = [ + { id: 1, label: "More components", value: 89 }, + { id: 2, label: "Improve docs", value: 53 }, + { id: 3, label: "More examples", value: 50 }, + { id: 4, label: "More customization", value: 50 }, + { id: 5, label: "Improve theming/styling", value: 41 }, + { id: 6, label: "More features", value: 24 }, + { id: 7, label: "Performance", value: 23 }, + { id: 8, label: "Bundle size", value: 20 }, + { id: 9, label: "Improve pricing", value: 14 }, + { id: 10, label: "Improve dx", value: 14 }, + { id: 11, label: "Charts", value: 13 }, + { id: 12, label: "Improve datagrid", value: 12 }, + { id: 13, label: "Theming/style docs", value: 12 }, + { id: 14, label: "Keep up with material spec.", value: 12 }, + { id: 15, label: "Improve typescript support", value: 11 }, + { id: 16, label: "More tutorials / articles", value: 11 }, + { id: 17, label: "Improve date pickers", value: 11 }, + { id: 18, label: "Improve markup", value: 11 }, + { id: 19, label: "Improve design", value: 10 }, + { id: 20, label: "More in-depth documentation", value: 9 }, + { id: 21, label: "Pain with migration", value: 9 }, + { id: 22, label: "More designs", value: 9 }, + { id: 23, label: "Joy ui", value: 8 }, + { id: 24, label: "Improve ssr support", value: 8 }, + { id: 25, label: "Improve tailwind support", value: 8 } + /*{ id: 26, label: "Product communication", value: 8 }, + { + id: 27, + label: "Integration with other ecosystems (vue/svelte/etc)", + value: 8 + }, + { id: 28, label: "Fix bugs", value: 7 }, + { id: 29, label: "Better integration with the ecosystem", value: 7 }, + { id: 30, label: "Accessibility", value: 6 }, + { id: 31, label: "Less emotion", value: 5 }, + { id: 32, label: "Dont stop updating", value: 5 }, + { id: 33, label: "File upload", value: 5 }, + { id: 34, label: "More advanced components", value: 5 }, + { id: 35, label: "More templates", value: 5 }, + { id: 36, label: "Scheduler", value: 5 }, + { id: 37, label: "More tutorial / articles", value: 5 }, + { id: 38, label: "React native support", value: 4 }, + { id: 39, label: "More icons", value: 4 }, + { id: 40, label: "Carousel", value: 4 }, + { id: 41, label: "Better sync with figma design kit", value: 4 }, + { id: 42, label: "Improve mui base", value: 4 }, + { id: 43, label: "Treeview", value: 3 }, + { id: 44, label: "More unstyled", value: 3 }, + { id: 45, label: "Rich text editor", value: 3 }, + { id: 46, label: "Date time range picker", value: 3 }, + { id: 47, label: "More animations", value: 3 }, + { id: 48, label: "Dragndrop", value: 2 }, + { id: 49, label: "Numeric input", value: 2 }, + { id: 50, label: "Serverside integration", value: 2 }, + { id: 51, label: "Responsive", value: 2 }, + { id: 52, label: "Color picker", value: 2 }, + { id: 53, label: "No code/low code tool", value: 2 }, + { id: 54, label: "Integrate css vars", value: 2 }, + { id: 55, label: "Better support for designers", value: 2 }, + { id: 56, label: "Mobile support", value: 2 }, + { id: 57, label: "Date range pickers", value: 2 }, + { id: 58, label: "Time picker", value: 2 }, + { id: 59, label: "More tools", value: 2 }, + { id: 60, label: "More headless", value: 2 }, + { id: 61, label: "Stronger community", value: 2 }, + { id: 62, label: "Chat", value: 1 }, + { id: 63, label: "More dx consistency", value: 1 }, + { id: 64, label: "Improve ux", value: 1 }, + { id: 65, label: "Make testing easier", value: 1 }, + { id: 66, label: "Nested menu", value: 1 }, + { id: 67, label: "Nested stepper", value: 1 }, + { id: 68, label: "Localization", value: 1 }, + { id: 69, label: "Layout", value: 1 }, + { id: 70, label: "More component", value: 1 }, + { id: 71, label: "Loadingbutton", value: 1 }, + { id: 72, label: "Timeline", value: 1 }, + { id: 73, label: "Textarea", value: 1 }, + { id: 74, label: "Aspectratio", value: 1 }, + { id: 75, label: "Dashboard", value: 1 }, + { id: 76, label: "Card slider", value: 1 }, + { id: 77, label: "Month pickers", value: 1 }, + { id: 78, label: "Image gallery", value: 1 }, + { id: 79, label: "Rtl support", value: 1 }, + { id: 80, label: "Long term support", value: 1 }, + { id: 81, label: "Improved typescript support", value: 1 }, + { id: 82, label: "Input fields", value: 1 }, + { id: 83, label: "More themes out-of-the-box", value: 1 }*/ +]; + +export default function HowCanWeImproveMUI() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowCanWeImproveMUIX.tsx b/docs/pages/blog/survey-charts/2024/HowCanWeImproveMUIX.tsx new file mode 100644 index 00000000000000..bb18f3ff6d6f09 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowCanWeImproveMUIX.tsx @@ -0,0 +1,43 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const mitData = [ + { id: 0, label: "I'm satisfied", value: 26 }, + { id: 1, label: "More features", value: 19 }, + { id: 2, label: "Pricing - Make it free", value: 15 }, + { id: 3, label: "More components", value: 12 }, + { id: 7, label: "Customization", value: 10 }, + { id: 6, label: "Improve Date pickers", value: 7 }, + { id: 7, label: "Documentation", value: 4 }, + { id: 8, label: "apiRef", value: 4 }, + { id: 9, label: "Polishment", value: 3 }, + { id: 10, label: "More examples or recipes", value: 3 }, + { id: 12, label: "Others", value: 12 } +]; + +const commercialData = [ + { id: 0, label: "More components", value: 20 }, + { id: 1, label: "Customization", value: 14 }, + { id: 2, label: "More examples or recipes", value: 13 }, + { id: 3, label: "More features", value: 13 }, + { id: 4, label: "Documentation", value: 9 }, + { id: 5, label: "Pricing", value: 8 }, + { id: 6, label: "Improve Date pickers", value: 5 }, + { id: 7, label: "Server-side integration", value: 5 }, + { id: 8, label: "Faster delivery", value: 4 }, + { id: 9, label: "Performance", value: 3 }, + { id: 10, label: "Precise roadmap", value: 3 }, + { id: 11, label: "Polishiment", value: 3 }, + { id: 12, label: "Others", value: 13 } +]; + +export default function HowCanWeImproveMUIX() { + return ( + +

MIT

+ +

Commercial

+ +
+ ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowComfortableWithTechnologies.tsx b/docs/pages/blog/survey-charts/2024/HowComfortableWithTechnologies.tsx new file mode 100644 index 00000000000000..b0a7d6ed7f3a63 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowComfortableWithTechnologies.tsx @@ -0,0 +1,64 @@ +import * as React from "react"; +import BaseStackedHorizontalBar from "./BaseStackedHorizontalBar"; + +const data = [ + { + id: 0, + label: "Javascript", + intimidated: 1.67, + understandBasics: 4.46, + jobGetsDone: 18.22, + advanced: 75.65 + }, + { + id: 1, + label: "React", + intimidated: 2.42, + understandBasics: 6.42, + jobGetsDone: 19.18, + advanced: 71.97 + }, + { + id: 2, + label: "CSS", + intimidated: 2.24, + understandBasics: 13.35, + jobGetsDone: 26.8, + advanced: 57.61 + }, + { + id: 3, + label: "MUI libraries", + intimidated: 2.05, + understandBasics: 11.08, + jobGetsDone: 31.19, + advanced: 55.68 + } +]; + +const barProperties = [ + { + property: "intimidated", + label: "I feel intimidated", + colorIndex: 2 + }, + { + property: "understandBasics", + label: "I understand the basics", + colorIndex: 4 + }, + { + property: "jobGetsDone", + label: "The Job gets done, but it's often a mystery", + colorIndex: 0 + }, + { + property: "advanced", + label: "I'm comfortable with Advanced concepts", + colorIndex: 1 + } +]; + +export default function HowComfortableWithTechnologies() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/HowDisappointingWithoutMUI.tsx b/docs/pages/blog/survey-charts/2024/HowDisappointingWithoutMUI.tsx new file mode 100644 index 00000000000000..343dd35c682387 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowDisappointingWithoutMUI.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; +import BasePie from "./BasePie"; + +const data = [ + { id: 0, label: "Very disappointed", value: 749 }, + { id: 1, label: "Somewhat disappointed", value: 327 }, + { id: 2, label: "Not disappointed", value: 87 } +]; + +export default function HowDisappointingWithoutMUI() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/HowLikelyToRecommend.tsx b/docs/pages/blog/survey-charts/2024/HowLikelyToRecommend.tsx new file mode 100644 index 00000000000000..2f35b9f3438cb0 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowLikelyToRecommend.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "Detractors (0-6)", value: 132 }, + { id: 1, label: "Passives (7-8)", value: 435 }, + { id: 2, label: "Promoters (9-10)", value: 600 } +]; + +export default function HowLikelyToRecommend() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowManyEmployeesTotal.tsx b/docs/pages/blog/survey-charts/2024/HowManyEmployeesTotal.tsx new file mode 100644 index 00000000000000..77e066d7849da0 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowManyEmployeesTotal.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; +import BasePie from "./BasePie"; + +const data = [ + { id: 0, label: "51-200", value: 175 }, + { id: 1, label: "21-50", value: 130 }, + { id: 2, label: "11-20", value: 118 }, + { id: 3, label: "2-5", value: 113 }, + { id: 4, label: "6-10", value: 100 }, + { id: 5, label: "It's a Hobby / Side Project", value: 86 }, + { id: 7, label: "201-500", value: 80 }, + { id: 8, label: "10000+", value: 64 }, + { id: 9, label: "Self-employed", value: 63 }, + { id: 10, label: "501-1000", value: 51 }, + { id: 10, label: "1001-3000", value: 47 }, + { id: 10, label: "3001-10000", value: 41 } +]; + +export default function HowManyEmployeesTotal() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowManyFECompany.tsx b/docs/pages/blog/survey-charts/2024/HowManyFECompany.tsx new file mode 100644 index 00000000000000..814ffe7a7aab65 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowManyFECompany.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "1-5 developers", value: 522 }, + { id: 1, label: "6-10 developers", value: 167 }, + { id: 2, label: "11-20 developers", value: 116 }, + { id: 3, label: "21-50 developers", value: 96 }, + { id: 4, label: "51-100 developers", value: 62 }, + { id: 5, label: "100-300 developers", value: 62 }, + { id: 6, label: "301+ developers", value: 44 } +]; + +export default function HowManyFECompany() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowManyFETeam.tsx b/docs/pages/blog/survey-charts/2024/HowManyFETeam.tsx new file mode 100644 index 00000000000000..7d9c996a211c1d --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowManyFETeam.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; +import BasePie from "./BasePie"; + +const data = [ + { id: 0, label: "1 developer", value: 252 }, + { id: 1, label: "2 developers", value: 207 }, + { id: 2, label: "3 developers", value: 197 }, + { id: 3, label: "4 developers", value: 129 }, + { id: 4, label: "5+ developers", value: 292 } +]; + +export default function HowManyFETeam() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/HowManyInternalAppUsers.tsx b/docs/pages/blog/survey-charts/2024/HowManyInternalAppUsers.tsx new file mode 100644 index 00000000000000..33c9ef397fad65 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowManyInternalAppUsers.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "1-5", value: 185 }, + { id: 3, label: "21-100", value: 138 }, + { id: 4, label: "501+", value: 130 }, + { id: 1, label: "6-10", value: 105 }, + { id: 2, label: "11-20", value: 85 }, + { id: 5, label: "101-500", value: 81 } +]; + +export default function HowManyInternalAppUsers() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowManyInternalApps.tsx b/docs/pages/blog/survey-charts/2024/HowManyInternalApps.tsx new file mode 100644 index 00000000000000..de7404d4fb448d --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowManyInternalApps.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "1-5", value: 464 }, + { id: 1, label: "6-10", value: 95 }, + { id: 2, label: "0", value: 88 }, + { id: 3, label: "21+", value: 84 }, + { id: 4, label: "11-20", value: 44 } +]; + +export default function HowManyInternalApps() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/HowSatisfied.tsx b/docs/pages/blog/survey-charts/2024/HowSatisfied.tsx new file mode 100644 index 00000000000000..97c607083e67b6 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/HowSatisfied.tsx @@ -0,0 +1,91 @@ +import * as React from "react"; +import BaseStackedHorizontalBar from "./BaseStackedHorizontalBar"; + +const data = [ + { + id: 0, + label: "Material UI", + neverHeardOfIt: 0.79, + heardOfItAndNotInterested: 0.7, + heardOfItAndLikeToTry: 4.55, + usedItAndWouldUseAgain: 89.42, + usedItAndWouldNotUseAgain: 4.5 + }, + { + id: 1, + label: "Joy UI", + neverHeardOfIt: 41.8, + heardOfItAndNotInterested: 16.84, + heardOfItAndLikeToTry: 34.4, + usedItAndWouldUseAgain: 6.06, + usedItAndWouldNotUseAgain: 0.89 + }, + { + id: 2, + label: "MUI Base", + neverHeardOfIt: 17.75, + heardOfItAndNotInterested: 11.69, + heardOfItAndLikeToTry: 22.39, + usedItAndWouldUseAgain: 45.94, + usedItAndWouldNotUseAgain: 2.23 + }, + { + id: 3, + label: "MUI X", + neverHeardOfIt: 13.36, + heardOfItAndNotInterested: 9.73, + heardOfItAndLikeToTry: 25.22, + usedItAndWouldUseAgain: 48.76, + usedItAndWouldNotUseAgain: 2.92 + }, + { + id: 4, + label: "MUI Toolpad", + neverHeardOfIt: 65.89, + heardOfItAndNotInterested: 11.73, + heardOfItAndLikeToTry: 17.99, + usedItAndWouldUseAgain: 3.31, + usedItAndWouldNotUseAgain: 1.07 + }, + { + id: 5, + label: "MUI System", + neverHeardOfIt: 22.22, + heardOfItAndNotInterested: 9.16, + heardOfItAndLikeToTry: 18.04, + usedItAndWouldUseAgain: 48.0, + usedItAndWouldNotUseAgain: 2.58 + } +]; + +const barProperties = [ + { + property: "neverHeardOfIt", + label: "Never Heard of It", + colorIndex: 10 + }, + { + property: "heardOfItAndNotInterested", + label: "Heard of It / Not interested", + colorIndex: 2 + }, + { + property: "heardOfItAndLikeToTry", + label: "Heard of It / Would like to try", + colorIndex: 4 + }, + { + property: "usedItAndWouldUseAgain", + label: "Used it and would use it again", + colorIndex: 1 + }, + { + property: "usedItAndWouldNotUseAgain", + label: "Used it but would NOT use it again", + colorIndex: 6 + } +]; + +export default function HowSatisfied() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/LowCodeToolsFamiliarity.tsx b/docs/pages/blog/survey-charts/2024/LowCodeToolsFamiliarity.tsx new file mode 100644 index 00000000000000..a9c780731ad70f --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/LowCodeToolsFamiliarity.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 1, label: "Never Heard of them > Would like to learn", value: 267 }, + { id: 2, label: "Never heard of them > Not interested", value: 221 }, + { id: 3, label: "Used them > Would not use again", value: 184 }, + { id: 4, label: "Used them > Would use again", value: 155 }, + { id: 5, label: "Never heard of them/Not sure what they are", value: 128 } +]; + +export default function LowCodeToolsFamiliarity() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/LowCodeToolsNames.tsx b/docs/pages/blog/survey-charts/2024/LowCodeToolsNames.tsx new file mode 100644 index 00000000000000..2f1cc665b791b2 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/LowCodeToolsNames.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "Retool", value: 25 }, + { id: 1, label: "Webflow", value: 20 }, + { id: 2, label: "Wordpress", value: 15 }, + { id: 3, label: "Microsoft Power apps", value: 14 }, + { id: 4, label: "Wix", value: 13 }, + { id: 5, label: "Bubble", value: 11 }, + { id: 6, label: "MUI Toolpad", value: 7 }, + { id: 7, label: "Framer", value: 6 }, + { id: 8, label: "Mendix", value: 6 }, + { id: 9, label: "Airtable", value: 5 }, + { id: 10, label: "Elementor", value: 5 }, + { id: 11, label: "AWS Studio or Step fn.", value: 5 }, + { id: 12, label: "Appsmith", value: 4 }, + { id: 13, label: "Zapier", value: 4 }, + { id: 14, label: "Figma", value: 4 }, + { id: 15, label: "Outsystem", value: 4 }, + { id: 16, label: "Notion", value: 3 }, + { id: 17, label: "React admin", value: 3 }, + { id: 18, label: "Scratch", value: 3 }, + { id: 19, label: "Squarespace", value: 3 } +]; +const total = 160; + +export default function LowCodeToolsNames() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/MUIDiferentiators.tsx b/docs/pages/blog/survey-charts/2024/MUIDiferentiators.tsx new file mode 100644 index 00000000000000..49ef7894a63dc7 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/MUIDiferentiators.tsx @@ -0,0 +1,99 @@ +import * as React from "react"; +import BaseStackedHorizontalBar from "./BaseStackedHorizontalBar"; + +const data = [ + { + id: 0, + label: "I can easily create UIs that look and feel great", + stronglyDisagree: 1, + disagree: 2.01, + neutral: 9.02, + agree: 44.48, + stronglyAgree: 43.48 + }, + { + id: 1, + label: "I find most of the components I need", + stronglyDisagree: 0.73, + disagree: 2.73, + neutral: 10.2, + agree: 52.64, + stronglyAgree: 33.7 + }, + { + id: 2, + label: + "I can easily customize the components to match the desired design and behavior", + stronglyDisagree: 2.36, + disagree: 8.45, + neutral: 21.53, + agree: 45.41, + stronglyAgree: 22.25 + }, + { + id: 3, + label: "I find the answers to most of my questions in the docs", + stronglyDisagree: 1.19, + disagree: 5.2, + neutral: 14.95, + agree: 52.96, + stronglyAgree: 25.71 + }, + { + id: 4, + label: "The libraries performance are great", + stronglyDisagree: 2.1, + disagree: 6.11, + neutral: 25.0, + agree: 45.62, + stronglyAgree: 21.17 + }, + { + id: 5, + label: + "Whenever I need help, I can find helpful responses (Stack Overflow or GitHub)", + stronglyDisagree: 1.09, + disagree: 4.65, + neutral: 23.27, + agree: 47.26, + stronglyAgree: 23.72 + } +]; + +const barProperties = [ + { + property: "stronglyDisagree", + label: "Strongly Disagree", + colorIndex: 10 + }, + { + property: "disagree", + label: "Disagree", + colorIndex: 2 + }, + { + property: "neutral", + label: "Neutral", + colorIndex: 4 + }, + { + property: "agree", + label: "Agree", + colorIndex: 7 + }, + { + property: "stronglyAgree", + label: "Strongly Agree", + colorIndex: 1 + } +]; + +export default function MUIDiferentiators() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/MUIInitiatives.tsx b/docs/pages/blog/survey-charts/2024/MUIInitiatives.tsx new file mode 100644 index 00000000000000..1f241c8cf9fbe9 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/MUIInitiatives.tsx @@ -0,0 +1,88 @@ +import * as React from "react"; +import BaseStackedHorizontalBar from "./BaseStackedHorizontalBar"; + +const data = [ + { + id: 0, + label: "I'm excited to see new Design Systems proposals like Joy UI", + stronglyDisagree: 2.96, + disagree: 6.01, + neutral: 41.22, + agree: 29.48, + stronglyAgree: 20.33 + }, + { + id: 1, + label: 'I\'d like to update my components to "Material You" desgin ASAP', + stronglyDisagree: 5.96, + disagree: 11.74, + neutral: 51.26, + agree: 16.12, + stronglyAgree: 14.91 + }, + { + id: 2, + label: "I wish I could purchase paid technical support for Core libraries", + stronglyDisagree: 17.64, + disagree: 24.79, + neutral: 43.64, + agree: 10.77, + stronglyAgree: 3.16 + }, + { + id: 3, + label: "I wish MUI had a community chat server, e.g. discord", + stronglyDisagree: 6.1, + disagree: 12.01, + neutral: 41.5, + agree: 23.01, + stronglyAgree: 17.38 + }, + { + id: 4, + label: "I like using kitchen sink examples", + stronglyDisagree: 2.37, + disagree: 6.24, + neutral: 44.18, + agree: 32.36, + stronglyAgree: 14.87 + } +]; + +const barProperties = [ + { + property: "stronglyDisagree", + label: "Strongly Disagree", + colorIndex: 10 + }, + { + property: "disagree", + label: "Disagree", + colorIndex: 2 + }, + { + property: "neutral", + label: "Neutral", + colorIndex: 4 + }, + { + property: "agree", + label: "Agree", + colorIndex: 7 + }, + { + property: "stronglyAgree", + label: "Strongly Agree", + colorIndex: 1 + } +]; + +export default function MUIInitiatives() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/MostImportantCriteriaToPickLibrary.tsx b/docs/pages/blog/survey-charts/2024/MostImportantCriteriaToPickLibrary.tsx new file mode 100644 index 00000000000000..548187d7378cd2 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/MostImportantCriteriaToPickLibrary.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import BaseHorizontalBar from "./BaseHorizontalBar"; + +const data = [ + { id: 0, label: "Documentation quality", value: 6.43 }, + { id: 1, label: "The design - look and feel", value: 6.21 }, + { id: 2, label: "Customizability", value: 6.04 }, + { id: 0, label: "Comprehensiveness", value: 5.12 }, + { id: 1, label: "Runtime performance", value: 5.04 }, + { id: 2, label: "Popularity", value: 4.31 }, + { id: 0, label: "Accessibility", value: 4.01 }, + { id: 1, label: "Bundle size", value: 3.89 }, + { id: 2, label: "Offered support and help", value: 3.48 } +]; + +const total = 1151; + +export default function MostImportantCriteriaToPickLibrary() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/MostImportantLowCodeTools.tsx b/docs/pages/blog/survey-charts/2024/MostImportantLowCodeTools.tsx new file mode 100644 index 00000000000000..800e063b4ac9cb --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/MostImportantLowCodeTools.tsx @@ -0,0 +1,49 @@ +import * as React from "react"; +import { BarChart } from "@mui/x-charts/BarChart"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { + id: 1, + label: "I can import custom React components and JS libraries", + value: 243 + }, + { + id: 2, + label: "I can export the code of the UI, to use it in production", + value: 213 + }, + { id: 3, label: "Great technical documentation and support", value: 184 }, + { + id: 4, + label: "The created apps have an awesome look and feel", + value: 174 + }, + { id: 5, label: "I can run the tool locally, on my machine", value: 171 }, + { + id: 5, + label: + "I can embed the low-code interface built inside a larger pro-code app e.g. inside Next.js", + value: 165 + }, + { id: 5, label: "I can self-host", value: 164 }, + { + id: 5, + label: + "I can use configuration files/code as the source of truth for the app(rather than the UI)", + value: 141 + }, + { id: 5, label: "I can use a cloud to not host the tool myself", value: 70 }, + { id: 5, label: "Others", value: 70 } +]; + +export default function MostImportantLowCodeTools() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/PerpetualLicenseImportance.tsx b/docs/pages/blog/survey-charts/2024/PerpetualLicenseImportance.tsx new file mode 100644 index 00000000000000..553108349ed44c --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/PerpetualLicenseImportance.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import BasePie from "./BasePie"; + +const data = [ + { id: 0, label: "Yes", value: 339 }, + { id: 1, label: "No", value: 97 } +]; + +export default function PerpetualLicenseImportance() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/ServerAPIs.tsx b/docs/pages/blog/survey-charts/2024/ServerAPIs.tsx new file mode 100644 index 00000000000000..9c73d06581f235 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/ServerAPIs.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "Rest", value: 696 }, + { id: 3, label: "GraphQL API", value: 229 }, + { id: 4, label: "Direct DB access", value: 115 }, + { id: 2, label: "Other (please specify)", value: 34 } +]; + +export default function ServerAPIs() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/UsingMUIX.tsx b/docs/pages/blog/survey-charts/2024/UsingMUIX.tsx new file mode 100644 index 00000000000000..12601d0e2d9033 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/UsingMUIX.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; +import BasePie from "./BasePie"; + +const data = [ + { id: 0, label: "MUI X", value: 466 }, + { id: 1, label: "No", value: 368 }, + { id: 2, label: "Mui X Pro", value: 202 }, + { id: 3, label: "Mui X Premium", value: 72 } +]; + +export default function UsingMUIX() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/WhatChallengesMakeYouConsiderCommercialLicense.tsx b/docs/pages/blog/survey-charts/2024/WhatChallengesMakeYouConsiderCommercialLicense.tsx new file mode 100644 index 00000000000000..06ca014a3a0bc9 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/WhatChallengesMakeYouConsiderCommercialLicense.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; +const data = [ + { id: 1, label: "Pricing", value: 32 }, + { id: 2, label: "Wont pay", value: 21 }, + { id: 3, label: "Im satisfied", value: 8 }, + { id: 4, label: "No purchase influence", value: 7 }, + { id: 5, label: "More features", value: 5 }, + { id: 6, label: "Will purchase already", value: 5 }, + { id: 7, label: "Customization: style", value: 4 }, + { id: 8, label: "More components", value: 4 }, + { id: 9, label: "Customization: Behavior", value: 3 }, + { id: 10, label: "More components: charts", value: 3 }, + { id: 11, label: "More features: pivoting", value: 3 }, + { id: 12, label: "Polishment", value: 3 }, + { id: 13, label: "More examples or recipes", value: 2 }, + { id: 14, label: "Learning content", value: 2 }, + { id: 15, label: "Procurement", value: 2 } + /*{ id: 16, label: "Customization", value: 2 }, + { id: 17, label: "Documentation", value: 2 }, + { id: 18, label: "More features: data exports", value: 2 }, + { id: 19, label: "Headless api", value: 1 }, + { id: 20, label: "Mobile support", value: 1 }, + { id: 21, label: "Server-side integration", value: 1 }, + { id: 22, label: "Filtering ux", value: 1 }, + { id: 23, label: "Tools: streamline static site generation", value: 1 }, + { id: 24, label: "Easy migration", value: 1 }, + { id: 25, label: "Strong typing", value: 1 }*/ +]; + +export default function WhatChallengesMakeYouConsiderCommercialLicense() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/WhatCommunityIsBuilding.tsx b/docs/pages/blog/survey-charts/2024/WhatCommunityIsBuilding.tsx new file mode 100644 index 00000000000000..93e6a4bffe7333 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/WhatCommunityIsBuilding.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 1, label: "Enterprise product, e.g. ERPs, CRMs", value: 855 }, + { id: 2, label: "User-facing dashboard for a SaaS", value: 795 }, + { id: 3, label: "Internal tool (simple admin app)", value: 676 }, + { id: 4, label: "Landing/marketing pages", value: 407 }, + { id: 5, label: "Design system", value: 373 }, + { + id: 6, + label: "Data analysis/data treatment applications", + value: 369 + }, + { id: 7, label: "Mobile app", value: 323 }, + { id: 8, label: "Others", value: 134 } +]; + +const totalAnswers = 1899; + +export default function WhatCommunityIsBuilding() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/WhatOtherLibrariesDoYouUse.tsx b/docs/pages/blog/survey-charts/2024/WhatOtherLibrariesDoYouUse.tsx new file mode 100644 index 00000000000000..a982f682765672 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/WhatOtherLibrariesDoYouUse.tsx @@ -0,0 +1,149 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const otherLibraries = [ + { id: 1, label: "Bootstrap", value: 50 }, + { id: 2, label: "Tailwind", value: 43 }, + { id: 3, label: "Ant Design", value: 31 }, + { id: 4, label: "Chakra UI", value: 25 }, + { id: 5, label: "Mantine", value: 17 }, + { id: 6, label: "React Native frameworks", value: 10 }, + { id: 7, label: "Nivo", value: 6 }, + { id: 8, label: "Devextreme", value: 5 }, + { id: 9, label: "Vuetify", value: 4 }, + { id: 10, label: "In house solution", value: 4 } + /*{ id:11, label:'Fluentui', value:4}, +{ id:12, label:'Angular material', value:4}, +{ id:13, label:'Radix ui', value:4}, +{ id:14, label:'Formik', value:3}, +{ id:15, label:'Headless-ui', value:3}, +{ id:16, label:'Mapbox', value:3}, +{ id:17, label:'Framer motion', value:3}, +{ id:18, label:'Semanticui', value:3}, +{ id:19, label:'React hook form', value:3}, +{ id:20, label:'Material-table', value:2}, +{ id:21, label:'Styled components', value:2}, +{ id:22, label:'Ag grid', value:2}, +{ id:23, label:'Prime (faces', value:2}, +{ id:24, label:'Ng', value:2}, +{ id:25, label:'React)', value:2}, +{ id:26, label:'Baseweb', value:2}, +{ id:27, label:'React-spring', value:2}, +{ id:28, label:'Kendo react', value:2}, +{ id:29, label:'Extjs', value:2}, +{ id:30, label:'Visx', value:2}, +{ id:31, label:'Materializecss', value:1}, +{ id:32, label:'Dayjs', value:1}, +{ id:33, label:'Xamarin forms', value:1}, +{ id:34, label:'Wordpress', value:1}, +{ id:35, label:'Bulma', value:1}, +{ id:36, label:'Chart libraries', value:1}, +{ id:37, label:'Sweetalert', value:1}, +{ id:38, label:'Atlassian', value:1}, +{ id:39, label:'Groomet', value:1}, +{ id:40, label:'Theme-ui', value:1}, +{ id:41, label:'Mantine ui', value:1}, +{ id:42, label:'React-pdf', value:1}, +{ id:43, label:'React-datepicker', value:1}, +{ id:44, label:'Calcite', value:1}, +{ id:45, label:'React-select', value:1}, +{ id:46, label:'Mui x', value:1}, +{ id:47, label:'Element-ui', value:1}, +{ id:48, label:'Semantic ui', value:1}, +{ id:49, label:'Bryntum', value:1}, +{ id:50, label:'React-data-grid', value:1}, +{ id:51, label:'Amplify', value:1}, +{ id:52, label:'React dnd', value:1}, +{ id:53, label:'Virtuoso', value:1}, +{ id:54, label:'Element-plus', value:1}, +{ id:55, label:'React query', value:1}, +{ id:56, label:'React-charts', value:1}, +{ id:57, label:'React-beautiful-dnd', value:1}, +{ id:58, label:'Next ui', value:1}, +{ id:59, label:'Headless ui', value:1}, +{ id:60, label:'React-table', value:1}, +{ id:61, label:'React native elements', value:1}, +{ id:62, label:'Prime', value:1},*/ +]; + +const strongestPoints = [ + { id: 1, label: "Customization", value: 26 }, + { id: 2, label: "Easy to use", value: 16 }, + { id: 3, label: "Large portfolio of components / features", value: 14 }, + { id: 4, label: "Good looking", value: 13 }, + { id: 5, label: "Charts", value: 6 }, + { id: 6, label: "Enterprise needs", value: 6 }, + { id: 7, label: "Performance", value: 5 }, + { id: 8, label: "Documentation", value: 4 }, + { id: 9, label: "Animation", value: 3 }, + { id: 10, label: "Good for forms", value: 2 } + /*{ id: 11, label: "Audience is familiar", value: 2 }, + { id: 12, label: "Rich components", value: 2 }, + { id: 13, label: "Ux", value: 2 }, + { id: 14, label: "Fast development", value: 2 }, + { id: 15, label: "Consistency", value: 1 }, + { id: 16, label: "Extensible", value: 1 }, + { id: 17, label: "Bundle size", value: 1 }, + { id: 18, label: "Opt-in by default", value: 1 }, + { id: 19, label: "Large community", value: 1 }, + { id: 20, label: "Support", value: 1 }, + { id: 21, label: "Free", value: 1 }, + { id: 22, label: "Dx", value: 1 }, + { id: 23, label: "Open source", value: 1 }*/ +]; + +const weakPoints = [ + { id: 1, label: "Customization", value: 19 }, + { id: 2, label: "Poor documentation", value: 16 }, + { id: 3, label: "Lacking features", value: 11 }, + { id: 4, label: "Poor looking", value: 7 }, + { id: 5, label: "Not modern", value: 7 }, + { id: 6, label: "High entry barrier", value: 4 }, + { id: 7, label: "Less answers on the internet", value: 4 }, + { id: 8, label: "Clutter code", value: 3 }, + { id: 9, label: "Expensive to maintain", value: 3 }, + { id: 10, label: "Bloated style", value: 3 } + /*{ id: 11, label: "Css files", value: 3 }, + { id: 12, label: "Not great in react", value: 2 }, + { id: 13, label: "Standard looking", value: 2 }, + { id: 14, label: "Poor support", value: 2 }, + { id: 15, label: "Performance", value: 2 }, + { id: 16, label: "Accessibility", value: 1 }, + { id: 17, label: "Consistency", value: 1 }, + { id: 18, label: "Verbosity", value: 1 }, + { id: 19, label: "Hard to customize", value: 1 }, + { id: 20, label: "Architecture", value: 1 }, + { id: 21, label: "Typescript support", value: 1 }, + { id: 22, label: "Dx", value: 1 }, + { id: 23, label: "Missing updates", value: 1 }, + { id: 24, label: "Ux", value: 1 }, + { id: 25, label: "Friction on updates", value: 1 }, + { id: 26, label: "Documentation", value: 1 }*/ +]; + +export default function WhatOtherLibrariesDoYouUse() { + return ( + + +

Strongest points

+ +

Weak points

+ +
+ ); +} diff --git a/docs/pages/blog/survey-charts/2024/WhatStylingSolutions.tsx b/docs/pages/blog/survey-charts/2024/WhatStylingSolutions.tsx new file mode 100644 index 00000000000000..8c100b17e515df --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/WhatStylingSolutions.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "MUI System", value: 856 }, + { id: 1, label: "Styled components", value: 463 }, + { id: 2, label: "Emotion", value: 359 }, + { id: 3, label: "Vanilla CSS", value: 289 }, + { id: 4, label: "SASS", value: 251 }, + { id: 5, label: "CSS Modules", value: 231 }, + { id: 7, label: "Tailwind CSS", value: 223 }, + { id: 8, label: "JSS (legacy makeStyles, withStyles)", value: 197 }, + { id: 9, label: "Other", value: 27 } +]; + +export default function WhatStylingSolutions() { + return ; +} diff --git a/docs/pages/blog/survey-charts/2024/WhereAreCompaniesBased.tsx b/docs/pages/blog/survey-charts/2024/WhereAreCompaniesBased.tsx new file mode 100644 index 00000000000000..f111ac67bbbf83 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/WhereAreCompaniesBased.tsx @@ -0,0 +1,38 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 17, label: "United States", value: 257 }, + { id: 7, label: "India", value: 80 }, + { id: 6, label: "Germany", value: 73 }, + { id: 21, label: "Eastern Europe", value: 56 }, + { id: 2, label: "Canada", value: 50 }, + { id: 16, label: "United Kingdom", value: 50 }, + { id: 5, label: "France", value: 48 }, + { id: 19, label: "Asia", value: 48 }, + { id: 22, label: "Northern Europe", value: 41 }, + { id: 0, label: "Australia", value: 27 }, + { id: 25, label: "South America", value: 31 } + /*{ id: 31, label: "Others", value: 129 } + { id: 10, label: "Italy", value: 26 }, + { id: 12, label: "Netherlands", value: 25 }, + { id: 1, label: "Belgium", value: 7 }, + { id: 3, label: "China", value: 5 }, + { id: 4, label: "Finland", value: 12 }, + { id: 8, label: "Ireland", value: 2 }, + { id: 9, label: "Israel", value: 13 }, + { id: 11, label: "Japan", value: 12 }, + { id: 13, label: "Portugal", value: 12 }, + { id: 14, label: "South Korea", value: 5 }, + { id: 15, label: "Spain", value: 17 }, + { id: 18, label: "Africa", value: 19 }, + { id: 20, label: "Central America", value: 2 }, + { id: 23, label: "Middle East", value: 9 }, + { id: 24, label: "Oceania", value: 1 },*/ +]; + +export default function WhereAreCompaniesBased() { + return ( + + ); +} diff --git a/docs/pages/blog/survey-charts/2024/WhoCommunityBuildsFor.tsx b/docs/pages/blog/survey-charts/2024/WhoCommunityBuildsFor.tsx new file mode 100644 index 00000000000000..dddb0fcce2e7b6 --- /dev/null +++ b/docs/pages/blog/survey-charts/2024/WhoCommunityBuildsFor.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +import BasePercentageHorizontalBar from "./BasePercentageHorizontalBar"; + +const data = [ + { id: 0, label: "My company", value: 1243 }, + { id: 1, label: "A client of my company", value: 533 }, + { id: 2, label: "My hobby/side project", value: 507 }, + { id: 3, label: "My client", value: 332 }, + { id: 4, label: "Others", value: 35 } +]; +const total = 1896; + +export default function WhoCommunityBuildsFor() { + return ; +} diff --git a/docs/public/static/blog/developer-survey-impacts/1.png b/docs/public/static/blog/developer-survey-impacts/1.png new file mode 100644 index 00000000000000..57a3fa4c6ea1ec Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/1.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/10.png b/docs/public/static/blog/developer-survey-impacts/10.png new file mode 100644 index 00000000000000..fc9c97aaacd99c Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/10.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/11.png b/docs/public/static/blog/developer-survey-impacts/11.png new file mode 100644 index 00000000000000..873e6936575d2d Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/11.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/12.png b/docs/public/static/blog/developer-survey-impacts/12.png new file mode 100644 index 00000000000000..65830d86ca8d57 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/12.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/13.png b/docs/public/static/blog/developer-survey-impacts/13.png new file mode 100644 index 00000000000000..2300ca8bada967 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/13.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/14.png b/docs/public/static/blog/developer-survey-impacts/14.png new file mode 100644 index 00000000000000..acda5da6297cc1 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/14.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/15.png b/docs/public/static/blog/developer-survey-impacts/15.png new file mode 100644 index 00000000000000..10d81bd8f3c66a Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/15.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/16.png b/docs/public/static/blog/developer-survey-impacts/16.png new file mode 100644 index 00000000000000..15183bbb95e830 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/16.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/17.png b/docs/public/static/blog/developer-survey-impacts/17.png new file mode 100644 index 00000000000000..647ad4161bbeb0 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/17.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/18.png b/docs/public/static/blog/developer-survey-impacts/18.png new file mode 100644 index 00000000000000..74b64826b43e0c Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/18.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/19.1.png b/docs/public/static/blog/developer-survey-impacts/19.1.png new file mode 100644 index 00000000000000..03e6b3d6a074e9 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/19.1.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/19.2.png b/docs/public/static/blog/developer-survey-impacts/19.2.png new file mode 100644 index 00000000000000..2047bfeb753d45 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/19.2.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/19.3.png b/docs/public/static/blog/developer-survey-impacts/19.3.png new file mode 100644 index 00000000000000..594ee5a660f8f0 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/19.3.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/2.png b/docs/public/static/blog/developer-survey-impacts/2.png new file mode 100644 index 00000000000000..613ceb96ffa03f Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/2.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/20.png b/docs/public/static/blog/developer-survey-impacts/20.png new file mode 100644 index 00000000000000..b7be9f2888b26f Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/20.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/21.1.png b/docs/public/static/blog/developer-survey-impacts/21.1.png new file mode 100644 index 00000000000000..a29f85bd9ac9a7 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/21.1.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/21.2.png b/docs/public/static/blog/developer-survey-impacts/21.2.png new file mode 100644 index 00000000000000..c0e23c573ab621 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/21.2.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/22.1.png b/docs/public/static/blog/developer-survey-impacts/22.1.png new file mode 100644 index 00000000000000..b1131016b82327 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/22.1.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/22.2.png b/docs/public/static/blog/developer-survey-impacts/22.2.png new file mode 100644 index 00000000000000..0466031ee0d191 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/22.2.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/23.png b/docs/public/static/blog/developer-survey-impacts/23.png new file mode 100644 index 00000000000000..177a940d0e7082 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/23.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/24.png b/docs/public/static/blog/developer-survey-impacts/24.png new file mode 100644 index 00000000000000..994fe81370fc49 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/24.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/25.png b/docs/public/static/blog/developer-survey-impacts/25.png new file mode 100644 index 00000000000000..523c72c39588b1 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/25.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/26.png b/docs/public/static/blog/developer-survey-impacts/26.png new file mode 100644 index 00000000000000..7c3082db927492 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/26.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/27.png b/docs/public/static/blog/developer-survey-impacts/27.png new file mode 100644 index 00000000000000..ff60df775aaa7f Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/27.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/28.png b/docs/public/static/blog/developer-survey-impacts/28.png new file mode 100644 index 00000000000000..c9c7a0d64e14b9 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/28.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/29.png b/docs/public/static/blog/developer-survey-impacts/29.png new file mode 100644 index 00000000000000..d18a16ea12818d Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/29.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/3.png b/docs/public/static/blog/developer-survey-impacts/3.png new file mode 100644 index 00000000000000..6e525ca6371dbd Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/3.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/30.png b/docs/public/static/blog/developer-survey-impacts/30.png new file mode 100644 index 00000000000000..28a2c834729e7f Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/30.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/4.png b/docs/public/static/blog/developer-survey-impacts/4.png new file mode 100644 index 00000000000000..0fa5adb7228ef1 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/4.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/5.png b/docs/public/static/blog/developer-survey-impacts/5.png new file mode 100644 index 00000000000000..64108ad7019767 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/5.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/6.png b/docs/public/static/blog/developer-survey-impacts/6.png new file mode 100644 index 00000000000000..72915d615948a8 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/6.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/7.png b/docs/public/static/blog/developer-survey-impacts/7.png new file mode 100644 index 00000000000000..95a7fc77773879 Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/7.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/8.png b/docs/public/static/blog/developer-survey-impacts/8.png new file mode 100644 index 00000000000000..ff8e1843bb8e0f Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/8.png differ diff --git a/docs/public/static/blog/developer-survey-impacts/9.png b/docs/public/static/blog/developer-survey-impacts/9.png new file mode 100644 index 00000000000000..23d2d88a672a8e Binary files /dev/null and b/docs/public/static/blog/developer-survey-impacts/9.png differ diff --git a/docs/src/modules/components/TopLayoutSurvey.js b/docs/src/modules/components/TopLayoutSurvey.js new file mode 100644 index 00000000000000..7646cc271ddd41 --- /dev/null +++ b/docs/src/modules/components/TopLayoutSurvey.js @@ -0,0 +1,582 @@ +import * as React from 'react'; +import Demo from './Demo'; +import PropTypes from 'prop-types'; +import { styled, alpha } from '@mui/material/styles'; +import { useTheme } from '@mui/system'; +import { useRouter } from 'next/router'; +import { exactProp } from '@mui/utils'; +import { BarChart } from '@mui/x-charts/BarChart'; +import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; +import Divider from '@mui/material/Divider'; +import Typography from '@mui/material/Typography'; +import Avatar from '@mui/material/Avatar'; +import Head from 'docs/src/modules/components/Head'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import AppContainer from 'docs/src/modules/components/AppContainer'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; +import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement'; +import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; +import ROUTES from 'docs/src/route'; +import { Link } from '@mui/docs/Link'; + +export const authors = { + oliviertassinari: { + name: 'Olivier Tassinari', + avatar: 'https://avatars.githubusercontent.com/u/3165635', + github: 'oliviertassinari', + }, + mbrookes: { + name: 'Matt Brookes', + avatar: 'https://avatars.githubusercontent.com/u/357702', + github: 'mbrookes', + }, + eps1lon: { + name: 'Sebastian Silbermann', + avatar: 'https://avatars.githubusercontent.com/u/12292047', + github: 'eps1lon', + }, + mnajdova: { + name: 'Marija Najdova', + avatar: 'https://avatars.githubusercontent.com/u/4512430', + github: 'mnajdova', + }, + michaldudak: { + name: 'Michał Dudak', + avatar: 'https://avatars.githubusercontent.com/u/4696105', + github: 'michaldudak', + }, + siriwatknp: { + name: 'Siriwat Kunaporn', + avatar: 'https://avatars.githubusercontent.com/u/18292247', + github: 'siriwatknp', + }, + 'danilo-leal': { + name: 'Danilo Leal', + avatar: 'https://avatars.githubusercontent.com/u/67129314', + github: 'danilo-leal', + }, + m4theushw: { + name: 'Matheus Wichman', + avatar: 'https://avatars.githubusercontent.com/u/42154031', + github: 'm4theushw', + }, + flaviendelangle: { + name: 'Flavien Delangle', + avatar: 'https://avatars.githubusercontent.com/u/3309670', + github: 'flaviendelangle', + }, + DanailH: { + name: 'Danail Hadjiatanasov', + avatar: 'https://avatars.githubusercontent.com/u/5858539', + github: 'DanailH', + }, + alexfauquette: { + name: 'Alexandre Fauquette', + avatar: 'https://avatars.githubusercontent.com/u/45398769', + github: 'alexfauquette', + }, + samuelsycamore: { + name: 'Sam Sycamore', + avatar: 'https://avatars.githubusercontent.com/u/71297412', + github: 'samuelsycamore', + }, + josefreitas: { + name: 'José Freitas', + avatar: 'https://avatars.githubusercontent.com/u/550141', + github: 'joserodolfofreitas', + }, + cherniavskii: { + name: 'Andrew Cherniavskyi', + avatar: 'https://avatars.githubusercontent.com/u/13808724', + github: 'cherniavskii', + }, + mikailaread: { + name: 'Mikaila Read', + avatar: 'https://avatars.githubusercontent.com/u/76401606', + github: 'mikailaread', + }, + prakhargupta: { + name: 'Prakhar Gupta', + avatar: 'https://avatars.githubusercontent.com/u/92228082', + github: 'prakhargupta1', + }, + richbustos: { + name: 'Rich Bustos', + avatar: 'https://avatars.githubusercontent.com/u/92274722', + github: 'richbustos', + }, + colmtuite: { + name: 'Colm Tuite', + avatar: 'https://avatars.githubusercontent.com/u/805073', + github: 'colmtuite', + }, + diegoandai: { + name: 'Diego Andai', + avatar: 'https://avatars.githubusercontent.com/u/16889233', + github: 'DiegoAndai', + }, + DavidCnoops: { + name: 'David Cnoops', + avatar: 'https://avatars.githubusercontent.com/u/28001064', + github: 'DavidCnoops', + }, + brijeshb42: { + name: 'Brijesh Bittu', + avatar: 'https://avatars.githubusercontent.com/u/717550?', + github: 'brijeshb42', + }, + aarongarciah: { + name: 'Aarón García', + avatar: 'https://avatars.githubusercontent.com/u/7225802?', + github: 'aarongarciah', + }, + zanivan: { + name: 'Victor Zanivan Monteiro', + avatar: 'https://avatars.githubusercontent.com/u/37222944?', + github: 'zanivan', + }, + romgrk: { + name: 'Romain Gregoire', + avatar: 'https://avatars.githubusercontent.com/u/1423607', + github: 'romgrk', + }, +}; + +const classes = { + back: 'TopLayoutBlog-back', + time: 'TopLayoutBlog-time', + container: 'TopLayoutBlog-container', +}; + +// Replicate the value used by https://medium.com/, a trusted reference. +const BLOG_MAX_WIDTH = 692; + +const AuthorsContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexWrap: 'wrap', + marginBottom: theme.spacing(2), + '& .author': { + display: 'flex', + alignItems: 'center', + paddingBottom: theme.spacing(2), + paddingRight: theme.spacing(3), + '& .MuiAvatar-root': { + marginRight: theme.spacing(1), + }, + }, +})); + +const Root = styled('div')( + ({ theme }) => ({ + flexGrow: 1, + background: `linear-gradient(180deg, ${ + (theme.vars || theme).palette.grey[50] + } 0%, #FFFFFF 100%)`, + backgroundSize: '100% 500px', + backgroundRepeat: 'no-repeat', + [`& .${classes.back}`]: { + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(2), + marginLeft: theme.spacing(-1), + }, + [`& .${classes.container}`]: { + paddingTop: 60 + 20, + marginBottom: theme.spacing(12), + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(2 * 2)})`, + [theme.breakpoints.up('md')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(3 * 2)})`, + }, + [theme.breakpoints.up('lg')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(8 * 2)})`, + }, + '& h1': { + marginBottom: theme.spacing(3), + }, + }, + '& .markdown-body': { + lineHeight: 1.7, + '& img, & video': { + border: '1px solid', + // Avoid border to change inline style width properties + boxSizing: 'content-box', + borderColor: (theme.vars || theme).palette.grey[200], + borderRadius: 8, + display: 'block', + margin: 'auto', + marginBottom: 16, + }, + '& figure': { + margin: 0, + padding: 0, + marginBottom: 16, + '& img, & video': { + marginBottom: 8, + }, + }, + '& figcaption': { + color: (theme.vars || theme).palette.text.tertiary, + fontSize: theme.typography.pxToRem(14), + textAlign: 'center', + }, + '& strong': { + color: (theme.vars || theme).palette.grey[900], + }, + '& summary': { + padding: 8, + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightMedium, + color: (theme.vars || theme).palette.grey[900], + }, + '& details': { + paddingLeft: 16, + paddingRight: 16, + background: alpha(theme.palette.grey[50], 0.5), + border: '1px solid', + borderRadius: 10, + borderColor: (theme.vars || theme).palette.grey[200], + transitionProperty: 'all', + transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '200ms', + '&:hover, &:focus-visible': { + background: (theme.vars || theme).palette.grey[50], + borderColor: (theme.vars || theme).palette.grey[300], + }, + }, + '& th': { + width: '100%', + textAlign: 'left', + borderBottom: `3px solid rgba(62, 80, 96, 0.2) !important`, + }, + '& .blog-description': { + fontSize: theme.typography.pxToRem(13), + marginTop: 8, + textAlign: 'center', + color: (theme.vars || theme).palette.grey[700], + '& a': { + color: 'inherit', + textDecoration: 'underline', + }, + }, + '& .MuiCode-root + .blog-description': { + marginTop: -20 + 8, + }, + }, + [`& .${classes.time}`]: { + color: (theme.vars || theme).palette.text.secondary, + ...theme.typography.caption, + fontWeight: 500, + }, + }), + ({ theme }) => + theme.applyDarkStyles({ + background: `linear-gradient(180deg, ${alpha(theme.palette.primary[900], 0.2)} 0%, ${ + (theme.vars || theme).palette.primaryDark[900] + } 100%)`, + backgroundSize: '100% 1000px', + backgroundRepeat: 'no-repeat', + '& .markdown-body': { + '& strong': { + color: (theme.vars || theme).palette.grey[100], + }, + '& summary': { + color: (theme.vars || theme).palette.grey[300], + }, + '& img, & video': { + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + }, + '& details': { + background: alpha(theme.palette.primary[900], 0.3), + borderColor: (theme.vars || theme).palette.primaryDark[700], + '&:hover, &:focus-visible': { + background: alpha(theme.palette.primary[900], 0.4), + borderColor: (theme.vars || theme).palette.primaryDark[500], + }, + }, + '& .blog-description': { + color: (theme.vars || theme).palette.grey[500], + }, + }, + }), +); + +export default function TopLayoutSurvey(props) { + const theme = useTheme(); + const { className, docs, demos, demoComponents, srcComponents } = props; + const { description, rendered, title, headers } = docs.en; + const finalTitle = title || headers.title; + const router = useRouter(); + const slug = router.pathname.replace(/(.*)\/(.*)/, '$2'); + const { canonicalAsServer } = pathnameToLanguage(router.asPath); + const card = + headers.manualCard === 'true' + ? `/static/blog/${slug}/card.png` + : `/edge-functions/og-image/?title=${headers.cardTitle || finalTitle}&authors=${headers.authors + .map((author) => { + const { github, name } = authors[author]; + return `${name} @${github}`; + }) + .join(',')}&product=Blog`; + + if (process.env.NODE_ENV !== 'production') { + if (headers.manualCard === undefined) { + throw new Error( + [ + `MUI: the "manualCard" markdown header for the blog post "${slug}" is missing.`, + `Set manualCard: true or manualCard: false header in docs/pages/blog/${slug}.md.`, + ].join('\n'), + ); + } + } + + const splitMarkdownIntoSubChunks = (markdown) => { + // Regex to match chart placeholders like {{chart: ...}} + const placeholderRegex = /

\{\{"chart":\s*"([^&]+)"\}\}<\/p>/g; + + const chunks = []; + let lastIndex = 0; + + markdown.replace(placeholderRegex, (match, chartPath, offset) => { + if (offset > lastIndex) { + chunks.push(markdown.slice(lastIndex, offset)); + } + chunks.push({ chart: chartPath }); + lastIndex = offset + match.length; + }); + + if (lastIndex < markdown.length) { + chunks.push(markdown.slice(lastIndex)); + } + + return chunks; + }; + + const renderContent = (chunk, index) => { + if (typeof chunk === 'string') { + const matchMarkdownChunk = chunk.match(/

\{\{"chart":\s*"([^&]+)"\}\}<\/p>/); + + if (matchMarkdownChunk) { + const subChunks = splitMarkdownIntoSubChunks(chunk); + return subChunks.map((subChunk, subIndex) => { + if (typeof subChunk === 'string') { + return ( + + ); + } + + if (subChunk.chart) { + // Render chart component + console.log('Rendering chart sub-chunk:', subChunk.chart); + + const relativePath = subChunk.chart; + let LoadedComponent; + + try { + LoadedComponent = require(`docs/pages/blog/survey-charts/${relativePath}.jsx`).default; + } catch (error) { + try { + LoadedComponent = require(`docs/pages/blog/survey-charts/${relativePath}.tsx`).default; + } catch (innerError) { + console.error(`Failed to load chart: ${relativePath}`, innerError); + return ( +

+ ⚠️ Chart not found: {relativePath} ⚠️ +
+ ); + } + } + + return ( + + + + ); + } + + console.warn('Unknown sub-chunk type:', subChunk); + return null; // Skip rendering for unrecognized sub-chunks + }); + } + + // Render RichMarkdownElement for unmatched content + return ( + + ); + } + + console.warn('Non-string or object demo chunk encountered:', chunk); + return null; // Skip rendering for non-string chunks + }; + + return ( + + + + authors[key].name).join(', ')} /> + +