harshapitla/stackoverflow

1import React, { useMemo } from "react";2import {3  ResponsiveContainer,4  BarChart,5  Bar,6  XAxis,7  YAxis,8  CartesianGrid,9  Tooltip,10  Legend,11} from "recharts";12import ChartCard from "../components/charts/ChartCard";13 14/* ================= CUSTOM TOOLTIP ================= */15function CustomTooltip({ active, payload }) {16  if (active && payload && payload.length) {17    const d = payload[0];18    return (19      <div20        style={{21          background: "#ffffff",22          padding: "10px 14px",23          borderRadius: 6,24          border: "1px solid #cbd5e1",25          color: "#0f172a",26        }}27      >28        <strong>{d.payload.educationLevel}</strong>29        <div style={{ marginTop: 6 }}>30          Developers: {d.value.toLocaleString()}31        </div>32        <div>Percentage: {d.payload.percentage.toFixed(1)}%</div>33      </div>34    );35  }36  return null;37}38 39/* ================= MAIN COMPONENT ================= */40export default function EducationLevelBarChart({ rows = [] }) {41  const chartData = useMemo(() => {42    if (!Array.isArray(rows) || rows.length === 0) return [];43 44    const educationMap = {};45    let totalResponses = 0;46 47    rows.forEach((row) => {48      const level = row.EdLevel;49      if (!level || level === "NA") return;50 51      totalResponses++;52 53      educationMap[level] = (educationMap[level] || 0) + 1;54    });55 56    return Object.entries(educationMap)57      .map(([educationLevel, count]) => ({58        educationLevel,59        value: count,60        percentage: (count / totalResponses) * 100,61      }))62      .sort((a, b) => b.value - a.value);63  }, [rows]);64 65  if (!chartData.length) {66    return (67      <ChartCard68        title="Education Level Breakdown"69        subtitle="Academic background of developers"70      >71        <p className="small">No education data available.</p>72      </ChartCard>73    );74  }75 76  return (77    <ChartCard78      title="Education Level Breakdown"79      subtitle="Academic background of developers"80    >81      <ResponsiveContainer width="100%" height={500}>82        <BarChart83          data={chartData}84          layout="vertical"85          margin={{ top: 20, right: 40, left: 260, bottom: 20 }}86        >87          <CartesianGrid strokeDasharray="3 3" />88 89          <XAxis type="number" tickFormatter={(v) => v.toLocaleString()} />90 91          <YAxis92            type="category"93            dataKey="educationLevel"94            width={260}95            tick={{ fontSize: 12, fill: "#475569" }}96          />97 98          <Tooltip content={<CustomTooltip />} />99          <Legend />100 101          <Bar102            dataKey="value"103            name="Developers"104            fill="#4f46e5"105            radius={[0, 8, 8, 0]}106          />107        </BarChart>108      </ResponsiveContainer>109 110      {/* ================= INSIGHTS ================= */}111      <div style={{ marginTop: 18 }}>112        <strong>Key Insights</strong>113        <ul style={{ marginTop: 8, paddingLeft: 18 }}>114          <li>115            A clear majority of developers116            <strong>117              {" "}118              entered the workforce directly after completing a Bachelor's119              degree120            </strong>121            , accounting for approximately122            <strong> 20,000 developers (42%)</strong>.123          </li>124          <li>125            Developers with a126            <strong> Master's degree form the next largest group</strong>,127            showing continued importance of higher education.128          </li>129          <li>130            A significant number of developers131            <strong> entered the industry without a formal degree</strong>,132            highlighting the effectiveness of self-learning and alternative133            paths.134          </li>135          <li>136            Overall, the data indicates that137            <strong>138              {" "}139              undergraduate education is sufficient for early career entry140            </strong>141            in the software industry.142          </li>143        </ul>144      </div>145    </ChartCard>146  );147}148