Привет, Хабр! Меня зовут Антон, я работаю аналитиком в отделе бизнес-аналитики и анализа доходности в ОТП Банке. В нашей новой статье мы погрузимся в мир 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 очень гибкий и разносторонний инструмент, который позволяет делать намного больше. Надеюсь, эти знания вам пригодятся в работе. Всем успехов!