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.platform}</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 PlatformsDevelopersWorkWithChart({ rows = [] }) {41  const chartData = useMemo(() => {42    if (!Array.isArray(rows) || rows.length === 0) return [];43 44    const platformCount = {};45    let totalResponses = 0;46 47    rows.forEach((row) => {48      const platforms = row.PlatformHaveWorkedWith;49 50      if (!platforms || platforms === "NA") return;51 52      totalResponses++;53 54      platforms55        .split(";")56        .map((p) => p.trim())57        .forEach((platform) => {58          platformCount[platform] = (platformCount[platform] || 0) + 1;59        });60    });61 62    return Object.entries(platformCount)63      .map(([platform, count]) => ({64        platform,65        value: count,66        percentage: (count / totalResponses) * 100,67      }))68      .sort((a, b) => b.value - a.value)69      .slice(0, 10);70  }, [rows]);71 72  if (!chartData.length) {73    return (74      <ChartCard75        title="Platforms Developers Work With"76        subtitle="Cloud & OS usage insight"77      >78        <p className="small">No platform data available.</p>79      </ChartCard>80    );81  }82 83  return (84    <ChartCard85      title="Platforms Developers Work With"86      subtitle="Cloud & OS usage insight"87    >88      <ResponsiveContainer width="100%" height={500}>89        <BarChart90          data={chartData}91          layout="vertical"92          margin={{ top: 20, right: 40, left: 160, bottom: 20 }}93        >94          <CartesianGrid strokeDasharray="3 3" />95 96          <XAxis type="number" tickFormatter={(v) => v.toLocaleString()} />97 98          <YAxis type="category" dataKey="platform" width={160} />99 100          <Tooltip content={<CustomTooltip />} />101          <Legend />102 103          <Bar104            dataKey="value"105            name="Developers"106            fill="#4f46e5"107            radius={[0, 8, 8, 0]}108          />109        </BarChart>110      </ResponsiveContainer>111 112      {/* ================= INSIGHTS ================= */}113      {/* ================= INSIGHTS ================= */}114      <div style={{ marginTop: 18 }}>115        <strong>Key Insights</strong>116        <ul style={{ marginTop: 8, paddingLeft: 18 }}>117          <li>118            <strong>Docker</strong> dominates platform usage with119            <strong> 71% adoption (~17,500 developers)</strong>, emphasizing the120            widespread shift toward containerized and cloud-native development.121          </li>122          <li>123            <strong>AWS</strong> is used by124            <strong> 43% of developers (~10,000 users)</strong>, reinforcing its125            role as the leading cloud infrastructure platform in production126            environments.127          </li>128          <li>129            <strong>npm</strong> shows adoption among130            <strong> ~7% of developers (~13,000 users)</strong>, highlighting131            its importance as a core dependency management tool in modern132            JavaScript ecosystems.133          </li>134          <li>135            The platform distribution reflects a strong industry focus on136            <strong>137              DevOps, cloud services, and scalable deployment workflows138            </strong>139            .140          </li>141        </ul>142      </div>143    </ChartCard>144  );145}146