null

 

Палитра отчета

В отчетах Аналитического портала (Modus BI) предусмотрена возможность настройки пользовательской палитры цветов.

Создание палитры отчета

Перейдите в «Настройки/ Отчеты», выберите отчет, в котором необходимо установить собственную палитру цветов, и нажмите на кнопку «Редактировать»:

В открывшемся окне выберите «Палитра пользователя»:

В результате будет доступен массив из 10 квадратов, нажимая на которые открывается окно для выбора цвета. Для закрытия окна выбора цвета нажмите на свободное пространство.

После установки цветов нажмите на кнопку «Сохранить» в окне «Редактирование отчета».

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

Раздел «Темы интерфейса»

Для настройки темы интерфейса перейдите в раздел «Настройки/ Темы интерфейса». Здесь можно выбрать или создать собственную тему для портала, добавить/изменить палитры в разделе «Палитра диаграмм».

  1. Настройка основных цветов – изменение цветовой схемы портала.
  2. Палитры диаграмм – настройка цветового оформления графиков и диаграмм.
  3. Добавление логотипа – загрузка изображения логотипа компании.
  4. Оформление главного меню – настройка цвета фона, текста, кнопок и других элементов.
  5. Настройка дашбордов – изменение цвета фона, панелей, рамок и формы элементов отчетов.

Чтобы включить новую тему, установите переключатель «Дефолтная» — «ДА» и перезагрузите Аналитический портал в разделе «Настройки/ Настройки портала».

Как изменить стандартную тему

  1. В настройках выберите одну из доступных тем в списке.
  2. Внесите необходимые изменения в параметры оформления.
  3. Если нужно отменить изменения и вернуть исходные настройки, нажмите на кнопку «Сбросить изменения» рядом с нужной настройкой.
  4. Когда все настройки готовы, нажмите на кнопку «Сохранить», чтобы применить изменения.
     

Чтобы применить изменения, перезагрузите Аналитический портал в разделе «Настройки/ Настройки портала».

Как загрузить собственную тему

  1. Скачайте файл темы, нажав на кнопку «Скачать». Загрузится файл в формате JSON.
  2. Внесите изменения в файл, используя параметры настройки.
  3. В настройках темы нажмите на кнопку «Добавить», укажите название темы и загрузите обновленный файл.

Чтобы включить новую тему, установите переключатель «Дефолтная» — «ДА» и перезагрузите Аналитический портал в разделе «Настройки/ Настройки портала».

Как удалить тему

Нажмите на кнопку «Удалить», после чего система восстановит стандартное оформление.

