Sencha chart mouse out 처리

mouse over된 item을 저장하는 변수 선언

let lastHighlightedItem = null; // To track the last highlighted item globally

mouse over시 처리할 내용 추가 및 hide 이벤트 추가

{
    xtype: 'cartesian',
    itemId: 'chart',
    width: 600,
    height: 400,
    store: {
        fields: ['date', 'DATA', 'value'],
        data: [
            { date: '2024-11-27 12:00', DATA: 'Data1', value: 50 },
            { date: '2024-11-27 13:00', DATA: 'Data2', value: 70 },
            // Add more records as needed
        ]
    },
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: 'Value'
        },
        {
            type: 'category',
            position: 'bottom',
            title: 'Time',
            fields: 'date'
        }
    ],
    series: [
        {
            type: 'line',
            title: 'Series1',
            xField: 'date',
            yField: 'value',
            style: {
                stroke: '#30BDA7',
                lineWidth: 2
            },
            marker: {
                type: 'circle',
                size: 4,
                fillStyle: '#30BDA7'
            },
            tooltip: {
                trackMouse: true,
                renderer: function (tooltip, record, item) {
                    // Set tooltip content
                    tooltip.setHtml(
                        `${item.series.getTitle()}: ${record.get('date')} - ${record.get('value')}%`
                    );
					
                    // Highlight the line
                    let surface = item.series.getSurface();
                    let lineSprite = item.sprite;

                    lineSprite.setAttributes({
                        lineWidth: 4 // Highlight the line
                    });
                    surface.renderFrame();

                    // Track the highlighted item
                    lastHighlightedItem = { series: item.series, sprite: item.sprite };
                },
                listeners: {
                    hide: function (tooltip) {
                        // Reset the previously highlighted line's width
                        if (lastHighlightedItem) {
                            let surface = lastHighlightedItem.series.getSurface();
                            let lineSprite = lastHighlightedItem.sprite;

                            lineSprite.setAttributes({
                                lineWidth: 2 // Reset to the original line width
                            });
                            surface.renderFrame();

                            // Clear the last highlighted item
                            lastHighlightedItem = null;
                        }
                    }
                }
            }
        }
    ]
}