Flatpickr — это лёгкий, настраиваемый JavaScript-конструктор дат и времени. Он позволяет пользователям выбирать даты (и, при необходимости, время) из удобного всплывающего календаря, а не вводить их вручную.

Chart.js — простая, но мощная библиотека JavaScript для создания интерактивных анимированных диаграмм в веб-приложениях с использованием элемента .

2) клиент/стиль.css

/* client/style.css */ body { background-color: #f8f9fa; font-family: 'Arial', sans-serif; } h1 { text-align: center; /* Выравниваем заголовок по центру */ margin-top: 20px; /* Добавляем отступ над заголовком */ margin-bottom: 40px; /* Добавляем отступ под заголовком */ } .container .filters { margin-top: 20px; margin-bottom: 60px !important; /* Обеспечиваем больший отступ между фильтрами и ключевыми метриками */ } .container #key-metrics { margin-top: 40px !important; /* Дополнительный отступ над разделом ключевых метрик */ margin-bottom: 20px; /* Необязательный отступ снизу */ } .key-metrics div { margin: 10px 0; padding: 10px; background-color: #f4f4f4; border: 1px solid #ccc; border-radius: 4px; } /* Исправление для интервала пагинации DataTables */ .dataTables_wrapper .dataTables_paginate { text-align: center; margin-top: 10px; } .dataTables_wrapper .dataTables_paginate .paginate_button { margin: 0 12px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9; color: #007bff; text-decoration: none; display: inline-block; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: #007bff; color: #fff; border: 1px solid #007bff; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { font-weight: bold; color: #fff; background-color: #007bff; border-color: #007bff; }

Мы используем каскадную таблицу стилей (CSS) для стилизации основных визуальных компонентов нашей панели управления, например, цветов кнопок и текста, интервалов между элементами и т. д.

Файл style.css определяет внешний вид и общий вид панели управления. Это чистая, лёгкая тема с достаточными интервалами и настройками макета для ясности и читабельности. Файл style.css также настраивает внешний вид кнопок пагинации DataTables, делая их более удобными для пользователя и визуально соответствующими дизайну Bootstrap.

3) сервер/сервер.js

const express = require('express'); const sqlite3 = require('sqlite3').verbose(); const path = require('path'); const app = express(); const PORT = 3000; // Полный путь к вашей базе данных SQLite const DB_PATH = «C:\Users\thoma\projects\my-dashboard\sales_data.db»; // Обслуживать статические файлы из клиентского каталога app.use(express.static(path.join(__dirname, '..', 'client'))); // Маршрут для извлечения данных из базы данных SQLite app.get('/data', (req, res) => { const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => { if (err) { console.error(«Ошибка подключения к базе данных:», err.message); res.status(500).json({ error: «Ошибка подключения к базе данных» }); return; } }); // Запрос к базе данных const query = «SELECT * FROM sales;»; // Замените 'sales' именем вашей таблицы db.all(query, [], (err, rows) => { if (err) { console.error(«Ошибка выполнения запроса:», err.message); res.status(500).json({ error: «Ошибка запроса» }); } else { res.json(rows); // Отправьте результат запроса в формате JSON } }); db.close((err) => { if (err) { console.error(«Ошибка закрытия базы данных:», err.message); } }); }); // Маршрут перехвата для обслуживания основного HTML-файла app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '..', 'client', 'index.html')); }); // Запуск сервера app.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}`); });

Этот скрипт Node.js содержит код JavaScript, который настраивает базовый сервер Express, обеспечивающий работу панели мониторинга эффективности продаж. Он выполняет две основные функции:

1. Обслуживает статические файлы (такие как HTML, CSS и JS) из клиентской подпапки, чтобы интерфейс загружался в браузере.
2. Предоставляет конечную точку /data , которая считывает данные из локальной базы данных SQLite (sales_data.db) и возвращает всю таблицу продаж в формате JSON, что позволяет использовать динамическую визуализацию данных и таблицы на внешнем интерфейсе.

4) клиент/скрипт.js

пусть chartInstance = null; // Глобальная переменная для хранения текущего экземпляра Chart.js // Дождитесь полной загрузки DOM document.addEventListener('DOMContentLoaded', function () { // Извлеките данные о продажах из API бэкэнда fetch('/data') .then((response) => response.json()) .then((data) => { // Обработка случая, когда данные не возвращаются if (!data || data.length === 0) { const app = document.getElementById('app'); if (app) { app.innerHTML = «

Нет доступных данных.

«; } return; } // Инициализируйте фильтры и содержимое панели мониторинга setupFilters(data); initializeDashboard(data); // Повторно отрисуйте диаграммы при изменении типа диаграммы document.getElementById('chart-type-selector').onchange = () => filterAndRenderData(data); }) .catch((error) => { // Обработка ошибки выборки console.error('Ошибка выборки данных:', error); const app = document.getElementById('app'); if (app) { app.innerHTML = «

Не удалось получить данные.

