[GOOD FIRST ISSUE] Add chart type toggle (bar/line) to ContributionGraph

[Priyanshu-byte-coder]

What needs to be done

Add a toggle in the ContributionGraph component to switch the chart between a Bar chart (current default) and a Line chart.

Why this matters

Some users prefer line charts for trend analysis over bar charts. This is a small, self-contained UI change with no API work needed.

Exact file to edit

src/components/ContributionGraph.tsx

The chart is rendered at line 53 using Recharts <BarChart> and <Bar>. You need to:

1. Add a chartType state: const [chartType, setChartType] = useState<"bar" | "line">("bar")

2. Add a toggle button next to the existing time-range tabs (around line 23):

<button onClick={() => setChartType(t => t === "bar" ? "line" : "bar")}>
  {chartType === "bar" ? "Line" : "Bar"}
</button>

3. Conditionally render <BarChart> or <LineChart> based on chartType:

import { LineChart, Line, BarChart, Bar, ... } from "recharts";

{chartType === "bar" ? (
  <BarChart data={data}>
    <Bar dataKey="commits" fill="#6366f1" radius={[4, 4, 0, 0]} />
    {/* keep existing CartesianGrid, XAxis, YAxis, Tooltip */}
  </BarChart>
) : (
  <LineChart data={data}>
    <Line type="monotone" dataKey="commits" stroke="#6366f1" dot={false} strokeWidth={2} />
    {/* same CartesianGrid, XAxis, YAxis, Tooltip */}
  </LineChart>
)}

All Recharts components are already installed — no new dependencies needed.

Acceptance criteria

• Toggle button visible next to the 7d/14d/30d/90d tabs
• Clicking it switches between bar and line chart
• Both chart types render correctly with existing data
• Style consistent with existing tab buttons (Tailwind, slate theme)
• npm run lint and npm run type-check pass

Setup

See DEVELOPMENT.md to get running locally.

Mentorship

Comment "I'd like to work on this" to get assigned.

[liascope]

Hi, I’d like to take this issue.