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

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

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

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

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

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). Подробности здесь
isHidden	true / 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’).
formula	LPE-выражение	Указывается формула, по которой будет выводится итог столбца. Требуется указать агрегат measure - как указано в массиве measures. (Работает только с включенной опцией DisplayOverall. При включенной опции выводится сумма значений по столбцу).
textAlign	Строка	Ориентация значений внутри ячейки. Доступные значения: center, left, right.
footerStyle	Объект со стилями	Опция для настройки нижней строчки таблицы, в которой указывается Общий итог.
value	LPE-выражение	Опция для редактирования ячейки плоской таблицы, с ее помощью можно в ячейку добавить ссылку, а так же svg картинку. Кроме того, есть возможность добавить условие через lpe-выражение. В примере ниже используются функции bold(v) - для выделения текста жирным, italic(v) - для выделения значения курсивом, br() - для переноса строки, переменная v (либо value, а также можно указывать название measure или dimension) - значение в ячейке таблицы, nbsp - для пробела, aHref() - функция для указания ссылки. Svg файл необходимо добавить в ресурсы текущего атласа.
vizelType	pie, bar	Отображение дэша “Пирог” или “Столбик” внутри ячейки таблицы. Работает только с фактами.
valueStyle	LPE-выражение	Принимает на вход LPE-выражение, с условием окрашивания значения. Работает только для фактов и при указании vizelType. Примеры использования представлены ниже.
progressStyle	LPE-выражение	Принимает на вход LPE-выражение, с условием окрашивания заливки дэша в ячейке таблицы. Работает только для фактов и при указании vizelType. Примеры использования представлены ниже.
containerStyle	LPE-выражение	Принимает на вход LPE-выражение, с условием окрашивания фона дэша в ячейке таблицы. Работает только для фактов и при указании vizelType. Примеры использования представлены ниже.
width	Число	Указание ширины для столбца в таблице.
height	Число	Указание высоты для столбца в таблице.
minWidth	Число	Указание минимальной ширины столбца
minHeight	Число	Указание минимальной высоты столбца
maxWidth	Число	Указание максимальной ширины столбца
maxHeight	Число	Указание максимальной высоты столбца

осторожно

С версии 10.0.8 опции minWidth/minHeight/maxWidth/maxHeight работают также, как если бы вы задавали стили через CSS.

к сведению

Для корректного отображения таблицы в случае указания ширины для столбцов необходимо указывать опции в паре minWidth/maxWidth (аналогично с высотой) либо width.

подсказка

Best practies является указание для всех столбцов минимальной ширины, которая необходима в таблице, а последующим ее уже увеличивать.

Для дэша “Плоская таблица” также можно указывать опцию 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

Название ключа	Возможные значения	Описание
stripes	boolean	Если указано значение 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.

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

Фильтрация по столбцу в плоской таблице

С версии 10.1 предусмотрена возможность фильтрации таблицы по столбцу. Для этого необходимо открыть меню фильтрации у конкретного столбца, нажатием на кнопку сортировки (1):

Внутренние фильтры плоской таблицы

В блоке “Порядок сортировки” (2) указывается сортировка по столбцу. В блоке (3) указывается фильтрация таблицы по столбцу. Фильтрация осуществляется аналогично фильтрации через управляющий дэш, но применяется только на таблицу. После указания фильтра иконка кнопки вызова меню изменит цвет:

Кнопка стала жирнее

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

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

1. Открыть список кубов в разделе “Данные”.
2. Открыть режим редактирования куба, в котором необходимо проводить редактирование значений.
3. Открыть вкладку “Config” и прописать в конфигурацию следующее:

  "table": "maxexample", // таблица и схема, куда пишутся значения
  "schema": "public",
  "primary_key": [  "id"  ]  // список ключей этой таблицы

4. Сохранить изменения.
5. Перейти в клиентскую часть и в конфигурации дэша koob-table-simple прописать:

"onClickDataPoint": 'edit'

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

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

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

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

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

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

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

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

