DWD Dashboard Implementation

Overview

The dashboard has been updated to use real API data instead of fake/mock data. The implementation follows a grouped endpoints approach with different update frequencies for optimal performance.

Architecture

API Endpoints

The dashboard uses three new grouped API endpoints:

1. /api/dashboard/realtime - Updates every 30 seconds

   • Returns: pressure, flow, tank levels, pump/valve status, alerts
   • Query params: scenarioId, currentTime

2. /api/dashboard/quality - Updates every 3 minutes

   • Returns: chlorine levels, water age
   • Query params: scenarioId, currentTime

3. /api/dashboard/summary - Updates every 5 minutes

   • Returns: demand trends, simulation results, historical stats
   • Query params: scenarioId

Frontend Components

Services

• src/services/dashboardService.js - API service functions
• src/hooks/useDashboardUpdates.jsx - React hook for managing updates

Widget Components

• src/components/dashboard/RealtimeMetricsWidget.jsx - Real-time hydraulic metrics
• src/components/dashboard/QualityMetricsWidget.jsx - Water quality metrics
• src/components/dashboard/SystemSummaryWidget.jsx - System summary and trends

Main Dashboard

• src/pages/DashboardPage.jsx - Updated to use real API data

Implementation Details

Update Intervals

const UPDATE_INTERVALS = {
  realtime: 30000,    // 30 seconds
  quality: 180000,    // 3 minutes
  summary: 300000     // 5 minutes
};

Data Flow

1. DashboardPage uses useDashboardUpdates hook
2. useDashboardUpdates manages three separate intervals
3. Each interval calls the appropriate API endpoint
4. Data is passed to individual widget components
5. Widgets display data with loading/error states

Error Handling

• Individual error states for each data type
• Global error alerts for failed requests
• Graceful degradation with loading indicators
• Retry logic built into the hook

Loading States

• Each widget shows loading spinner while fetching data
• Individual loading states prevent UI blocking
• Data freshness indicator shows last update time

Usage

Basic Usage

import { useDashboardUpdates } from '../hooks/useDashboardUpdates';

function DashboardPage() {
  const scenarioId = 1; // Get from context or props

  const {
    realtimeData,
    qualityData,
    summaryData,
    loading,
    errors
  } = useDashboardUpdates(scenarioId);

  return (
    <div>
      <RealtimeMetricsWidget
        data={realtimeData}
        loading={loading.realtime}
        error={errors.realtime}
      />
      {/* ... other widgets */}
    </div>
  );
}

Custom Update Intervals

const {
  realtimeData,
  qualityData,
  summaryData
} = useDashboardUpdates(scenarioId, {
  enabled: true,
  intervals: {
    realtime: 15000,   // 15 seconds
    quality: 120000,   // 2 minutes
    summary: 600000    // 10 minutes
  }
});

API Response Format

Realtime Metrics Response

{
  "timestamp": 1703123456,
  "scenarioId": 1,
  "pressure": {
    "average": 65.2,
    "min": 32.1,
    "max": 98.7,
    "lowPressureNodes": 2
  },
  "flow": {
    "average": 450.3,
    "min": 120.0,
    "max": 900.0,
    "totalFlow": 14500.0
  },
  "tankLevels": {
    "averagePercentFull": 76.5,
    "totalVolume": 2.1,
    "lowTanks": 0
  },
  "pumpStatus": {
    "active": 5,
    "inactive": 2,
    "totalFlow": 600.0,
    "totalPower": 1200.0
  },
  "valveStatus": {
    "open": 8,
    "closed": 3,
    "flowControl": 5
  },
  "alerts": {
    "total": 3,
    "lowPressure": 2,
    "tankOverflow": 0,
    "pumpFailures": 1
  }
}

Quality Metrics Response

{
  "timestamp": 1703123456,
  "scenarioId": 1,
  "chlorine": {
    "average": 0.7,
    "min": 0.2,
    "max": 1.2,
    "lowChlorineNodes": 1
  },
  "waterAge": {
    "average": 18.5,
    "max": 24.0
  }
}

System Summary Response

{
  "timestamp": 1703123456,
  "scenarioId": 1,
  "demandTrends": {
    "current": 14500,
    "peak": 15000,
    "peakPeriods": ["6-8am", "5-7pm"]
  },
  "systemStatus": {
    "convergence": "Yes",
    "lastRunTime": "12.3s",
    "lastRun": "2024-06-10 14:22",
    "scenarioStatus": "Running"
  }
}

Configuration

Environment Variables

Ensure these are set in your .env file:

VITE_API_URL=http://localhost:5000/api/
VITE_API_USERNAME=your_username
VITE_API_PASSWORD=your_password

Constants

The API endpoints are defined in src/constants.jsx:

export const API_ENDPOINTS = {
  // ... existing endpoints
  DashboardRealtime: 'dashboard/realtime',
  DashboardQuality: 'dashboard/quality',
  DashboardSummary: 'dashboard/summary'
};

Testing

Manual Testing

1. Start the API server
2. Navigate to the dashboard page
3. Verify data loads and updates at expected intervals
4. Check error handling by temporarily disabling the API
5. Verify loading states appear correctly

API Testing

Test each endpoint individually:

# Realtime metrics
curl "http://localhost:5000/api/dashboard/realtime?scenarioId=1&currentTime=1703123456"

# Quality metrics
curl "http://localhost:5000/api/dashboard/quality?scenarioId=1&currentTime=1703123456"

# System summary
curl "http://localhost:5000/api/dashboard/summary?scenarioId=1"

Troubleshooting

Common Issues

1. No data loading: Check API server is running and endpoints are accessible
2. CORS errors: Ensure API CORS configuration allows frontend domain
3. Authentication errors: Verify API credentials are correct
4. Update intervals not working: Check browser console for JavaScript errors

Debug Mode

Enable debug logging in the dashboard service:

// In dashboardService.js
console.log('Fetching realtime metrics:', url);
console.log('Response:', data);

Future Enhancements

1. WebSocket Support: Real-time updates for critical data
2. User Preferences: Configurable update intervals per user
3. Data Caching: Client-side caching for offline support
4. Advanced Filtering: Filter data by time range or entity type
5. Export Functionality: Export dashboard data to CSV/PDF