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 DatabasesHaveVsWantChart({ rows = [] }) {15  const chartData = useMemo(() => {16    if (!Array.isArray(rows)) return [];17 18    const counts = {};19 20    rows.forEach((row) => {21      const have = row.DatabaseHaveWorkedWith;22      const want = row.DatabaseWantToWorkWith;23 24      if (have && have !== "NA") {25        have.split(";").forEach((d) => {26          const db = d.trim();27          if (!counts[db]) counts[db] = { name: db, Used: 0, Wanted: 0 };28          counts[db].Used += 1;29        });30      }31 32      if (want && want !== "NA") {33        want.split(";").forEach((d) => {34          const db = d.trim();35          if (!counts[db]) counts[db] = { name: db, Used: 0, Wanted: 0 };36          counts[db].Wanted += 1;37        });38      }39    });40 41    return Object.values(counts)42      .sort((a, b) => b.Used - a.Used)43      .slice(0, 10);44  }, [rows]);45 46  if (!chartData.length) {47    return (48      <ChartCard49        title="Databases: Have vs Want"50        subtitle="Backend technology trends"51      >52        <p className="small">No database data available.</p>53      </ChartCard>54    );55  }56 57  return (58    <ChartCard59      title="Databases: Have vs Want"60      subtitle="Backend technology trends"61    >62      <ResponsiveContainer width="100%" height={500}>63        <BarChart64          data={chartData}65          layout="vertical"66          margin={{ top: 20, right: 30, left: 120, bottom: 20 }}67        >68          <CartesianGrid strokeDasharray="3 3" />69          <XAxis type="number" />70          <YAxis71            type="category"72            dataKey="name"73            width={120}74            tick={{ fontSize: 11 }}75          />76          <Tooltip />77          <Legend />78          <Bar dataKey="Used" fill="#64748b" radius={[0, 4, 4, 0]} />79          <Bar dataKey="Wanted" fill="#06b6d4" 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>PostgreSQL</strong> is the most admired database, showing87            high usage and strong desire for future adoption.88          </li>89          <li>90            <strong>Redis</strong> shows a significant gap where "Wanted"91            numbers are high, indicating it's a top choice for caching92            solutions.93          </li>94          <li>95            <strong>MySQL</strong> remains widely used but shows lower "Wanted"96            interest compared to modern alternatives.97          </li>98        </ul>99      </div>100    </ChartCard>101  );102}103