Skip to content

Latest commit

 

History

History
68 lines (53 loc) · 6.25 KB

section_incremental_data_update.adoc

File metadata and controls

68 lines (53 loc) · 6.25 KB
Raw

Создание диаграммы с инкрементальным обновлением данных

В следующем примере мы рассмотрим диаграмму, которая получает данные из источника данных и обновляет их автоматически. Когда в источник добавляются новые данные, диаграмма не обновляется полностью: новые точки добавляются в график на лету каждые 2 секунды. Этот принцип удобно использовать при создании динамически обновляемых виджетов.

Пример основан на тестовом приложении Sales, к которому мы добавим диаграмму для отображения динамики новых заказов, то есть создания новых экземпляров сущности Order.

  1. Скачайте приложение Sales и добавьте к нему компонент charts, следуя инструкции из раздела [chart_project_setup].

  2. Создайте в Studio новый пустой экран. Назовите его orders-history, так как в нём будет отображаться история создания новых заказов.

  3. Добавьте к экрану компонент serialChart. Чтобы реализовать инкрементальное обновление данных, необходимо создать источник данных с типом collectionDatasource и привязать к нему диаграмму. В этом примере мы не будем загружать данные из базы, вместо этого мы будем создавать тестовые данные на лету, поэтому запрос в источнике данных создавать не нужно.

    Для оси категорий укажите атрибут date, для оси значений - атрибут amount.

    link:../../../../source/chart/chart_incremental-update.xml[role=include]

  4. Для обновления данных на лету используйте timer - специальный UI-компонент, который будет отправлять HTTP-запросы на сторону сервера.

    Отройте вкладку Properties дизайнера экрана и нажмите на кнопку Timers, чтобы добавить таймер на экран. Заполните поле id. Допустим, мы хотим, чтобы данные обновлялись каждые 2 секунды, в этом случае в поле delay укажем значение 2000 миллисекунд.

    В поле onTimer укажем имя метода Java - updateChart. Этот метод будет вызываться каждый раз при срабатывании события таймера. Сгенерируйте метод в контроллере экрана, нажав на кнопку >>, после чего сохраните его, нажав Apply.

    chart incremental update
    Figure 1. Создание таймера

  5. Откройте контроллер экрана в IDE. Для разработки логики работы таймера нам понадобится инжектировать следующие зависимости: timeSource, metadata и экземпляр источника данных. Мы будем генерировать новый экземпляр сущности Order с произвольным значением amount при каждом событии срабатывания таймера. Новый экземпляр добавляется к источнику данных с помощью метода includeItem().

    Инициализируйте диаграмму в методе init(), создав таким же образом исходный экземпляр сущности Order.

    link:../../../../source/chart/chart_incremental-update.java[role=include]

    На этом этапе диаграмма полностью функциональна, но размер источника данных после запуска таймера будет стремительно расти, поэтому реализуем ограничение количества отображаемых заказов.

    chart incremental update 2
    Figure 2. Данные автоматически обновляются каждые 2 секунды

  6. Создайте экземпляр класса Queue для очереди заказов. При каждом срабатывании таймера созданный заказ будет добавлен наверх очереди itemsQueue. Когда размер очереди превышает 10 заказов, самый старый заказ удаляется.

    private Queue<Order> itemsQueue = new LinkedList<>();
    link:../../../../source/chart/chart_incremental-update_2.java[role=include]
Результат

Данные поступают в браузер инкрементально. Если открыть консоль разработчика в Chrome, на вкладке Network будет видно, что каждые 2 секунды страница отправляет HTTP-запрос на backend и в ответе получает очень маленький JSON, содержащий только операции add и remove со значениями поля amount. Это позволяет избежать повторной пересылки всех данных диаграммы.

chart incremental update 3
Figure 3. Одновременно отображаются только последние 10 заказов