«; } }); }); // Инициализация выборщиков дат Flatpickr и функции фильтра категорий setupFilters(data) { // Преобразование строк даты в объекты JS Date const dates = data.map((item) => new Date(item.order_date.split('/').reverse().join('-'))); const minDate = new Date(Math.min(…dates)); const maxDate = new Date(Math.max(…dates)); // Настраиваем выбор начальной даты flatpickr(«#start-date», { defaultDate: minDate.toISOString().slice(0, 10), dateFormat: «Ymd», altInput: true, altFormat: «F j, Y», onChange: function () { filterAndRenderData(data); }, }); // Настраиваем выбор конечной даты flatpickr(«#end-date», { defaultDate: maxDate.toISOString().slice(0, 10), dateFormat: «Ymd», altInput: true, altFormat: «F j, Y», onChange: function () { filterAndRenderData(data); }, }); // Настраиваем прослушиватель изменений выпадающего списка категорий const categoryFilter = document.getElementById('category-filter'); if (categoryFilter) { categoryFilter.onchange = () => filterAndRenderData(data); } } // Инициализируем панель мониторинга после установки фильтров function initializeDashboard(data) { populateCategoryFilter(data); // Заполняем выпадающий список категорий filterAndRenderData(data); // Первоначальная визуализация со всеми данными } // Применяем фильтры и обновляем ключевые показатели, диаграмму и таблицу function filterAndRenderData(data) { const chartType = document.getElementById('chart-type-selector').value; const startDate = document.getElementById('start-date')._flatpickr.selectedDates[0]; const endDate = document.getElementById('end-date')._flatpickr.selectedDates[0]; const selectedCategory = document.getElementById('category-filter').value; // Фильтрация данных по дате и категории const filteredData = data.filter((item) => { const itemDate = new Date(item.order_date.split('/').reverse().join('-')); return ( itemDate >= startDate && itemDate <= endDate && (selectedCategory === 'all' || item.categories === selectedCategory) ); }); updateKeyMetrics(filteredData); // Обновление метрик, таких как доход и заказы drawChart(filteredData, 'chart-canvas', chartType); // Отображение диаграммы populateDataTable(filteredData); // Обновление таблицы } // Обновление метрик панели мониторинга (общий доход, количество заказов и т. д.) function updateKeyMetrics(data) { const totalRevenue = data.reduce((acc, item) => acc + parseFloat(item.total), 0); const totalOrders = data.length; const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0; // Рассчитаем общий доход по категориям, чтобы найти лучшую из них const incomeByCategory = data.reduce((acc, item) => { const category = item.categories || «Без категории»; acc[category] = (acc[category] || 0) + parseFloat(item.total); return acc; }, {}); // Определим категорию с наибольшим общим доходом const topCategory = Object.keys(revenueByCategory).reduce( (a, b) => (revenueByCategory[a] > incomeByCategory[b] ? a : b), «Нет» ); // Отображение показателей в DOM document.getElementById('total-revenue').textContent = `$${totalRevenue.toFixed(2)}`; document.getElementById('total-orders').textContent = `${totalOrders}`; document.getElementById('average-order-value').textContent = `$${averageOrderValue.toFixed(2)}`; document.getElementById('top-category').textContent = topCategory || 'None'; } // Рисуем выбранный тип диаграммы с помощью функции Chart.js drawChart(data, elementId, chartType) { const ctx = document.getElementById(elementId).getContext('2d'); // Уничтожаем предыдущую диаграмму, если она существует if (chartInstance) { chartInstance.destroy(); } switch (chartType) { case 'revenueOverTime': // Линейная диаграмма, показывающая доход по дате заказа chartInstance = new Chart(ctx, { type: 'line', data: { labels: data.map((item) => item.order_date), datasets: [{ label: 'Доход за период', data: data.map((item) => parseFloat(item.total)), fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1, }], }, options: { scales: { y: { beginAtZero: true }, }, }, }); break; case 'revenueByCategory': // Столбчатая диаграмма, показывающая общий доход по категориям const categories = […new Set(data.map((item) => item.categories))]; const incomeByCategory = categories.map((category) => { return { category, income: data .filter((item) => item.categories === category) .reduce((acc, item) => acc + parseFloat(item.total), 0), }; }); chartInstance = new Chart(ctx, { type: 'bar', data: { labels: incomeByCategory.map((item) => item.category), datasets: [{ label: 'Доход по категориям', data: incomeByCategory.map((item) => item.revenue), backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, }], }, options: { scales: { y: { beginAtZero: true }, }, }, }); break; case 'topProducts': // Горизонтальная столбчатая диаграмма, показывающая 10 лучших продуктов по доходу const productRevenue = data.reduce((acc, item) => { const productName = item.product_names || 'Неизвестный продукт'; acc[productName] = (acc[productName] || 0) + parseFloat(item.total); return acc; }, {}); const topProducts = Object.entries(productRevenue) .sort((a, b) => b[1] — a[1]) .slice(0, 10); chartInstance = new Chart(ctx, { type: 'bar', data: { labels: topProducts.map((item) => item[0]), // Названия продуктов datasets: [{ label: 'Лучшие продукты по доходу', data: topProducts.map((item) => item[1]), // Доход backgroundColor: 'rgba(54, 162, 235, 0.8)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1, }], }, options: { indexAxis: 'y', // Горизонтальные полосы scales: { x: { beginAtZero: true }, }, }, }); break; } } // Отображение отфильтрованных данных в DataTable function populateDataTable(data) { const tableElement = $('#data-table'); // Уничтожаем существующую таблицу, если она существует if ($.fn.DataTable.isDataTable(tableElement)) { tableElement.DataTable().clear().destroy(); } // Создаем новую DataTable с соответствующими столбцами tableElement.DataTable({ data: data.map((item) => [ item.order_id, item.order_date, item.customer_id, item.product_names, item.categories, `$${parseFloat(item.total).toFixed(2)}`, ]), columns: [ { title: «ID заказа» }, { title: «Дата заказа» }, { title: «ID клиента» }, { title: «Продукт» }, { title: «Категория» }, { title: «Итого» }, ], }); } // Заполнить раскрывающийся список фильтра категорий доступными категориями function populateCategoryFilter(data) { const categoryFilter = document.getElementById('category-filter'); categoryFilter.innerHTML = ''; categoryFilter.appendChild(new Option('All Categories', 'all', true, true)); // Извлечь уникальные категории const categories = new Set(data.map((item) => item.categories)); categories.forEach((category) => { categoryFilter.appendChild(new Option(category, category)); }); }

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

