bertinvictoire/my-kimi-app
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Analytics - Bertin's Calendar</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>9 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">11 <style>12 body { font-family: 'Inter', sans-serif; }13 .chart-container { height: 300px; }14 .metric-card { transition: all 0.3s ease; }15 .metric-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }16 .progress-bar { transition: width 1s ease-in-out; }17 .insight-card { border-left: 4px solid #FCD34D; }18 </style>19</head>20<body class="bg-gray-50 min-h-screen">21 <!-- Navigation Header -->22 <nav class="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50">23 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">24 <div class="flex justify-between items-center h-16">25 <div class="flex items-center space-x-4">26 <div class="flex items-center space-x-2">27 <div class="w-8 h-8 bg-yellow-400 rounded-lg flex items-center justify-center">28 <span class="text-white font-bold text-sm">B</span>29 </div>30 <span class="font-bold text-xl text-gray-800">Bertin's Calendar</span>31 </div>32 </div>33 <div class="flex items-center space-x-6">34 <a href="index.html" class="text-gray-600 hover:text-yellow-500 transition-colors">Calendar</a>35 <a href="analytics.html" class="text-yellow-500 font-medium border-b-2 border-yellow-500 pb-1">Analytics</a>36 <a href="focus.html" class="text-gray-600 hover:text-yellow-500 transition-colors">Focus Mode</a>37 <a href="settings.html" class="text-gray-600 hover:text-yellow-500 transition-colors">Settings</a>38 </div>39 </div>40 </div>41 </nav>42 43 <!-- Header Section -->44 <section class="bg-white border-b border-gray-100">45 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">46 <div class="flex justify-between items-center">47 <div>48 <h1 class="text-3xl font-bold text-gray-800">Productivity Analytics</h1>49 <p class="text-gray-600 mt-2">Insights into your work patterns and productivity trends</p>50 </div>51 <div class="flex items-center space-x-4">52 <select id="time-period" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">53 <option value="week">This Week</option>54 <option value="month" selected>This Month</option>55 <option value="quarter">This Quarter</option>56 <option value="year">This Year</option>57 </select>58 <button onclick="exportData()" class="bg-yellow-400 hover:bg-yellow-500 text-white px-4 py-2 rounded-lg font-medium transition-colors">59 Export Data60 </button>61 </div>62 </div>63 </div>64 </section>65 66 <!-- Main Content -->67 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">68 <!-- Overview Metrics -->69 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">70 <div class="metric-card bg-white rounded-xl shadow-lg p-6">71 <div class="flex items-center justify-between">72 <div>73 <p class="text-sm font-medium text-gray-600">Tasks Completed</p>74 <p class="text-3xl font-bold text-green-600" id="total-completed">24</p>75 <p class="text-sm text-green-600 mt-1">↗ +12% from last month</p>76 </div>77 <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">78 <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">79 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>80 </svg>81 </div>82 </div>83 </div>84 85 <div class="metric-card bg-white rounded-xl shadow-lg p-6">86 <div class="flex items-center justify-between">87 <div>88 <p class="text-sm font-medium text-gray-600">Focus Time</p>89 <p class="text-3xl font-bold text-yellow-600" id="total-focus">18h 45m</p>90 <p class="text-sm text-yellow-600 mt-1">↗ +8% from last month</p>91 </div>92 <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">93 <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">94 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>95 </svg>96 </div>97 </div>98 </div>99 100 <div class="metric-card bg-white rounded-xl shadow-lg p-6">101 <div class="flex items-center justify-between">102 <div>103 <p class="text-sm font-medium text-gray-600">Productivity Score</p>104 <p class="text-3xl font-bold text-blue-600" id="productivity-score">87%</p>105 <p class="text-sm text-blue-600 mt-1">↗ +5% from last month</p>106 </div>107 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">108 <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">109 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>110 </svg>111 </div>112 </div>113 </div>114 115 <div class="metric-card bg-white rounded-xl shadow-lg p-6">116 <div class="flex items-center justify-between">117 <div>118 <p class="text-sm font-medium text-gray-600">Current Streak</p>119 <p class="text-3xl font-bold text-purple-600" id="current-streak">12 days</p>120 <p class="text-sm text-purple-600 mt-1">Keep it up! 🔥</p>121 </div>122 <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">123 <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">124 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>125 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>126 </svg>127 </div>128 </div>129 </div>130 </div>131 132 <!-- Charts Section -->133 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">134 <!-- Task Completion Trends -->135 <div class="bg-white rounded-xl shadow-lg p-6">136 <h3 class="text-xl font-bold text-gray-800 mb-4">Task Completion Trends</h3>137 <div class="chart-container" id="completion-chart"></div>138 </div>139 140 <!-- Time Distribution -->141 <div class="bg-white rounded-xl shadow-lg p-6">142 <h3 class="text-xl font-bold text-gray-800 mb-4">Time Distribution by Category</h3>143 <div class="chart-container" id="time-distribution-chart"></div>144 </div>145 </div>146 147 <!-- Productivity Patterns -->148 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">149 <!-- Focus Session Effectiveness -->150 <div class="bg-white rounded-xl shadow-lg p-6">151 <h3 class="text-xl font-bold text-gray-800 mb-4">Focus Session Effectiveness</h3>152 <div class="chart-container" id="focus-effectiveness-chart"></div>153 </div>154 155 <!-- Priority Completion Rates -->156 <div class="bg-white rounded-xl shadow-lg p-6">157 <h3 class="text-xl font-bold text-gray-800 mb-4">Priority Completion Rates</h3>158 <div class="space-y-4">159 <div class="flex items-center justify-between">160 <div class="flex items-center space-x-2">161 <span class="text-yellow-400">★★★★★</span>162 <span class="text-sm text-gray-600">High Priority</span>163 </div>164 <div class="flex items-center space-x-2">165 <div class="w-24 bg-gray-200 rounded-full h-2">166 <div class="progress-bar bg-yellow-400 h-2 rounded-full" style="width: 85%"></div>167 </div>168 <span class="text-sm font-medium text-gray-800">85%</span>169 </div>170 </div>171 <div class="flex items-center justify-between">172 <div class="flex items-center space-x-2">173 <span class="text-yellow-400">★★★★☆</span>174 <span class="text-sm text-gray-600">Medium-High</span>175 </div>176 <div class="flex items-center space-x-2">177 <div class="w-24 bg-gray-200 rounded-full h-2">178 <div class="progress-bar bg-yellow-400 h-2 rounded-full" style="width: 78%"></div>179 </div>180 <span class="text-sm font-medium text-gray-800">78%</span>181 </div>182 </div>183 <div class="flex items-center justify-between">184 <div class="flex items-center space-x-2">185 <span class="text-yellow-400">★★★☆☆</span>186 <span class="text-sm text-gray-600">Medium</span>187 </div>188 <div class="flex items-center space-x-2">189 <div class="w-24 bg-gray-200 rounded-full h-2">190 <div class="progress-bar bg-yellow-400 h-2 rounded-full" style="width: 65%"></div>191 </div>192 <span class="text-sm font-medium text-gray-800">65%</span>193 </div>194 </div>195 <div class="flex items-center justify-between">196 <div class="flex items-center space-x-2">197 <span class="text-yellow-400">★★☆☆☆</span>198 <span class="text-sm text-gray-600">Low-Medium</span>199 </div>200 <div class="flex items-center space-x-2">201 <div class="w-24 bg-gray-200 rounded-full h-2">202 <div class="progress-bar bg-yellow-400 h-2 rounded-full" style="width: 52%"></div>203 </div>204 <span class="text-sm font-medium text-gray-800">52%</span>205 </div>206 </div>207 <div class="flex items-center justify-between">208 <div class="flex items-center space-x-2">209 <span class="text-yellow-400">★☆☆☆☆</span>210 <span class="text-sm text-gray-600">Low Priority</span>211 </div>212 <div class="flex items-center space-x-2">213 <div class="w-24 bg-gray-200 rounded-full h-2">214 <div class="progress-bar bg-yellow-400 h-2 rounded-full" style="width: 38%"></div>215 </div>216 <span class="text-sm font-medium text-gray-800">38%</span>217 </div>218 </div>219 </div>220 </div>221 </div>222 223 <!-- Insights and Recommendations -->224 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">225 <!-- AI Insights -->226 <div class="bg-white rounded-xl shadow-lg p-6">227 <h3 class="text-xl font-bold text-gray-800 mb-4">AI-Powered Insights</h3>228 <div class="space-y-4" id="ai-insights">229 <div class="insight-card bg-yellow-50 rounded-lg p-4">230 <div class="flex items-start space-x-3">231 <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center flex-shrink-0">232 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">233 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>234 </svg>235 </div>236 <div>237 <h4 class="font-medium text-gray-800">Peak Performance Hours</h4>238 <p class="text-sm text-gray-600 mt-1">You're most productive between 9-11 AM. Consider scheduling your highest priority tasks during this time.</p>239 </div>240 </div>241 </div>242 <div class="insight-card bg-blue-50 rounded-lg p-4">243 <div class="flex items-start space-x-3">244 <div class="w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center flex-shrink-0">245 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">246 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>247 </svg>248 </div>249 <div>250 <h4 class="font-medium text-gray-800">Improving Trend</h4>251 <p class="text-sm text-gray-600 mt-1">Your task completion rate has improved by 15% over the last month. Keep up the great work!</p>252 </div>253 </div>254 </div>255 <div class="insight-card bg-green-50 rounded-lg p-4">256 <div class="flex items-start space-x-3">257 <div class="w-8 h-8 bg-green-400 rounded-full flex items-center justify-center flex-shrink-0">258 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">259 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>260 </svg>261 </div>262 <div>263 <h4 class="font-medium text-gray-800">Focus Session Optimization</h4>264 <p class="text-sm text-gray-600 mt-1">Your average focus session is 32 minutes. Try 45-minute sessions to potentially increase deep work time.</p>265 </div>266 </div>267 </div>268 </div>269 </div>270 271 <!-- Goals and Achievements -->272 <div class="bg-white rounded-xl shadow-lg p-6">273 <h3 class="text-xl font-bold text-gray-800 mb-4">Goals & Achievements</h3>274 275 <!-- Weekly Goals -->276 <div class="mb-6">277 <h4 class="font-medium text-gray-800 mb-3">This Week's Goals</h4>278 <div class="space-y-3">279 <div class="flex items-center justify-between">280 <span class="text-sm text-gray-600">Complete 20 tasks</span>281 <div class="flex items-center space-x-2">282 <div class="w-20 bg-gray-200 rounded-full h-2">283 <div class="progress-bar bg-green-400 h-2 rounded-full" style="width: 80%"></div>284 </div>285 <span class="text-sm font-medium text-gray-800">16/20</span>286 </div>287 </div>288 <div class="flex items-center justify-between">289 <span class="text-sm text-gray-600">Focus for 15 hours</span>290 <div class="flex items-center space-x-2">291 <div class="w-20 bg-gray-200 rounded-full h-2">292 <div class="progress-bar bg-yellow-400 h-2 rounded-full" style="width: 65%"></div>293 </div>294 <span class="text-sm font-medium text-gray-800">9.8/15h</span>295 </div>296 </div>297 <div class="flex items-center justify-between">298 <span class="text-sm text-gray-600">Maintain 85% completion rate</span>299 <div class="flex items-center space-x-2">300 <div class="w-20 bg-gray-200 rounded-full h-2">301 <div class="progress-bar bg-blue-400 h-2 rounded-full" style="width: 95%"></div>302 </div>303 <span class="text-sm font-medium text-gray-800">87%</span>304 </div>305 </div>306 </div>307 </div>308 309 <!-- Achievement Badges -->310 <div>311 <h4 class="font-medium text-gray-800 mb-3">Recent Achievements</h4>312 <div class="grid grid-cols-3 gap-3">313 <div class="text-center p-3 bg-yellow-50 rounded-lg">314 <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-2">315 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">316 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>317 </svg>318 </div>319 <p class="text-xs font-medium text-gray-800">Task Master</p>320 <p class="text-xs text-gray-600">100 tasks</p>321 </div>322 <div class="text-center p-3 bg-green-50 rounded-lg">323 <div class="w-8 h-8 bg-green-400 rounded-full flex items-center justify-center mx-auto mb-2">324 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">325 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>326 </svg>327 </div>328 <p class="text-xs font-medium text-gray-800">Focus Champion</p>329 <p class="text-xs text-gray-600">50 hours</p>330 </div>331 <div class="text-center p-3 bg-blue-50 rounded-lg">332 <div class="w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center mx-auto mb-2">333 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">334 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>335 </svg>336 </div>337 <p class="text-xs font-medium text-gray-800">Streak Keeper</p>338 <p class="text-xs text-gray-600">10 days</p>339 </div>340 </div>341 </div>342 </div>343 </div>344 345 <!-- Detailed Analytics Table -->346 <div class="bg-white rounded-xl shadow-lg p-6">347 <h3 class="text-xl font-bold text-gray-800 mb-4">Detailed Task Analytics</h3>348 <div class="overflow-x-auto">349 <table class="w-full">350 <thead>351 <tr class="border-b border-gray-200">352 <th class="text-left py-3 px-4 font-medium text-gray-700">Task Name</th>353 <th class="text-left py-3 px-4 font-medium text-gray-700">Category</th>354 <th class="text-left py-3 px-4 font-medium text-gray-700">Priority</th>355 <th class="text-left py-3 px-4 font-medium text-gray-700">Est. Time</th>356 <th class="text-left py-3 px-4 font-medium text-gray-700">Actual Time</th>357 <th class="text-left py-3 px-4 font-medium text-gray-700">Efficiency</th>358 <th class="text-left py-3 px-4 font-medium text-gray-700">Status</th>359 </tr>360 </thead>361 <tbody id="task-analytics-table">362 <!-- Table rows will be populated by JavaScript -->363 </tbody>364 </table>365 </div>366 </div>367 </main>368 369 <script>370 // Analytics Page JavaScript371 class AnalyticsDashboard {372 constructor() {373 this.timePeriod = 'month';374 this.tasks = this.loadTasks();375 this.focusSessions = this.loadFocusSessions();376 this.init();377 }378 379 init() {380 this.renderCharts();381 this.renderTaskAnalyticsTable();382 this.setupEventListeners();383 this.animateMetrics();384 }385 386 loadTasks() {387 const saved = localStorage.getItem('productivityTasks');388 if (saved) {389 return JSON.parse(saved);390 }391 392 // Sample data for demonstration393 return [394 {395 id: 1,396 name: 'Review project proposal',397 category: 'work',398 priority: 5,399 estimatedTime: 90,400 actualTime: 105,401 completed: true,402 completedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)403 },404 {405 id: 2,406 name: 'Team meeting preparation',407 category: 'work',408 priority: 4,409 estimatedTime: 45,410 actualTime: 50,411 completed: true,412 completedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000)413 },414 {415 id: 3,416 name: 'Write documentation',417 category: 'work',418 priority: 4,419 estimatedTime: 120,420 actualTime: 110,421 completed: true,422 completedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000)423 },424 {425 id: 4,426 name: 'Exercise routine',427 category: 'health',428 priority: 3,429 estimatedTime: 30,430 actualTime: 35,431 completed: true,432 completedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000)433 },434 {435 id: 5,436 name: 'Learn new framework',437 category: 'learning',438 priority: 3,439 estimatedTime: 60,440 actualTime: 75,441 completed: false442 }443 ];444 }445 446 loadFocusSessions() {447 const saved = localStorage.getItem('focusSessions');448 if (saved) {449 return JSON.parse(saved);450 }451 452 // Sample focus session data453 return [454 { date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), duration: 25, completed: true },455 { date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), duration: 25, completed: true },456 { date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), duration: 45, completed: true },457 { date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), duration: 25, completed: true },458 { date: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000), duration: 30, completed: true }459 ];460 }461 462 renderCharts() {463 this.renderCompletionChart();464 this.renderTimeDistributionChart();465 this.renderFocusEffectivenessChart();466 }467 468 renderCompletionChart() {469 const chart = echarts.init(document.getElementById('completion-chart'));470 471 const option = {472 tooltip: {473 trigger: 'axis',474 axisPointer: {475 type: 'cross'476 }477 },478 grid: {479 left: '3%',480 right: '4%',481 bottom: '3%',482 containLabel: true483 },484 xAxis: {485 type: 'category',486 data: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],487 axisLine: {488 lineStyle: {489 color: '#e5e7eb'490 }491 },492 axisLabel: {493 color: '#6b7280'494 }495 },496 yAxis: {497 type: 'value',498 axisLine: {499 lineStyle: {500 color: '#e5e7eb'501 }502 },503 axisLabel: {504 color: '#6b7280'505 },506 splitLine: {507 lineStyle: {508 color: '#f3f4f6'509 }510 }511 },512 series: [513 {514 name: 'Completed Tasks',515 type: 'line',516 data: [18, 22, 19, 24],517 smooth: true,518 lineStyle: {519 color: '#10b981',520 width: 3521 },522 itemStyle: {523 color: '#10b981'524 },525 areaStyle: {526 color: {527 type: 'linear',528 x: 0,529 y: 0,530 x2: 0,531 y2: 1,532 colorStops: [{533 offset: 0, color: 'rgba(16, 185, 129, 0.3)'534 }, {535 offset: 1, color: 'rgba(16, 185, 129, 0.05)'536 }]537 }538 }539 },540 {541 name: 'Focus Hours',542 type: 'line',543 data: [12, 15, 14, 18],544 smooth: true,545 lineStyle: {546 color: '#fcd34d',547 width: 3548 },549 itemStyle: {550 color: '#fcd34d'551 }552 }553 ]554 };555 556 chart.setOption(option);557 558 // Make chart responsive559 window.addEventListener('resize', () => {560 chart.resize();561 });562 }563 564 renderTimeDistributionChart() {565 const chart = echarts.init(document.getElementById('time-distribution-chart'));566 567 const option = {568 tooltip: {569 trigger: 'item',570 formatter: '{a} <br/>{b}: {c} hours ({d}%)'571 },572 series: [573 {574 name: 'Time Distribution',575 type: 'pie',576 radius: ['40%', '70%'],577 avoidLabelOverlap: false,578 itemStyle: {579 borderRadius: 10,580 borderColor: '#fff',581 borderWidth: 2582 },583 label: {584 show: false,585 position: 'center'586 },587 emphasis: {588 label: {589 show: true,590 fontSize: '18',591 fontWeight: 'bold'592 }593 },594 labelLine: {595 show: false596 },597 data: [598 { value: 45, name: 'Work', itemStyle: { color: '#fcd34d' } },599 { value: 25, name: 'Learning', itemStyle: { color: '#10b981' } },600 { value: 15, name: 'Health', itemStyle: { color: '#3b82f6' } },601 { value: 10, name: 'Personal', itemStyle: { color: '#8b5cf6' } },602 { value: 5, name: 'Creative', itemStyle: { color: '#f59e0b' } }603 ]604 }605 ]606 };607 608 chart.setOption(option);609 610 window.addEventListener('resize', () => {611 chart.resize();612 });613 }614 615 renderFocusEffectivenessChart() {616 const chart = echarts.init(document.getElementById('focus-effectiveness-chart'));617 618 const option = {619 tooltip: {620 trigger: 'axis',621 axisPointer: {622 type: 'shadow'623 }624 },625 grid: {626 left: '3%',627 right: '4%',628 bottom: '3%',629 containLabel: true630 },631 xAxis: {632 type: 'category',633 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],634 axisLine: {635 lineStyle: {636 color: '#e5e7eb'637 }638 },639 axisLabel: {640 color: '#6b7280'641 }642 },643 yAxis: {644 type: 'value',645 max: 100,646 axisLine: {647 lineStyle: {648 color: '#e5e7eb'649 }650 },651 axisLabel: {652 color: '#6b7280',653 formatter: '{value}%'654 },655 splitLine: {656 lineStyle: {657 color: '#f3f4f6'658 }659 }660 },661 series: [662 {663 name: 'Focus Effectiveness',664 type: 'bar',665 data: [85, 92, 78, 88, 95, 72, 68],666 itemStyle: {667 color: {668 type: 'linear',669 x: 0,670 y: 0,671 x2: 0,672 y2: 1,673 colorStops: [{674 offset: 0, color: '#fcd34d'675 }, {676 offset: 1, color: '#f59e0b'677 }]678 },679 borderRadius: [4, 4, 0, 0]680 }681 }682 ]683 };684 685 chart.setOption(option);686 687 window.addEventListener('resize', () => {688 chart.resize();689 });690 }691 692 renderTaskAnalyticsTable() {693 const tableBody = document.getElementById('task-analytics-table');694 const completedTasks = this.tasks.filter(task => task.completed);695 696 tableBody.innerHTML = completedTasks.map(task => {697 const efficiency = Math.round((task.estimatedTime / task.actualTime) * 100);698 const efficiencyColor = efficiency >= 90 ? 'text-green-600' : efficiency >= 70 ? 'text-yellow-600' : 'text-red-600';699 700 return `701 <tr class="border-b border-gray-100 hover:bg-gray-50">702 <td class="py-3 px-4">703 <div>704 <p class="font-medium text-gray-800">${task.name}</p>705 <p class="text-sm text-gray-500">Completed ${this.formatDate(task.completedAt)}</p>706 </div>707 </td>708 <td class="py-3 px-4">709 <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 capitalize">710 ${task.category}711 </span>712 </td>713 <td class="py-3 px-4">714 <span class="text-yellow-400">${'★'.repeat(task.priority)}${'☆'.repeat(5-task.priority)}</span>715 </td>716 <td class="py-3 px-4 text-sm text-gray-600">${this.formatTime(task.estimatedTime)}</td>717 <td class="py-3 px-4 text-sm text-gray-600">${this.formatTime(task.actualTime)}</td>718 <td class="py-3 px-4">719 <span class="text-sm font-medium ${efficiencyColor}">${efficiency}%</span>720 </td>721 <td class="py-3 px-4">722 <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">723 Completed724 </span>725 </td>726 </tr>727 `;728 }).join('');729 }730 731 animateMetrics() {732 // Animate metric cards733 anime({734 targets: '.metric-card',735 translateY: [20, 0],736 opacity: [0, 1],737 delay: anime.stagger(100),738 duration: 600,739 easing: 'easeOutQuad'740 });741 742 // Animate progress bars743 setTimeout(() => {744 document.querySelectorAll('.progress-bar').forEach(bar => {745 const width = bar.style.width;746 bar.style.width = '0%';747 setTimeout(() => {748 bar.style.width = width;749 }, 100);750 });751 }, 500);752 753 // Animate insight cards754 anime({755 targets: '.insight-card',756 translateX: [-20, 0],757 opacity: [0, 1],758 delay: anime.stagger(150, {start: 800}),759 duration: 500,760 easing: 'easeOutQuad'761 });762 }763 764 setupEventListeners() {765 document.getElementById('time-period').addEventListener('change', (e) => {766 this.timePeriod = e.target.value;767 this.updateForTimePeriod();768 });769 }770 771 updateForTimePeriod() {772 // In a real app, this would update all metrics and charts based on the selected time period773 console.log('Updating analytics for time period:', this.timePeriod);774 775 // Show loading state776 const metrics = document.querySelectorAll('.metric-card');777 metrics.forEach(card => {778 card.style.opacity = '0.5';779 });780 781 // Simulate loading and update782 setTimeout(() => {783 metrics.forEach(card => {784 card.style.opacity = '1';785 });786 this.animateMetrics();787 }, 1000);788 }789 790 formatTime(minutes) {791 const hours = Math.floor(minutes / 60);792 const mins = minutes % 60;793 794 if (hours === 0) {795 return `${mins}m`;796 } else if (mins === 0) {797 return `${hours}h`;798 } else {799 return `${hours}h ${mins}m`;800 }801 }802 803 formatDate(date) {804 if (!date) return 'N/A';805 return new Date(date).toLocaleDateString('en-US', { 806 month: 'short', 807 day: 'numeric' 808 });809 }810 }811 812 // Global functions813 function exportData() {814 // In a real app, this would export analytics data815 alert('Data export functionality coming soon!');816 }817 818 // Initialize analytics dashboard819 let analytics;820 document.addEventListener('DOMContentLoaded', () => {821 analytics = new AnalyticsDashboard();822 });823 </script>824</body>825</html>