блог о bi, №1 в рунете
Форматирование с использованием CSS Template
CSS Template
В продолжение предыдущей статьи «Изменение шаблона пользовательского интерфейса дашборда в Apache Superset» хотелось бы рассказать о других возможностях, доступных при редактировании шаблон CSS. Так визуализация в аналитике не ограничивается цветовой схемой дашборда и может применяться как для выделения особенностей в данных, так и для оформления отдельных чартов. Мы расскажем Вам о наиболее часто применяемых нами шаблонах.
- Изменение форматов таблиц
С одной стороны отображаемой информации достаточно, но с другой хотелось бы иметь больше возможностей для редактирования. Этого можно добиться, изменяя шаблон 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.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;}
После применения шаблона получается следующая таблица:
Задаем размер шрифта:
#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», ограничивается набором определенных оттенков, применяемых к сгруппированным значениям. Пример для построения столбчатой диаграммы сравнения групп 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; }
Получится график вида:
Если изучить код «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» присутствуют следующие возможности по взаимодействию с выбранными значениями: удаление выбранного элемента, удаление всех выбранных элементов, выпадающий список.
В обычном виде для чарта «filter box» присутствуют следующие возможности по взаимодействию с выбранными значениями: удаление выбранного элемента, удаление всех выбранных элементов, выпадающий список.
Однако, если название элемента фильтра слишком длинное, а место на дашборде для размещения чарта ограничено, то мы столкнемся со следующей проблемой: название опции выходит за рамки окна выбранных зачений, а вместе с ней и удаление элементов и выпадающий список. Можно воспользоваться скроллом, но выглядеть это будет очень некрасиво.
Исправить это можно, добавив в шаблон CSS возможность переноса текста и ограничение на ширину для области выбранного значения:
#chart-id-51 .Select__multi-value__label
{ word-break:break-all;
max-width: 150px;}
Фильтр будет выглядеть следующим образом:
#chart-id-51 .Select__multi-value__label
{ word-break:break-all;
max-width: 150px;}
Фильтр будет выглядеть следующим образом:
Примечание: данный способ редактирования не подойдет для элементов типа canvas.