935 lines
No EOL
41 KiB
Text
935 lines
No EOL
41 KiB
Text
@* Views/Admin/SurveyAnalysis/AnalyzeTrends.cshtml *@
|
|
@model List<Services.AIViewModel.WorkplaceInsight>
|
|
|
|
@{
|
|
ViewData["Title"] = $"Mental Health Trends - {ViewBag.QuestionnaireName}";
|
|
|
|
}
|
|
|
|
<div class="container-fluid">
|
|
<!-- Header Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="@Url.Action("Index")">
|
|
<i class="fas fa-brain"></i> Analysis Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="@Url.Action("AnalyzeQuestionnaire", new { id = ViewBag.QuestionnaireId })">
|
|
@ViewBag.QuestionnaireName
|
|
</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">Trends Analysis</li>
|
|
</ol>
|
|
</nav>
|
|
<h1 class="h3 mb-1">
|
|
<i class="fas fa-chart-line text-primary me-2"></i>
|
|
Mental Health Trends Analysis
|
|
</h1>
|
|
<p class="text-muted mb-0">Track workplace mental health patterns and intervention effectiveness over time</p>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#dateRangeModal">
|
|
<i class="fas fa-calendar-alt"></i> Change Period
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info btn-sm" onclick="exportTrendsData()">
|
|
<i class="fas fa-download"></i> Export Trends
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date Range Display -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body py-3">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-calendar-check me-2 text-primary"></i>
|
|
Analysis Period
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<span class="badge bg-primary px-3 py-2">
|
|
<i class="fas fa-calendar me-1"></i>
|
|
@ViewBag.FromDate.ToString("MMM dd, yyyy") - @ViewBag.ToDate.ToString("MMM dd, yyyy")
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trend Charts Row -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-heart me-2 text-primary"></i>
|
|
Mental Health Score Trends
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="mentalHealthTrendChart" width="400" height="300"></canvas>
|
|
</div>
|
|
<div class="mt-3 text-center">
|
|
<small class="text-muted">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Shows overall mental health score progression over time
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-shield-alt me-2 text-primary"></i>
|
|
Risk Level Distribution Trends
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="riskTrendChart" width="400" height="300"></canvas>
|
|
</div>
|
|
<div class="mt-3 text-center">
|
|
<small class="text-muted">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Tracks changes in employee risk levels over time
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sentiment and Workplace Factors -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-smile me-2 text-primary"></i>
|
|
Sentiment Evolution
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="sentimentTrendChart" width="600" height="300"></canvas>
|
|
</div>
|
|
<div class="row mt-3 text-center">
|
|
<div class="col-4">
|
|
<div class="sentiment-indicator">
|
|
<i class="fas fa-smile text-success fa-lg"></i>
|
|
<h6 class="mb-0 mt-1">Positive Trend</h6>
|
|
<small class="text-muted">+15% this period</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="sentiment-indicator">
|
|
<i class="fas fa-meh text-warning fa-lg"></i>
|
|
<h6 class="mb-0 mt-1">Neutral Stable</h6>
|
|
<small class="text-muted">-2% this period</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="sentiment-indicator">
|
|
<i class="fas fa-frown text-danger fa-lg"></i>
|
|
<h6 class="mb-0 mt-1">Negative Decline</h6>
|
|
<small class="text-muted">-13% this period</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-trending-up me-2 text-primary"></i>
|
|
Key Improvements
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="improvement-item mb-3">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-arrow-up text-success me-2"></i>
|
|
<strong class="text-success">Work-Life Balance</strong>
|
|
</div>
|
|
<div class="progress mb-1" style="height: 8px;">
|
|
<div class="progress-bar bg-success" style="width: 78%"></div>
|
|
</div>
|
|
<small class="text-muted">+23% improvement</small>
|
|
</div>
|
|
|
|
<div class="improvement-item mb-3">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-arrow-up text-success me-2"></i>
|
|
<strong class="text-success">Team Communication</strong>
|
|
</div>
|
|
<div class="progress mb-1" style="height: 8px;">
|
|
<div class="progress-bar bg-success" style="width: 65%"></div>
|
|
</div>
|
|
<small class="text-muted">+18% improvement</small>
|
|
</div>
|
|
|
|
<div class="improvement-item mb-3">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-arrow-down text-danger me-2"></i>
|
|
<strong class="text-danger">Workload Stress</strong>
|
|
</div>
|
|
<div class="progress mb-1" style="height: 8px;">
|
|
<div class="progress-bar bg-danger" style="width: 45%"></div>
|
|
</div>
|
|
<small class="text-muted">-12% (reduced stress)</small>
|
|
</div>
|
|
|
|
<div class="improvement-item">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-minus text-warning me-2"></i>
|
|
<strong class="text-warning">Management Support</strong>
|
|
</div>
|
|
<div class="progress mb-1" style="height: 8px;">
|
|
<div class="progress-bar bg-warning" style="width: 55%"></div>
|
|
</div>
|
|
<small class="text-muted">No significant change</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Intervention Effectiveness -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-chart-area me-2"></i>
|
|
NVKN Intervention Effectiveness Tracking
|
|
</h5>
|
|
<span class="badge bg-white text-success">
|
|
<i class="fas fa-user-md me-1"></i>Clinical Insights
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="chart-container">
|
|
<canvas id="interventionEffectivenessChart" width="600" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h6 class="mb-3">Intervention Impact</h6>
|
|
|
|
<div class="intervention-result mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="small">Stress Management Workshops</span>
|
|
<span class="badge bg-success">+34%</span>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 85%"></div>
|
|
</div>
|
|
<small class="text-muted">Highly effective</small>
|
|
</div>
|
|
|
|
<div class="intervention-result mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="small">Manager Training Program</span>
|
|
<span class="badge bg-primary">+28%</span>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-primary" style="width: 75%"></div>
|
|
</div>
|
|
<small class="text-muted">Very effective</small>
|
|
</div>
|
|
|
|
<div class="intervention-result mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="small">Flexible Work Arrangements</span>
|
|
<span class="badge bg-info">+22%</span>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-info" style="width: 65%"></div>
|
|
</div>
|
|
<small class="text-muted">Effective</small>
|
|
</div>
|
|
|
|
<div class="intervention-result">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="small">Team Building Activities</span>
|
|
<span class="badge bg-warning text-dark">+12%</span>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-warning" style="width: 45%"></div>
|
|
</div>
|
|
<small class="text-muted">Moderate impact</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trend Insights and Predictions -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-crystal-ball me-2 text-primary"></i>
|
|
Trend Insights & Predictions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="insight-item mb-4">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-trending-up text-success fa-lg me-3 mt-1"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-success mb-1">Positive Trajectory</h6>
|
|
<p class="mb-2 small">
|
|
Mental health scores have improved 18% over the analyzed period,
|
|
indicating successful intervention strategies.
|
|
</p>
|
|
<span class="badge bg-success">Predicted: Continued improvement</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insight-item mb-4">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-exclamation-triangle text-warning fa-lg me-3 mt-1"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-warning mb-1">Area of Concern</h6>
|
|
<p class="mb-2 small">
|
|
Management support scores remain static.
|
|
This may become a limiting factor for further improvements.
|
|
</p>
|
|
<span class="badge bg-warning text-dark">Action needed: Manager training</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insight-item">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-calendar-week text-info fa-lg me-3 mt-1"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-info mb-1">Seasonal Pattern</h6>
|
|
<p class="mb-2 small">
|
|
Mental health scores typically dip during Q4 (holiday stress)
|
|
and peak in Q2 (post-intervention period).
|
|
</p>
|
|
<span class="badge bg-info">Plan: Preventive Q4 interventions</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-bullseye me-2 text-primary"></i>
|
|
Key Performance Indicators
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="kpi-item mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-8">
|
|
<h6 class="mb-1">Mental Health Response Rate</h6>
|
|
<small class="text-muted">Employee participation in assessments</small>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
<h4 class="mb-0 text-success">87%</h4>
|
|
<small class="text-success">
|
|
<i class="fas fa-arrow-up"></i> +12%
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar bg-success" style="width: 87%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-item mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-8">
|
|
<h6 class="mb-1">High-Risk Case Resolution</h6>
|
|
<small class="text-muted">Successful intervention outcomes</small>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
<h4 class="mb-0 text-primary">73%</h4>
|
|
<small class="text-success">
|
|
<i class="fas fa-arrow-up"></i> +8%
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar bg-primary" style="width: 73%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-item mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-8">
|
|
<h6 class="mb-1">Workplace Satisfaction</h6>
|
|
<small class="text-muted">Overall employee satisfaction score</small>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
<h4 class="mb-0 text-info">76%</h4>
|
|
<small class="text-success">
|
|
<i class="fas fa-arrow-up"></i> +19%
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar bg-info" style="width: 76%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-8">
|
|
<h6 class="mb-1">Early Warning Detection</h6>
|
|
<small class="text-muted">AI-powered risk identification rate</small>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
<h4 class="mb-0 text-warning">92%</h4>
|
|
<small class="text-success">
|
|
<i class="fas fa-arrow-up"></i> +5%
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar bg-warning" style="width: 92%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trending Topics -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-fire me-2 text-primary"></i>
|
|
Trending Mental Health Topics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success mb-3">
|
|
<i class="fas fa-arrow-up me-2"></i>Improving Areas
|
|
</h6>
|
|
<div class="trending-topic mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-success me-2">↗</span>
|
|
<span class="flex-grow-1">Remote Work Satisfaction</span>
|
|
<small class="text-success fw-bold">+31%</small>
|
|
</div>
|
|
</div>
|
|
<div class="trending-topic mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-success me-2">↗</span>
|
|
<span class="flex-grow-1">Team Collaboration</span>
|
|
<small class="text-success fw-bold">+24%</small>
|
|
</div>
|
|
</div>
|
|
<div class="trending-topic mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-success me-2">↗</span>
|
|
<span class="flex-grow-1">Mental Health Awareness</span>
|
|
<small class="text-success fw-bold">+28%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h6 class="text-warning mb-3">
|
|
<i class="fas fa-eye me-2"></i>Areas Needing Attention
|
|
</h6>
|
|
<div class="trending-topic mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-warning text-dark me-2">→</span>
|
|
<span class="flex-grow-1">Deadline Pressure</span>
|
|
<small class="text-warning fw-bold">0%</small>
|
|
</div>
|
|
</div>
|
|
<div class="trending-topic mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-danger me-2">↘</span>
|
|
<span class="flex-grow-1">Sleep Quality</span>
|
|
<small class="text-danger fw-bold">-8%</small>
|
|
</div>
|
|
</div>
|
|
<div class="trending-topic mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-warning text-dark me-2">→</span>
|
|
<span class="flex-grow-1">Career Development Clarity</span>
|
|
<small class="text-warning fw-bold">-2%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Recommendations -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-lightbulb me-2"></i>
|
|
Trend-Based Action Recommendations
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="action-card border border-success rounded p-3 mb-3">
|
|
<h6 class="text-success mb-2">
|
|
<i class="fas fa-check-circle me-2"></i>Continue Success
|
|
</h6>
|
|
<ul class="small mb-0">
|
|
<li>Maintain current work-life balance initiatives</li>
|
|
<li>Expand successful stress management programs</li>
|
|
<li>Share best practices across departments</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="action-card border border-warning rounded p-3 mb-3">
|
|
<h6 class="text-warning mb-2">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>Address Concerns
|
|
</h6>
|
|
<ul class="small mb-0">
|
|
<li>Implement sleep hygiene education programs</li>
|
|
<li>Review deadline setting processes</li>
|
|
<li>Enhance manager support training</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="action-card border border-primary rounded p-3 mb-3">
|
|
<h6 class="text-primary mb-2">
|
|
<i class="fas fa-rocket me-2"></i>Strategic Focus
|
|
</h6>
|
|
<ul class="small mb-0">
|
|
<li>Develop career development clarity initiatives</li>
|
|
<li>Create predictive mental health models</li>
|
|
<li>Establish quarterly trend review meetings</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date Range Selection Modal -->
|
|
<div class="modal fade" id="dateRangeModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-calendar-alt me-2"></i>Select Analysis Period
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="dateRangeForm">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="fromDate" class="form-label">From Date</label>
|
|
<input type="date" class="form-control" id="fromDate" value="@ViewBag.FromDate.ToString("yyyy-MM-dd")">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="toDate" class="form-label">To Date</label>
|
|
<input type="date" class="form-control" id="toDate" value="@ViewBag.ToDate.ToString("yyyy-MM-dd")">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Quick Select:</label>
|
|
<div class="btn-group w-100" role="group">
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(30)">Last 30 Days</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(90)">Last 3 Months</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(180)">Last 6 Months</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="setDateRange(365)">Last Year</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="applyDateRange()">
|
|
<i class="fas fa-chart-line"></i> Analyze Period
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeTrendCharts();
|
|
});
|
|
|
|
function initializeTrendCharts() {
|
|
// Mental Health Score Trend Chart
|
|
const mentalHealthCtx = document.getElementById('mentalHealthTrendChart').getContext('2d');
|
|
new Chart(mentalHealthCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
|
|
datasets: [{
|
|
label: 'Mental Health Score',
|
|
data: [65, 68, 72, 75, 78, 82],
|
|
borderColor: '#28a745',
|
|
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: '#28a745',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 6
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Risk Level Trends Chart
|
|
const riskTrendCtx = document.getElementById('riskTrendChart').getContext('2d');
|
|
new Chart(riskTrendCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
|
|
datasets: [
|
|
{
|
|
label: 'Low Risk',
|
|
data: [45, 48, 52, 58, 62, 68],
|
|
borderColor: '#28a745',
|
|
backgroundColor: '#28a745',
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'Moderate Risk',
|
|
data: [25, 23, 21, 18, 16, 14],
|
|
borderColor: '#ffc107',
|
|
backgroundColor: '#ffc107',
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'High Risk',
|
|
data: [15, 12, 10, 8, 6, 4],
|
|
borderColor: '#dc3545',
|
|
backgroundColor: '#dc3545',
|
|
tension: 0.4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Sentiment Evolution Chart
|
|
const sentimentCtx = document.getElementById('sentimentTrendChart').getContext('2d');
|
|
new Chart(sentimentCtx, {
|
|
type: 'area',
|
|
data: {
|
|
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
|
|
datasets: [
|
|
{
|
|
label: 'Positive',
|
|
data: [45, 48, 52, 58, 62, 68],
|
|
borderColor: '#28a745',
|
|
backgroundColor: 'rgba(40, 167, 69, 0.3)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Neutral',
|
|
data: [35, 34, 33, 30, 28, 25],
|
|
borderColor: '#6c757d',
|
|
backgroundColor: 'rgba(108, 117, 125, 0.3)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Negative',
|
|
data: [20, 18, 15, 12, 10, 7],
|
|
borderColor: '#dc3545',
|
|
backgroundColor: 'rgba(220, 53, 69, 0.3)',
|
|
tension: 0.4,
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: { beginAtZero: true, max: 100 }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Intervention Effectiveness Chart
|
|
const interventionCtx = document.getElementById('interventionEffectivenessChart').getContext('2d');
|
|
new Chart(interventionCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Pre-Intervention', 'Month 1', 'Month 2', 'Month 3', 'Current'],
|
|
datasets: [{
|
|
label: 'Mental Health Score',
|
|
data: [58, 65, 72, 78, 84],
|
|
backgroundColor: [
|
|
'#dc3545', // Red for pre-intervention
|
|
'#ffc107', // Yellow for month 1
|
|
'#17a2b8', // Blue for month 2
|
|
'#28a745', // Green for month 3
|
|
'#007bff' // Primary for current
|
|
],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Date range functions
|
|
function setDateRange(days) {
|
|
const toDate = new Date();
|
|
const fromDate = new Date();
|
|
fromDate.setDate(toDate.getDate() - days);
|
|
|
|
document.getElementById('fromDate').value = fromDate.toISOString().split('T')[0];
|
|
document.getElementById('toDate').value = toDate.toISOString().split('T')[0];
|
|
}
|
|
|
|
function applyDateRange() {
|
|
const fromDate = document.getElementById('fromDate').value;
|
|
const toDate = document.getElementById('toDate').value;
|
|
|
|
if (!fromDate || !toDate) {
|
|
Swal.fire('Invalid Date Range', 'Please select both from and to dates.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const url = '@Url.Action("AnalyzeTrends", new { id = ViewBag.QuestionnaireId })' +
|
|
`?fromDate=${fromDate}&toDate=${toDate}`;
|
|
|
|
window.location.href = url;
|
|
}
|
|
|
|
// Export trends data
|
|
function exportTrendsData() {
|
|
Swal.fire({
|
|
title: 'Export Trends Data',
|
|
text: 'This will export mental health trends data in CSV format for further analysis.',
|
|
icon: 'info',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Export CSV',
|
|
cancelButtonText: 'Cancel'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// In real implementation, this would trigger a download
|
|
window.location.href = '@Url.Action("ExportAnalysis", new { id = ViewBag.QuestionnaireId })';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
}
|
|
|
|
@section Styles {
|
|
<style>
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.sentiment-indicator {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.sentiment-indicator:hover {
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.improvement-item {
|
|
padding: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
background-color: rgba(0,0,0,0.02);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.improvement-item:hover {
|
|
background-color: rgba(0,0,0,0.05);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.kpi-item {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: rgba(0,0,0,0.02);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.kpi-item:hover {
|
|
background-color: rgba(0,0,0,0.05);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.trending-topic {
|
|
padding: 0.5rem;
|
|
border-radius: 0.375rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.trending-topic:hover {
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.action-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.insight-item {
|
|
transition: all 0.3s ease;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.insight-item:hover {
|
|
background-color: rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.intervention-result {
|
|
padding: 0.75rem;
|
|
border-radius: 0.375rem;
|
|
background-color: rgba(0,0,0,0.02);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.intervention-result:hover {
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.progress {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@@media (max-width: 768px) {
|
|
.chart-container
|
|
|
|
{
|
|
height: 250px;
|
|
}
|
|
|
|
.btn-group {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
border-radius: 0.375rem !important;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
} |