Плотная компоновка дэшей

Основы визуализации Luxms BI
1

У коллег от бизнеса есть такое пожелание: вокруг визуализаций внутри дэшей очень много пустого белого пространства. Оно отнимает место визуализации и не даёт плотно разместить информацию. На промо видео видно, что полностью кастомные дэшборды лишены такого недостатка. После PBI, где можно укладывать элементы очень плотно, коллегам от бизнеса хотелось бы и в luxms увидеть возможности если не более плотной компоновки элементов на дэшборде, то хотя бы сокращения пустот, которые не несут значимой смысловой нагрузки.
Как я понял, в данный момент есть 2 стратегии решения моего вопроса:

  • прописать в конфиге дэша
    echart: {
    grid: {
    width: ‘85%’,
    height: ‘85%’,
    },
    },

  • обернуть дэши в дэш board и растянуть его на весь экран. Для этого дэша есть опция gap, которая убирает отступы между дочерними элементами + поиграться с фреймами дэшей, и будет бльше полезного пространства

Вопросы:

  1. Сохранится ли адаптивность при использовании варианта с конфигурацией echart?
  2. Не смог найти описания опции gap. Есть ли возможность описать как правильно ей пользоваться?
  3. При использовании board терятся позможноть редактирования дэшей из UI. Есть ли вариант, при котором дэши будут изначально создаваться с меньшим количество пустого места и будет возможность редактировать их внешний вид из UI?
2

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

  1. Создайте файл “styles.css” с следующим содержимым:
.Dashlet{
	margin: 0.1rem
}
  1. Сохраните данный файл и перенесите его в ресурсы атласа ds_res, если необходимо реализовать данную логику для всех атласов.

Ответы на ваши вопросы:

  1. Да, сохранится
  2. “gap” - указывается в конфигурации дэша board в блоке display. Используется для указания отступов между дочерними элементами
{
  dataSource: {
    koob: '',
  },
  display:{
    gap: 5
  },
  frame: {
    x: 0,
    y: 5,
    w: 5,
    h: 3,
  },
  view_class: '11I.board',
  title: '',
  children: []
}

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

3

Спасибо за развёрнутые комментарии.
Попробовал предложенные методы, результаты такие:
.
1.

.Dashlet{
	margin: 0.1rem
}

Отлично сжимает границы между дэшами. Попробовал 0.01 и вижу, что некоторые дэши могут стать немного внахлёст и видны радиусы уголков дэшей.
Есть ли возможность сделать обводку дэшей без радиусов?
.
2.

echart: {
grid: {
width: '85%',
height: '85%',
},
},

Работает, но с некоторой поправкой: ширина изменяется только право, а высота - вниз. Есть ли возможность уменьшать левую и верхнюю границы дэша? (см. рисунок ниже)
.
3. У меня создан дэш tabs, в каждый таб вложен board и на доске уже лежат по 2 графика. В таком варианте содержимое board из UI отредактировать нельзя. Выглядит дэш так:

При клике на внутренний элемент вижу, что заголовок в UI меняется на заголовок дэша доски, но в UI вижу меню доски. Вероятно, это ошибка.
Если собрать несколько элементов на отдельной доске, то работает как вы описали.
.
4.

  display:{
    gap: 5
  },

Попробовал и вижу, что по умолчанию значение параметра равно 0 и его увеличение раздвигает между собой дэши. Отрицательные значения игнорируются. Соответственно, данный вариант не помог.

4
  1. Для того, чтобы убрать обводку, вы можете в styles.css указать следующее:
.Dashlet{
	margin: 0.1rem;
        border-radius: 0
}

  1. К сожалению, в текущей реализации, такая возможность не предусмотрена

  2. Выпущена версия веб-клиента 8.12.0 - в ней данный функционал реализован

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

  frame: {
    h: 7.5,
    w: 5.3,
    x: 0,
    y: 0,
  },
5

С параметрами

.Dashlet{
	margin: 0.05rem;
        border-radius: 0
}

получился самый оптимальный вариант, спасибо.

могу предложить подобрать оптимальные значения блока frame для дочерних элементов доски, в нем можно указывать значения со знаком после запятой.

Тоже попробовал. По высоте получилось сделать наложеие графиков друг на друга, а в ширину увеличение одного графика не выводит его за границы доски, а сужает соседний. Немного необычное поведение, но иногда, возможно, сможет помочь.

Спасибо за подсказки!