const fullData = [
    { x: new Date('2024-02-02'), y: 3314 },
    { x: new Date('2024-02-05'), y: 3334 },
    { x: new Date('2024-02-06'), y: 3306 },
    { x: new Date('2024-02-07'), y: 3290 },
    { x: new Date('2024-02-08'), y: 3286 },
    { x: new Date('2024-02-09'), y: 3284 },
    { x: new Date('2024-02-10'), y: 3276 },
    { x: new Date('2024-02-12'), y: 3276 },
    { x: new Date('2024-02-13'), y: 3269 },
    { x: new Date('2024-02-14'), y: 3285 },
    { x: new Date('2024-05-20'), y: 3408 },
    { x: new Date('2024-08-01'), y: 3557 },
    { x: new Date('2024-08-02'), y: 3574 },
    { x: new Date('2024-08-05'), y: 3651 },
    { x: new Date('2024-08-06'), y: 3624 },
    { x: new Date('2024-08-07'), y: 3577 },
    { x: new Date('2024-08-28'), y: 3561 },
    { x: new Date('2024-08-29'), y: 3561 },
    { x: new Date('2024-08-30'), y: 3590 },
    { x: new Date('2024-09-02'), y: 3582 },
    { x: new Date('2024-09-03'), y: 3544 },
    { x: new Date('2024-09-04'), y: 3558 },
    { x: new Date('2024-09-05'), y: 3554 },
    { x: new Date('2024-09-05'), y: 3549 },
    { x: new Date('2024-09-06'), y: 3546 },
    { x: new Date('2024-09-07'), y: 3549 },
    { x: new Date('2024-09-08'), y: 3549 },
    { x: new Date('2024-09-09'), y: 3553 },
    { x: new Date('2024-09-10'), y: 3539 },
    { x: new Date('2024-09-19'), y: 3597 },
    { x: new Date('2024-09-20'), y: 3597 },
    { x: new Date('2024-09-23'), y: 3601 },
    { x: new Date('2024-09-24'), y: 3621 },
    { x: new Date('2024-09-25'), y: 3660 },
    { x: new Date('2024-09-26'), y: 3640 },
    { x: new Date('2024-09-27'), y: 3674 },
    { x: new Date('2024-10-01'), y: 3657 },
    { x: new Date('2024-10-02'), y: 3656 },
    { x: new Date('2024-10-03'), y: 3651 },
    { x: new Date('2024-10-04'), y: 3659 },
    { x: new Date('2024-10-05'), y: 3672 },
    { x: new Date('2024-10-07'), y: 3631 },
    { x: new Date('2024-10-08'), y: 3654 },
    { x: new Date('2024-10-10'), y: 3637 },
    { x: new Date('2024-10-11'), y: 3655 },
    { x: new Date('2024-10-12'), y: 3630 },
    { x: new Date('2024-10-14'), y: 3629 },
    { x: new Date('2024-10-15'), y: 3615 },
    { x: new Date('2024-10-16'), y: 3609 },
    { x: new Date('2024-10-17'), y: 3620 },
    { x: new Date('2024-10-18'), y: 3599 },
    { x: new Date('2024-10-19'), y: 3595 },
    { x: new Date('2024-10-20'), y: 3594 },
    { x: new Date('2024-10-21'), y: 3594 },
    { x: new Date('2024-10-22'), y: 3599 },
    { x: new Date('2024-10-23'), y: 3592 },
    { x: new Date('2024-10-24'), y: 3586 },
    { x: new Date('2024-10-25'), y: 3586 },
    { x: new Date('2024-10-26'), y: 3600 },
    { x: new Date('2024-10-27'), y: 3602 },
    { x: new Date('2024-10-28'), y: 3591 },
    { x: new Date('2024-10-29'), y: 3605 },
    { x: new Date('2024-10-30'), y: 3605 },
    { x: new Date('2024-10-31'), y: 3585 },
    { x: new Date('2024-11-01'), y: 3585 },
    { x: new Date('2024-11-02'), y: 3591 },
    { x: new Date('2024-11-03'), y: 3591 },
    { x: new Date('2024-11-04'), y: 3592 },
    { x: new Date('2024-11-05'), y: 3611 },
    { x: new Date('2024-11-06'), y: 3625 },
    { x: new Date('2024-11-07'), y: 3594 },
    { x: new Date('2024-11-08'), y: 3575 },
    { x: new Date('2024-11-09'), y: 3576 },
    { x: new Date('2024-11-10'), y: 3576 },
    { x: new Date('2024-11-11'), y: 3563 },
    { x: new Date('2024-11-12'), y: 3552 },
    { x: new Date('2024-11-13'), y: 3554 },
    { x: new Date('2024-11-14'), y: 3529 },
    { x: new Date('2024-11-15'), y: 3537 },
    { x: new Date('2024-11-16'), y: 3544 },
    { x: new Date('2024-11-17'), y: 3544 },
    { x: new Date('2024-11-18'), y: 3550 },
    { x: new Date('2024-11-19'), y: 3548 },
    { x: new Date('2024-11-21'), y: 3547 },
    { x: new Date('2024-11-22'), y: 3560 },
    { x: new Date('2024-11-23'), y: 3553 },
    { x: new Date('2024-11-24'), y: 3553 },
    { x: new Date('2024-11-26'), y: 3553 },
    { x: new Date('2024-11-27'), y: 3572 },
    { x: new Date('2024-11-28'), y: 3572 },
    { x: new Date('2024-11-29'), y: 3578 },
    { x: new Date('2024-12-01'), y: 3563 },
    { x: new Date('2024-12-02'), y: 3561 },
    { x: new Date('2024-12-03'), y: 3568 },
    { x: new Date('2024-12-04'), y: 3583 },
    { x: new Date('2024-12-06'), y: 3583 },
    { x: new Date('2024-12-07'), y: 3584 },
    { x: new Date('2024-12-08'), y: 3584 },
    { x: new Date('2024-12-09'), y: 3584 },
    { x: new Date('2024-12-10'), y: 3583 },
    { x: new Date('2024-12-11'), y: 3584 },
    { x: new Date('2024-12-12'), y: 3593 },
    { x: new Date('2024-12-13'), y: 3583 },
    { x: new Date('2024-12-14'), y: 3594 },
    { x: new Date('2024-12-15'), y: 3594 },
    { x: new Date('2024-12-16'), y: 3593 },
    { x: new Date('2024-12-17'), y: 3594 },
    { x: new Date('2024-12-18'), y: 3602 },
    { x: new Date('2024-12-19'), y: 3611 },
    { x: new Date('2024-12-20'), y: 3614 },
    { x: new Date('2024-12-22'), y: 3593 },
    { x: new Date('2024-12-23'), y: 3603 },
    { x: new Date('2024-12-24'), y: 3616 },
    { x: new Date('2024-12-25'), y: 3613 },
    { x: new Date('2024-12-27'), y: 3631 },
    { x: new Date('2024-12-30'), y: 3629 },
    { x: new Date('2024-12-31'), y: 3620 },
    { x: new Date('2025-01-02'), y: 3626 },
    { x: new Date('2025-01-03'), y: 3610 },
    { x: new Date('2025-01-04'), y: 3599 },
    { x: new Date('2025-01-06'), y: 3595 },
    { x: new Date('2025-01-15'), y: 3619 },
    { x: new Date('2025-01-16'), y: 3649 },
    { x: new Date('2025-01-17'), y: 3645 },
    { x: new Date('2025-01-19'), y: 3631 },
    { x: new Date('2025-01-20'), y: 3631 },
    { x: new Date('2025-01-21'), y: 3628 },
    { x: new Date('2025-01-22'), y: 3657 },
    { x: new Date('2025-01-23'), y: 3665 },
    { x: new Date('2025-01-24'), y: 3654 },
    { x: new Date('2025-01-25'), y: 3686 },
    { x: new Date('2025-01-26'), y: 3695 },
    { x: new Date('2025-01-27'), y: 3689 },
    { x: new Date('2025-01-28'), y: 3691 },
    { x: new Date('2025-01-29'), y: 3695 },
    { x: new Date('2025-01-31'), y: 3698 },
    { x: new Date('2025-02-01'), y: 3671 },
    { x: new Date('2025-02-03'), y: 3671 },
    { x: new Date('2025-02-04'), y: 3658 },
    { x: new Date('2025-02-06'), y: 3683 },
    { x: new Date('2025-02-07'), y: 3685 },
    { x: new Date('2025-02-08'), y: 3669 },
    { x: new Date('2025-02-09'), y: 3669 },
    { x: new Date('2025-02-10'), y: 3664 },
    { x: new Date('2025-02-11'), y: 3664 },
    { x: new Date('2025-02-12'), y: 3655 },
    { x: new Date('2025-02-13'), y: 3657 },
    { x: new Date('2025-02-14'), y: 3672 },
    { x: new Date('2025-02-17'), y: 3664 },
    { x: new Date('2025-02-18'), y: 3657 },
    { x: new Date('2025-02-19'), y: 3664 },
    { x: new Date('2025-02-20'), y: 3678 },
    { x: new Date('2025-02-24'), y: 3689 },
    { x: new Date('2025-02-25'), y: 3690 },
    { x: new Date('2025-02-26'), y: 3695 },
    { x: new Date('2025-02-27'), y: 3695 },
    { x: new Date('2025-02-28'), y: 3701 },
    { x: new Date('2025-03-01'), y: 3712 },
    { x: new Date('2025-03-02'), y: 3712 },
    { x: new Date('2025-03-03'), y: 3694 },
    { x: new Date('2025-03-04'), y: 3683 },
    { x: new Date('2025-03-06'), y: 3684 },
    { x: new Date('2025-03-07'), y: 3688 },
    { x: new Date('2025-03-08'), y: 3687 },
    { x: new Date('2025-03-10'), y: 3686 },
    { x: new Date('2025-03-11'), y: 3692 },
    { x: new Date('2025-03-12'), y: 3716.85 },
    { x: new Date('2025-03-13'), y: 3710.87 },
    { x: new Date('2025-03-14'), y: 3699.09 },
    { x: new Date('2025-03-15'), y: 3676.71 },
    { x: new Date('2025-03-16'), y: 3676.74 },
    { x: new Date('2025-03-17'), y: 3676.74 },
    { x: new Date('2025-03-18'), y: 3674.58 },
    { x: new Date('2025-03-19'), y: 3699.38 },
    { x: new Date('2025-03-20'), y: 3720.88 },
    { x: new Date('2025-03-21'), y: 3722.79 },
    { x: new Date('2025-03-22'), y: 3729.61 },
    { x: new Date('2025-03-23'), y: 3730.76 },
    { x: new Date('2025-03-24'), y: 3727.00 },
    { x: new Date('2025-03-25'), y: 3727.00 },
    { x: new Date('2025-03-26'), y: 3734.95 },
    { x: new Date('2025-03-27'), y: 3742.21 },
    { x: new Date('2025-03-28'), y: 3734.70 },
    { x: new Date('2025-03-30'), y: 3730.82 },
    { x: new Date('2025-03-31'), y: 3729.64 },
    { x: new Date('2025-04-01'), y: 3734.52 },
    { x: new Date('2025-04-02'), y: 3741.30 },
    { x: new Date('2025-04-03'), y: 3724.74 },
    { x: new Date('2025-04-04'), y: 3735.46 },
    { x: new Date('2025-04-05'), y: 3758.30 },
    { x: new Date('2025-04-06'), y: 3761.84 },
    { x: new Date('2025-04-07'), y: 3747.04 },
    { x: new Date('2025-04-08'), y: 3726.52 },
    { x: new Date('2025-04-09'), y: 3756.88 },
    { x: new Date('2025-04-10'), y: 3759.79 },
    { x: new Date('2025-04-11'), y: 3760.16 },
    { x: new Date('2025-04-12'), y: 3801.94 },
    { x: new Date('2025-04-13'), y: 3802.70 },
    { x: new Date('2025-04-14'), y: 3805.88 },
    { x: new Date('2025-04-15'), y: 3799.93 },
    { x: new Date('2025-04-16'), y: 3809.32 },
    { x: new Date('2025-04-17'), y: 3817.32 },
    { x: new Date('2025-04-18'), y: 3822.85 },
    { x: new Date('2025-04-19'), y: 3817.60 },
    { x: new Date('2025-04-20'), y: 3818.20 },
    { x: new Date('2025-04-21'), y: 3820.58 },
    { x: new Date('2025-04-22'), y: 3848.44 },
    { x: new Date('2025-04-23'), y: 3842.52 },
    { x: new Date('2025-04-24'), y: 3841.61 },
    { x: new Date('2025-04-26'), y: 3850.14 },
    { x: new Date('2025-04-27'), y: 3851.59 },
    { x: new Date('2025-04-28'), y: 3855.05 },
    { x: new Date('2025-05-02'), y: 3843.41 },
    { x: new Date('2025-05-05'), y: 3838.67 },
    { x: new Date('2025-05-06'), y: 3838.67 },
    { x: new Date('2025-05-08'), y: 3884.06 },
    { x: new Date('2025-05-09'), y: 3850.41 },
    { x: new Date('2025-05-10'), y: 3842.60 },
    { x: new Date('2025-05-11'), y: 3841.50 },
    { x: new Date('2025-05-12'), y: 3837.43 },
    { x: new Date('2025-05-13'), y: 3850.09 },
    { x: new Date('2025-05-14'), y: 3831.27 },
    { x: new Date('2025-05-15'), y: 3850.56 },
    { x: new Date('2025-05-16'), y: 3851.41 },
    { x: new Date('2025-05-17'), y: 3824.59 },
    { x: new Date('2025-05-19'), y: 3823.39 },
    { x: new Date('2025-05-20'), y: 3826.21 },
    { x: new Date('2025-05-21'), y: 3817.69 },
    { x: new Date('2025-05-22'), y: 3829.65 },
    { x: new Date('2025-05-24'), y: 3833.62 },
    { x: new Date('2025-05-26'), y: 3830.62 },
    { x: new Date('2025-05-27'), y: 3847.62 },
    { x: new Date('2025-06-04'), y: 3836.24 },
    { x: new Date('2025-06-05'), y: 3833.12 },
    { x: new Date('2025-06-06'), y: 3843.52 },
    { x: new Date('2025-06-07'), y: 3849.21 },
    { x: new Date('2025-06-08'), y: 3849.49 },
    { x: new Date('2025-06-10'), y: 3842.35 },
    { x: new Date('2025-06-11'), y: 3837.40 },
    { x: new Date('2025-06-12'), y: 3835.52 },
    { x: new Date('2025-06-13'), y: 3841.09 },
    { x: new Date('2025-06-14'), y: 3838.58 },
    { x: new Date('2025-06-15'), y: 3838.11 },
    { x: new Date('2025-06-16'), y: 3832.78 },
    { x: new Date('2025-06-17'), y: 3832.99 },
    { x: new Date('2025-06-18'), y: 3832.81 },
    { x: new Date('2025-06-20'), y: 3841.12 },
    { x: new Date('2025-06-21'), y: 3848.53 },
    { x: new Date('2025-06-22'), y: 3850.13 },
    { x: new Date('2025-06-23'), y: 3847.04 },
    { x: new Date('2025-06-24'), y: 3832.97 },
    { x: new Date('2025-06-25'), y: 3845.18 },
    { x: new Date('2025-06-26'), y: 3841.83 },
    { x: new Date('2025-06-27'), y: 3834.41 },
    { x: new Date('2025-06-28'), y: 3831.41 },
    { x: new Date('2025-06-29'), y: 3831.58 },
    { x: new Date('2025-06-30'), y: 3828.89 },
    { x: new Date('2025-07-01'), y: 3849.70 },
    { x: new Date('2025-07-02'), y: 3856.75 },
    { x: new Date('2025-07-04'), y: 3834.63 },
    { x: new Date('2025-07-05'), y: 3833.16 },
    { x: new Date('2025-07-06'), y: 3832.51 },
    { x: new Date('2025-07-07'), y: 3830.49 },
    { x: new Date('2025-07-08'), y: 3828.95 },
    { x: new Date('2025-07-09'), y: 3823.85 },
    { x: new Date('2025-07-10'), y: 3818.09 },
    { x: new Date('2025-07-12'), y: 3810.15 },
    { x: new Date('2025-07-13'), y: 3809.93 },
    { x: new Date('2025-07-14'), y: 3795.95 },
    { x: new Date('2025-07-16'), y: 3826.57 },
    { x: new Date('2025-07-17'), y: 3832.11 },
    { x: new Date('2025-07-19'), y: 3830.83 },
    { x: new Date('2025-07-20'), y: 3834.16 },
    { x: new Date('2025-07-21'), y: 3829.02 },
    { x: new Date('2025-07-22'), y: 3847.42 },
    { x: new Date('2025-07-23'), y: 3851.34 },
    { x: new Date('2025-07-24'), y: 3849.59 },
    { x: new Date('2025-07-25'), y: 3859.92 },
    { x: new Date('2025-07-26'), y: 3862.64 },
    { x: new Date('2025-07-27'), y: 3861.87 },
    { x: new Date('2025-07-29'), y: 3856.59 },
    { x: new Date('2025-07-30'), y: 3865.23 },
    { x: new Date('2025-07-31'), y: 3862.21 },
    { x: new Date('2025-08-01'), y: 3855.74 },
    { x: new Date('2025-08-02'), y: 3853.75 },
    { x: new Date('2025-08-03'), y: 3852.94 },
    { x: new Date('2025-08-04'), y: 3839.12 },
    { x: new Date('2025-08-05'), y: 3856.45 },
    { x: new Date('2025-08-06'), y: 3866.48 },
    { x: new Date('2025-08-07'), y: 3862.28 },
    { x: new Date('2025-08-08'), y: 3846.58 },
    { x: new Date('2025-08-09'), y: 3838.58 },
    { x: new Date('2025-08-10'), y: 3837.68 },
    { x: new Date('2025-08-11'), y: 3833.32 },
    { x: new Date('2025-08-12'), y: 3840.14 },
    { x: new Date('2025-08-13'), y: 3846.96 },
    { x: new Date('2025-08-14'), y: 3840.16 },
    { x: new Date('2025-08-15'), y: 3823.49 },
    { x: new Date('2025-08-16'), y: 3828.82 },
    { x: new Date('2025-08-18'), y: 3835.02 },
    { x: new Date('2025-08-19'), y: 3829.36 },
    { x: new Date('2025-08-20'), y: 3841.19 },
    { x: new Date('2025-08-21'), y: 3844.81 },
    { x: new Date('2025-08-22'), y: 3852.98 },
    { x: new Date('2025-08-23'), y: 3865.07 },
    { x: new Date('2025-08-24'), y: 3864.36 },
    { x: new Date('2025-08-25'), y: 3860.29 },
    { x: new Date('2025-08-26'), y: 3859.97 },
    { x: new Date('2025-08-27'), y: 3863.28 },
    { x: new Date('2025-08-28'), y: 3863.66 },
    { x: new Date('2025-08-29'), y: 3863.86 },
    { x: new Date('2025-08-30'), y: 3892.14 }];

