Feat: Tambah animasi counter di KPI cards dan animasi naik turun di chart trending harian
- Counter animation dari angka terkecil ke target dengan easing smooth - Chart animation naik dari bawah tanpa animasi horizontal - Loading overlay dengan spinner animation - Fade animation untuk card values saat update
This commit is contained in:
@@ -49,6 +49,30 @@ export function initDailyChart(ctx) {
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 1500,
|
||||
easing: 'linear',
|
||||
x: {
|
||||
duration: 0 // Tidak ada animasi horizontal (kanan ke kiri)
|
||||
},
|
||||
y: {
|
||||
type: 'number',
|
||||
easing: 'linear',
|
||||
duration: 1500,
|
||||
from: (ctx) => {
|
||||
// Animasi naik dari bawah (0) untuk efek naik turun yang smooth
|
||||
try {
|
||||
const chart = ctx.chart;
|
||||
if (chart && chart.scales && chart.scales.y) {
|
||||
return chart.scales.y.getPixelForValue(0);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[Charts] Error getting scale for animation:', e);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
@@ -132,8 +156,8 @@ export function updateDailyChart({ labels, counts, amounts }) {
|
||||
dailyLineChart.data.datasets[0].data = finalCounts;
|
||||
dailyLineChart.data.datasets[1].data = finalAmounts;
|
||||
|
||||
// Update chart dengan mode 'none' untuk menghindari animasi yang tidak perlu
|
||||
dailyLineChart.update('none');
|
||||
// Update chart dengan animasi naik turun yang smooth
|
||||
dailyLineChart.update('active');
|
||||
|
||||
console.log('[Charts] Daily chart updated:', {
|
||||
labelsCount: finalLabels.length,
|
||||
@@ -222,7 +246,7 @@ export function updateCategoryChart({ labels, values }) {
|
||||
categoryChart.data.datasets[0].data = safeValues;
|
||||
|
||||
// Update chart dengan mode 'none' untuk menghindari animasi yang tidak perlu
|
||||
categoryChart.update('none');
|
||||
categoryChart.update('active');
|
||||
|
||||
console.log('[Charts] Category chart updated:', {
|
||||
labels: safeLabels,
|
||||
|
||||
Reference in New Issue
Block a user