Блог
Мануалы

Добавление Кастомного CSS в BI конструктор

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

Примеры того как можно использовать свой CSS

1. Для того чтобы стиль не относился к нескольким таблицам, если они есть в вашем дашборде, то необходимо открыть панель разработчика и найти “id” у “<div>”, внутри которого находится таблица. Это позволит обращаться к конкретной таблице
2. Скрытие лишних строк (В примере скрывается системная строка, которая не нужна заказчику, но ее нельзя убрать стандартным функционалом)
  #chart-id-925 thead tr:nth-child(1) th {
    border-bottom: 1px solid rgb(224, 224, 224);
  }
  #chart-id-925 thead tr:nth-child(2) {
    display: none;
  }
Разберем по какой логике работает стиль:

  • #chart-id-925 - Айди <div> в котором находится таблица, получили его из шага 1.
  • thead - Обращаемся только к заголовку таблицы, чтобы изменения не применились к строкам.
  • tr:nth-child(1/2) - Обращаемся к первой и второй строкам таблицы соответственно, чтобы изменения не касались других строк в заголовке, если они есть. Вторая строка - Мера, стандартная строка которая добавляется в сводной таблице, ее и нужно убрать.
(Было)
(Стало)
3. Закрепление столбца таблицы на месте при прокрутке (В примере закрепляется первый столбец и название)
  #chart-id-923 tr td:first-child,
  #chart-id-923 thead tr:first-child th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: white;
  }
Разберем по какой логике работает стиль:

  • #chart-id-925 - Айди <div> в котором находится таблица, получили его из шага 1.
  • tr td:first-child - Выбор всех первых столбцов в строках
  • thead tr:first-child th:first-child - Выбор названия первой колонки
(Было: первый столбец прокрутился)
(Стало: первый столбец закреплен)