Перейти к основному содержимому

Плоская таблица

Плоская таблица - это двумерный массив данных, состоящий из столбцов и строк. Единственный дэш, в котором отображение данных не зависит от расположения данных по осям.

Плоская таблица

Блоки конструктора

Логика работы конструктора для данного дэша представлена в расширенном руководстве пользователя.

JSON-конфигурация

Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.

Далее представлена таблица ключей, поддерживаемых дэшем “Плоская таблица”.

dataSource

Опции koob, dimensions, measures, limit, sortBy, xAxis, yAxis и filters из секции dataSource подробно описаны в руководстве по конфигурации дэшлетов (глава 1.2.4).

Название ключаВозможные значенияОписание
titleСтрока, LPE-выражениеУказание заголовка для показателя, отображаемого в шапке таблицы. Можно указать LPE-выражение, изменяющее заголовок в зависимости от фильтрации данных (функция getFilters). Подробности здесь
isHiddentrue / false, либо LPE-выражениеСкрытие столбца, если условие истинно
colorСтрока, либо LPE-выражениеУказание цвета для показателя. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.). Можно указать LPE-выражение, изменяющее цвет значения по условию.
formatСтрокаОтображение значения в соответствии с указанным форматом. Все варианты форматов описаны в руководстве по конфигурации дэшлетов
fontStyleСтрока либо LPE-выражениеУказание стилизации отображения значений столбца (указание значения italic отображает текст курсивом)
fontSizeЧисло, либо LPE-выражениеУказание размера шрифта значений в столбце (указываются относительные значения в процентах относительно значения по умолчанию)
fontWeightСтрока либо LPE-выражениеУстановка насыщенности шрифта значений (указание значения bold отображает текст полужирным начертанием)
textDecorationСтрока либо LPE-выражениеДобавление оформление текста с использованием линии (указание значения underline подчеркивает текст)
backgroundColorСтрока либо LPE-выражениеУказание цвета фона значений в столбце. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.). Можно указать LPE-выражение, изменяющее цвет значения по условию.
whiteSpaceСтрокаОпция для переноса текста в ячейке, в случае, когда он не помещается в ячейке (указать значение ‘normal’).
formulaLPE-выражениеУказывается формула, по которой будет выводится итог столбца. Требуется указать агрегат measure - как указано в массиве measures. (Работает только с включенной опцией DisplayOverall. При включенной опции выводится сумма значений по столбцу).
textAlignСтрокаОриентация значений внутри ячейки. Доступные значения: center, left, right.
footerStyleОбъект со стилямиОпция для настройки нижней строчки таблицы, в которой указывается Общий итог.
valueLPE-выражениеОпция для редактирования ячейки плоской таблицы, с ее помощью можно в ячейку добавить ссылку, а так же svg картинку. Кроме того, есть возможность добавить условие через lpe-выражение. В примере ниже используются функции bold(v) - для выделения текста жирным, italic(v) - для выделения значения курсивом, br() - для переноса строки, переменная v (либо value, а также можно указывать название measure или dimension) - значение в ячейке таблицы, nbsp - для пробела, aHref() - функция для указания ссылки. Svg файл необходимо добавить в ресурсы текущего атласа.
widthЧислоУказание ширины для столбца в таблице.
heightЧислоУказание высоты для столбца в таблице.

Для дэша “Плоская таблица” также можно указывать опцию Pin внутри блока styles для показателей. При включении опции столбец будет закреплен у левого края и отображаться независимо от горизонтального проматывания таблицы.

Пример указания:

"dataSource":{
"koob":"ch.max_example",
"style":{
"measures":{
"sum_v_main":{
"options":[
"Pin",
],
},
},
},
}

Пример использования данных ключей конфигурации представлен ниже:

"style":  {
"measures": {
"b": {
"color": "#a6c497",
"width": 20,
"backgroundColor": "#771111",
},
"c": {
"color": "#4ab6e8",
"fontSize": "lpe:if(c>400000, '120%', '80%')",
"width": 10,
"fontStyle": "lpe:if(c>400000, 'italic', '')",
"fontWeight": "lpe:if(c>400000, 'bold', 'normal')",
"textDecoration": "lpe:if(c>400000, 'underline', '80%')",
"backgroundColor": "lpe:if(c > 400000, '#ffaabb', 'transparent')",
"formula": "sum(usd_amt)/sum(plan_usd_amt)*100:sum_sum_1",
"textAlign": "center"
"options":[
"Pin"
]
},
"d": {
"value": 'lpe:if(v>2, bold(v) + br() +svg("myTest"), v + nbsp + svg("myTest_1"))',
},
"e": {
"value": 'lpe: if(value="123", aHref("http://localhost:3000/", "myLink"), value)',
}
},
},

display

Название ключаВозможные значенияОписание
stripesbooleanЕсли указано значение true, то таблица отображена с чередующейся покраской строк
headerStyleобъектИспользуется для указания стилей заголовка дэша

Группировка столбцов (groupColumns)

В плоской таблице предусмотрена возможность визуальной группировки столбцов. Для этого используется поле groupColumns. Данный объект является массивом, содержимое в котором необходимо прописывать по следующей схеме:

groupColumns: [
'Название группы:количество столбцов для группировки',
...,
],

Первый элемент массива groupColumns объединит первые n-столбцов с указанной подписью.

Пример:

groupColumns: [
'Группа 1:2',
'Группа 2:1',
],

На дэшборде плоская таблица с подобным содержимым будет отображена следующим образом:

Плоская таблица с группировкой столбцов

В примере выше “Группа 1” объединяет 2 столбца, так как в массиве указано объединить 2 столбца. По аналогичной логике в “Группа 2” входит 1 столбец. Все последующие столбцы будут отображены без группы.

options

