/* Chart logic for WF_MIGRATED analysis visualization */ (function(global) { 'use strict'; let migrationChartInstance = null; let timelineChartInstance = null; function destroyChart(chartInstance) { if (chartInstance) { chartInstance.destroy(); } } function renderMigrationChart(analysisData) { const ctx = document.getElementById('migrationChart'); if (!ctx || !analysisData || !Array.isArray(analysisData.runs)) { console.warn('renderMigrationChart: invalid data or missing canvas'); return; } const labels = analysisData.runs.map(run => run.type || 'unknown'); const medianShifts = analysisData.runs.map(run => run.median_shift || 0); const variances = analysisData.runs.map(run => run.variance || 0); destroyChart(migrationChartInstance); migrationChartInstance = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [ { label: 'Median Shift', data: medianShifts, backgroundColor: 'rgba(75, 192, 192, 0.6)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }, { label: 'Variance', data: variances, backgroundColor: 'rgba(255, 159, 64, 0.6)', borderColor: 'rgba(255, 159, 64, 1)', borderWidth: 1 } ] }, options: { responsive: true, plugins: { title: { display: true, text: 'WF_MIGRATED Impact on Median and Variance' }, legend: { display: true, position: 'bottom' } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Time (ns)' } } } } }); } function updateTimelineChart(analysisData) { const ctx = document.getElementById('timelineChart'); if (!ctx || !analysisData || !Array.isArray(analysisData.runs)) { console.warn('updateTimelineChart: invalid data or missing canvas'); return; } const labels = []; const values = []; const migratedPoints = []; analysisData.runs.forEach((run, index) => { labels.push(`Run ${index + 1}`); const offset = run.offset_constant || 0; values.push(offset); if (run.migrated_ratio > 0) { migratedPoints.push({ x: index, y: offset, r: Math.min(run.migrated_ratio * 10, 10) }); } }); destroyChart(timelineChartInstance); timelineChartInstance = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'Offset Constant', data: values, borderColor: 'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235, 0.2)', fill: false, tension: 0.3 }, { label: 'WF_MIGRATED markers', data: migratedPoints, type: 'bubble', backgroundColor: 'rgba(255, 99, 132, 0.6)' } ] }, options: { responsive: true, interaction: { mode: 'nearest', intersect: false }, plugins: { title: { display: true, text: 'Task Scheduling Timeline' }, legend: { display: true, position: 'bottom' } }, scales: { y: { title: { display: true, text: 'Offset' } }, x: { title: { display: true, text: 'Run Index' } } } } }); } global.renderMigrationChart = renderMigrationChart; global.updateTimelineChart = updateTimelineChart; })(window);