Survey impacts report

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_test.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,85 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+// 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;
+// }
+
+interface DataItem {
+  label: string;
+  value: number;
+}
+
+function XBar(props: { data: DataItem[]; margin?: Object; height?: number; total?: number }) {
+  const data = props.data || []; // Fallback to an empty array
+  const dataX = Array.isArray(data) ? data.map((d) => d.label) : [];
+  const dataY = Array.isArray(data) ? data.map((d) => d.value) : [];
+
+  const TOTAL = props.total;
+  const margin = props.margin || { top: 5, right: 10, bottom: 80, left: 150 };
+  const height = props.height || 400;
+
+  // ---- Add truncation logic ----
+  const MAX_LABEL_LENGTH = 20; // Adjust as needed
+
+  const truncateLabel = (label: string) => {
+    if (label.length > MAX_LABEL_LENGTH) {
+      return `${label.substring(0, MAX_LABEL_LENGTH)}...`;
+    }
+    return label;
+  };
+  // -----------------------------
+
+  return (
+    <Box sx={{ width: '100%', position: 'relative', textAlign: 'center' }}>
+      <BarChart
+        yAxis={[
+          {
+            scaleType: 'band',
+            data: dataX, // Use original labels
+            tickPlacement: 'middle',
+            // Add axis valueFormatter with conditional logic
+            valueFormatter: (label, context) =>
+              context.location === 'tick'
+                ? truncateLabel(label) // Truncated for axis tick
+                : label, // Full label for tooltip header
+          },
+        ]}
+        series={[{ data: dataY }]}
+        height={height}
+        margin={margin}
+        layout="horizontal"
+      />
+      <Box sx={{ position: 'absolute', bottom: 10, width: '100%', fontSize: 14 }}>
+        <Typography
+          sx={(theme) => ({
+            fontSize: theme.typography.pxToRem(13),
+            marginTop: 8,
+            textAlign: 'center',
+            color: (theme.vars || theme).palette.grey[700],
+            '& a': {
+              color: 'inherit',
+              textDecoration: 'underline',
+            },
+          })}
+        >
+          {TOTAL} respondents.
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+export default function BaseHorizontalBar(props: { data: DataItem[]; total?: number }) {
+  const { data = [], total } = props; // Provide a default empty array for data
+  return <XBar data={data} total={total} />;
+}

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

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+// import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+
+// 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;
+// }
+
+interface DataItem {
+  label: string;
+  value: number;
+}
+
+interface ExtendedDataItem extends DataItem {
+  originalValue: number;
+  total: number;
+}
+
+function XBar(props: { data: ExtendedDataItem[]; margin?: Object; height?: number }) {
+  const data = props.data || [];
+  const dataY = data.map((d) => d.label);
+  const dataX = data.map((d) => d.value);
+
+  const TOTAL = props.data.length > 0 ? props.data[0].total : 0;
+
+  const margin = props.margin || { top: 5, right: 10, bottom: 80, left: 150 };
+  const height = props.height || 400;
+
+  const MAX_LABEL_LENGTH = 20; // Adjust as needed
+
+  const truncateLabel = (label: string) => {
+    if (label.length > MAX_LABEL_LENGTH) {
+      return `${label.substring(0, MAX_LABEL_LENGTH)}...`;
+    }
+    return label;
+  };
+
+  return (
+    <Box sx={{ width: '100%', position: 'relative', textAlign: 'center' }}>
+      <BarChart
+        margin={margin}
+        height={height}
+        yAxis={[
+          {
+            scaleType: 'band',
+            data: dataY,
+            tickPlacement: 'middle',
+            valueFormatter: (label, context) =>
+              context.location === 'tick' ? truncateLabel(label) : label,
+          },
+        ]}
+        series={[
+          {
+            type: 'bar',
+            data: dataX,
+            valueFormatter: (value, context) => {
+              const dataIndex = context.dataIndex;
+              if (dataIndex === undefined || dataIndex < 0 || dataIndex >= props.data.length) {
+                return '';
+              }
+              const originalItem = props.data[dataIndex];
+              return `${originalItem.value.toFixed(2)}% (${originalItem.originalValue} respondents)`;
+            },
+          },
+        ]}
+        layout="horizontal"
+      />
+      <Box sx={{ position: 'absolute', bottom: 10, width: '100%', fontSize: 14 }}>
+        <Typography
+          sx={(theme) => ({
+            fontSize: theme.typography.pxToRem(13),
+            marginTop: 8,
+            textAlign: 'center',
+            color: (theme.vars || theme).palette.grey[700],
+            '& a': {
+              color: 'inherit',
+              textDecoration: 'underline',
+            },
+          })}
+        >
+          {TOTAL} respondents.
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+export default function BasePercentageHorizontalBar(props: { data: DataItem[]; total: number }) {
+  const { data, total } = props;
+
+  const dataWithPercentage = (data || []).map((d) => ({
+    ...d,
+    value: parseFloat(((d.value / total) * 100).toFixed(2)),
+    originalValue: d.value,
+    total: props.total,
+  }));
+
+  return <XBar data={dataWithPercentage} />;
+}

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
+import Box from '@mui/material/Box';
+import { DefaultizedPieValueType } from '@mui/x-charts/models';
+import type { ChartsLegendProps } from '@mui/x-charts/ChartsLegend';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+
+interface DataItem {
+  label: string;
+  value: number;
+}
+
+export default function BasePie(props: {
+  data: DataItem[];
+  angle?: number;
+  margin?: Object;
+  legend?: Partial<ChartsLegendProps>;
+  height?: number;
+}) {
+  const theme = useTheme();
+  const data = props.data || [];
+
+  const margin = props.margin || { right: 260, bottom: 10, top: 10 };
+  const height = props.height || 400;
+  const legend = props.legend
+    ? props.legend
+    : ({
+        direction: 'column',
+        position: {
+          vertical: 'middle',
+          horizontal: 'right',
+        },
+        labelStyle: {
+          fontSize: 14,
+          fill: theme.palette.text.secondary,
+          fontWeight: 'light',
+        },
+      } as Partial<ChartsLegendProps>);
+
+  const TOTAL = Array.isArray(data) ? data.map((item) => item.value).reduce((a, b) => a + b, 0) : 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;
+
+  return (
+    <Box sx={{ width: '100%', position: 'relative', textAlign: 'center' }}>
+      <PieChart
+        margin={margin}
+        height={height}
+        series={[
+          {
+            data,
+            arcLabel: getArcLabel,
+            paddingAngle: 2,
+            cornerRadius: 6,
+            innerRadius: 70,
+            outerRadius: 150,
+            startAngle,
+            endAngle,
+          },
+        ]}
+        sx={{
+          [`& .${pieArcLabelClasses.root}`]: () => ({
+            fill: 'white',
+            fontSize: theme.typography.pxToRem(16),
+            fontWeight: 400,
+            pointerEvents: 'none',
+          }),
+          '--ChartsLegend-rootOffsetX': '25px',
+          '--ChartsLegend-rootOffsetY': '-380px',
+        }}
+        slotProps={{
+          legend: { ...legend },
+        }}
+      />
+      <Box sx={{ position: 'absolute', bottom: 10, width: '100%', fontSize: 14 }}>
+        <Typography
+          sx={() => ({
+            fontSize: theme.typography.pxToRem(13),
+            marginTop: 8,
+            textAlign: 'center',
+            color: (theme.vars || theme).palette.grey[700],
+            '& a': {
+              color: 'inherit',
+              textDecoration: 'underline',
+            },
+          })}
+        >
+          {TOTAL} respondents.
+        </Typography>
+      </Box>
+    </Box>
+  );
+}