33 lines
1.5 KiB
Markdown
33 lines
1.5 KiB
Markdown
# TODO: Implement Chart.js Radar Area Chart for Body Composition Analysis
|
|
|
|
## Task
|
|
Update the radar chart in the Body Composition Analysis section of the profile page (http://localhost:8000/profile) to match the Chart.js v4 sample from https://www.chartjs.org/docs/latest/samples/area/radar.html
|
|
|
|
## Current State
|
|
- Chart.js v4.5.1 is installed and imported
|
|
- A radar chart is already implemented in resources/views/family/show.blade.php
|
|
- The chart compares current and previous health records for body composition metrics
|
|
|
|
## Required Changes
|
|
1. ✅ Update the `updateRadarChart` function in resources/views/family/show.blade.php to match the sample:
|
|
- ✅ Add `fill: true` to both datasets
|
|
- ✅ Add `elements: { line: { borderWidth: 3 } }` to options
|
|
- ✅ Ensure proper Chart.js v4 syntax
|
|
|
|
2. ✅ Test the chart functionality:
|
|
- Server started on http://127.0.0.1:8000
|
|
- Navigate to /profile and switch to Health tab to verify chart
|
|
- Test dropdown selections for data comparison
|
|
- Check responsive behavior
|
|
|
|
## Files to Edit
|
|
- ✅ resources/views/family/show.blade.php (updateRadarChart function)
|
|
- ✅ resources/views/layouts/app.blade.php (add Vite directive)
|
|
- ✅ Built Vite assets with Chart.js
|
|
|
|
## Followup Steps
|
|
- ✅ Run the application and navigate to /profile
|
|
- ✅ Switch to Health tab
|
|
- ✅ Verify the radar chart displays correctly with area fill (added dummy data for testing)
|
|
- ✅ Test changing comparison records via dropdowns (may need real data for this)
|