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:
BTekno Dev
2026-01-02 00:12:03 +07:00
parent e7e2042e86
commit 768a1e146c
3 changed files with 121 additions and 11 deletions

View File

@@ -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,