gwcConfirm, gwcMessage에 외부 UI(차트 예시) 넣기

사용자에게 정보를 전달하거나 의사를 묻는 gwcMessage와 gwcConfirm API에 어떤 메세지를 넣을 수 있습니다. 텍스트 메세지 뿐만 아니라 다양한 요소를 담을 수 있는데.. 그 중 차트를 넣기 위한 코드를 정리합니다. 참고로 차트는 gwc 라이브러리 요소가 아닌 chart.js라는 별도의 외부 라이브러리를 사용합니다.

먼저 만들고자 하는 UI는 다음 영상과 같습니다.

먼저 DOM 구성은 다음과 같습니다.

JS 코드는 다음과 같습니다.

window.onload = () => {
    button.onclick = event => { 
        const html = `
            

                
            
        `;

        const dlg = gwcConfirm(html, 
            () => { gwcMessage("'예'라고 답하다.") }, 
            () => { gwcMessage("'아니오'라고 답하다.", true) }, 
            () => { gwcMessage("'취소'라고 답하다.")} 
        );

        const ctx = dlg.querySelector("canvas");
        
        const config = {
            type: 'line',
            data: {
                labels: ['빨강', 'Blue', 'Yellow', '초록', 'Purple', '오렌지'],
                datasets: [
                    {
                        label: '색상',
                        data: [7, 8, 5, 3, 2, 6],
                        backgroundColor: 'yellow',
                        borderColor: 'yellow',
                        borderWidth: 2
                    },
                    {
                        label: 'Color',
                        data: [6, 7, 6, 4, 3, 5],
                        backgroundColor: 'red',
                        borderColor: 'red',
                        borderWidth: 2
                    }
                ]
            },
            options: {
                maintainAspectRatio: false,
            }
        }

        const chart = new Chart(ctx, config);

        setInterval(() => {
            const datasets = config.data.datasets;
            for (let iDataset = 0; iDataset < datasets.length; iDataset++) {
                const data = datasets[iDataset].data;
                for (let iValue = 0; iValue < data.length; iValue++) {
                    data[iValue] += Math.random() * 0.4 - 0.2;
                }
            }
            chart.update();
        }, 10);

    };
};

코드가 상당히 긴데... 3~15 라인만 gwc에 대한 코드이고 나머지 전부는 차트 구성을 위한 코드입니다.

CSS 코드는 다음과 같습니다.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.chart-layout {
    width: 600px;
    height: 400px;
}