Обсудить
бизнес-задачи
бизнес-задачи
блог о bi, №1 в рунете
Изменение шаблона пользовательского интерфейса
дашборда
в Apache Superset.
Все чаще большие компании отдают предпочтение серверной аналитике, где разворачивают интерактивные решения для обработки данных. Создание таких систем требует внимательного подхода ко всем аспектам, не только к вычислениям, но и к оформлению. Практически каждая корпорация имеет свой фирменный стиль (брендбук) и требует следовать ему при разработке портала аналитических систем.
Пользовательский интерфейс Apache Superset выглядит достаточно лаконично, но не имеет кастомных настроек для выбора цветовой схемы основной области визуализации. Мы нашли способ решить эту проблем, отредактировав шаблон CSS.
Допустим, у нас есть дашборд с набором чартов, пример которого показан на рисунке ниже. Нам необходимо поменять цвет фона на черный.
Допустим, у нас есть дашборд с набором чартов, пример которого показан на рисунке ниже. Нам необходимо поменять цвет фона на черный.
1. Нажмите "EDIT DASHBORD" в правом верхнем углу
2. В режиме редактирования в правом верхнем меню есть опция "Edit CSS"
3. В открывшемся окне ввести код:
а) Для изменения фона дашборда:
.dashboard{ background: #000000}
б) Для изменения фона чартов:
.dashboard-component{ background: #d6d8d7}
а) Для изменения фона дашборда:
.dashboard{ background: #000000}
б) Для изменения фона чартов:
.dashboard-component{ background: #d6d8d7}
4. Закройте область редактирования CSS и нажмите «Save».
Вы получите следующую картинку:
Вы получите следующую картинку:
5. Чтобы внести изменения в оформление области фильтров и заголовка, необходимо узнать название соответствующих классов, к сожалению, они не имеют стандартных имен. Для этого в своем браузере:
а)нажмите правой кнопкой мыши и «Просмотреть код».
б) в открывшейся области нажать «select on element in the tabs …» (см.рис.)
в) навести мышь на необходимый объект, в левой части экрана подсветится часть кода, соответствующая выделеной части, запомните название класса.
Для области фильтров у нас получилось следующее:
а)нажмите правой кнопкой мыши и «Просмотреть код».
б) в открывшейся области нажать «select on element in the tabs …» (см.рис.)
в) навести мышь на необходимый объект, в левой части экрана подсветится часть кода, соответствующая выделеной части, запомните название класса.
Для области фильтров у нас получилось следующее:
Используем имя .css-6qb51q для редактирования фона области фильтров.
6. Повторите п. 5 для всех необходимых объектов и добавляем код в шаблон CSS. В нашем случае получилось следующее:
Область фильтров и заголовка:
.css-6qb51q { background: #000000;}
.css-1db2tta { background-color: #000000; }
.css-132hnd5 { background: #000000;}
Оформление текстов и символов:
.css-1xf2vnm { color: white;}
.css-6szfdn {color: white;}
.css-d9e6wp { color: white;}
.css-1abftjo { color: white;}
В результате получаем дашборд как на рисунке ниже
6. Повторите п. 5 для всех необходимых объектов и добавляем код в шаблон CSS. В нашем случае получилось следующее:
Область фильтров и заголовка:
.css-6qb51q { background: #000000;}
.css-1db2tta { background-color: #000000; }
.css-132hnd5 { background: #000000;}
Оформление текстов и символов:
.css-1xf2vnm { color: white;}
.css-6szfdn {color: white;}
.css-d9e6wp { color: white;}
.css-1abftjo { color: white;}
В результате получаем дашборд как на рисунке ниже
