feat: implement visual YoY yield history line chart in analytics dashboard - #71
feat: implement visual YoY yield history line chart in analytics dashboard#71onkar0127 wants to merge 7 commits into
Conversation
|
@onkar0127 is attempting to deploy a commit to the karan3431's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
🎉 Thanks for your contribution, @onkar0127! Please make sure CI passes and the checklist in the PR template is complete. A maintainer will review this soon. — The AgroNavis team |
|
Warning Review limit reached
Next review available in: 35 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Note
|
| Layer / File(s) | Summary |
|---|---|
Dependency and chart data preparation frontend/package.json, frontend/src/components/AnalyticsDashboard.tsx |
Adds Recharts, tooltip formatting, crop selection state, unit conversion, and sorted yearly aggregation for the selected crop. |
Chart rendering and visual styling frontend/src/components/AnalyticsDashboard.tsx, frontend/src/styles/AnalyticsDashboard.module.css |
Renders the conditional crop selector and line chart, with chart card, tooltip, and high-contrast theme styles. |
Chart behavior validation frontend/src/components/__tests__/AnalyticsDashboard.test.tsx |
Mocks chart and API components and verifies rendering, crop changes, yearly aggregation, and mixed-unit normalization. |
Estimated code review effort: 3 (Moderate) | ~20 minutes
Sequence Diagram(s)
sequenceDiagram
participant User
participant AnalyticsDashboard
participant Recharts
User->>AnalyticsDashboard: Select crop
AnalyticsDashboard->>AnalyticsDashboard: Update selectedCrop and chart data
AnalyticsDashboard->>Recharts: Render chart
User->>Recharts: Hover chart point
Recharts->>AnalyticsDashboard: Render CustomTooltip
Suggested labels: Medium, frontend
Suggested reviewers: jpdevhub
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly describes the main change: a visual YoY yield history line chart in the analytics dashboard. |
| Linked Issues check | ✅ Passed | The PR fulfills #46 by adding a Recharts-based crop yield history chart with crop selection and yearly aggregation. |
| Out of Scope Changes check | ✅ Passed | All changes support the chart feature, styling, dependency, and tests; no unrelated modifications are evident. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/src/components/__tests__/AnalyticsDashboard.test.tsx (1)
49-128: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick winAdd a regression test for mixed-unit same-year records.
Current tests validate casing and same-year summation, but not the mixed-unit case. Add one test asserting the intended behavior (normalize, split, or reject) so invalid cross-unit totals don’t regress.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/__tests__/AnalyticsDashboard.test.tsx` around lines 49 - 128, Add a new test case to the 'AnalyticsDashboard YoY Chart' describe block that validates the intended behavior for mixed-unit same-year records. This test should modify the mockYields to include records for the same crop type in the same year but with different units (for example, add a rice record for 2024 with a different unit than quintal), render the AnalyticsDashboard component, and then assert the correct behavior—whether mixed units are normalized together, split into separate entries, or rejected. This ensures that the application doesn't accidentally create invalid cross-unit totals when processing yield data with inconsistent units.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/AnalyticsDashboard.tsx`:
- Around line 275-285: The select element used for crop selection lacks an
accessible name for assistive technologies. Add either an associated label
element or an aria-label attribute to the select that renders the availableCrops
map to provide a clear, descriptive name that screen readers can announce to
users.
- Around line 120-127: The groupedByYear object structure does not account for
mixed units within the same year. Currently, line 124 stores only the first unit
encountered for each year while line 126 aggregates all quantities without unit
validation, causing invalid totals when a crop/year combination has mixed units.
Modify the grouping logic to either track quantities separately by both year and
unit (change the grouping key to include unit information), or implement unit
normalization to convert all quantities to a standard unit before aggregation.
Ensure that the unit stored in groupedByYear accurately represents the units of
all quantities being summed for that year.
In `@frontend/src/styles/AnalyticsDashboard.module.css`:
- Line 486: The box-shadow declarations in AnalyticsDashboard.module.css are
using the older rgba() color function syntax which triggers stylelint warnings.
Convert all rgba() functions to modern rgb() syntax with slash notation at lines
486, 519, and 533. Change the format from rgba(0, 0, 0, 0.06) to rgb(0 0 0 / 6%)
by replacing commas with spaces in the color values, and convert the decimal
alpha value (0.06) to a percentage (6%) after the forward slash.
---
Nitpick comments:
In `@frontend/src/components/__tests__/AnalyticsDashboard.test.tsx`:
- Around line 49-128: Add a new test case to the 'AnalyticsDashboard YoY Chart'
describe block that validates the intended behavior for mixed-unit same-year
records. This test should modify the mockYields to include records for the same
crop type in the same year but with different units (for example, add a rice
record for 2024 with a different unit than quintal), render the
AnalyticsDashboard component, and then assert the correct behavior—whether mixed
units are normalized together, split into separate entries, or rejected. This
ensures that the application doesn't accidentally create invalid cross-unit
totals when processing yield data with inconsistent units.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 75b3954d-0887-47ea-b13a-860f5dd46a88
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
frontend/package.jsonfrontend/src/components/AnalyticsDashboard.tsxfrontend/src/components/__tests__/AnalyticsDashboard.test.tsxfrontend/src/styles/AnalyticsDashboard.module.css
…' into feature/yield-history-line-chart
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/AnalyticsDashboard.tsx`:
- Around line 142-147: The yearly aggregation in AnalyticsDashboard is choosing
the display unit from the first record seen, which makes the chart
nondeterministic based on API order. Update the grouping logic in the quantity
aggregation path to always normalize values into one fixed chart unit before
summing, rather than using groupedByYear[yr].unit from the first item. Keep the
conversion behavior inside the same aggregation block that uses convertUnit, but
make the target unit constant and render that unit consistently for every year.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 32496dab-a327-4e6c-ad48-6b5eab0e6504
📒 Files selected for processing (3)
frontend/src/components/AnalyticsDashboard.tsxfrontend/src/components/__tests__/AnalyticsDashboard.test.tsxfrontend/src/styles/AnalyticsDashboard.module.css
|
@jpdevhub can you please checkout my PR once!! |
|
will be checking after 8th july as placements drive is going on. |
|
One minor note |
…ation deterministic
|
@jpdevhub i made some changes can you check it out!! |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/components/AnalyticsDashboard.tsx (1)
75-93: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick winReject unsupported units instead of defaulting to a 1x factor.
convertUnitsilently coerces any unknownfromUnit/toUnitto1, so a typo or new API unit can produce plausible but wrong yield values. Default only for missing units; otherwise reject or flag unsupported values.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/AnalyticsDashboard.tsx` around lines 75 - 93, Update convertUnit to distinguish missing units from unsupported non-empty values: retain the quintal default only when a unit is absent, and reject or explicitly flag any unit not present in toKgFactor instead of applying a 1x factor. Preserve identity conversion for matching supported units and ensure callers handle the invalid-result behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@frontend/src/components/AnalyticsDashboard.tsx`:
- Around line 75-93: Update convertUnit to distinguish missing units from
unsupported non-empty values: retain the quintal default only when a unit is
absent, and reject or explicitly flag any unit not present in toKgFactor instead
of applying a 1x factor. Preserve identity conversion for matching supported
units and ensure callers handle the invalid-result behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 42c5fe8f-12fb-4c1b-960b-9a9b1f65169b
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
frontend/src/components/AnalyticsDashboard.tsx
|
@jpdevhub i reviewed the changes! |
2 participants
fixes #46
Description
📝 Summary of Changes
This PR implements a visual Year-over-Year (YoY) Yield History Line Chart inside the Analytics Dashboard using the
rechartslibrary. This allows farmers to track their crop yields dynamically across different years.Dependency Installation:
rechartslocally in thefrontendworkspace to enable visual charting capabilities.Data Selection & Processing Logic (AnalyticsDashboard.tsx):
ResponsiveContainer,LineChart,Line,XAxis,YAxis,CartesianGrid, andTooltip.CustomTooltipdisplaying year, total yield quantity, and crop unit.Styling & Accessibility (AnalyticsDashboard.module.css):
[data-theme='high-contrast']to override layouts, colors, and borders in High Contrast Mode to maintain high visibility in direct sunlight.Integration Testing (AnalyticsDashboard.test.tsx):
🧪 Verification & Testing Results
npx tsc --noEmitcompiled successfully with 0 errors and 0 warnings.npm run testpassed all test suites:AnalyticsDashboard.test.tsx(PASS - 3 tests verifying chart card, select options, YoY summation, and crop filtering)LanguageSwitcher.test.tsx(PASS - 1 test)DailyTaskReminders.test.tsx(PASS - 2 tests)geoUtils.test.ts(PASS - 7 tests)http://localhost:3000with no startup problems.Summary by CodeRabbit