Implement Crop Yield History Chart

[jpdevhub]

Farmers enter their crop yields over the years. Use the recharts library to build a visual line chart in the Analytics Dashboard that plots yield quantities year over year for a selected crop.

[github-actions]

👋 Thanks for opening this issue, @jpdevhub!

We'll take a look soon. In the meantime, please make sure you've included steps to reproduce (for bugs) or a clear problem statement (for feature requests).

— The AgroNavis team

[Tirthpanchori]

hey @jpdevhub , I would like to work on this issue under SSoC'26. I've worked with charting libraries in my own projects before. Would love if you could assign it to me, thank you!

[onkar0127]

Visual Yield History Line Chart (Recharts)

Hi @jpdevhub

I would like to implement a visual YoY (Year-over-Year) Yield analysis chart on the Analytics page using the recharts library. This will allow farmers to select any crop they cultivate and visually track yield quantities over time.

Please assign this issue to me under SSOC. Below is the detailed implementation plan:

---

📋 Implementation Details

1. Install Required Dependencies

Add recharts to the frontend packages:

npm install recharts

2. Data Processing & Selection Logic in AnalyticsDashboard.tsx

• Interactive Select Element: Add a dropdown filter block above the yield list allowing farmers to select a specific crop (e.g. "Rice", "Wheat") from their logged harvest records.
• Yield Grouping and Sorting:
  • Filter the raw yields records array based on the selected crop.
  • Group and sum up the harvests of the same year (for multi-season yields) to keep YoY tracking clean.
  • Sort the resulting array chronologically by year so that the line chart reads correctly from left to right.
  • Structure the output array for Recharts: Array<{ year: number, quantity: number, unit: string }>

3. Recharts LineChart Configuration

Integrate ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, and Legend from recharts:

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={processedChartData} margin={{ top: 10, right: 20, left: -10, bottom: 0 }}>
    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--color-border)" />
    <XAxis dataKey="year" stroke="var(--color-text-muted)" fontSize={12} tickLine={false} />
    <YAxis stroke="var(--color-text-muted)" fontSize={12} tickLine={false} />
    <Tooltip content={<CustomTooltip />} />
    <Line 
      type="monotone" 
      dataKey="quantity" 
      stroke="#10b981" /* Premium emerald-500 matching farm aesthetics */
      strokeWidth={3} 
      activeDot={{ r: 6 }} 
      dot={{ r: 4, stroke: '#10b981', strokeWidth: 2, fill: '#fff' }} 
    />
  </LineChart>
</ResponsiveContainer>

• Custom Tooltip Styling: Design a custom overlay to match the premium dark/light mode palette of the app shell (featuring subtle box-shadows, matching units, and clean padding).

4. Dashboard Layout & Styling

• Add style definitions inside AnalyticsDashboard.module.css:
  • .chartCard: Rounded white box (border-radius: 16px), custom padding, matching border styling, and subtle shadow properties.
  • .chartHeader: Flex row grouping the chart title ("YoY Yield Trend") and the select dropdown menu.
  • .cropSelect: Minimalist, styled selection dropdown containing custom borders and active status rings matching the overall theme.

---

📂 Affected Files

• package.json (Dependency updates)
• AnalyticsDashboard.tsx (Line chart integration and logic)
• AnalyticsDashboard.module.css (Layout and dropdown styles)

[arcgod-design]

Hi @jpdevhub! I'd love to work on this as part of SSoC '26.

My Approach:

• Build a CropYieldChart component using recharts with a responsive LineChart that plots yield quantity per year for a selected crop
• Add a crop selector dropdown to filter chart data per crop type, pulling from existing yield records in the database
• Display tooltips with exact yield values and percentage change year-over-year on hover
• Integrate the chart into the Analytics Dashboard with proper loading/empty states

Could you please assign this to me (@arcgod-design)? Thank you!

[jpdevhub]

@onkar0127 go ahead