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

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

Диаграмма приборной панели будет работать на базе Node.js + Express в качестве внутреннего сервера и Vue + vue-chartjs для внешнего интерфейса, загружаемого с помощью vue-cli.

Строим приложение с помощью vue-cli

vue-cli - это простой интерфейс командной строки для создания проектов Vue.js. Мы установим vue-cli, а затем воспользуемся им для загрузки приложения с использованием шаблона веб-пакета со следующими командами:

npm install -g vue-cli
vue init webpack-simple realtime-chart-pusher
  • Совет: шаблон webpack-simple - это простая установка webpack + vue-loader для быстрого прототипирования. Подробнее об этом можно прочитать здесь.

Настройка сервера Node.js

Следующее, что нужно сделать, - это настроить сервер, который поможет нам общаться с Pusher. Я предполагаю, что в вашей системе установлены и Node, и npm. Затем мы установим зависимости, которые будем использовать для сервера Node.

npm install body-parser express nodemon pusher
  • Совет: nodemon будет следить за файлами в каталоге, в котором был запущен nodemon, и, если какие-либо файлы изменятся, nodemon автоматически перезапустит ваше приложение node.

Еще одна вещь, нам понадобится точка входа / файл для нашего сервера Node. Мы можем сделать это, создав server.js файл в корне приложения.

Настройка толкателя

Для реализации функций реального времени нам понадобится мощь Pusher. Если вы еще этого не сделали, зарегистрируйте учетную запись Pusher и создайте новое приложение. Когда ваше новое приложение будет создано, получите свой app_id, ключи и кластер из панели управления Pusher.

Настройка приложения

Теперь, когда у нас есть учетная запись Pusher и установлены зависимости, необходимые для серверной части Node.js, приступим к сборке.

Напишем код для server.js файла.

Давайте посмотрим, что здесь происходит. Нам нужны Express, path, body-parser и Pusher, и мы инициализировали express () с помощью app.

Мы используем body-parser для извлечения всей основной части входящего потока запросов и предоставления ее в req.body.

Pusher также инициализируется учетными данными приложения и кластером из вашей панели управления. Обязательно обновите это, иначе сервер Node не будет иметь подключения к панели управления. Наконец, сервер Node будет работать на порту 5000.

Следующее, что нужно сделать, это определить маршрут нашего приложения, а также добавить фиктивные данные для диаграммы расходов и доходов. Обновите файл server.js следующим образом.

Во-первых, у нас есть объект CostList с данными о расходах и доходах за определенные дни.

app.get('/finances', (req,res) => {
res.send(expensesList);
});

Этот маршрут просто отправляет объект CostList в формате JSON. Мы используем этот маршрут для получения данных и отображения во внешнем интерфейсе.

Маршрут /expense/add действительно многое делает. Это POST-маршрут, что означает, что мы будем ожидать некоторых входящих данных (в данном случае, суммы расходов и суммы дохода).

Затем мы переносим эти новые доходы и расходы в существующие, после чего также отправляем обновленный список расходов в Pusher.

Наконец, мы отправляем JSON в качестве ответа на маршрут, содержащий последний доход, расход, дату и обновленный список расходов.

Ваш последний server.js должен выглядеть так:

Создание внешнего интерфейса (Vue + vue-chartjs)

Большая часть работы с внешним интерфейсом будет выполняться в папке src/components. Перейдите в этот каталог, и вы должны увидеть файл Hello.vue. Вы можете удалить этот файл или переименовать его в Home.vue, так как нам понадобится Home.vue файл внутри папки компонентов.

Прежде чем мы приступим к построению диаграммы и ее отображению, нам нужно сделать несколько вещей. Откройте файл App.vue в папке src и замените следующим кодом:

Затем мы установим vue-chartjs, momentjs, pusher-js (библиотека Javascript Pusher) и axios (мы будем использовать axios для запросов API). а затем добавьте их в приложение Vue.js.

npm install axios vue-chartjs pusher-js moment

Как только это будет сделано, мы импортируем аксиомы и зарегистрируем их в нашем приложении. Мы можем сделать это, открыв файл main.js в папке src.