Форматы данных, используемые в настройках темы

  1. Цвета
    • HEX (например, #ff5733);
    • RGBA (например, rgba(255, 87, 51, 1);
    • Стандартный цветовой выбор (Color Picker) – позволяет выбрать оттенок вручную, включая градиенты.
  2. Параметры, указываемые в пикселях (px)
    • Размеры логотипа (ширина, высота);
    • Размер шрифтов (например, 13px);
    • Отступы (padding, margin);
    • Радиус скругления углов.
  3. Форматы, записываемые в CSS
    • Закругление краёв рамки (например, 0 3px 3px 0);
    • Отступы (margin, padding) (например, 36px auto 24px 24px);
    • Тени элементов (например, 0px 0px 5px -1px #8592a6, 1px 3px 10px -2px #8592a6).

Добавление копирайта

Копирайт — заполните текстовое поле. Написанное значение будет отображаться в панели «Информация об отчете» при просмотре отчета.

Настройки «Основные цвета»

Возможно настроить следующие поля:

  • Палитры диаграмм — поле для создания общих палитр для всего портала, что позволяет использовать их в нескольких отчетах без необходимости настройки для каждого отдельно:

  • Чтобы создать новую палитру, нажмите на кнопку «Добавить палитру», в открывшемся окне введите название палитры латинскими буквами и отображаемое название, выберите цвета. Чтобы закрыть окно выбора цвета, нажмите на свободное пространство. После настройки палитры нажмите на кнопку «Сохранить». Созданная палитра будет доступна для выбора в настройках отчетов. При необходимости отображения в настройках дашборда установите переключатель в позицию «Да».
 
  • Для редактирования цветов, выбранной палитры нажмите на кнопку «Редактировать» (иконка карандаша). Откроется окно «Редактирование палитры», в котором можно изменить цвет, нажав на него. Чтобы закрыть окно выбора цвета, нажмите на свободное пространство. После редактирования цветов нажмите на кнопку «Сохранить».
 

Настройки «Главный логотип портала»

Для настройки логотипа заполните поля:

  • URL файла изображения — при помощи кнопки «Загрузить изображение» загрузите с локального компьютера изображение логотипа для Главной страницы портала. Логотип должен быть SVG формата. Кнопки очистки поля не предусмотрено (как вариант можно загрузить прозрачный однопиксельный GIF);
  • Ширина — установите ширину логотипа в px. При этом пропорции изображения сохраняются;
  • Высота  — установите высоту логотипа в px. При этом пропорции изображения сохраняются;
  • Отступы (CSS формат) — внешние отступы вокруг элемента, возможно установить значения для отступы сверху, справа, снизу, слева. Значение «auto» = 0px;
  • Текст ALT — поле для ввода альтернативного текста для логотипа. Данное текстовое описание будет отображаться, если рисунок логотипа не загрузился.

Настройки «Главное меню»

  • Цвет кнопки скрытия меню — кнопка «Скрыть меню» отображается, когда при расположении в отчете открывается левая навигационная панель. Отображается в виде иконки стрелки, смотрящей налево. В данном поле задается его основной цвет.

  • Цвет кнопки скрытия меню при наведении курсора — задайте цвет, в который окрасится кнопка «Скрыть меню» при наведении на него курсора мыши.

 

  • Цвет фона меню — выберите цвет, в который окрасится левая панель на Главной, в Настройках и в Личном кабинете.

  • Цвет тени меню — в Главной, в Настройках и в Личном кабинете левая панель отбрасывает тень вправо. В данном поле возможно настроить цвет данной тени.

  • Цвет отбивки дополнительных пунктов меню — выбор цвета, в который окрасится прерывистая линия на левой навигационной панели Главной страницы.

  • Размер шрифта папки меню — установите размер шрифта для текста наименований папок и других кнопок, которые отображаются на левой навигационной панели Главной страницы. Данная настройка не влияет на размер шрифта раздела «Настройки» и «Личный кабинет».

  • ​Начертание шрифта папки меню — выберите начертание из выпадающего списка: Обычный или Жирный. Данная настройка применяется к тексту на левой навигационной панели Главной страницы, а также к тексту меню в разделе «Настройки».
  • Цвет текста папки меню — выберите цвет текста. Данная настройка применяется к тексту на левой навигационной панели Главной страницы, а также к тексту меню в разделе «Настройки». Данная настройка влияет также на кнопку «Развернуть», которая отображается рядом с папками, имеющими дочерние папки.
  • Цвет иконки папки меню — выберите цвет иконок папок, иконки отображаются рядом с наименованием папки на левой навигационной панели Главной страницы портала. Если не заполнять поле, то цвет иконок папки будет совпадать со цветом текста папки меню. Не влияет и на иконки раздела «Настройки».

  • Закругление краёв рамки папки меню (строка CSS) — установите значение закругления краев области, которая отображается при выборе папки на левой навигационной панели Главной страницы портала, (в px). Поле заполняется в следующем формате: <верхнее левое закругление> px <верхнее правое закругление>px <нижнее правое закругление>px <нижнее левое закругление>px. Доступно использование закругления только для верхнего правого и нижнего правого края, остальные края по умолчанию 0.

  • Цвет текста выделенной папки меню — выберите цвет текста, которая будет у текста наименования папки при ее выборе на левой навигационной панели Главной страницы. В выбранный цвет также будет окрашиваться кнопка «Свернуть» выбранной папки.

  • Цвет иконки выделенной папки меню —  выберите цвет иконки папки, в которую она будет окрашиваться при выборе папки, к которой она относится. Если не заполнить поле, то цвет иконок папки будет совпадать со цветом текста выделенной папки меню. Не влияет и на иконки раздела «Настройки».

  • Цвет фона выделенной папки меню — выберите цвет, в которую будет окрашиваться область за выбранной папкой на левой навигационной панели Главной страницы.

  • Цвет рамки выделенной папки меню — при выборе папки на левой навигационной панели отображается боковая линия (рамка) слева от области выбора папки. Выберите цвет для данной рамки.

  • Показывать селектор 'Вид отображения списка' — при включении переключателя на Главной странице портала отобразится селектор, в котором возможно выбрать, в каком виде отображаться список отчетов и папок. Начиная с версии 3.11 данная функция временно отсутствует.

  • Показывать строку 'Поиск' — при включении переключателя будет отображаться поле поиска на Главной странице. Поле поиска позволяет искать папки или отчеты по наименованию, а также позволяет искать на определенном уровне иерархии (внутри папки).

  • Цвет фона списка отчетов — выберите цвет, в который будет окрашен фон папок и отчетов на правой рабочей области Главной страницы.

  • Цвет текста папок и заголовков списка отчетов — выберите цвет, в который будет окрашено наименование отчетов и папок внутри панелей в правой рабочей области Главной страницы.

  • Цвет фона панелей списка отчетов — в данном поле задается цвет панелей отчетов в списке отчетов Главной страницы, которое будет отображаться по умолчанию . Также в настройках определенной папки возможно изменение цвета фона панелей отчетов, которые лежат внутри выбранного отчета. Если же для папки нет такой специальной настройки, то будет отображаться цвет, выбранный в данном поле.

  • Радиус скругления панелей списка отчетов​ — установите значение скругления краев панелей списка отчетов.  Значение скругления устанавливается сразу для всех краев.

  • Тень панелей списка отчетов (строка CSS) — поле для настройки тени, которая будет вокруг панели. Возможно настроить несколько теней в данной поле. Чтобы настроить тень на блоке в CSS, используйте свойство box-shadow, которое задает смещение по осям X и Y, радиус размытия, радиус распространения и цвет тени. Основные параметры box-shadow: inset:
    • <offset-x>: Смещение по горизонтали (положительное — вправо, отрицательное — влево);
    • <offset-y>: Смещение по вертикали (положительное — вниз, отрицательное — вверх);
    • <blur-radius> (размытие): Чем больше значение, тем мягче тень (0 — жесткая тень);
    • <spread-radius> (распространение): Растягивает тень (положительное — увеличивает тень, отрицательное — уменьшает);
    • <color> (цвет): Цвет тени (HEX, RGB, RGBA и т.д.);
    • inset: Ключевое слово, чтобы сделать тень внутренней, а не внешней.
Примеры настройки тени 
/* Простая тень */
.my-element {
  box-shadow: 10px 10px 5px grey; /* Смещение вправо-вниз, размытие */
}

/* Тень с распространением и цветом */
.my-element {
  box-shadow: 0 0 15px 5px rgba(0, 0, 255, 0.5); /* Синяя тень по всему периметру */
}

/* Жесткая тень (без размытия) */
.my-element {
  box-shadow: 5px 5px 0 #333;
}

/* Внутренняя тень (эффект погружения) */
.my-element {
  box-shadow: inset 0 0 10px black;
}

/* Несколько теней */
.my-element {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2), /* Первая тень */
              -2px -2px 5px rgba(255,255,255,0.8); /* Вторая тень */
}

 

  • Текст названий поверх картинок панелей — переключатель, при включении которой внешний вид панелей в основной рабочей области Главной страницы поменяется: текст наименования отчета будет отображаться посередине панели, а не в нижней части панели.

  • Цвет затемнения панелей — поле работает при включенном переключателе «Текст названий поверх картинок панелей». Установите цвет фонового затемнения текста панели.
  • Цвет текста заголовков панелей поверх затемнения — поле работает при включенном переключателе «Текст названий поверх картинок панелей». Выберите цвет текста наименования отчетов при работе с затемненной панелью.
  • Максимальное число строк заголовка панели​ — установите значение количества строк заголовка (наименования) отчета в панели на основной рабочей области Главной страницы. Если установить некое значение N, а количество строк будет больше, чем N, то в заголовке панели не влезшая часть отобразиться в виде троеточия.
  • Цвет футера — выберите фоновый цвет футера сайта. Футер — это нижняя часть страницы, в которой содержится дополнительная информация.

  • Цвет текста футера — выберите цвет текста футера, данная настройка не будет влиять на цвет иконок/ логотипов, которые располагаются в футере.
  • Отображать иконки папок в меню по умолчанию — при включении переключателя на левой навигационной панели по умолчанию рядом с наименованием папок отобразится иконка папки (если в настройках папки не была выбрана другая иконка).

Настройки «Дашборд»

  • Цвет фона дашборда — выберите фоновый цвет для дашборда , которое будет отображаться при его просмотре.

  • Цвет панелей дашборда — выбранный в данном поле цвет влияет на цвет пустого контейнера в режиме конструктора отчета. Если у компонента настроен в настройках фон, то цвет из поле «Цвет панелей дашборда» не действует на фон компонента.

  • Закругление краёв рамки панелей дашборда — поле для установки значения скругления краев панелей. Устанавливается одно значение радиуса скругления для всех углов панели.

Настройки «Папки отчетов»

  • Базовый цвет папок — цвет, в который окрасятся папки в правой рабочей области Главной страницы.

Дополнительно

В многих полях при внесении изменений отображается кнопка «Сбросить изменения». При нажатии на нее значение в поле возвращается к значению по умолчанию (не к последнему сохраненному).

После внесения всех изменений в разделе «Темы интерфейса» необходимо нажать на кнопку «Сохранить».

Сохранения темы недостаточно, чтобы оно начало работать, необходимо перезагрузить портал. Для этого:

  1. Перейдите в раздел «Настройки портала».
  2. Нажмите на кнопку «Перезагрузка».
  3. Дождитесь автоматического обновления страницы или самостоятельно обновите страницу.

Связи контента