Описывает различные дополнительные настройки при отображении деша.

Пример указания:

"options": ["Fixed"].
Название ключаОписание
FixedПри включенной опции дэш закреплен на экране при скроллировании
!TopBarMenuСкрыть меню визеля
!TopBarСкрыть заголовок дэша
ModalDrilldownПодключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами)
!ExpandedСокрытие возможности разворачивания дэша на весь экран
HiddenСокрытие дэша
DisplayOverallДобавляет итоговую строку внизу таблицы
MergeCellsОпция, включающая объединение ячеек по вертикали
!SortСкрытие кнопок сортировки у столбцов

onClickDataPoint

Поле onClickDataPoint описывает поведение клиентской части LuxmsBI при нажатии на один из указанных показателей в LPE-выражении, используемом для описания поведения.

Ниже в таблице приведены доступные функции для данного дэша. Описание работы с ними представлено в одноименном разделе руководства по конфигурации дэшлетов (глава 1.2.12)

Название функцииОписание
setKoobFiltersФильтрация дэшей по значению размерности при нажатии на данное значение размерности.
navigateПереключение на указанный в выражении дэшборд/датасет.
openModalПри нажатии на точку (сегмент) дэша откроется модальное окно с дэшем, id которого указано в конфигурационном файле.
navigateUrlИспользуется для перехода на внешний источник с подстановкой значения.
menuItemИспользуется для совместного использования hierarchy и функций onClickDataPoint.

Книга рецептов

Редактирование данных через koob-table-simple

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

  1. Открыть список кубов в разделе “Данные”.
  2. Открыть режим редактирования куба, в котором необходимо проводить редактирование значений.
  3. Открыть вкладку “Config” и прописать в конфигурацию следующее:
  "table": "maxexample", // таблица и схема, куда пишутся значения
"schema": "public",
"primary_key": [ "id" ] // список ключей этой таблицы
  1. Сохранить изменения.
  2. Перейти в клиентскую часть и в конфигурации дэша koob-table-simple прописать:
"onClickDataPoint": 'edit'

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

Редактирование значения в плоской таблице

При успешном обновлении таблицы в ответе запроса можно увидеть {“count” : 1}.

С помощью клика по корзине можно удалить из источника всю соответствующую строчку.

Удаление значения в плоской таблице

Также можно создавать сточки, для этого следует кликнуть по “+”. После чего появляется окно для ввода значений полей в таблице.

Добавление значения в плоской таблице

Важно помнить, что первичный ключ должен быть корректным.

к сведению

Помимо этого можно дать доступ на редактирование только одному из столбцов. Для этого, необходимо указать "onClickDataPoint": 'edit' в блоке style для конкретного факта/размерности.

осторожно

Для корректной работы, в таблице и кубе должен присутствовать столбец id, который будет являться primary_key

осторожно

Редактирование значений корректно работает только в случае, если факт отображен без агрегации

Реализация редактируемой таблицы с вариантами выбора

Для отображения возможных значений для редактирования вам необходимо иметь следующее:

  1. Таблица-справочник с возможными значениями для выбора, например:
Мужчины - 1
Женщины - 2
Не задано - 3
Таблица-справочник по полу
  1. Куб непосредственно с данными, где у размерности должны быть указаны id в соответствии со справочником, вместо заголовков и столбец PRIMARY KEY таблицы (уникальное id для каждой строки) например:
Таблица с данными должна содержать ID значений со справочника
  1. Настроить конфигурацию куба на редактирование значений (описано в руководстве по конфигурации дэшлетов)
  2. Настроить конфигурацию размерности, для которой необходимо подключить справочник (подробнее в расширенном руководстве пользователя в разделе “Данные”)

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

Дэш “Данные” с возможностью выбора из выпадающего списка значения

Логика работы с функцией value

Отображение SVG изображений в плоской таблице

В плоской таблице предусмотрена возможность отображения изображений в формате SVG по условию. Для этого необходимо:

  1. Положить необходимые изображения в ресурсы атласа.
  2. В конфигурации плоской таблицы написать LPE-условие их отображения.

Для загрузки изображений в ресурсы атласа в URL-страницы атласа необходимо заменить атрибут dashboards на resources ниже пример:

Было:

http://localhost:3000/#/ds/ds_9773/dashboards?dboard=77

Стало

http://localhost:3000/#/ds/ds_9773/resources?dboard=77

Ресурсы атласа

В открывшееся окно, используя drag’n’drop перенести изображения. Рекомендуемый размер изображений 30х30 пикселей.

Ресурсы атласа после загрузки изображения

После этого необходимо вернуться на дэшборд, выбрав его в списке дэшбордов.

Создать дэш “Плоская таблица”, отложить необходимые факты и размерности, и открыть JSON-конфигурацию дэша.

Плоская таблица

В блоке styles для необходимого столбца указать ключ value с необходимым LPE-выражением.

    style: {
measures: {
v_main: {
value: 'lpe:if(v>2, svg("myTest"), svg("myTest_1"))',
},
},
},

где функция svg принимает аругментом название файла.

В вышеописанном примере, в случае, если значение факта v_main больше 2, то отображается myTest.svg, в противном случае - myTest_1.svg.

Отображение svg изображений в плоской таблице

Реализация ячейки с ссылкой по условию

С помощью функции value можно значение ячейки сделать гиперссылкой на сторонний ресурс по условию. Ниже представлен пример LPE-выражения:

    style: {
age: {
value: 'lpe: if(value="35-50", aHref("https://ya.ru/search/?text=" + v, "Ссылка на поисковик"), value)',
},
},

Ниже представлена таблица:

Таблица с ссылкой

При нажатии на “Ссылка на поисковик” откроется сайт Яндекса с поиском по нажатому значению “35-50”