CSV-дашборд начинается не с диаграммы, а с ответа на вопрос: какие строки считать, как трактовать пустые ячейки и на какой основе сравнивать группы. Возьмём учебную выгрузку небольшого магазина с заказами за два дня. Задача дашборда — показать сумму известных оплат по источнику, число строк-заказов и полноту поля суммы. Это иллюстративный набор, не реальные данные компании.
Сначала зафиксируй таблицу и смысл колонок
Входной файл содержит заголовок и такие поля:
date,source,order_id,amount_rub
2026-10-01,search,A001,1200
2026-10-01,search,A002,800
2026-10-01,ads,A003,1500
2026-10-02,ads,A004,0
2026-10-02,direct,A005,1000
2026-10-02,direct,A006,
До графика дай каждой колонке тип и правило:
| Колонка | Тип | Правило |
|---|---|---|
date |
календарная дата | формат ISO YYYY-MM-DD, не свободный текст |
source |
категория | одно из значений выгрузки; пустое отдельно |
order_id |
идентификатор | строка; строки без ID не считаются заказом |
amount_rub |
сумма RUB | число ≥ 0; 0 является известным нулём, пусто означает «неизвестно» |
Не превращай пустое значение в ноль автоматически. В примере пять сумм известны, одна отсутствует. Известная сумма равна 1200 + 800 + 1500 + 0 + 1000 = 4500 ₽. Валидных строк с суммой пять, поэтому среднее по известным значениям — 4500 / 5 = 900 ₽. Идентификаторов заказов шесть. Это не средний чек по всем шести заказам: один платёж неизвестен. Покажи покрытие суммы: 5 / 6 = 83,3% строк имеют значение. Если знаменатель не виден, зритель может решить, что 900 ₽ относится ко всем заказам.
Импорт: формат, пустое, ошибка
Дай пользователю выбрать CSV через file input или перетащить файл, покажи имя и количество строк. Браузерный File API позволяет пользователю выбрать локальный файл и читать выбранный объект; MDN описывает input type=file, список объектов File и способы работы с ними (Using files from web applications). До визуализации проверь заголовки, число колонок, дату, число и обязательность ID. Ограничь размер файла и число строк согласно возможностям конкретного приложения; здесь никаких пределов продукта не предполагается.
Для случаев с CSV, загружаемым пользователем в приложение, смотри также проектирование загрузки файла.
CSV может содержать запятые внутри quoted field и переводы строки в кавычках, поэтому делить каждую строку по , ненадёжно. RFC 4180 описывает распространённые правила формата, включая поля с запятыми/переводами строк и экранирование кавычек, одновременно отмечая разнообразие существующих реализаций (RFC 4180). Выбери парсер, который понимает нужный вариант CSV, и сообщай, какой delimiter/кодировку он ожидает.
Разделяй ошибки валидации: «не хватает заголовка amount_rub», «в строке 8 дата не распознана», «ID пуст». Не делай молчаливый пропуск плохой строки, иначе сумма уже не объяснима. Дай скачать/скопировать список отклонений или исправить импортируемую таблицу.
Фильтр и диаграмма
У фильтра даты должны быть видимые границы, а у источника — понятное значение «все» и выбранные категории. Когда пользователь меняет фильтр, пересчитай и подпись, и число строк, и покрытие. На нашем маленьком CSV фильтр source=search даёт два заказа и 2000 ₽ известных сумм; direct даёт два заказа, но только один известный платёж на 1000 ₽ и 50% покрытия. Сравнивать эти два источника как равно полно описанные нельзя.
Для графика выведи единицу измерения (RUB), период и агрегат («сумма известных значений по источнику»). Не называй график «прибылью», если в CSV только поле выручки. Если показываешь столбцы числа заказов, используй отдельную серию или отдельную диаграмму; иначе смешаешь рубли и штуки. Доступная текстовая таблица с итогами должна оставаться рядом как альтернатива визуальному чтению.
Сверь каждый результат до того, как ему доверять
Пересчитай итоговую таблицу независимо от диаграммы: повторно применяй выбранный фильтр к исходным строкам, отдельно считай число всех строк и число непустых сумм, затем сверяй известную сумму и среднее только по валидным суммам. После фильтра проверь те же инварианты для каждой группы; расхождение обычно указывает на разные фильтры или знаменатели. Не используй округлённые подписи диаграммы как источник контрольного числа.
Итоговый дашборд должен давать человеку возможность ответить: какая версия CSV загружена, какие строки исключены, что означает каждая метрика и как изменились значения после фильтра. Только после этой сверки график помогает анализировать файл, а не придаёт ошибочной агрегации видимость точности.