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/* ================= HELPER ================= */15function getExpGroup(yearsStr) {16  if (!yearsStr) return null;17  const match = yearsStr.match(/(\d+)/);18  if (!match) return null;19  const y = parseInt(match[1]);20  if (y <= 2) return "0-2 years";21  if (y <= 5) return "3-5 years";22  if (y <= 10) return "6-10 years";23  if (y <= 20) return "11-20 years";24  return "20+ years";25}26 27/* ================= MAIN COMPONENT ================= */28export default function ExperienceVsAIUsageChart({ rows = [] }) {29  const chartData = useMemo(() => {30    if (!Array.isArray(rows)) return [];31 32    const groups = {33      "0-2 years": { yes: 0, no: 0 },34      "3-5 years": { yes: 0, no: 0 },35      "6-10 years": { yes: 0, no: 0 },36      "11-20 years": { yes: 0, no: 0 },37      "20+ years": { yes: 0, no: 0 },38    };39 40    rows.forEach((row) => {41      const exp = row.YearsCode;42      const ai = row.AISelect;43      if (!exp || !ai || ai === "NA") return;44 45      const group = getExpGroup(exp);46      if (!group || !groups[group]) return;47 48      // "Yes" usually indicates usage in SO survey49      if (ai.includes("Yes")) {50        groups[group].yes += 1;51      } else {52        groups[group].no += 1;53      }54    });55 56    return Object.entries(groups).map(([name, counts]) => {57      const total = counts.yes + counts.no;58      return {59        name,60        "Using AI": total ? (counts.yes / total) * 100 : 0,61        "Not Using AI": total ? (counts.no / total) * 100 : 0,62        rawTotal: total,63      };64    });65  }, [rows]);66 67  if (!chartData.length) {68    return (69      <ChartCard70        title="Experience vs AI Usage"71        subtitle="Adoption across seniority"72      >73        <p className="small">No data available.</p>74      </ChartCard>75    );76  }77 78  return (79    <ChartCard80      title="Experience vs AI Usage"81      subtitle="Adoption across seniority (%)"82    >83      <ResponsiveContainer width="100%" height={400}>84        <BarChart85          data={chartData}86          margin={{ top: 20, right: 30, left: 20, bottom: 20 }}87        >88          <CartesianGrid strokeDasharray="3 3" />89          <XAxis dataKey="name" tick={{ fontSize: 12 }} />90          <YAxis unit="%" />91          <Tooltip92            formatter={(value) => `${value.toFixed(1)}%`}93            labelStyle={{ color: "#000" }}94          />95          <Legend />96          <Bar dataKey="Using AI" fill="#8b5cf6" radius={[4, 4, 0, 0]} />97          <Bar dataKey="Not Using AI" fill="#cbd5e1" radius={[4, 4, 0, 0]} />98        </BarChart>99      </ResponsiveContainer>100      <div style={{ marginTop: 12 }}>101        <strong>Key Insights</strong>102        <ul style={{ marginTop: 8, paddingLeft: 18 }}>103          <li>104            <strong>Junior developers (0-2 years)</strong> have an AI usage rate105            of <strong>81.8%</strong>, while those with{" "}106            <strong>3-5 years</strong> experience show the highest adoption at{" "}107            <strong>85.5%</strong>.108          </li>109          <li>110            <strong>Mid-level developers (6-10 years)</strong> maintain strong111            usage at <strong>82.5%</strong>, followed by{" "}112            <strong>11-20 years</strong> at <strong>79.2%</strong>.113          </li>114          <li>115            <strong>Senior developers (20+ years)</strong> show the lowest116            adoption at <strong>72.2%</strong>, though still a significant117            majority.118          </li>119        </ul>120      </div>121    </ChartCard>122  );123}124