1/ Извлекает данные о продажах

• Когда страница загружается (DOMContentLoaded), она вызывает внутренний API в конечной точке /data.
• Если данные не возвращены, отображается сообщение «Нет доступных данных».

2/ Устанавливает фильтры

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

3/ Инициализирует панель управления

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

4/ Применяет фильтры и выполняет повторную визуализацию

• Каждый раз, когда пользователь меняет фильтр (диапазон дат, категорию или тип диаграммы), он:
  • Фильтрует набор данных по диапазону дат и категории.
  • Обновляет ключевые показатели : общий доход, количество заказов, среднюю стоимость заказа и категорию максимального дохода.
  • Перерисовывает выбранную диаграмму Chart.js .
  • Обновляет таблицу данных .

5/ Рисует диаграммы с помощью Chart.js

• Доход с течением времени → Линейный график, показывающий тенденции дохода по датам.
• Доход по категориям → Столбчатая диаграмма, показывающая общий доход по категориям.
• Самые популярные продукты → Горизонтальная столбчатая диаграмма, показывающая 10 самых популярных продуктов по выручке.

6/ Отображает табличные данные

• Использует DataTables ( плагин jQuery) для отображения таблицы отфильтрованных заказов со столбцами для идентификатора заказа, даты, идентификатора клиента, продукта, категории и общей суммы.

7/ Поддерживает синхронизацию пользовательского интерфейса

• Уничтожает и заново создает диаграммы/таблицы при изменении фильтров, чтобы избежать дубликатов.
• Поддерживает метрики, диаграммы и таблицы в соответствии с активными фильтрами.

Запуск нашей панели управления

Теперь, когда весь наш код отсортирован, пришло время запустить панель управления, поэтому перейдите в подпапку сервера и введите следующую команду.

$ узел server.js

Вы получите ответ на указанную выше команду, что-то вроде:

Сервер работает по адресу http://localhost:3000

Откройте веб-браузер и перейдите по адресу http://localhost:3000 . Вы увидите панель управления, заполненную данными из базы данных SQLite, как показано на рисунке ниже.

Все фильтры, выбор диаграмм и т. д. должны работать так, как заявлено.

Краткое содержание

В этой статье я расскажу вам о создании полнофункциональной интерактивной панели мониторинга эффективности продаж с использованием основных веб-технологий — HTML, CSS, JavaScript, Node.js, Express и локальной базы данных SQLite.

Мы обсудили технологический стек и настройку.

• Бэкэнд: Node.js, Express, SQLite
• Внешний вид: HTML, Bootstrap (для макета), Chart.js (для диаграмм), Flatpickr (выбор даты), DataTables (для табличных данных)
• Структура папок показана ниже.

my-dashboard/ ├── client/ │ ├── index.html │ ├── style.css │ └── script.js └── server/ └── server.js

Я показал вам, как создать и заполнить базу данных SQLite в коде, которую можно использовать в качестве источника данных для нашей панели мониторинга. Мы также обсудили настройку среды и процессы разработки front-end и back-end, а также кратко коснулись функциональности нашей панели мониторинга данных.

Наконец, я подробно объяснил вам, как создать четыре файла кода, а затем показал, как запустить панель управления в браузере.

Источник: towardsdatascience.com

Похожие записи

Архив рубрики ~Лента новостей~

Amazon купит тысячи грузовых автомобилей с педальным управлением у дочерней компании Rivian.

23.10.2025

Архив рубрики ~Лента новостей~

Китайский робот ходил 3 дня без перерыва и установил новый мировой рекорд

02.12.2025

Архив рубрики ~Лента новостей~

Как мы сократили время планирования спринтов с помощью AI

21.11.2025