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 14export default function LanguagesUsedVsAdmiredChart({ rows = [] }) {15  const chartData = useMemo(() => {16    if (!Array.isArray(rows)) return [];17 18    const counts = {};19 20    rows.forEach((row) => {21      const have = row.LanguageHaveWorkedWith;22      const want = row.LanguageWantToWorkWith; // "Admired" usually maps to WantToWorkWith23 24      if (have && have !== "NA") {25        have.split(";").forEach((l) => {26          const lang = l.trim();27          if (!counts[lang]) counts[lang] = { name: lang, Used: 0, Admired: 0 };28          counts[lang].Used += 1;29        });30      }31 32      if (want && want !== "NA") {33        want.split(";").forEach((l) => {34          const lang = l.trim();35          if (!counts[lang]) counts[lang] = { name: lang, Used: 0, Admired: 0 };36          counts[lang].Admired += 1;37        });38      }39    });40 41    return Object.values(counts)42      .sort((a, b) => b.Used - a.Used)43      .slice(0, 10); // Top 1044  }, [rows]);45 46  if (!chartData.length) {47    return (48      <ChartCard49        title="Languages: Used vs Admired"50        subtitle="Current usage vs Future interest"51      >52        <p className="small">No language data available.</p>53      </ChartCard>54    );55  }56 57  return (58    <ChartCard59      title="Languages: Used vs Admired"60      subtitle="Current usage vs Future interest"61    >62      <ResponsiveContainer width="100%" height={500}>63        <BarChart64          data={chartData}65          layout="vertical"66          margin={{ top: 20, right: 30, left: 100, bottom: 20 }}67        >68          <CartesianGrid strokeDasharray="3 3" />69          <XAxis type="number" />70          <YAxis71            type="category"72            dataKey="name"73            width={100}74            tick={{ fontSize: 11 }}75          />76          <Tooltip />77          <Legend />78          <Bar dataKey="Used" fill="#64748b" radius={[0, 4, 4, 0]} />79          <Bar dataKey="Admired" fill="#ec4899" radius={[0, 4, 4, 0]} />80        </BarChart>81      </ResponsiveContainer>82      <div style={{ marginTop: 12 }}>83        <strong>Key Insights</strong>84        <ul style={{ marginTop: 8, paddingLeft: 18 }}>85          <li>86            <strong>JavaScript and Python</strong> stand out as highly used and87            highly admired, dominating the landscape.88          </li>89          <li>90            <strong>TypeScript</strong> are highly admired despite lower usage91            volumes, indicating strong developer preference.92          </li>93          <li>94            <strong>Older or niche languages</strong> tend to be low used and95            low admired, suggesting a shift away from these technologies.96          </li>97        </ul>98      </div>99    </ChartCard>100  );101}102