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 PlatformsHaveVsWantChart({ rows = [] }) {15  const chartData = useMemo(() => {16    if (!Array.isArray(rows)) return [];17 18    const counts = {};19 20    rows.forEach((row) => {21      const have = row.PlatformHaveWorkedWith;22      const want = row.PlatformWantToWorkWith;23 24      if (have && have !== "NA") {25        have.split(";").forEach((p) => {26          const plat = p.trim();27          if (!counts[plat]) counts[plat] = { name: plat, Used: 0, Wanted: 0 };28          counts[plat].Used += 1;29        });30      }31 32      if (want && want !== "NA") {33        want.split(";").forEach((p) => {34          const plat = p.trim();35          if (!counts[plat]) counts[plat] = { name: plat, Used: 0, Wanted: 0 };36          counts[plat].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="Platforms: Have vs Want"50        subtitle="Cloud & Infrastructure trends"51      >52        <p className="small">No platform data available.</p>53      </ChartCard>54    );55  }56 57  return (58    <ChartCard59      title="Platforms: Have vs Want"60      subtitle="Cloud & Infrastructure 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="#f59e0b" 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>AWS</strong> remains the dominant platform for both current87            usage and future interest.88          </li>89          <li>90            <strong>Docker and Kubernetes</strong> show high "Wanted" numbers,91            reflecting the industry's strong shift towards containerization.92          </li>93          <li>94            <strong>Google Cloud and Azure</strong> continue to grow, with95            significant interest indicating a multi-cloud future.96          </li>97        </ul>98      </div>99    </ChartCard>100  );101}102