Dashboard

Задание

• Разработать дисплей с графическим представлением показателей работы одного из отделов компании.
• Данные для системы брать из Clickview.
• Интерфейс должен представлять собой различные графики, на которые приятно смотреть и интересно изучать.
• Результат вывести на телевизоры, которые расположены в здании компании и подключены к внутренней сети.
• Способом "на усмотрение" решить задачу с получением данных из Clickview.
• Способом "на усмотрение" решить задачу с хостингом и обращением к нему из внутренней сети.

Документация

Хост

• Проект расположен по адресу 172.16.252.240:81.
• В качестве сервера используется OpenServer.

Основные моменты конфигурации сервера:

• Версия PHP - 7.4.
• Фреймворк - Laravel 8.
• Графическая библиотека: AnyChart.
• Порт пришлось изменить на 81, чтобы избежать конфликта с софтом, который работает на 80 порту.
• Специфика Laravel требует использовать точку входа из \public, поэтому имя домена - krasyar.dashboard использует директорию \krasyar.dashboard\public.
• Также задан алиас krasyar.dashboard использующий 172.16.252.240, поэтому проект доступен в том числе по адресу http://krasyar.dashboard:81.
• Файлы проекта расположены в C:\OSPanel\domains\krasyar.dashboard.

Доступ к хосту

Осуществляется по RDP.

• Вызов клиента: Win + R -> mstsc.exe.
• Компьютер: w-web.
• Дальнейший вход реализуется под своей учётной записью с префиксом ETC\.

Основные настройки

Все настройки расположены в конфигурационном файле \config\dashboard.php и покрыты комментариями.

Путь к директории, в которой расположены исходные файлы.

'source' => '//k5/Public/1/dashboard/',

Палитра дашборда. Полный перечень цветовых схем находится в конфигурационном файле.

'theme' => 'wines',

Цвет чётных строк таблицы настраивается отдельно от выбора цветовой схемы и подбирается опытным путем.

'table_odd' => 'F5BD64',

Частота обновления интерфейса (мсек.). Под капотом происходит перекомпиляция графиков. Такова специфика работы библиотеки AnyChart. На уровне представления, все графики являются .svg изображениями.

'time_reload_page' => 600000,

Код кнопки перехода в полноэкранный режим (Enter). На телевизоре в полноэкранный режим можно перейти лишь мануально. Система безопасности блокирует всевозможные эмуляции поведения нажатия на клавишу.

'fullscreen_key' => 13,

Общая схема работы проекта

• Отдел аналитики производит выгрузку информации из Clickview в виде .csv файлов на сетевой диск P:\Public\1\dashboard.
• Периодичность выгрузки - в 40 минут каждого часа.
• Dashboard обращается к этим файлам, производит их распарсинг в массив и передает эти данные в представление.
• Представление использует библиотеку AnyChart, и обновляет рендеринг каждые 10 минут. Это значение можно менять в настройках.

Подробное описание работы проекта на случай масштабирования или правок

Интерфейс app\Interfaces\DataProvider.php определяет устройство поставщика данных, обязуя реализовать в нем требуемые методы.

Сделано это для возможности полиморфной реализации других поставщиков данных. Вдруг на замену Clickview придёт другая аналитическая система. Тогда понадобится просто дописать еще одного поставщика данных на основе этого интерфейса.

Поставщик данных app\Services\NetDisk.php осуществляет преобразование .csv-файлов в массив для дальнейшей передачи.

Иногда требуется скорректировать данные и удалить "шапку" таблицы. Для этого у метода dataTransform() есть аргумент with_header, значение которого может быть false, что означает "без шапки". Этот метод реализован в app\Http\Controllers\GetDataApiController.php.

Затем в дело вступает app\Http\Controllers\GetDataApiController.php, который формирует эндпоинты API, отдающие данные в JSON, из которых в дальнейшем формируются графики. Список эндпоинтов находится в маршрутизаторе routes\api.php. Так по запросу http://172.16.252.240:81/api/pie можно получить данные для формирования круговой диаграммы.

Контроллер app\Http\Controllers\DashboardController.php просто передаёт настройки из конфигурационного файла в представление. Именно настройки, не данные. Данные забирыют .js-скрипты непосредственно с API.

Точкой вхождения в интерфейс является resources\views\layout.blade.php. Он использует resources\views\components\foot.blade.php и resources\views\components\head.blade.php в качестве постоянных компонентов любой страницы и само тело страницы resources\views\pages\dashboard.blade.php.

Скрипты, компилирующие данные с эндпоинтов API в графики находятся в директории resources\views\charts.

Их правка имеет существенные ограничения. Названия таблиц и некоторые другие значения можно править из кода. А вот оси, подписи, позиционирование элементов и многое другое определяется через методы библиотеки https://docs.anychart.com/

Обновление проекта

Исходный код находится в репозитории https://github.com/PontiiPilates/krasyar.dashboard

Поскольку хост не имеет выхода в интернет, рекомендую скачать проект на свое рабочее место и развернуть его на локальном сервере, внести требуемые изменения, проверить работоспособность и упаковать проект в архив. К C:\OSPanel\domains\krasyar.dashboard добавить .back, создать \krasyar.dashboard и распаковать архив в созданную директорию. Получив при этом свежую версию и backup-версию.

Также можно обновлять только файлы, подвергшиеся изменению.

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

Страницы

• ИТ отдел
• Отдел технической поддержки