|
@@ -0,0 +1,250 @@
|
|
|
+<!-- 7f3662cc-b5d9-4275-ae1f-e41be47f9b08 4c210450-6acb-41bf-b5dd-6181ee548ec4 -->
|
|
|
+# Weight Management Implementation Plan
|
|
|
+
|
|
|
+## Overview
|
|
|
+
|
|
|
+This document outlines the implementation of a comprehensive weight management system in the WeightComponent at `campus_health_app/frontend/campus-health-app/src/app/modules/weight/weight.component.ts`. All features will be implemented in a single component using ECharts for visualizations, with data persisted in localStorage and synced with backend API.
|
|
|
+
|
|
|
+## Implementation Steps
|
|
|
+
|
|
|
+### 1. Dependencies Installation
|
|
|
+
|
|
|
+Install required packages:
|
|
|
+
|
|
|
+- `echarts`: ^5.4.3 (charting library)
|
|
|
+- `ngx-echarts`: ^17.0.0 (Angular wrapper for ECharts)
|
|
|
+
|
|
|
+### 2. Data Models Enhancement
|
|
|
+
|
|
|
+Extend existing `WeightRecord` interface and add new interfaces:
|
|
|
+
|
|
|
+- **WeightRecord**: Add fields for `measurementTime`, `measurementCondition` (空腹/餐后), `notes`, `tags` (关键节点标记)
|
|
|
+- **WeightGoal**: `targetWeight`, `targetBodyFat`, `targetDate`, `startWeight`, `startDate`, `weeklyTarget`
|
|
|
+- **AnomalyAlert**: `type`, `severity`, `message`, `detectedDate`
|
|
|
+
|
|
|
+### 3. Component Structure
|
|
|
+
|
|
|
+#### Core Features Implementation:
|
|
|
+
|
|
|
+**A. Data Collection Module**
|
|
|
+
|
|
|
+- Modal/Dialog component for weight input with fields:
|
|
|
+ - Weight (kg), Body Fat (%), Muscle Mass (kg)
|
|
|
+ - Measurement time picker, Condition selector (空腹/餐后)
|
|
|
+ - Notes textarea, Tag selector for milestones
|
|
|
+- Validation: weight range 30-200kg, body fat 5-60%
|
|
|
+- Save to localStorage immediately, queue for backend sync
|
|
|
+
|
|
|
+**B. Goal Management Module**
|
|
|
+
|
|
|
+- Goal setting dialog with:
|
|
|
+ - Target weight and body fat percentage inputs
|
|
|
+ - Target date picker with minimum date validation
|
|
|
+ - Auto-calculate weekly target based on time difference
|
|
|
+ - Display predicted completion date based on current trend
|
|
|
+- Store in localStorage under `weightGoal` key
|
|
|
+- Backend sync on save
|
|
|
+
|
|
|
+**C. Anomaly Detection Engine**
|
|
|
+
|
|
|
+- Simple threshold-based detection:
|
|
|
+ - Rapid weight change: >2kg/week or >0.5kg/day
|
|
|
+ - Body fat anomaly: body fat% increases while weight decreases
|
|
|
+ - Missing data: >7 days without measurement
|
|
|
+ - Extreme values: outside personalized ±5% range
|
|
|
+- Generate alerts with severity levels (info/warning/danger)
|
|
|
+- Display in dedicated alert section at bottom
|
|
|
+
|
|
|
+**D. Multi-dimensional Filtering**
|
|
|
+
|
|
|
+- Time period filters: 7天/30天/90天/全部
|
|
|
+- Date range picker for custom periods
|
|
|
+- Measurement condition filter: 全部/空腹/餐后
|
|
|
+- Tag-based filtering for milestone events
|
|
|
+- Comparison mode: compare current period vs previous period
|
|
|
+
|
|
|
+### 4. Visualization Charts (ECharts Configuration)
|
|
|
+
|
|
|
+**Chart 1: Weight Trend Line Chart (Primary, 50% height)**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// Three lines: actual weight (blue), target weight (red), planned trend (gray dashed)
|
|
|
+// X-axis: time with custom markers for tagged events
|
|
|
+// Y-axis: weight in kg
|
|
|
+// Tooltip: show date, weight, body fat, measurement condition
|
|
|
+// DataZoom: enable for mobile pinch-to-zoom
|
|
|
+// MarkLine: for goal weight and start weight
|
|
|
+// MarkPoint: for milestone events (开始运动日, 目标调整日)
|
|
|
+```
|
|
|
+
|
|
|
+**Chart 2: Weekly/Monthly Weight Change Bar Chart**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// Calculate weight delta per week/month
|
|
|
+// Green bars for weight loss (negative values)
|
|
|
+// Red bars for weight gain (positive values)
|
|
|
+// Label on top of each bar showing exact value (e.g., "-0.6kg")
|
|
|
+// Toggle between weekly/monthly view
|
|
|
+```
|
|
|
+
|
|
|
+**Chart 3: Weight vs Body Fat Scatter Plot (Right side small chart)**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// X-axis: weight (kg), Y-axis: body fat (%)
|
|
|
+// Each point represents one measurement
|
|
|
+// Color gradient based on date (older = lighter)
|
|
|
+// Reference lines showing ideal trend (down-left diagonal)
|
|
|
+// Tooltip showing date and values
|
|
|
+```
|
|
|
+
|
|
|
+**Chart 4: Goal Progress Ring Chart (Top-right floating)**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// Gauge/Pie chart showing progress percentage
|
|
|
+// Inner text: "已减 3kg / 目标 5kg"
|
|
|
+// Outer ring: progress arc (60% filled)
|
|
|
+// Bottom text: "还需减 2kg,预计 11月30日完成"
|
|
|
+// Color: green if on track, yellow if slow, red if off track
|
|
|
+```
|
|
|
+
|
|
|
+**Chart 5: Summary Stats Cards (Above trend chart)**
|
|
|
+
|
|
|
+- Current weight, Weight change from start, Days tracked
|
|
|
+- Average weekly change, Body fat change, Goal completion ETA
|
|
|
+
|
|
|
+### 5. Layout Structure (Mobile-first)
|
|
|
+
|
|
|
+```
|
|
|
+┌─────────────────────────────────────┐
|
|
|
+│ Header: 体重管理 [录入] [目标设置] │
|
|
|
+├─────────────────────────────────────┤
|
|
|
+│ Summary Cards (3 cards in row) │
|
|
|
+├──────────────────────┬──────────────┤
|
|
|
+│ │ Goal Ring │
|
|
|
+│ Weight Trend Chart │ (Floating) │
|
|
|
+│ (50% height) │ │
|
|
|
+│ │ │
|
|
|
+├──────────────────────┴──────────────┤
|
|
|
+│ Filter Bar: [7天][30天][90天][自定义]│
|
|
|
+├─────────────────────────────────────┤
|
|
|
+│ Weekly/Monthly Change Bar Chart │
|
|
|
+├──────────────────────────────────────┤
|
|
|
+│ Weight vs Body Fat Scatter Plot │
|
|
|
+├─────────────────────────────────────┤
|
|
|
+│ Anomaly Alerts & Suggestions │
|
|
|
+└─────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+### 6. Data Persistence Strategy
|
|
|
+
|
|
|
+**LocalStorage Structure:**
|
|
|
+
|
|
|
+```typescript
|
|
|
+{
|
|
|
+ weightRecords: WeightRecord[],
|
|
|
+ weightGoal: WeightGoal,
|
|
|
+ pendingSync: { records: [], goal: null },
|
|
|
+ lastSyncTime: timestamp
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**Backend Sync Logic:**
|
|
|
+
|
|
|
+- On component init: fetch latest data from backend, merge with local
|
|
|
+- On data change: save to localStorage immediately, add to pendingSync queue
|
|
|
+- Periodic sync (every 5 minutes): POST pendingSync items to backend
|
|
|
+- Conflict resolution: backend timestamp wins
|
|
|
+- Offline support: queue operations, sync when online
|
|
|
+
|
|
|
+### 7. Services & State Management
|
|
|
+
|
|
|
+Create `WeightDataService`:
|
|
|
+
|
|
|
+- CRUD operations for weight records
|
|
|
+- Goal management methods
|
|
|
+- Sync coordinator between localStorage and backend
|
|
|
+- Observable streams for reactive UI updates
|
|
|
+
|
|
|
+### 8. Mobile Optimization
|
|
|
+
|
|
|
+- Touch-friendly chart interactions (touch to show tooltip)
|
|
|
+- Responsive grid layout (charts stack vertically on small screens)
|
|
|
+- Optimize chart rendering for mobile performance
|
|
|
+- Use virtual scrolling for record list if >100 items
|
|
|
+
|
|
|
+### 9. Key Implementation Details
|
|
|
+
|
|
|
+**Planned Trend Line Calculation:**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// Linear interpolation from start weight to target weight
|
|
|
+planWeight = startWeight - (daysElapsed / totalDays) * totalWeightToLose
|
|
|
+```
|
|
|
+
|
|
|
+**Anomaly Detection Algorithm:**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// Check last 7 days for rapid changes
|
|
|
+if (Math.abs(weeklyChange) > 2) {
|
|
|
+ alert = { type: 'rapid_change', severity: 'warning', message: '...' }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**ETA Calculation:**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// Based on average weekly change over last 4 weeks
|
|
|
+avgWeeklyChange = sum(last4WeeksChanges) / 4
|
|
|
+weeksRemaining = remainingWeight / Math.abs(avgWeeklyChange)
|
|
|
+eta = new Date(now + weeksRemaining * 7 * 24 * 60 * 60 * 1000)
|
|
|
+```
|
|
|
+
|
|
|
+## File Structure
|
|
|
+
|
|
|
+```
|
|
|
+campus_health_app/docs/
|
|
|
+ └── weight-management-implementation.md (this document)
|
|
|
+
|
|
|
+campus_health_app/frontend/campus-health-app/src/app/
|
|
|
+ ├── modules/weight/
|
|
|
+ │ ├── weight.component.ts (main implementation)
|
|
|
+ │ ├── weight.component.html (template with all charts)
|
|
|
+ │ ├── weight.component.scss (mobile-first responsive styles)
|
|
|
+ │ └── models/
|
|
|
+ │ └── weight.models.ts (data interfaces)
|
|
|
+ └── services/
|
|
|
+ └── weight-data.service.ts (data management & sync)
|
|
|
+```
|
|
|
+
|
|
|
+## Technical Specifications
|
|
|
+
|
|
|
+- **Framework**: Angular 17+ (standalone components)
|
|
|
+- **Charts**: ECharts 5.4.3 via ngx-echarts
|
|
|
+- **Styling**: SCSS with mobile-first breakpoints
|
|
|
+- **Data Storage**: LocalStorage + REST API sync
|
|
|
+- **State Management**: RxJS Observables
|
|
|
+- **Type Safety**: Full TypeScript typing for all data models
|
|
|
+
|
|
|
+## API Endpoints (Expected Backend)
|
|
|
+
|
|
|
+```
|
|
|
+GET /api/weight/records?from={date}&to={date}
|
|
|
+POST /api/weight/records
|
|
|
+PUT /api/weight/records/{id}
|
|
|
+DELETE /api/weight/records/{id}
|
|
|
+GET /api/weight/goal
|
|
|
+POST /api/weight/goal
|
|
|
+PUT /api/weight/goal
|
|
|
+```
|
|
|
+
|
|
|
+## Testing Considerations
|
|
|
+
|
|
|
+- Mock data for 90 days to test all visualizations
|
|
|
+- Test edge cases: no data, single data point, goal achieved
|
|
|
+- Test offline mode and sync recovery
|
|
|
+- Validate mobile touch interactions
|
|
|
+- Performance test with 365+ data points
|
|
|
+
|
|
|
+### To-dos
|
|
|
+
|
|
|
+- [ ] Create weight-management-implementation.md in campus_health_app/docs with complete implementation guide
|