Add real-time analytics dashboard with canvas-based visualizations

[Copilot]

Implements comprehensive real-time analytics and data visualization capabilities for the Heady Admin Dashboard. Provides monitoring insights across system metrics and vertical-specific analytics.

Core Components

Analytics Dashboard (analytics.html)

• Real-time metrics overview with trend indicators and sparklines
• Interactive time range selector (1h, 6h, 24h, 7d, 30d)
• Auto-refresh toggle with configurable intervals
• CSV/JSON data export

Data Simulation Engine (data-simulator.js)

• Pub/sub architecture for real-time updates
• Configurable patterns: normal, spike, degraded
• Historical data generation (50 data points)
• Vertical-specific metric generation

Chart Library (advanced-charts.js)

• Pure vanilla JavaScript, canvas-based rendering
• 5 chart types: AreaChart, DonutChart, BarChart, Sparkline, Heatmap
• RequestAnimationFrame animations with easeOutCubic easing
• Responsive sizing with devicePixelRatio support

Widget Components (widgets.js)

• MetricCard: Large value with trend indicator (↑↓→) and sparkline
• ProgressRing: Circular progress with SVG stroke animation
• StatusIndicator: Health status with pulse animations
• DataTable: Sortable, paginated table
• AlertFeed: Real-time alert stream with time-ago formatting

Styling (analytics.css)

• Glassmorphism effects with backdrop-filter
• Responsive grid layouts (auto-fit minmax)
• Dark/light theme support
• Print-friendly styles

Vertical Dashboard Integration

Added analytics sections to all verticals:

• HeadyMake: Print success rate, material usage, queue times, printer efficiency
• HeadyField: Sensor trends, anomaly detection, temperature range, humidity
• HeadyLegacy: Authentication patterns, security events, active users, success rate
• HeadyKinetic: Temperature trends, energy consumption, active devices, efficiency

Usage Example

// Create metric card with real-time updates
const metricCard = new MetricCard({
  container: '#requests-card',
  title: 'Requests/sec',
  value: 1200,
  trend: '+12%',
  trendDirection: 'up',
  sparklineData: [1000, 1050, 1100, 1150, 1180, 1200],
  color: '#6366f1'
});

// Subscribe to real-time data
dataSimulator.subscribe('metrics', (data) => {
  metricCard.update(data.requestsPerSec);
  areaChart.addDataPoint(data);
});

dataSimulator.start({ interval: 2000, pattern: 'normal' });

Screenshots

Analytics Dashboard (Dark Theme)

Analytics Dashboard (Light Theme)

Vertical Dashboard with Analytics (HeadyMake)

Technical Details

• No external dependencies: Pure vanilla JavaScript implementation
• Performance: Canvas API with requestAnimationFrame for smooth 60fps animations
• Accessibility: ARIA labels, keyboard navigation, high contrast mode support
• Responsive: Mobile-first grid layouts with breakpoints at 768px and 480px
• ~2,900 lines of code across 6 new files + 4 dashboard updates

Original prompt

Add Real-Time Analytics Dashboard and Data Visualization Components

Context

Building on the existing UI components in PRs #13, #14, and #15, we need to add comprehensive real-time analytics and data visualization capabilities to enhance the monitoring and insights functionality of the Heady Admin Dashboard.

Tasks

1. Analytics Dashboard Page (HeadySystems_v13/apps/heady_admin_ui/analytics.html)

Create a dedicated analytics page with:

• Real-time metrics overview (requests/sec, active users, error rate, latency)
• Interactive time range selector (1h, 6h, 24h, 7d, 30d)
• Auto-refresh toggle with configurable interval
• Export data functionality (CSV, JSON)

2. Advanced Chart Components (HeadySystems_v13/apps/heady_admin_ui/js/advanced-charts.js)

Create additional chart types:

• Area Chart: For cumulative metrics over time
• Donut/Pie Chart: For distribution breakdown (e.g., traffic by vertical)
• Bar Chart: For comparison metrics
• Sparklines: Mini inline charts for dashboard cards
• Heatmap: For activity patterns (hour of day vs day of week)
• All charts should be animated with smooth transitions

3. Real-Time Data Simulator (HeadySystems_v13/apps/heady_admin_ui/js/data-simulator.js)

Create a data simulation engine:

• Generate realistic mock data for all metrics
• WebSocket-style updates using setInterval
• Configurable data patterns (normal, spike, degraded)
• Historical data generation for charts
• API: DataSimulator.start(), DataSimulator.stop(), DataSimulator.setPattern()

4. Dashboard Widgets (HeadySystems_v13/apps/heady_admin_ui/js/widgets.js)

Create reusable widget components:

• MetricCard: Large number with trend indicator (↑↓)
• MiniChart: Sparkline with value
• StatusIndicator: Health status with pulse animation
• ProgressRing: Circular progress indicator
• DataTable: Sortable, filterable table component
• AlertFeed: Real-time alert stream

5. Analytics Styles (HeadySystems_v13/apps/heady_admin_ui/css/analytics.css)

Create styles for analytics components:

• Chart container styles with glassmorphism
• Metric card variations (success, warning, danger, info)
• Time range picker styles
• Data table styles with alternating rows
• Responsive grid layouts for widgets
• Print-friendly styles for reports

6. Update Navigation

In HeadySystems_v13/apps/heady_admin_ui/index.html:

• Add "Analytics" link to navigation
• Add analytics icon (📊) to nav

7. Vertical-Specific Analytics

Add analytics sections to existing vertical dashboards:

• heady_make/dashboard.html: Print success rate, material usage, queue times
• heady_field/dashboard.html: Sensor reading trends, anomaly detection
• heady_legacy/dashboard.html: Authentication patterns, security events
• heady_kinetic/dashboard.html: Temperature trends, energy consumption

Technical Requirements

• Pure vanilla JavaScript (no external charting libraries)
• Canvas-based charts for performance
• RequestAnimationFrame for smooth animations
• Responsive design (mobile, tablet, desktop)
• Accessible with ARIA labels
• Dark/light theme support
• Print stylesheet for reports

File Structure

HeadySystems_v13/apps/heady_admin_ui/
├── analytics.html (NEW)
├── css/
│   └── analytics.css (NEW)
├── js/
│   ├── advanced-charts.js (NEW)
│   ├── data-simulator.js (NEW)
│   └── widgets.js (NEW)
└── index.html (UPDATE - add nav link)

Sample Widget Usage

// Metric Card
const metricCard = new MetricCard({
  container: '#requests-card',
  title: 'Requests/sec',
  value: 1234,
  trend: '+12%',
  trendDirection: 'up',
  sparklineData: [10, 12, 15, 14, 18, 20, 22]
});

// Area Chart
const areaChart = new AreaChart({
  container: '#traffic-chart',
  data: timeSeriesData,
  colors: ['#6366f1', '#10b981'],
  labels: ['Requests', 'Errors'],
  animated: true
});

// Data Simulator
DataSimulator.subscribe('metrics', (data) => {
  metricCard.update(data.requests);
  areaChart.addDataPoint(data);
});
DataSimulator.start({ interval: 2000, pattern: 'normal' });

Success Criteria

• Analytics page loads with animated entrance
• All chart types render correctly with smooth animations
• Real-time data updates every 2 seconds
• Time range selector filters data appropriately
• Export functionality works for CSV and JSON
• Responsive on all screen sizes
• Dark/light theme toggle works on analytics page
• Print view shows clean, readable charts

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.