Update frontend/dashboard.html

frontend/dashboard.html

@@ -258,7 +258,7 @@
             }
         }
 
-        // --- CÁC HÀM HELPER & CHART (GIỮ NGUYÊN LOGIC CŨ) ---
+        // --- CÁC HÀM HELPER & CHART ---
         function formatAHT(seconds) {
             if (!seconds || isNaN(seconds)) return "00:00";
             const m = Math.floor(seconds / 60).toString().padStart(2, '0');
@@ -327,38 +327,61 @@
             const retentionData = [65,68,62,70,75,72,78];
             const upsellData = [10,12,8,15,14,13,16];
 
+            // --- 1. BIỂU ĐỒ KINH DOANH (Line Chart) ---
             const busCtx = document.getElementById('businessChart').getContext('2d');
-            if(busChart) busChart.destroy();
-            busChart = new Chart(busCtx,{
-                type:'line',
-                data:{ labels, datasets:[
-                    {label:'Retention (%)', data: retentionData.slice(0,labels.length), borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.1)', tension:0.4, fill:true, borderWidth:3},
-                    {label:'Upsell (%)', data: upsellData.slice(0,labels.length), borderColor:'#0ea5e9', backgroundColor:'rgba(14,165,233,0.1)', tension:0.4, fill:true, borderWidth:3}
-                ]},
-                options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{position:'top'} }, scales:{ y:{beginAtZero:true, grid:{color:'#f1f5f9'}}, x:{grid:{display:false}}} }
-            });
+            if (busChart) {
+                // Nếu đã có, chỉ cập nhật data
+                busChart.data.labels = labels;
+                busChart.data.datasets[0].data = retentionData.slice(0,labels.length);
+                busChart.data.datasets[1].data = upsellData.slice(0,labels.length);
+                busChart.update('none'); // 'none' mode: Cập nhật ngay lập tức, không chạy animation
+            } else {
+                // Nếu chưa có thì tạo mới
+                busChart = new Chart(busCtx,{
+                    type:'line',
+                    data:{ labels, datasets:[
+                        {label:'Retention (%)', data: retentionData.slice(0,labels.length), borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.1)', tension:0.4, fill:true, borderWidth:3},
+                        {label:'Upsell (%)', data: upsellData.slice(0,labels.length), borderColor:'#0ea5e9', backgroundColor:'rgba(14,165,233,0.1)', tension:0.4, fill:true, borderWidth:3}
+                    ]},
+                    options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{position:'top'} }, scales:{ y:{beginAtZero:true, grid:{color:'#f1f5f9'}}, x:{grid:{display:false}}} }
+                });
+            }
 
+            // --- 2. BIỂU ĐỒ INTENT (Doughnut Chart) ---
             const intCtx = document.getElementById('intentChart').getContext('2d');
-            if(intChart) intChart.destroy();
-            intChart = new Chart(intCtx,{
-                type:'doughnut',
-                data:{
-                    labels:['Mạng yếu','Huỷ gói','Đối thủ','Ít Data'],
-                    datasets:[{ data:[metrics.intents.network, metrics.intents.cancel, metrics.intents.competitor, metrics.intents.low_data], backgroundColor:['#0ea5e9','#ef4444','#eab308','#a855f7'], borderWidth:0 }]
-                },
-                options:{ responsive:true, maintainAspectRatio:false, cutout:'75%', plugins:{ legend:{display:false} } }
-            });
+            if (intChart) {
+                // Cập nhật data
+                intChart.data.datasets[0].data = [metrics.intents.network, metrics.intents.cancel, metrics.intents.competitor, metrics.intents.low_data];
+                intChart.update('none');
+            } else {
+                // Tạo mới
+                intChart = new Chart(intCtx,{
+                    type:'doughnut',
+                    data:{
+                        labels:['Mạng yếu','Huỷ gói','Đối thủ','Ít Data'],
+                        datasets:[{ data:[metrics.intents.network, metrics.intents.cancel, metrics.intents.competitor, metrics.intents.low_data], backgroundColor:['#0ea5e9','#ef4444','#eab308','#a855f7'], borderWidth:0 }]
+                    },
+                    options:{ responsive:true, maintainAspectRatio:false, cutout:'75%', plugins:{ legend:{display:false} } }
+                });
+            }
 
+            // --- 3. BIỂU ĐỒ CẢM XÚC (Pie Chart) ---
             const sentCtx = document.getElementById('sentimentChart').getContext('2d');
-            if(sentChart) sentChart.destroy();
-            sentChart = new Chart(sentCtx,{
-                type:'pie',
-                data:{
-                    labels:['Tích cực','Trung lập','Tiêu cực'],
-                    datasets:[{ data:[metrics.sentiments.pos, metrics.sentiments.neu, metrics.sentiments.neg], backgroundColor:['#10b981','#cbd5e1','#f43f5e'], borderWidth:0 }]
-                },
-                options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{position:'bottom'} } }
-            });
+            if (sentChart) {
+                // Cập nhật data
+                sentChart.data.datasets[0].data = [metrics.sentiments.pos, metrics.sentiments.neu, metrics.sentiments.neg];
+                sentChart.update('none');
+            } else {
+                // Tạo mới
+                sentChart = new Chart(sentCtx,{
+                    type:'pie',
+                    data:{
+                        labels:['Tích cực','Trung lập','Tiêu cực'],
+                        datasets:[{ data:[metrics.sentiments.pos, metrics.sentiments.neu, metrics.sentiments.neg], backgroundColor:['#10b981','#cbd5e1','#f43f5e'], borderWidth:0 }]
+                    },
+                    options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{position:'bottom'} } }
+                });
+            }
         }
 
         function updateFeed() {