Интерактивная визуализация с использованием HTML в Apache Superset

Решить данную проблему можно, встроив HTML – код как строковое значение в ячейку таблицы. Несколько примеров реализации показаны ниже.

1. Подкрашивание числа в плоской таблице в зависимости от значения.

1.1. Для примера визуализации создадим тестовую таблицу с тремя колонками.

Запрос для датасета:

select 1 as a, 3 as b, 2 as c

union all select 2 as a, -3 as b, 2 as c

union all select 3 as a, 4 as b, -2 as c

union all select 4 as a, -2 as b, 2 as c

Необходимо подкрасить числа в столбце B:

- зеленым цветом, если значение положительное

- красным цветом, если значение отрицательное.

1.2. Будем использовать датасет из п.1.1. как подзапрос для форматирования таблицы.

Для форматирования значений в ячейке будем использовать HTML-элемент <span>, который является основным строковым контейнером для фразового контента. Чтобы задать цвет необходимо вставить строчку в каждую ячейку колонки В:

<span style="color:<цвет>"><название столбца></span>

Чтобы обеспечить выбор цвета для числа используем логическую функцию if и для конкатирования строк функцию CONCAT. Аналоги этих функций присутствуют в большинстве диалектов.

Формируем запрос для датасета нашей таблицы:

select a as A

,concat('<span style="color:', if(b < 0,'#DC143C','#2E8B57'), '">', toString(b), '</span>') as B

,c as C

from (select 1 as a, 3 as b, 2 as c

union all select 2 as a, -3 as b, 2 as c

union all select 3 as a, 4 as b, -2 as c

union all select 4 as a, -2 as b, 2 as c) as t

В результате получаем таблицу вида.

2. Таким же образом можно построить гистограмму в ячейках таблицы в зависимости от любого агрегата. Например от итоговой суммы по столбцу (в исходном функционале возможно построение гистограмм только от максимального значения по колонке). Реализуем функционал для колонки С.

Также как в п.1 используем HTML-элемент <span> для форматирования ячейки, if для выбора цвета и concat для слияния строк. Чтобы нарисовать подобие бар гистограммы в ячейке используем свойство заливки ячейки и линейный градиент (background-image: linear-gradient), это позволит залить цветом необходимую область ячейки:

- Разделим ячейку на две части и в зависимости от знака будем закрашивать левую или правую часть красным или зеленым цветом соответственно.

- Границы заливки для градиента будем определять процентным соотношением: искомым процентом будет являться доля значения в ячейках С от суммы по всей колонке. Запрос для датасета таблицы:

select a as A

,concat('<span style="color:', if(b < 0,'#DC143C','#2E8B57'), '">', toString(b), '</span>') as B

,concat('<span style="display: block; background-image: linear-gradient(to right, ',

if(c >= 0,

concat('#FFFFFF 50%, ', '#90EE90 50%, #90EE90 ', toString(50 + c/sum_c/2*100), '%, ', '#FFFFFF ', toString(50 + c/sum_c/2*100) , '%', '); '),

if(50 - c/sum_c/2*100 < 0, '#FFA07A 50%, ',

concat('#FFFFFF ', toString(50 + c/sum_c/2*100), '%, ', '#FFA07A ', toString(50 + c/sum_c/2*100), '%, #FFA07A 50%, ', '#FFFFFF 50%', '); ')))

,')', 'text-align: center; , "> ', toString(c),' </span>' ) as C

from (select a, b, c, sum(c) over() as sum_c

from(select 1 as a, 3 as b, 2 as c

union all select 2 as a, -3 as b, 2 as c

union all select 3 as a, 4 as b, -2 as c

union all select 4 as a, -2 as b, 2 as c

)) as t

В результате получаем таблицу вида:

3. Добавить картинку и гиперссылку в ячейки таблицы.

Задачи: сформировать заголовок для дашборда в табличном виде, где:

- в левой ячейке будет картинка с лого

- в правой ячейке ссылка на сайт

Данную задачу можно решить с использованием HTML, используем:

- тег img для добавления рисунка

- тег href для добавления гиперссылки

Запрос для датасета:

select '<img src="https://static.tildacdn.com/tild6230-6132-4331-b361-633935643464/LogoSpacePlanner.png"

alt="Logo" style="height: 231px; width:604px;"/>' as img

,'<p>Cсылка на <a href="https://lasmart.ru/">домашнюю страницу Lasmart</a>.</p>' as href

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

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

.header-title > .editable-title {display: none;}

#chart-id-76 th

{font-size: 0px;

background-color: #4f277c;

padding:0px;}

Итоговый вариант таблицы выглядит следующим образом: