Что это

Сводка продаж отдела: сколько сделал каждый сотрудник и отдел целиком — по дням, по месяцам и за год. Это те же цифры, что вы ведёте в Google Таблицах, просто показанные наглядно.

Откуда берутся цифры

Наш сервер сам читает месячные Google Таблицы — одна таблица на месяц — и держит свежую копию у себя. Страница берёт у него готовые данные и рисует графики.

Правка в таблице доедет до дашборда в течение нескольких минут. В обратную сторону ничего не пишется: изменить данные через дашборд нельзя, он только показывает.

Почему нужен вход через Google

Google подтверждает только одно: что вы — это вы. Никакого доступа к вашей почте, файлам или календарю дашборд не получает и не просит.

А пускать вас или нет, решает список, который ведёт администратор. Поэтому бывает так, что вход прошёл, а дашборд не открылся: значит вас ещё не добавили в список. Передайте администратору адрес, которым вошли.

Вход запоминается надолго — заново входить каждый день не придётся.

Что означают четыре показателя

• Выручка — деньги, поступившие от клиентов.
• Факт — прибыль с успешных сделок.
• Задел — прибыль по оплаченным, но не закрытым сделкам.
• Прирост — прибыль с новых оплат за месяц.

Это одна цепочка, а не четыре отдельных числа. Клиент оплачивает сделку — деньги видны в выручке, а прибыль по ней уходит в задел и ждёт закрытия сделки. Сколько такой прибыли добавилось за месяц с новых оплат — это прирост. Когда сделка закрыта, её прибыль переходит в факт. Отсюда и правило, по которому считает дашборд: задел сегодня = задел на начало месяца + прирост − факт.

Вкладка «Год»: одна тонкость с заделом

Выручка, факт и прирост за год — это суммы за все месяцы, тут всё привычно.

А задел — не сумма. Это не «сколько заработали», а «сколько прямо сейчас висит незакрытого». Если складывать его по месяцам, одна и та же сделка посчитается столько раз, сколько месяцев она висела, и цифра раздуется в разы. Поэтому на вкладке «Год» задел показан на последнюю дату, а не сложен.

Три вида карточек

«Поток», «Орбиты» и «Лепестки» — это одни и те же числа, нарисованные по-разному. Выбирайте тот вид, который вам удобнее читать: выбор запоминается и в следующий раз откроется тот же.

Размер элемента на карточке — это доля от лучшего результата в команде по этому показателю, а точные суммы всегда написаны под графиком.

Если что-то выглядит не так

• Вошли, но дашборд не открылся. Вас ещё нет в списке доступа — напишите администратору, каким адресом вы вошли.
• Нет вкладки нужного месяца. Под строкой вкладок страница сама пишет причину: таблица за месяц ещё не найдена или в ней пока нет ни одной заполненной строки.
• Цифры кажутся неверными. Источник истины — таблица. Проверьте её: дашборд показывает ровно то, что там написано.
• Ничего не загрузилось. Обновите страницу сочетанием Ctrl+F5 (на Mac — Cmd+Shift+R).

В двух словах

Страница в браузере ничего не считает и никуда, кроме нашего сервера, не ходит. Сервер читает Google Таблицы от своего имени, держит готовый снимок данных и отдаёт его тем, кому разрешено. Google отвечает только на вопрос «кто это», а «пускать ли» решает наш список.

Раньше было иначе: таблицы читал браузер токеном самого сотрудника. Отсюда росли экран согласия при каждом входе, перелогин раз в час и доступ, привязанный к шарингу таблиц. Всё это ушло вместе с той схемой.

Из чего собрано

• Страница — чистый JavaScript, без фреймворков. Графики нарисованы вручную в SVG: около 20 КБ своего кода вместо 300 КБ библиотеки, зато полный контроль над видом, тёмной темой и подсказками.
• Служба на сервере — Python без внешних зависимостей, около 25 МБ памяти. Проверяет вход, ведёт список допущенных и отдаёт данные.
• Google Identity Services — подтверждение личности (подписанный токен, в нём только адрес, имя и аватар).
• Сервисный аккаунт Google — «робот», которому расшарена папка с таблицами на чтение. Именно он ходит в Sheets API и Drive API.
• SQLite — список людей и сессии. PostgreSQL здесь не нужен: десяток пользователей и две таблицы.
• nginx отдаёт страницу и проксирует /api/ на службу; HTTPS — Let’s Encrypt с автопродлением.

Что происходит при открытии страницы

