[java] Vaadin을 사용한 동적 데이터 시각화

29 Nov 2023

java

개요

Vaadin은 자바 기반의 오픈 소스 웹 프레임워크로, 사용자 인터페이스를 구축하기 위해 자바 코드를 사용할 수 있습니다. 이번 글에서는 Vaadin을 사용하여 동적 데이터 시각화를 만드는 방법을 알아보겠습니다. Vaadin의 강력한 기능을 활용하여 데이터 시각화를 직접 제어하고 최신 정보를 실시간으로 표시할 수 있습니다.

Vaadin 설치 및 설정

먼저, Vaadin을 사용하기 위해 프로젝트에 Vaadin 종속성을 추가해야 합니다. 프로젝트의 pom.xml 파일에 다음 종속성을 추가합니다:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
    <version>14.6.2</version>
</dependency>

그런 다음, Vaadin의 기본 구성 요소를 구성하기 위해 Spring Boot 설정 파일에서 VaadinServlet을 등록합니다:

@Configuration
public class VaadinConfig {
    @Bean
    public ServletRegistrationBean<VaadinServlet> servletRegistrationBean() {
        ServletRegistrationBean<VaadinServlet> registrationBean =
                new ServletRegistrationBean<>(new VaadinServlet(), "/app/*");
        registrationBean.setLoadOnStartup(1);
        return registrationBean;
    }
}

동적 데이터 시각화 예제

Vaadin을 사용하여 동적 데이터 시각화를 만드는 간단한 예제를 살펴보겠습니다. 이 예제에서는 막대 그래프로 표시되는 실시간 데이터를 보여줍니다.

@Route(value = "chart", layout = MainLayout.class)
public class ChartView extends VerticalLayout {
    private Chart chart;

    public ChartView() {
        chart = new Chart(ChartType.COLUMN);

        Configuration conf = chart.getConfiguration();
        conf.setTitle("Dynamic Data Chart");
        conf.getyAxis().setTitle("Value");
        
        // 실시간 데이터 추가
        ScheduledExecutorService executorService = Executors.newSingleThreadScheduledExecutor();
        executorService.scheduleAtFixedRate(() -> {
            double value = getRandomValue();
            access(() -> {
                chart.getConfiguration().addSeries(new DataSeriesItem("", value));
                chart.drawChart();
            });
        }, 0, 1, TimeUnit.SECONDS);

        add(chart);
    }
    
    private double getRandomValue() {
        // 랜덤 값을 반환하는 메서드
    }
}

위의 예제에서는 ChartView 클래스가 Vaadin의 VerticalLayout을 상속받고, @Route 어노테이션을 사용하여 “/chart” 경로에서 라우팅되도록 설정합니다. Chart 객체를 생성하고 막대 그래프를 표시하기 위해 Configuration 객체를 사용합니다. 그리고 실시간 데이터를 동적으로 추가하기 위해 ScheduledExecutorService를 사용합니다.

결과

위의 예제를 실행하면 웹 브라우저에서 “http://localhost:8080/app/chart”로 접속하여 실시간으로 업데이트되는 막대 그래프를 확인할 수 있습니다.

결론

Vaadin을 사용하면 자바 코드로 동적 데이터 시각화를 손쉽게 구현할 수 있습니다. Vaadin의 강력한 기능과 다양한 차트 유형을 활용하여 웹 애플리케이션에서 강력한 데이터 시각화를 구현할 수 있습니다.

참고 자료

Vaadin 공식 사이트