Vue3 Chart

SPA для аналитики визитов сайта

Посмотреть деплой
🚨 для входа требуется ввести в форму id 5f8475902b0be670555f1bb3

Экосистема

• Vue CLI for installation
• Vue3 (SFC Components)
• Vue Router for routing
• Vuex for storage
• ESlint for linting
• SCSS for styling
• Git for versioning
• amcharts4 for chart

Функционал

Общий

• все глобальные функциональные данные, мутаторы и экшны хранятся в Vuex store
• сохранение данных в localStorage (siteId и данных для аналитики) (via vuex-persist)
• попап, информирующий о статусе запроса данных

Роутинг

• защищенный роутинг страницы с аналитикой. Без данных в localStorage siteId страница недоступна
• автоматический редирект на страницу с аналитикой, если пользователь уже залогинен
• страница 404

Страница "Авторизация"

• форма для запроса данных для аналитики с сервера
• валидация формы: длина значения, введенного в поле, равна 24 символам (via ValidityState API)
• кнопка сабмита активна только при валидности формы
• Кнопка "Аналитика" - при успешном запросе к серверу / наличии siteId в localStorage, кликабельна и ведет на одноименную страницу

Страница "Аналитика"

• график визитов по данным, полученным из запроса
• при наведении на точки пересечения осей отображается дата и количество визитов конкретно для этой точки
• Tooltip для управления графиком
• Кнопка "Выйти" - разлогинивает и редиректит на страницу "Авторизации"

Требования

• Функционал

Команды:

• git clone git@github.com:proehavshiy/vue-chart.git - clone branch
• npm install - install dependencies
• npm run serve - run the project in dev mode
• npm run build - build final version
• npm run lint - check linter errors
• sh deploy.sh - deploy to gh-pages