const options = {
    chart: {
        type: 'area',
        height: 300,
        toolbar: { show: false },
        zoom: { enabled: false }
    },
    series: [{ name: '', data: fullData }],
    xaxis: {
        type: 'datetime'
    },
    yaxis: {
        tickAmount: 7,
        labels: {
            formatter: val => `${val.toLocaleString('id-ID')}`,
            offsetX: -17
        }
    },
    grid: {
        padding: {
            left: -10,
            right: 0
        }
    },
    tooltip: {
        x: { format: 'dd MMM yyyy' },
        y: {
            formatter: val => `Rp ${val.toLocaleString('id-ID')}`
        }
    },
    stroke: {
        curve: 'smooth',
        width: 2
    },
    fill: {
        type: 'gradient',
        gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.8,
            opacityTo: 0,
            stops: [0, 90, 100]
        }
    },
    colors: ['#007bff'],
    legend: { show: false },
    dataLabels: { enabled: false }
};

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

function updateChart(months) {
    const sortedData = [...fullData].sort((a, b) => a.x - b.x);
    const latestDate = sortedData[sortedData.length - 1].x;
    const start = new Date(latestDate);
    start.setMonth(start.getMonth() - months);

    const filtered = fullData.filter(item => item.x >= start && item.x <= latestDate);
    chart.updateSeries([{ name: '', data: filtered }]);
}

document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const months = parseInt(btn.dataset.months);
        updateChart(months);
    });
});
updateChart(1);