Superset: CSS-шаблоны для стилизации дашбордов

Стандартный дизайн Superset может заиграть новыми красками, если уделить внимание работе со стилями. В этой статье рассмотрим основные селекторы и принципы, которые используются для редактирования CSS.

Изменение общих стилей дашборда

Изменение фона дашборда, цвета текста, шрифта:

body {

background-color: #DCDCDC;

color: #191970;

font-family: 'Trebuchet MS', Helvetica, sans-serif;

font-style: normal;
}

Изменение фона графиков:

.dashboard-component {
background-color: #696969!important;
}

Для принудительного применения параметров стиля в конце описания необходимо добавить конструкцию "!important".

Изменение цвета заголовков:

.editable-title {
color: #000080;
}

Скрытие заголовков:

.header-title {
display: none !important;
}

Скрытие элементов управления для всех графиков:

.header-controls {
display: none !important;
}

Стили отдельных графиков

Для изменения стилей конкретного графика, необходимо узнать его селекторы через консоль браузера (F12):

1. Класс контейнера-подложки

Селектор class

Пример использования - изменение фона графика:

.dashboard-component.dashboard-component-chart-holder.dashboard-chart-id-172.fade-out.css-0 {
background-color: #000080!important;
}

2. Идентификатор графика

Идентификаторы графиков встречаются двух видов:

1. Первый тип:

Селектор data-test-chart-id

Как использовать, на примере поднятия графика вверх:

div[data-test-chart-id="1272"] {

margin-top: -30px!important;

}

2. Второй тип:

Селектор id

Как использовать:

div[id="chart-id-871"] {
margin-top: -30px!important;
}

Обращение к свойствам отдельного графика

В общих стилях дашборда мы рассматривали, как скрыть заголовки всех его элементов, и использовали для этого в качестве селектора класс "header-title":

.header-title{
display: none !important;
}

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

div[data-test-chart-id="1293"] .header-title {
display: none !important;
}

Аналогично можно получить доступ и к другим свойствам графика. Описанный принцип поможет вам работать практически со всеми селекторами, которые вы встретите, открыв консоль с дашборда.

Для многократного использования написанного CSS-кода, рекомендуем добавлять часто используемые стили в меню CSS-templates.

Пример дашборда в Superset со стилизацией и кастомизацией

Спасибо за прочтение! Записывайтесь на наш курс на Stepik, если хотите овладеть всеми возможностями системы Superset.

Контакты

Компания Full BI: интегратор Apache Superset и вендор российской сборки системы.