к сведению

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

осторожно

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

осторожно

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

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

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

1. Таблица-справочник с возможными значениями для выбора, например:

Мужчины - 1
Женщины - 2
Не задано - 3

Таблица-справочник по полу

2. Куб непосредственно с данными, где у размерности должны быть указаны id в соответствии со справочником, вместо заголовков и столбец PRIMARY KEY таблицы (уникальное id для каждой строки) например:

Таблица с данными должна содержать ID значений со справочника

3. Настроить конфигурацию куба на редактирование значений (описано в руководстве по конфигурации дэшлетов)
4. Настроить конфигурацию размерности, для которой необходимо подключить справочник (подробнее в расширенном руководстве пользователя в разделе “Данные”)

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

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

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

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

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

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

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

Было:

http://<ваш_домен>/#/ds/ds_9773/dashboards?dboard=77

Стало

http://<ваш_домен>/#/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”.

Отображение дэшей в плоской таблице

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

Для этого необходимо:

1. Открыть окно стилизации фактов (иконка шестеренки);
2. Нажать на ячейку “Тип графика”;
3. Выбрать необходимую визуализацию и нажать ОК;

Ниже представлен пример подключения отображения дэшей внутри ячейки используя конструктор:

Добавление дэша в ячейку плоской таблицы

Ниже представлен пример JSON-конфигурации данной таблицы:

{
  frame: {
    h: 4,
    w: 12,
    x: 0,
    y: 0,
  },
  dataSource: {
    koob: 'ch.max_example',
    style: {
      measures: {
        count_dt: {
          title: 'Значение 2',
          vizelType: 'pie',
        },
        sum_v_main: {
          title: 'Значение 1',
          vizelType: 'bar',
        },
      },
    },
    xAxis: 'dt;age;degree',
    yAxis: 'measures',
    measures: [
      'sum(mes):sum_mes',
      'count(mes):count_mes',
    ],
    dimensions: [
      'dt',
      'age',
      'degree',
    ],
  },
  view_class: 'koob-table-simple',
}

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

Плоская таблица с дэшами

к сведению

Логика закрашивания реализована по следующей логике:
Текущеезначение*100/(максимальноезначение - минимальное_значение)

Условия для окрашивания дэшей, фона дэша и значений, выводимых рядом, необходимо использовать LPE-выражение в JSON-конфигурации. Для этого используются ключи valueStyle, progressStyle, containerStyle. Данные ключи принимают на вход только LPE-функцию hash, первым аргументом которой является указание ключа (backgroundColor/color) а вторым аргументом указывается значение (LPE-условие, либо значение цвета).

осторожно

ключи valueStyle, progressStyle, containerStyle принимают на вход только LPE-функцию hash.

Ниже представлен пример JSON-конфигурации, используемый вышеописанные ключи:

{
  frame: {
    h: 6,
    w: 15,
    x: 6,
    y: 0,
  },
  dataSource: {
    koob: 'ch_luxms.max_example',
    style: {
      measures: {
        avg_v_main: {
          vizelType: 'pie',
          format: '# ###,0',
          valueStyle: "lpe:hash('color', if(category = 'Специалисты', 'green', 'yellow'))",
          progressStyle: "lpe:hash('color', if(value > 100, 'red', 'blue'))",
          containerStyle: "lpe:hash('backgroundColor', '#fefefe')",
        },
      },
    },
    xAxis: 'age;category;degree',
    yAxis: 'measures',
    measures: [
      'avg(v_main):avg_v_main',
    ],
    dimensions: [
      'age',
      'category',
      'degree',
    ],
  },
  view_class: 'koob-table-simple',
}

Ниже представлено изображение таблицы при использовании вышепредставленной конфигурации:

Итоговое изображение плоской таблицы с дэшами

Как видно из изображения, значение окрашено зеленым цветом для категории “Специалисты”, пирог становится красным, если значение больше 100, а подложка дэшей всегда серая.