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.role}</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 DeveloperRolesChart({ rows = [] }) {41  const chartData = useMemo(() => {42    if (!Array.isArray(rows) || rows.length === 0) return [];43 44    const roleCount = {};45    let totalResponses = 0;46 47    rows.forEach((row) => {48      const devTypes = row.DevType;49      if (!devTypes || devTypes === "NA") return;50 51      totalResponses++;52 53      devTypes54        .split(";")55        .map((r) => r.trim())56        .forEach((role) => {57          roleCount[role] = (roleCount[role] || 0) + 1;58        });59    });60 61    return Object.entries(roleCount)62      .map(([role, count]) => ({63        role,64        value: count,65        percentage: (count / totalResponses) * 100,66      }))67      .sort((a, b) => b.value - a.value)68      .slice(0, 10); // Top 10 roles69  }, [rows]);70 71  if (!chartData.length) {72    return (73      <ChartCard74        title="Developer Roles Distribution"75        subtitle="Demand across roles (Frontend, Backend, Data, DevOps)"76      >77        <p className="small">No developer role data available.</p>78      </ChartCard>79    );80  }81 82  return (83    <ChartCard84      title="Developer Roles Distribution"85      subtitle="Demand across roles (Frontend, Backend, Data, DevOps)"86    >87      <ResponsiveContainer width="100%" height={520}>88        <BarChart89          data={chartData}90          layout="vertical"91          margin={{ top: 20, right: 40, left: 260, bottom: 20 }}92        >93          <CartesianGrid strokeDasharray="3 3" />94 95          <XAxis type="number" tickFormatter={(v) => v.toLocaleString()} />96 97          <YAxis98            type="category"99            dataKey="role"100            width={260}101            tick={{ fontSize: 12, fill: "#475569" }}102          />103 104          <Tooltip content={<CustomTooltip />} />105          <Legend />106 107          <Bar108            dataKey="value"109            name="Developers"110            fill="#4f46e5"111            radius={[0, 8, 8, 0]}112          />113        </BarChart>114      </ResponsiveContainer>115 116      {/* ================= INSIGHTS ================= */}117      <div style={{ marginTop: 18 }}>118        <strong>Key Insights</strong>119        <ul style={{ marginTop: 8, paddingLeft: 18 }}>120          <li>121            <strong>Full-stack developers form the largest role group</strong>,122            reflecting industry preference for engineers who can work across123            both frontend and backend layers.124          </li>125          <li>126            <strong>Backend developers rank second </strong>, highlighting127            strong demand for server-side logic, databases, and APIs.128          </li>129 130          <li>131            <strong>Data-focused roles</strong> show strong presence, indicating132            growing importance of data engineering, analytics, and AI-driven133            systems.134          </li>135        </ul>136      </div>137    </ChartCard>138  );139}140