harshapitla/stackoverflow

1import React, { useMemo } from "react";2import {3  ResponsiveContainer,4  BarChart,5  Bar,6  XAxis,7  YAxis,8  CartesianGrid,9  Tooltip,10  LabelList,11} from "recharts";12import ChartCard from "../components/charts/ChartCard";13 14const FREQUENCY_ORDER = [15  "Infrequently, less than once per year",16  "Less than once every 2–3 months",17  "Less than once per month or monthly",18  "A few times per month or weekly",19  "A few times per week",20  "Daily or almost daily",21  "Multiple times per day",22];23 24function CustomTooltip({ active, payload }) {25  if (active && payload?.length) {26    const d = payload[0].payload;27    return (28      <div style={{ background: "#fff", padding: 10, borderRadius: 6 }}>29        <strong>{d.soVisitFreq}</strong>30        <div>Developers: {d.value.toLocaleString()}</div>31        <div>{d.percentage.toFixed(1)}%</div>32      </div>33    );34  }35  return null;36}37 38export default function StackOverflowChart({ rows = [] }) {39  const chartData = useMemo(() => {40    const map = {};41 42    rows.forEach((r) => {43      const key = r.SOVisitFreq?.trim();44      if (!key || key === "NA" || key === "N/A") return;45 46      map[key] = map[key] || { soVisitFreq: key, value: 0 };47      map[key].value += 1;48    });49 50    const total = Object.values(map).reduce((s, d) => s + d.value, 0);51 52    return FREQUENCY_ORDER.filter((k) => map[k]).map((k) => ({53      ...map[k],54      percentage: (map[k].value / total) * 100,55    }));56  }, [rows]);57 58  return (59    <ChartCard60      title="Frequency of Visiting Stack Overflow"61      subtitle="Most developers rely on Stack Overflow at least weekly"62    >63      <ResponsiveContainer width="100%" height={420}>64        <BarChart65          data={chartData}66          layout="vertical"67          margin={{ top: 20, right: 40, left: 220, bottom: 20 }}68        >69          <CartesianGrid strokeDasharray="3 3" />70          <XAxis type="number" tickFormatter={(v) => v.toLocaleString()} />71          <YAxis type="category" dataKey="soVisitFreq" width={210} />72          <Tooltip content={<CustomTooltip />} />73          <Bar dataKey="value" fill="#3b82f6" radius={[0, 6, 6, 0]}>74            <LabelList75              dataKey="percentage"76              position="right"77              formatter={(v) => `${v.toFixed(1)}%`}78            />79          </Bar>80        </BarChart>81      </ResponsiveContainer>82 83      {/* INSIGHTS */}84      <div style={{ marginTop: 16 }}>85        <strong>Key Insights</strong>86        <ul>87          <li>88            Most developers visit weekly or a few times per month, treating it89            as a regular workflow tool rather than an occasional fix.90          </li>91        </ul>92      </div>93    </ChartCard>94  );95}96