Replace img charts with x charts components (DRAFT)

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 <TopLayoutSurvey docs={docs} />;
+}

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 (
+    <BarChart
+      series={[
+        { data: [35, 44, 24, 34] },
+        { data: [51, 6, 49, 30] },
+        { data: [15, 25, 30, 50] },
+        { data: [60, 50, 15, 25] },
+      ]}
+      height={290}
+      xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
+      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
+    />
+  );
+}

docs/pages/blog/survey-charts/2024/BaseHorizontalBar.tsx

@@ -0,0 +1,32 @@
+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 (
+    <BarChart
+      xAxis={[{ scaleType: "band", data: dataX }]}
+      series={[{ data: dataY }]}
+      width={500}
+      height={500}
+    />
+  );
+}
+
+export default function BaseHorizontalBar(props) {
+  const { data } = props;
+  return <XBar data={data} />;
+}

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 (
+    <BarChart
+      xAxis={[{ scaleType: "band", data: dataX }]}
+      series={[{ data: dataY }]}
+      width={500}
+      height={500}
+    />
+  );
+}
+
+
+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 <XBar data={dataWithPercentage} />;
+}

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 (
+    <PieChart
+      margin={margin}
+
+      series={[
+        {
+          data: data,
+          arcLabel: getArcLabel,
+          paddingAngle: 2,
+          cornerRadius: 6,
+          innerRadius: 70,
+          startAngle: startAngle,
+          endAngle: endAngle
+        }
+      ]}
+      sx={{
+        [`& .${pieArcLabelClasses.root}`]: {
+          fill: "white",
+          fontSize: 16,
+          fontWeight: 400,
+          fontFamily: "Montserrat",
+          pointerEvents: "none"
+        },
+        "--ChartsLegend-rootOffsetX": "25px",
+        "--ChartsLegend-rootOffsetY": "-380px"
+      }}
+      legend={legend}
+      width={600}
+      height={500}
+    />
+  );
+}

docs/pages/blog/survey-charts/2024/BaseStackedHorizontalBar.tsx

@@ -0,0 +1,28 @@
+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 } = props;
+  const dataX = data.map((d) => d.label);
+  const dataY = data.map((d) => d.value);
+
+  return (
+    <BarChart
+      xAxis={[{ scaleType: "band", data: dataX }]}
+      series={[{ data: dataY }]}
+      width={500}
+      height={500}
+    />
+  );
+}

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 (
+    <React.Fragment>
+      <h2>MIT</h2>
+      <BasePercentageHorizontalBar
+        total={323}
+        yAxisWidth={170}
+        formattedData
+        data={mitData}
+      />
+      <h2>Commercial</h2>
+      <BasePercentageHorizontalBar
+        total={239}
+        yAxisWidth={170}
+        data={commercialData}
+        formattedData
+        height={900}
+      />
+    </React.Fragment>
+  );
+}

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 (
+    <BasePercentageHorizontalBar
+      total={826}
+      yAxisWidth={140}
+      height={800}
+      minLabelValue={4}
+      data={data}
+    />
+  );
+}

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 <BasePie data={data} angle={160} />;
+}

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 <BasePie data={data} angle={130} />;
+}