блог о bi, №1 в рунете

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

Введение

В данной статье представлено описание действий для выполнения оформления дашборда, реализованного на базе платформы 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).

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

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

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

На примере дашборда «Анализ продаж (Боровлёв)»
http://84.38.188.88:8088/superset/dashboard/8/?native_filters_key=u1NK3rFWXQn3k68-l3lrSOf725Au9727E13VDPhJy-krRMjfWtLr1XZHArnl8gE8 (рисунок 6) предлагается следующий набор действий по визуальному оформлению.

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

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

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

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

При оформлении чартов предполагается использование следующих визуальных эффектов:

задание цвета фона с линейным градиентом;
задание радиуса скругления углов чарта;
при наведении курсора мыши на чарт – изменение шрифта на «жирный»;
при наведении курсора мыши на чарт – изменение цвета фона на «белый»;
при наведении курсора мыши на чарт – плавное увеличение чарта, при необходимости со смещением для корректного отображения в границах дашборда;
при наведении курсора мыши на чарт – положение чарта над всеми остальными.

Чтобы изменения применились к нужным чартам необходимо определить их номера. Это можно сделать, рассмотрев код страницы в области редактирования (рисунок 7).

Рисунок 7 – Область редактирования web страницы дашборда «Анализ продаж (Боровлёв)»

<div></div> – элемент разделения контента. Являясь «чистым» контейнером, элемент <div></div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать средствами CSS, используя атрибуты class или id.

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

Рисунок 8 – Чарты с id 44, 65, 45, 70, 67, 48

На примере чарта с id 44. Цвет фона задан линейным градиентом с углом 45⁰ от цвета «Светлого оттенка зелено-голубого» до «Белого дыма». Радиус скругления углов задан 10px. Данное оформление достигается применением кода:

Для реализации свойств при наведении курсора мыши на чарт используется псевдокласс hover.

На примере чарта с id 65. При наведении курсора мыши задается жирный шрифт, цвет фона изменяется на «Белый», чарт увеличивается, чарт выходит на передний план по отношению к другим элементам. Реализовано с помощью кода:

Чтобы при наведении курсора мыши размеры чарта изменялись плавно, добавлен переход к родительскому селектору использованием кода:

Рисунок 9 – Применение псевдокласса hover для чартов с id 44, 65, 45, 70, 67, 48

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

Рисунок 10 – Чарты с id 64, 61, 50.

На примере чарта с id 64. Цвет фона задан линейным градиентом с углом 45⁰ от цвета «Мятно-кремового» до «Белого дыма». Радиус скругления углов задан 13px. Код для данного оформления:

Поскольку реализация псевдокласса hover для чартов с id 64, 61, 50 отличается, рассмотрим каждый чарт отдельно.
Чарт с id 64. При наведении курсора мыши задается жирный шрифт, цвет фона изменяется на «Белый», чарт увеличивается, чарт смещается вправо для корректного отображения в границах дашборда, чарт выходит на передний план по отношению к другим элементам. Реализовано с помощью кода:

Для плавного изменения размеров чарта добавлен переход к родительскому селектору:

Рисунок 11 – Применение псевдокласса hover для чартов с id 64

Чарт с id 61. При наведении курсора мыши задается жирный шрифт, цвет фона изменяется на «Белый», чарт увеличивается, чарт не смещается, чарт выходит на передний план по отношению к другим элементам. Реализовано с помощью кода:

Плавное изменение размеров чарта:

Рисунок 12 – Применение псевдокласса hover для чартов с id 61

Чарт с id 50. При наведении курсора мыши задается жирный шрифт, цвет фона изменяется на «Белый», чарт увеличивается, чарт смещается влево для корректного отображения в границах дашборда, чарт выходит на передний план по отношению к другим элементам:

Плавного изменение размеров чарта:

Рисунок 13 – Применение псевдокласса hover для чартов с id 50.

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

Рисунок 14 – Чарты с id 57, 58

На примере чарта с id 57. Цвет фона задан линейным градиентом с углом 45⁰ от цвета «Мятно-кремового» до «Белого дыма». Радиус скругления углов задан 13px. Данное оформление достигается применением кода:

Реализация псевдокласса hover для чартов с id 57, 58 отличается, рассмотрим каждый чарт отдельно. Чарт с id 57. При наведении курсора мыши задается жирный шрифт, цвет фона изменяется на «Белый», чарт увеличивается, чарт смещается вправо и вверх для корректного отображения в границах дашборда, чарт выходит на передний план по отношению к другим элементам:

Плавное изменение размеров чарта:

Рисунок 15 – Применение псевдокласса hover для чартов с id 57

Чарт с id 58. При наведении курсора мыши задается жирный шрифт, цвет фона изменяется на «Белый», чарт увеличивается, чарт смещается влево и вверх для корректного отображения в границах дашборда, чарт выходит на передний план по отношению к другим элементам. Реализовано с помощью кода:

Плавное изменение размеров чарта:

Рисунок 16 – Применение псевдокласса hover для чартов с id 58.

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

background-color

Устанавливает цвет фона элемента

background

Сокращенное свойство CSS. Задает сразу все свойства стиля фона, такие как цвет, изображение, происхождение и размер или метод повторения.

linear-gradient()

Функция CSS, создает изображение, состоящее из перехода между двумя или более цветами по прямой линии.

border-radius

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

transition

Свойство CSS является сокращенным свойством для transition-property, transition-duration, transition-timing-function и transition-delay. В нашем случае используется для указания свойства, к которому будет применен переход, и задания временного интервала перехода.

transform

Свойство CSS позволяет поворачивать, масштабировать, наклонять или сдвигать элемент. В нашем случае применено масштабирование.

font-weight

Свойство CSS определяет жирность шрифта.

scale()

Функция CSS изменение размер элемента в 2D-плоскости.

z-index

Свойство z-index CSS задает порядок по оси Z позиционируемого элемента и его потомков. Перекрывающиеся элементы с большим z-индексом перекрывают элементы с меньшим.

translate()

Функция CSS изменяет положение элемента в горизонтальном и/или вертикальном направлениях.

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

Результат полученной визуализации дашборда представлен на анимации ниже:

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

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