Заказать звонок
Меню
Обсудить
бизнес-задачи
блог о 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, примененные для оформления дашборда
Свойства и функции CSS
Описание свойств и функций 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 изменяет положение элемента в горизонтальном и/или вертикальном направлениях.


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

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


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

  1. https://medium.com/analytics-vidhya/apache-superset-rich-open-source-visualization-platform-a13785944c83
  2. https://ru.wikipedia.org/wiki/Apache_Superset
  3. https://developer.mozilla.org/ru/docs/Web/CSS/
  4. https://developer.mozilla.org/ru/docs/Web/HTML/Element/div
  5. https://stackovergo.com/ru/q/54811/how-do-you-display-code-snippets-in-ms-word-preserving-format-and-syntax-highlighting
Вернуться к блогу