1. Проверка сессии. Браузер спрашивает у сервера, вошли ли мы. Сессия живёт в защищённой cookie около месяца, поэтому чаще всего ответ «да» и экран входа даже не появляется.
2. Вход, если нужен. Кнопка Google возвращает подписанный токен удостоверения. Сервер проверяет подпись по ключам Google, сверяет получателя, издателя, срок и подтверждённость почты — и только потом смотрит, есть ли этот адрес в списке допущенных.
3. Данные. Один запрос к нашему серверу — он отдаёт готовый снимок всех месяцев. Ни одного обращения к Google из браузера.
4. Разбор и отрисовка происходят на странице: сервер отдаёт сырые сетки ячеек, а превращает их в показатели уже браузер.
5. Дальше страница следит за свежестью сама. Когда вы возвращаетесь на вкладку и раз в минуту, пока она открыта, браузер спрашивает: «есть что-то новее того, что я показываю?». Почти всегда ответ — несколько десятков байт «нет»; полные 0.4 МБ едут только когда данные действительно обновились. Скрытая вкладка не делает ничего.

Параллельно и независимо от посетителей служба раз в несколько минут перечитывает таблицы: находит месячные файлы в папке, забирает все вкладки каждой книги и обновляет снимок. Полный проход занимает около 20 секунд — поэтому он и вынесен в фон. Если очередное обновление не удалось, отдаётся прошлый снимок и страница честно пишет, на какой он момент.

Как разбирается таблица — и почему это не ломается

Самое хрупкое место любой интеграции с таблицами — привязка к конкретным ячейкам. Здесь этого нет:

• Нужная вкладка ищется по смыслу, а не по имени. Код читает первые три строки каждой вкладки и опознаёт блок по подстроке: «все сотрудники» или «задел», «прирост нарастающим итогом по дням», «выручка нарастающим итогом», «выручка по дням». Переименование вкладки или изменение их порядка ничего не сломает.
• Колонка сотрудника ищется регулярным выражением вида «Фамилия Имя» — сканируются все строки, первое совпадение в столбце закрепляется за ним. Значит, колонки можно переставлять и добавлять.
• Файл месяца в папке опознаётся по названию: месяц распознаётся в любом падеже, отбрасываются «маржа», «копия», «тест», чужой год и ещё не наступившие месяцы. Если на месяц нашлось два файла — берётся изменённый последним.
• Строки, которые ни на что не похожи, просто пропускаются.

Доступ и безопасность

• Паролей нет вовсе — нечего хранить, нечего восстанавливать, нечему утечь. Личность подтверждает Google.
• Токен сессии хранится в базе хэшем. По утёкшей базе войти нельзя.
• Новый адрес заводится закрытым. Человек может войти, но увидит просьбу обратиться к администратору.
• Отключение гасит живые сессии сразу, а не по истечении срока.
• Cookie — HttpOnly, Secure, SameSite=Lax; изменяющие запросы требуют отдельного заголовка, который нельзя подставить формой с чужого сайта.
• Нельзя остаться без администраторов: последнему запрещено снимать права с себя и удалять себя.
• Ключ сервисного аккаунта лежит на сервере отдельным файлом, читает его только служба. В страницу он не попадает.

Исходный код и выкладка

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

Неочевидные решения внутри

• Задел — остаток, а не поток. Выручка, факт и прирост за год складываются по месяцам, задел — нет: иначе одна незакрытая сделка посчитается за каждый месяц, что она висела. У лидера получалось 19 246 вместо 1 775 — завышение в одиннадцать раз.
• Ноль в будущих днях. Таблица заранее расчерчена на весь месяц, и в ещё не наступивших днях в колонке итога стоит литеральный «0». Наивное чтение обнуляло выручку текущего месяца.
• Прирост берётся из первичных колонок, а не с листа «прирост динамика»: там формула у части сотрудников съезжает на колонку влево в последние дни месяца.
• Заголовок Cookie разбирается вручную. Штатный разборщик Python спотыкается о служебную куку Google Sign-In со значением-JSON и теряет вместе с ней нашу сессию — вход проходил, а следующий запрос получал отказ.

Что стоит улучшить

• Заголовки кэширования. Сервер отдаёт только ETag и Last-Modified, без Cache-Control, поэтому после выкладки иногда нужен жёсткий перезагруз.
• Проект не под системой контроля версий. Откат держится на копиях файлов и бэкапах на сервере.
• Встроенный снимок данных стал лишним. Он остался с прежней схемы, когда страница что-то показывала до входа; сейчас до входа не показывается ничего, а 20 КБ по-прежнему грузятся каждому.
• Нет выгрузки и печати, сравнения месяца с предыдущим и ссылки на конкретную вкладку.

Нерешённые вопросы

• Список доступа ведётся вручную. Прочитать, кому расшарена папка в Google, и перенести это автоматически не вышло — у робота не хватает прав на чтение списка доступов. Каждого нового человека администратор добавляет сам.
• Задел уволившегося сотрудника. За год он берётся из последнего месяца, где сотрудник числился, поэтому в командном итоге остаётся остаток человека, который уже не работает.
• Автотесты идут на встроенном снимке, где нет колонок факта и задела — эти два показателя проверены логикой и глазами, но не тестом на настоящих данных.
• Расхождение в один рубль между суммой месячных итогов и суммой по сотрудникам — следствие округления каждого значения.