Затем давайте создадим компонент Vue.js, который поможет отображать нашу диаграмму. Мы собираемся использовать это, чтобы указать, какой тип диаграммы мы хотим, настроить его внешний вид и поведение.

Затем мы импортируем этот компонент в компонент Home.vue и будем использовать его там. Это одно из преимуществ vue-chartjs, он работает путем импорта базового класса диаграммы, который мы затем можем расширить. Давайте продолжим и создадим этот компонент. Создайте новый файл с именем LineChart.vue внутри папки src/components и отредактируйте его, используя приведенный ниже код.

В блоке кода выше мы импортировали линейную диаграмму из vue-chartjs и модуля mixins. Chart.js обычно не предоставляет возможность автоматического обновления при изменении набора данных, но это можно сделать в vue-chartjs с помощью следующих примесей:

  1. reactiveProp
  2. reactiveData

Эти миксины автоматически создают chartData как опору или данные и добавляют наблюдателя. Если данные изменились, диаграмма обновится. Подробнее здесь.

Кроме того, функция this.renderChart() внутри функции mounted отвечает за рендеринг диаграммы. this.chartData - это объект, содержащий набор данных, необходимый для диаграммы, и мы получим его, включив его в качестве опоры в Home.vue шаблон, this.options содержит объект параметров, который определяет внешний вид и конфигурацию диаграммы.

Теперь у нас есть LineChart компонент, но как мы можем увидеть нашу диаграмму и протестировать ее функциональность в реальном времени? Мы делаем это, добавляя LineChart в наш компонент Home.vue, а также подписываясь на наш канал Pusher через pusher-js.

Откройте файл Home.vue и отредактируйте следующим образом:

fillData

Эта функция вызывается сразу после того, как приложение смонтировано, и она в основном делает запрос API к бэкэнду Node (/ finances) и извлекает список расходов.

Запрос GET направляется к маршруту /finances Node.js, который, в свою очередь, возвращает последние expensesList, а затем мы обрабатываем эти данные с помощью .map Javascript и присваиваем их различным переменным.

addExpenses

В приведенном выше блоке кода просто используется маршрут метода POST к /expense/add для обновления expensesList (помните, что маршрут /expense/add на сервере узла отправляет обновленный expensesList на панель Pusher Dashboard) вместе с данными о доходах, расходах и дате.

Затем он использует данные, полученные от Pusher через channel.bind, для повторного построения линейной диаграммы и автоматически добавляет новую запись в диаграмму.

fetchData

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

Ваш последний файл Home.vue должен выглядеть так:

Еще кое-что!

Прежде чем мы сможем запустить наше приложение, нам нужно сделать что-то, что называется проксирование API. Прокси-сервер API позволяет нам интегрировать наше приложение vue-cli с внутренним сервером (в нашем случае - сервером узла). Это означает, что мы можем запускать сервер разработки и серверную часть API параллельно и позволять серверу разработки передавать все запросы API на фактическую базу данных.

Мы можем включить проксирование API, отредактировав параметр dev.proxyTable в config/index.js. Вы можете редактировать с помощью кода ниже.

После этого мы, наконец, готовы к просмотру нашего приложения, и вы можете запустить npm run dev, чтобы запустить приложение.

Вот и все! На этом этапе у вас должна быть диаграмма информационной панели в реальном времени, которая обновляется в реальном времени.

Вы можете посмотреть живую демонстрацию здесь или перейти к коду всего приложения, которое размещено на Github для вашего ознакомления.

Заключение

Мы увидели, как построить базовую линейную диаграмму с помощью ChartJS во Vue с помощью vue-chartjs, а также добавили функции реального времени благодаря Pusher.

Затем мы увидели, как использовать reactiveProps, чтобы ChartJS обновлял свой набор данных, если в наборе данных произошли изменения. Мы также увидели, как использовать Pusher для запуска событий на сервере и их прослушивания на стороне клиента с помощью JS.

Вы недавно создали что-нибудь крутое с Pusher, может, график? Сообщите об этом в ответах ниже.

Этот пост впервые появился в блоге Pusher.