Использование 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=u1NK3r...(рисунок 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 изменяет положение элемента в горизонтальном и/или вертикальном направлениях.
Результат визуального оформления дашборда
Результат полученной визуализации дашборда представлен на анимации ниже:
Источник: Блог bilab
