Форматирование с использованием CSS Template

CSS Template

В продолжение предыдущей статьи «Изменение шаблона пользовательского интерфейса дашборда в Apache Superset» хотелось бы рассказать о других возможностях, доступных при редактировании шаблон CSS. Так визуализация в аналитике не ограничивается цветовой схемой дашборда и может применяться как для выделения особенностей в данных, так и для оформления отдельных чартов. Мы расскажем Вам о наиболее часто применяемых нами шаблонах.

Изменение форматов таблиц

Возьмем к примеру обычную плоскую таблицу, построенную с помощью чарта «TABLE» в Apache Superset.

С одной стороны отображаемой информации достаточно, но с другой хотелось бы иметь больше возможностей для редактирования. Этого можно добиться, изменяя шаблон CSS.

1.1. Чтобы изменения применились в нужном месте, необходимо узнать номер чарта, это можно сделать, исследую код страницы браузера или перейдя в область редактирования и в ссылке найти slice_id=<number>. В нашем случае номер равен 20.

1.2. Перейдите обратно в просмотр дашборда. Нажмите "EDIT DASHBORD" в правом верхнем углу и в меню редактирования выберете опцию "Edit CSS".
1.3. Чтобы установить для таблицы внешнюю границу серого цвета толщиной 1px внутри конкретного чарта, используйте код:

#chart-id-20 table {border-collapse: collapse; border: 1px solid grey;}

Получаем таблицу:

1.4. Таким образом задаем все необходимые настройки. Пример нашей реализации:
Задаем размер шрифта:
#chart-id-20 table {font-size: 11px}
Задаем цвет текста и фона для ячеек заголовка
#chart-id-20 th {color: #FFF; background-color: #505054;}
Задаем цвет фона для ячеек тела таблицы из первой колонки
#chart-id-20 td:first-child {background-color: #dcdcdc;}
Задаем цвет текста и фона для ячеек заголовка из последней колонки
#chart-id-20 th:last-child {color: #FFF; background-color: #e96c12;}
Задаем цвет текста и фона для ячеек тела таблицы из последней колонки
#chart-id-20 td:last-child {color: #2d90c9; background-color: #f8ceb5;}

После применения шаблона получается следующая таблица:

2. Изменение цветовой схемы отрицательных бар гистограммы

Цветовая схема, для чарта «BAR CHART», ограничивается набором определенных оттенков, применяемых к сгруппированным значениям. Пример для построения столбчатой диаграммы сравнения групп 1 (синий цвет) и 2 (фиолетовый цвет):

Здесь мы видим отрицательные значения. Для аналитиков важно сразу замечать подобные аномалии на реальных данных. Хотелось бы их выделить отдельным цветом, но в стандартных настройках это не представляется возможным.
Если изучить код «BAR CHART», по можно заметить, что элементы на графике делятся на две серии nv-series-0 и nv-series-1, соответствующие нашим группам 1 и 2.
В каждой серии есть четыре nv-bar: две negative и две positive.
Обратимся к описанным классам для negative баров, прописав следующий код для чарта в шаблонах CSS:

#chart-id-41 .nv-group.nv-series-0 > .nv-bar.negative
{ fill: rgb(250,128,114) !important;
stroke: rgb(250,128,114) !important;}
#chart-id-41 .nv-group.nv-series-1 > .nv-bar.negative
{ fill: rgb(178,34,34) !important;
stroke: rgb(178,34,34) !important; }

Получится график вида:

3. Ограничение длины выводимых значений в фильтре.
В обычном виде для чарта «filter box» присутствуют следующие возможности по взаимодействию с выбранными значениями: удаление выбранного элемента, удаление всех выбранных элементов, выпадающий список.

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

Исправить это можно, добавив в шаблон CSS возможность переноса текста и ограничение на ширину для области выбранного значения:

#chart-id-51 .Select__multi-value__label
{ word-break:break-all;
max-width: 150px;}

Фильтр будет выглядеть следующим образом:

Примечание: данный способ редактирования не подойдет для элементов типа canvas.

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