#tmh_фича****⚙️

Привет. Сегодня расскажу об интересной фиче Superset, добавляющей интерактивности дашборду - об эффекте увеличения чарта при наведении на него указателя. Он позволяет пользователям более активно взаимодействовать с визуализациями, делает интерфейс более динамичным и привлекательным, и может помочь пользователям более ясно увидеть различные детали данных, представленных на графике. Выглядит это так.

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

Для реализации фичи будем применять псевдокласс hover. Код выглядит следующим образом:

.dashboard-component.dashboard-component-chart-holder.dashboard-chart-id-730.fade-out:hover {   font-weight: bold;   background: #FFFFFF;   transform: scale(1.25);   z-index: 999; }

Первой строкой мы обращаемся к нужному нам чарту по его id и реализуем hover. Давай поясню, что тут и для чего: ⁃ font-weight. Свойство CSS определяет жирность шрифта. ⁃ background. Сокращенное свойство CSS. Задает сразу все свойства стиля фона, такие как цвет, изображение, происхождение и размер или метод повторения. ⁃ transition. Свойство CSS является сокращенным свойством для transition-property, transition-duration, transition-timing-function и transition-delay. В нашем случае используется для указания свойства, к которому будет применен переход, и задания временного интервала перехода. ⁃ scale(). Функция CSS изменение размер элемента в 2D-плоскости. ⁃ z-index. Свойство z-index CSS задает порядок по оси Z позиционируемого элемента и его потомков. Перекрывающиеся элементы с большим z-индексом перекрывают элементы с меньшим.

Разобрались, теперь добавим плавности изменению размеров чарта. Реализуется следующим кодом:

.dashboard-component.dashboard-component-chart-holder.dashboard-chart-id-730.fade-out {   transition: transform 0.75s; }   Здесь добавляется transform - свойство CSS, позволяющее поворачивать, масштабировать, наклонять или сдвигать элемент. В нашем случае применено масштабирование.

На изображении видно, что некоторые чарты не просто увеличиваются, но и смещаются в сторону. Эффект достигается добавлением translate() - функции CSS, изменяющей положение элемента в горизонтальном и/или вертикальном направлениях.

transform: scale(1.25) translate(65px, 113px)

Объединим все части и сформируем итоговый CSS код, позволяющий реализовать фичу.

/* применение эффекта увеличения чарта при наведении с дополнительным смещением влево и вниз*/

.dashboard-component.dashboard-component-chart-holder.dashboard-chart-id-730.fade-out:hover {   font-weight: bold;   background: #FFFFFF;   transform: scale(1.25) translate(-65px, 117px);   z-index: 999; }

/устанавливается время срабатывания эффекта, т.е. задается плавность/

.dashboard-component.dashboard-component-chart-holder.dashboard-chart-id-730.fade-out {   transition: transform 0.75s; }

Готово, вы прекрасны. Точнее ваш дашборд. В заключении дам советы по использованию функционала. Смещение стоит применять только для чартов, расположенных по краям листа и только при необходимости. Оптимальное значение scale() не превышает 1.25 (я использую 1.05). Использую лишь как визуальный эффект. При этом величина scale() зависит от размеров самого чарта - чем больше чарт, тем меньше нужно увеличение.

Больше о применении CSS в BI ты узнаешь в следующих постах, так что обязательно подписывайся на канал и передай другим. А если тебе нужны индивидуальные консультации, воспользуйся моими услугами ментора - вся информация в закрепах.