mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-05-19 12:50:11 -05:00
Dries Peeters
4f05c3d540
- Group Chat, Timer, and Help in header as round icon buttons - Vertically aligned, evenly spaced (gap-2), consistent w-10 h-10 - Header timer: one-click start/stop from any page via floating-timer-bar.js - Fix timer manual entry URL (use /timer/manual, not /timer/manual_entry) - Add Help button linking to help page - Update FEATURES_COMPLETE (Header Quick Access, One-Click Timers) - Update help page Time Tracking section with header timer tip - Update CHANGELOG
760 lines
30 KiB
HTML
760 lines
30 KiB
HTML
{% extends "base.html" %}
|
|
{% from "components/ui.html" import page_header, breadcrumb_nav, button, filter_badge %}
|
|
|
|
{% block title %}{{ _('Analytics Dashboard') }} - {{ app_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
{% set breadcrumbs = [
|
|
{'text': _('Analytics')}
|
|
] %}
|
|
|
|
{% set analytics_actions %}
|
|
<div class="flex items-center gap-2">
|
|
<select id="timeRange" class="bg-background-light dark:bg-gray-700 border border-transparent dark:border-transparent rounded-lg py-2 px-3 text-sm text-text-light dark:text-text-dark">
|
|
<option value="7">{{ _('Last 7 days') }}</option>
|
|
<option value="30" selected>{{ _('Last 30 days') }}</option>
|
|
<option value="90">{{ _('Last 90 days') }}</option>
|
|
<option value="365">{{ _('Last year') }}</option>
|
|
</select>
|
|
<button id="refreshCharts" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
|
|
<i class="fas fa-sync-alt mr-2"></i> {{ _('Refresh') }}
|
|
</button>
|
|
<button id="exportAllCharts" type="button" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" title="{{ _('Export all charts as PNG') }}">
|
|
<i class="fas fa-download mr-2"></i> {{ _('Export Charts') }}
|
|
</button>
|
|
</div>
|
|
{% endset %}
|
|
|
|
{{ page_header(
|
|
icon_class='fas fa-chart-line',
|
|
title_text=_('Analytics Dashboard'),
|
|
subtitle_text=_('Key metrics and insights about your time tracking'),
|
|
breadcrumbs=breadcrumbs,
|
|
actions_html=analytics_actions
|
|
) }}
|
|
|
|
<div class="w-full max-w-full px-0">
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-6">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6 text-center h-full">
|
|
<i class="fas fa-clock fa-2x text-primary mb-2"></i>
|
|
<h4 class="text-primary text-xl font-semibold" id="totalHours">-</h4>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark mb-0">{{ _('Total Hours') }}</p>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6 text-center h-full">
|
|
<i class="fas fa-dollar-sign fa-2x text-green-600 dark:text-green-400 mb-2"></i>
|
|
<h4 class="text-green-600 dark:text-green-400 text-xl font-semibold" id="billableHours">-</h4>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark mb-0">{{ _('Billable Hours') }}</p>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6 text-center h-full">
|
|
<i class="fas fa-project-diagram fa-2x text-blue-600 dark:text-blue-400 mb-2"></i>
|
|
<h4 class="text-blue-600 dark:text-blue-400 text-xl font-semibold" id="activeProjects">-</h4>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark mb-0">{{ _('Active Projects') }}</p>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6 text-center h-full">
|
|
<i class="fas fa-chart-line fa-2x text-amber-600 dark:text-amber-400 mb-2"></i>
|
|
<h4 class="text-amber-600 dark:text-amber-400 text-xl font-semibold" id="avgDailyHours">-</h4>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark mb-0">{{ _('Avg Daily Hours') }}</p>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6 text-center h-full">
|
|
<i class="fas fa-business-time fa-2x text-blue-600 dark:text-blue-400 mb-2"></i>
|
|
<h4 class="text-blue-600 dark:text-blue-400 text-xl font-semibold" id="overtimeSummary">-</h4>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark mb-0">{{ _('Regular') }} / {{ _('Overtime') }}</p>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark text-sm mb-0" id="overtimeDaysLabel"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row 1 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<div class="lg:col-span-2 bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-chart-area mr-2"></i> {{ _('Daily Hours Trend') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="dailyHoursChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-chart-pie mr-2"></i> {{ _('Billable vs Non-Billable') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="billableChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row 2 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-chart-bar mr-2"></i> {{ _('Hours by Project') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="projectChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-chart-line mr-2"></i> {{ _('Weekly Trends') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="weeklyTrendsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hours Forecast Chart -->
|
|
<div class="mb-6">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-project-diagram mr-2"></i> {{ _('Hours Forecast') }}
|
|
</h5>
|
|
<p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Next 7 days based on 7-day average') }}</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 280px; width: 100%;">
|
|
<canvas id="forecastChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overtime Chart -->
|
|
<div class="mb-6">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-business-time mr-2"></i> {{ _('Daily Regular vs Overtime') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="overtimeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row 3 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-clock mr-2"></i> {{ _('Hours by Time of Day') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="hourlyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow h-full">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-chart-bar mr-2"></i> {{ _('Project Efficiency') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px; width: 100%;">
|
|
<canvas id="efficiencyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Performance Chart (Admin Only) -->
|
|
{% if current_user.is_admin %}
|
|
<div class="mb-6">
|
|
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow">
|
|
<div class="p-4 border-b border-border-light dark:border-border-dark">
|
|
<h5 class="mb-0 font-semibold text-text-light dark:text-text-dark">
|
|
<i class="fas fa-users mr-2"></i> {{ _('User Performance') }}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="chart-container relative" style="height: 300px;">
|
|
<canvas id="userChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Loading Spinner -->
|
|
<div id="loadingSpinner" class="fixed inset-0 flex items-center justify-center bg-black/20 z-50" style="display: none;">
|
|
<div class="flex flex-col items-center gap-3 bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-xl">
|
|
<i class="fas fa-spinner fa-spin text-3xl text-primary"></i>
|
|
<span class="sr-only">{{ _('Loading...') }}</span>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Chart.js library -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
|
|
<script type="application/json" id="i18n-json-analytics-dashboard">
|
|
{
|
|
"error_loading_charts": {{ _('Failed to load charts. Please try again.')|tojson }},
|
|
"error_refreshing_charts": {{ _('Failed to refresh charts. Please try again.')|tojson }},
|
|
"hours_label": {{ _('Hours')|tojson }},
|
|
"date_label": {{ _('Date')|tojson }},
|
|
"hour_of_day_label": {{ _('Hour of Day')|tojson }},
|
|
"revenue_label": {{ _('Revenue')|tojson }}
|
|
}
|
|
</script>
|
|
<script>
|
|
// Ensure i18n_analytics is always defined globally
|
|
window.i18n_analytics = (function(){
|
|
try {
|
|
var el = document.getElementById('i18n-json-analytics-dashboard');
|
|
return el ? JSON.parse(el.textContent) : {
|
|
"error_loading_charts": "Failed to load charts. Please try again.",
|
|
"error_refreshing_charts": "Failed to refresh charts. Please try again.",
|
|
"hours_label": "Hours",
|
|
"date_label": "Date",
|
|
"hour_of_day_label": "Hour of Day",
|
|
"revenue_label": "Revenue"
|
|
};
|
|
} catch (e) {
|
|
return {
|
|
"error_loading_charts": "Failed to load charts. Please try again.",
|
|
"error_refreshing_charts": "Failed to refresh charts. Please try again.",
|
|
"hours_label": "Hours",
|
|
"date_label": "Date",
|
|
"hour_of_day_label": "Hour of Day",
|
|
"revenue_label": "Revenue"
|
|
};
|
|
}
|
|
})();
|
|
|
|
// Also make it available as a local variable for backward compatibility
|
|
var i18n_analytics = window.i18n_analytics;
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Global chart instances
|
|
let charts = {};
|
|
|
|
// Chart.js global defaults
|
|
Chart.defaults.font.family = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
|
|
Chart.defaults.font.size = 12;
|
|
Chart.defaults.color = '#64748b';
|
|
Chart.defaults.plugins.legend.position = 'bottom';
|
|
Chart.defaults.plugins.legend.labels.usePointStyle = true;
|
|
Chart.defaults.plugins.legend.labels.padding = 20;
|
|
|
|
// Analytics Dashboard Controller
|
|
class AnalyticsDashboard {
|
|
constructor() {
|
|
this.timeRange = 30;
|
|
this.charts = {};
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.bindEvents();
|
|
this.loadCharts();
|
|
this.updateSummaryCards();
|
|
}
|
|
|
|
bindEvents() {
|
|
document.getElementById('timeRange').addEventListener('change', (e) => {
|
|
this.timeRange = parseInt(e.target.value);
|
|
this.refreshAllCharts();
|
|
});
|
|
|
|
document.getElementById('refreshCharts').addEventListener('click', () => {
|
|
this.refreshAllCharts();
|
|
});
|
|
}
|
|
|
|
showLoading() {
|
|
document.getElementById('loadingSpinner').style.display = 'block';
|
|
}
|
|
|
|
hideLoading() {
|
|
document.getElementById('loadingSpinner').style.display = 'none';
|
|
}
|
|
|
|
async loadCharts() {
|
|
this.showLoading();
|
|
|
|
try {
|
|
await Promise.all([
|
|
this.loadDailyHoursChart(),
|
|
this.loadBillableChart(),
|
|
this.loadProjectChart(),
|
|
this.loadWeeklyTrendsChart(),
|
|
this.loadForecastChart(),
|
|
this.loadHourlyChart(),
|
|
this.loadEfficiencyChart(),
|
|
this.loadOvertimeChart(),
|
|
{% if current_user.is_admin %}
|
|
this.loadUserChart(),
|
|
{% endif %}
|
|
]);
|
|
} catch (error) {
|
|
console.error('Error loading charts:', error);
|
|
this.showError(i18n_analytics.error_loading_charts || 'Failed to load charts. Please try again.');
|
|
} finally {
|
|
this.hideLoading();
|
|
}
|
|
}
|
|
|
|
async refreshAllCharts() {
|
|
this.showLoading();
|
|
|
|
try {
|
|
await Promise.all([
|
|
this.loadDailyHoursChart(true),
|
|
this.loadBillableChart(true),
|
|
this.loadProjectChart(true),
|
|
this.loadWeeklyTrendsChart(true),
|
|
this.loadForecastChart(true),
|
|
this.loadHourlyChart(true),
|
|
this.loadEfficiencyChart(true),
|
|
this.loadOvertimeChart(true),
|
|
{% if current_user.is_admin %}
|
|
this.loadUserChart(true),
|
|
{% endif %}
|
|
]);
|
|
this.updateSummaryCards();
|
|
} catch (error) {
|
|
console.error('Error refreshing charts:', error);
|
|
this.showError(i18n_analytics.error_refreshing_charts || 'Failed to refresh charts. Please try again.');
|
|
} finally {
|
|
this.hideLoading();
|
|
}
|
|
}
|
|
|
|
async loadDailyHoursChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/hours-by-day?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.dailyHours) {
|
|
this.charts.dailyHours.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('dailyHoursChart').getContext('2d');
|
|
this.charts.dailyHours = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hours_label || 'Hours')
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.date_label || 'Date')
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadBillableChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/billable-vs-nonbillable?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.billable) {
|
|
this.charts.billable.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('billableChart').getContext('2d');
|
|
this.charts.billable = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadProjectChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/hours-by-project?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.project) {
|
|
this.charts.project.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('projectChart').getContext('2d');
|
|
this.charts.project = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hours_label || 'Hours')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadWeeklyTrendsChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/weekly-trends?weeks=${Math.min(12, Math.ceil(this.timeRange / 7))}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.weeklyTrends) {
|
|
this.charts.weeklyTrends.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('weeklyTrendsChart').getContext('2d');
|
|
this.charts.weeklyTrends = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hours_label || 'Hours')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadForecastChart(refresh = false) {
|
|
const el = document.getElementById('forecastChart');
|
|
if (!el) return;
|
|
const response = await fetch(`/api/analytics/hours-forecast?days=${this.timeRange}&forecast_days=7`);
|
|
const raw = await response.json();
|
|
const allLabels = (raw.historical?.labels || []).concat(raw.forecast?.labels || []);
|
|
const histData = (raw.historical?.data || []).concat(new Array((raw.forecast?.labels || []).length).fill(null));
|
|
const foreData = new Array((raw.historical?.labels || []).length).fill(null).concat(raw.forecast?.data || []);
|
|
const chartData = {
|
|
labels: allLabels,
|
|
datasets: [
|
|
{ label: (i18n_analytics.hours_label || 'Hours') + ' (' + (raw.avg_daily_hours || 0) + 'h avg)', data: histData, borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4, fill: true },
|
|
{ label: '{{ _("Forecast") }}', data: foreData, borderColor: '#f59e0b', borderDash: [5, 5], backgroundColor: 'transparent', tension: 0.4, fill: false }
|
|
]
|
|
};
|
|
if (refresh && this.charts.forecast) this.charts.forecast.destroy();
|
|
const ctx = el.getContext('2d');
|
|
this.charts.forecast = new Chart(ctx, {
|
|
type: 'line',
|
|
data: chartData,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: 'bottom' } },
|
|
scales: {
|
|
y: { beginAtZero: true, title: { display: true, text: (i18n_analytics.hours_label || 'Hours') } },
|
|
x: { ticks: { maxTicksLimit: 12 } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadHourlyChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/hours-by-hour?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.hourly) {
|
|
this.charts.hourly.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('hourlyChart').getContext('2d');
|
|
this.charts.hourly = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hours_label || 'Hours')
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hour_of_day_label || 'Hour of Day')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadEfficiencyChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/project-efficiency?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.efficiency) {
|
|
this.charts.efficiency.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('efficiencyChart').getContext('2d');
|
|
this.charts.efficiency = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hours_label || 'Hours')
|
|
}
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.revenue_label || 'Revenue')
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false,
|
|
},
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadOvertimeChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/overtime?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
if (!response.ok) return;
|
|
|
|
const summary = data.summary || {};
|
|
const summaryEl = document.getElementById('overtimeSummary');
|
|
const daysLabelEl = document.getElementById('overtimeDaysLabel');
|
|
if (summaryEl) {
|
|
summaryEl.textContent = (summary.total_regular_hours || 0).toFixed(1) + 'h / ' + (summary.total_overtime_hours || 0).toFixed(1) + 'h';
|
|
}
|
|
if (daysLabelEl && data.users && data.users.length > 0) {
|
|
const daysWithOt = data.users.reduce((s, u) => s + (u.days_with_overtime || 0), 0);
|
|
daysLabelEl.textContent = daysWithOt > 0 ? (daysWithOt + ' ' + (i18n_analytics.days_overtime || 'days with overtime')) : '';
|
|
}
|
|
|
|
const daily = data.daily_breakdown || [];
|
|
if (refresh && this.charts.overtime) {
|
|
this.charts.overtime.destroy();
|
|
}
|
|
const ctx = document.getElementById('overtimeChart');
|
|
if (!ctx) return;
|
|
const chartData = {
|
|
labels: daily.map(d => d.date),
|
|
datasets: [
|
|
{ label: (i18n_analytics.regular_hours || 'Regular'), data: daily.map(d => d.regular_hours), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderColor: '#3b82f6', borderWidth: 1 },
|
|
{ label: (i18n_analytics.overtime_hours || 'Overtime'), data: daily.map(d => d.overtime_hours), backgroundColor: 'rgba(245, 158, 11, 0.8)', borderColor: '#f59e0b', borderWidth: 1 }
|
|
]
|
|
};
|
|
this.charts.overtime = new Chart(ctx.getContext('2d'), {
|
|
type: 'bar',
|
|
data: chartData,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: 'bottom' } },
|
|
scales: {
|
|
x: { stacked: true, ticks: { maxRotation: 45, minRotation: 45 } },
|
|
y: { stacked: true, beginAtZero: true, title: { display: true, text: (i18n_analytics.hours_label || 'Hours') } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
{% if current_user.is_admin %}
|
|
async loadUserChart(refresh = false) {
|
|
const response = await fetch(`/api/analytics/hours-by-user?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
if (refresh && this.charts.user) {
|
|
this.charts.user.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('userChart').getContext('2d');
|
|
this.charts.user = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: (i18n_analytics.hours_label || 'Hours')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
{% endif %}
|
|
|
|
async updateSummaryCards() {
|
|
try {
|
|
// Get summary data from daily hours chart
|
|
const response = await fetch(`/api/analytics/hours-by-day?days=${this.timeRange}`);
|
|
const data = await response.json();
|
|
|
|
const totalHours = data.datasets[0].data.reduce((sum, hours) => sum + hours, 0);
|
|
const avgDailyHours = totalHours / data.datasets[0].data.length;
|
|
|
|
document.getElementById('totalHours').textContent = totalHours.toFixed(1) + 'h';
|
|
document.getElementById('avgDailyHours').textContent = avgDailyHours.toFixed(1) + 'h';
|
|
|
|
// Get billable data
|
|
const billableResponse = await fetch(`/api/analytics/billable-vs-nonbillable?days=${this.timeRange}`);
|
|
const billableData = await billableResponse.json();
|
|
const billableHours = billableData.datasets[0].data[0];
|
|
document.getElementById('billableHours').textContent = billableHours.toFixed(1) + 'h';
|
|
|
|
// Get project count
|
|
const projectResponse = await fetch(`/api/analytics/hours-by-project?days=${this.timeRange}`);
|
|
const projectData = await projectResponse.json();
|
|
document.getElementById('activeProjects').textContent = projectData.labels.length;
|
|
|
|
} catch (error) {
|
|
console.error('Error updating summary cards:', error);
|
|
}
|
|
}
|
|
|
|
showError(message) {
|
|
// Use the new toast notification system
|
|
if (window.toastManager) {
|
|
window.toastManager.error(message, 'Error', 5000);
|
|
} else {
|
|
// Fallback to console if toast system not available
|
|
console.error('Analytics error:', message);
|
|
}
|
|
}
|
|
|
|
exportChartAsPng(chartKey, filename) {
|
|
const chart = this.charts[chartKey];
|
|
if (!chart || !chart.canvas) return;
|
|
const url = chart.toBase64Image('image/png');
|
|
const link = document.createElement('a');
|
|
link.download = filename || (chartKey + '-chart.png');
|
|
link.href = url;
|
|
link.click();
|
|
}
|
|
|
|
exportAllChartsAsPng() {
|
|
const chartIds = ['dailyHours', 'billable', 'project', 'weeklyTrends', 'forecast', 'hourly', 'efficiency', 'overtime'];
|
|
{% if current_user.is_admin %}chartIds.push('user');{% endif %}
|
|
const prefix = 'analytics-' + new Date().toISOString().slice(0, 10) + '-';
|
|
chartIds.forEach((key, i) => {
|
|
const chart = this.charts[key];
|
|
if (chart && chart.canvas) {
|
|
setTimeout(() => {
|
|
this.exportChartAsPng(key, prefix + key + '.png');
|
|
}, i * 300);
|
|
}
|
|
});
|
|
if (window.toastManager) {
|
|
window.toastManager.success('{{ _("Charts exported. Check your downloads.") }}', '{{ _("Export") }}', 3000);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize dashboard when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const dashboard = new AnalyticsDashboard();
|
|
const exportBtn = document.getElementById('exportAllCharts');
|
|
if (exportBtn) {
|
|
exportBtn.addEventListener('click', () => dashboard.exportAllChartsAsPng());
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|