Привет, Хабр! Меня зовут Антон, я работаю аналитиком в отделе бизнес-аналитики и анализа доходности в ОТП Банке. В нашей новой статье мы погрузимся в мир Apache Superset 2024 и откроем вам лучшие практики и продвинутые методы работы с этим мощным инструментом. После прочтения вы научитесь мастерски кастомизировать Pivot-таблицы, создавать уникальные цветовые палитры для дашбордов, эффективно настраивать систему алертов и использовать удобные CSS/HTML-шпаргалки для ускорения работы. Эти знания помогут значительно повысить эффективность использования Apache Superset, делая вашу аналитическую работу не только производительной, но и визуально привлекательной. Итак, поехали.
Модификация Pivot-таблиц
Pivot‑таблицы — неотъемлемый инструмент в арсенале современного аналитика, позволяющий глубоко анализировать и визуализировать данные. Кастомизации этих таблиц — важный инструмент в Apache Superset, так как позволяет сделать таблицу красивее, проще, читабельнее, а также использовать в ней корпоративные цвета, если это необходимо.
Чтобы модифицировать Pivot-таблицы для максимального увеличения их эффективности и удобства использования, нужно воспользоваться в Apache Superset функцией для редактирования CSS стиля страницы поверх существующего дизайна. Технически это выглядит как создание дополнительного CSS-кода расположенного ниже основного CSS-кода.
Вам нужно знать базовые инструменты стилизации в CSS, а также приоритетность их выполнения для этого раздела.
По умолчанию Superset делает Pivot-таблицу, представленную ниже.
Вид таблицы до кастомизации:
Вид таблицы после кастомизации:
Чтобы модифицировать таблицу 1 до вида таблицы 2, нужно использовать конкретные селекторы CSS для стилизации элементов нашей веб-страницы.
Пошаговая инструкция к приведению таблицы к этому виду:
1) Переходим во вкладку Edit Dashboard;
2) Нажимаем троеточие
3) Переходим в вкладку Edit Css;
4) Начинаем редактировать Live CSS editor. Как работает этот механизм – поверх существующих селекторов CSS накладываются селекторы из кластера Live CSS editor, однако стоит понимать, что браузер интерпретирует изменения в Live CSS editor как код, написанный ниже основанного, и будет применять к нему все правила существующей приоритетности кода.
Также стоит отметить, что написанные ниже селекторы применимы ко всем другим Pivot-таблицам в Apace Superset, поэтому вы смело можете использовать их в своих проектах.
5) Код, который выбирает колонку оглавления Pivot-таблицы и делает цвет текста белым (невидимым), таким образом надпись MAX(d_summ) будет невидимой.
table.pvtTable thead tr th.pvtColLabel {color:white;}6) Код, который выбирает оглавления осей Pivot-таблицы и делает цвет текста белым (невидимым), таким образом надписи Metric, period, ind будет невидимой.
table.pvtTable thead tr th.pvtAxisLabel {color: white;} 7) Код, который выбирает числовые значения таблицы и делает цвет текста черным (вместо синего по умолчанию) и выравнивает его по центру. Для выравнивания нужно указать !important, чтобы решить проблему приоритетности с базовым CSS.
table.pvtTable tbody tr td.pvtVal {
color:black;
text-align:center !important ;
}8) Код, который выбирает четвертый ряд и делает цвет кислотно-зеленым и шрифт жирным.
table.pvtTable tbody tr:nth-child(4) td.pvtVal {
background-color:#cbfa67;
font-weight: 800;
}
table.pvtTable tbody tr:nth-child(4) th.pvtRowLabel {
font-weight: 800;
background-color: #cbfa67;
}9) Код, который уберет границы в заголовках осей, что сделает вид таблицы более читабельным. Важно указать !important, чтобы наш код был приоритетнее.
table.pvtTable thead * {
border-top:none !important;
border-left:none !important;
border-right:none !important;
}10) Код, который сделает нашу колонку в хедере с винтажами 202301-202402 фиолетовым и выделенным жирным черным.
table.pvtTable thead tr th.pvtColLabel.hoverable {
font-weight: 800;
background-color: #9f6fc3;
text-align: center !important;
color:black;
border-top: 1px solid rgb(224, 224, 224) !important;
border-left: 1px solid rgb(224, 224, 224) !important;}
Так мы прошли путь от стандартной классической таблицы к отредактированной таблице, используя всего несколько селекторов и правил.
Создание цветовой палитры для Dashboard
Цветовая палитра играет ключевую роль в дизайне дашбордов, улучшая визуальное восприятие и помогая в интерпретации данных.
Для добавления цветовой палитры откройте свойства дашборда.
Перейдите в раздел ADVANCED и найдите в JSON строку «label_colors». В ней можно переписать цвета для каждого показателя.
В скрипте нужно указать название показателя и hex-код.
"label_colors": {
"название_показателя_1": "#<код цвета>",
"название_показателя_2": "#<код цвета>",
"название_показателя_3": "#<код цвета>"
},На моем дашборде есть показатели «продажи» и «средний чек», поэтому мой скрипт будет выглядеть так:
"label_colors": {
"продажи": "#c0d7c0",
"средний чек": "#3a9284"
},Внимательно пишите скрипт, старайтесь не потерять запятые. В случае, если ваш скрипт написан корректно, в графе COLOR SCHEME появится предупреждающий знак, это значит ваша цветовая палитра успешно переписана.
Создание алертов
Алерты в Apache Superset служат важной функцией мониторинга, предоставляя пользователям своевременные уведомления о критических изменениях в данных или достижении определённых пороговых значений. Эффективно настроенные алерты могут существенно повысить реактивность команд, ускоряя принятие решений и предотвращение потенциальных проблем.
Чтобы настроить алерт, кликните на Alert и заполните соответствующие поля.
Удобные CSS /HTML шпаргалки
Шпаргалки помогут быстро найти необходимые стили и теги, а также существенно упростить процесс кастомизации ваших аналитических панелей. Они помогут в создании профессионально выглядящих и функционально насыщенных дашбордов.
Дэшборды — CSS
/*дашборд*/
body {
/*цвет фона*/
background: #f2f2f2;
/*шрифт*/
font-family: calibri;
}/*заголовок дашборда*/
.title-panel {
/*цвет шрифта*/
color: #495057;
}Чарты — CSS
/*заголовок чарта*/
.dashboard .chart-header {
/*насыщенность шрифта*/
font-weight: 560;
/*размер шрифта*/
font-size: 18px;
/*цвет шрифта*/
color: #495057;
}
/*чарт*/
.dashboard-component-chart-holder.fade-out {
/*закругление краев чарта*/
border-radius: 15px;
/*тень чарта*/
box-shadow: 0 8px 9px 0 rgb(0 0 0 / 4%);
}Скрыть scroll bar — CSS
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}Скрыть заголовки всех чартов — CSS
.header-title .editable-title {
display:none;
}Вместо вывода
Мы разобрались, как модифицировать Pivot-таблицы, создавать алерты и менять цветовую палитру. Важно не останавливаться на достигнутом, потому что Superset очень гибкий и разносторонний инструмент, который позволяет делать намного больше. Надеюсь, эти знания вам пригодятся в работе. Всем успехов!
