Использование CSS в Apache Superset для визуализации для визуализации отчётности. Псевдокласс hover

Часть 1

Введение
В данной статье представлено описание действий для выполнения оформления дашборда, реализованного на базе платформы Apache Superset.

Apache Superset – многофункциональная платформа визуализации с открытым исходным кодом. Apache Superset используется для исследования и визуализации данных, ориентирован на большие данные.

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык описания внешнего вида HTML-документа. HTML структурирует документ и упорядочивает информацию, а CSS взаимодействует с браузером, чтобы придать документу оформление.

Инструменты, используемые для оформления внешнего вида дашборда

https://www.color-hex.com/ – сайт для подбора палитры цветов.
https://www.canva.com/ru_ru/obuchenie/100-cvetovyx-sochetnij/ – примеры цветовых сочетаний для сайтов.
https://csseditor.com/ – CSS editor.

Методика выполнения оформления дашборда

Пользовательский интерфейс Apache Superset имеет вкладку редактора CSS, которую можно использовать для изменения скина пользовательского интерфейса.

Для применения настроек CSS при оформлении дашборда необходимо:

• Щелкнуть «Edit Dashboard» в правом верхнем углу. Если вы не видите кнопку «Edit Dashboard», это означает, что у вас нет необходимых прав для внесения каких-либо изменений в панель мониторинга (рисунок 1).

Рисунок 1 – Расположение кнопки «Edit Dashboard» на дашборде «Анализ продаж (Боровлёв)»

• Нажмите кнопку раскрывающегося списка «…» и перейдите к пункту «Edit CSS» (рисуноки 2 и 3).

Рисунок 2 – Расположение кнопки кнопку раскрывающегося списка на дашборде «Анализ продаж (Боровлёв)»

Рисунок 3 – Расположение ссылки «Edit CSS» на дашборде «Анализ продаж (Боровлёв)»

• В появившемся окне «Live CSS editor» необходимо вставить код CSS, описывающий оформление дашборда:

Рисунок 4 – Окно «Live CSS editor» на дашборде «Анализ продаж (Боровлёв)»

• После закрытия окна «Live CSS editor» нажать кнопку «Save», чтобы сохранить изменения:

Рисунок 5 – Расположение кнопки «Save» дашборде «Анализ продаж (Боровлёв)»

На примере дашборда «Анализ продаж (Боровлёв)»

http://84.38.188.88:8088/superset/dashboard/8/?native_filters_key=u1NK3rFWXQn3k68-l3lrSOf725Au9727E13VDPhJy-krRMjfWtLr1XZHArnl8gE8

предлагается следующий набор действий по визуальному оформлению.

Рисунок 6 – Дашборд «Анализ продаж (Боровлёв)»

Оформление фона дашборда

Для задания цвета фона дашборда «Агатовый серый» к контейнеру body применено свойство background-color:

В следующей, заключительной части статьи:

Оформление чартов 6

Оформление группы чартов с id 44, 65, 45, 70, 67, 48. 7

Оформление группы чартов с id 64, 61, 50. 8

Оформление группы чартов с id 57, 58. 11

Свойства и функции CSS, примененные для оформления дашборда. 13

Результат визуального оформления дашборда. 14

Ссылки на источники

Вернуться к блогу