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/* ================= COLORS ================= */15const COLORS = ["#4f46e5"];16 17/* ================= CUSTOM TOOLTIP ================= */18function CustomTooltip({ active, payload }) {19  if (active && payload && payload.length) {20    const d = payload[0];21    return (22      <div23        style={{24          background: "#ffffff",25          padding: "10px 14px",26          borderRadius: 6,27          border: "1px solid #cbd5e1",28          color: "#0f172a",29        }}30      >31        <strong>{d.payload.language}</strong>32        <div style={{ marginTop: 6 }}>33          Developers: {d.value.toLocaleString()}34        </div>35        <div>Percentage: {d.payload.percentage.toFixed(1)}%</div>36      </div>37    );38  }39  return null;40}41 42/* ================= MAIN COMPONENT ================= */43export default function MostUsedLanguagesChart({ rows = [] }) {44  const chartData = useMemo(() => {45    if (!Array.isArray(rows) || rows.length === 0) return [];46 47    const languageCount = {};48    let totalResponses = 0;49 50    rows.forEach((row) => {51      const languages = row.LanguageHaveWorkedWith;52 53      if (!languages || languages === "NA") return;54 55      totalResponses++;56 57      languages58        .split(";")59        .map((l) => l.trim())60        .forEach((language) => {61          languageCount[language] = (languageCount[language] || 0) + 1;62        });63    });64 65    return Object.entries(languageCount)66      .map(([language, count]) => ({67        language,68        value: count,69        percentage: (count / totalResponses) * 100,70      }))71      .sort((a, b) => b.value - a.value)72      .slice(0, 10);73  }, [rows]);74 75  if (!chartData.length) {76    return (77      <ChartCard78        title="Most Used Programming Languages"79        subtitle="Technology popularity"80      >81        <p className="small">No programming language data available.</p>82      </ChartCard>83    );84  }85 86  return (87    <ChartCard88      title="Most Used Programming Languages"89      subtitle="Technology popularity"90    >91      <ResponsiveContainer width="100%" height={500}>92        <BarChart93          data={chartData}94          layout="vertical"95          margin={{ top: 20, right: 40, left: 120, bottom: 20 }}96        >97          <CartesianGrid strokeDasharray="3 3" />98 99          <XAxis type="number" tickFormatter={(v) => v.toLocaleString()} />100 101          <YAxis type="category" dataKey="language" width={120} />102 103          <Tooltip content={<CustomTooltip />} />104          <Legend />105 106          <Bar107            dataKey="value"108            name="Developers"109            fill={COLORS[0]}110            radius={[0, 8, 8, 0]}111          />112        </BarChart>113      </ResponsiveContainer>114      {/* ================= INSIGHTS ================= */}115      <div style={{ marginTop: 18 }}>116        <strong>Key Insights</strong>117        <ul style={{ marginTop: 8, paddingLeft: 18 }}>118          <li>119            <strong>JavaScript dominates</strong> with approximately 21,000120            developers, representing about 66% of the developer population.121          </li>122          <li>123            <strong>HTML/CSS and SQL follow closely</strong>, each with around124            significant usage in web development and backend systems.125          </li>126          <li>127            <strong>Python rounds out the top 3</strong> with strong presence in128            data science and automation domains.129          </li>130          <li>131            Language popularity reflects ecosystem maturity and job demand.132          </li>133        </ul>134      </div>135      ;136    </ChartCard>137  );138}139