Sencha chart의 line 클릭시 팝업 띄우기

chart 자체에 afterrender 이벤트에 click 이벤트를 적용

Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    store: {
        fields: ['category', 'value', 'group', 'url'],
        data: [
            { category: 'Jan', value: 10, group: 'Group A', url: 'https://example.com/a1' },
            { category: 'Feb', value: 20, group: 'Group A', url: 'https://example.com/a2' },
            { category: 'Mar', value: 30, group: 'Group A', url: 'https://example.com/a3' },
            { category: 'Jan', value: 15, group: 'Group B', url: 'https://example.com/b1' },
            { category: 'Feb', value: 25, group: 'Group B', url: 'https://example.com/b2' },
            { category: 'Mar', value: 35, group: 'Group B', url: 'https://example.com/b3' }
        ]
    },
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: 'Value'
        },
        {
            type: 'category',
            position: 'bottom',
            title: 'Month'
        }
    ],
    series: [
        {
            type: 'line',
            xField: 'category',
            yField: 'value',
            title: 'Group A',
            marker: {
                type: 'circle',
                size: 4,
                fillStyle: '#f00'
            },
            style: {
                stroke: '#f00',
                lineWidth: 2
            }
        },
        {
            type: 'line',
            xField: 'category',
            yField: 'value',
            title: 'Group B',
            marker: {
                type: 'circle',
                size: 4,
                fillStyle: '#00f'
            },
            style: {
                stroke: '#00f',
                lineWidth: 2
            }
        }
    ],
    listeners: {
        afterrender: function (chart) {
            chart.getEl().on('click', function (event, target) {
                const xy = chart.getEventXY(event);
                const item = chart.getItemForPoint(xy[0], xy[1]);

                if (item && item.series) {
                    const url = item.record.get('url'); // Get the URL from the record

                    // Open a new browser window with the URL
                    window.open(
                        url,
                        '_blank', // Open in a new tab or window
                        'width=800,height=600,resizable=yes,scrollbars=yes'
                    );
                }
            });
        }
    }
});