Общие настройки виджетов
Вкладка «Настройки»
Ниже описана функциональность кнопок и полей вкладки «Настройки».
| Сбрасывает все настройки до примененной темы. |
Заголовок
| Автоматическое определение высоты заголовка, для корректного отображения текста. |
| Скрытие / отображение заголовка виджета. По умолчанию заголовок отображается. |
| Настройка межстрочного интервала. |
| Настройка высоты заголовка. |
| Настройка шрифта и его размера. |
| Выравнивание заголовка. |
| Настройка начертания текста. |
Цветовая палитра
| Ручная настройка. Позволяет вносить изменения в стили и в настройки виджетов стандартную палитру цветов. Измерение порядка цветов возможно с помощью "перетаскивания" (drag and drop). |
| Задание цвета области отображения текста заголовка. |
| Задание цвета текста. |
| Поле для редактирования заголовка виджета. |
| Добавление / скрытие ссылки перехода по нажатию на заголовок. В поле редактирования указывается ссылка перехода. |
Общие
| Уникальный номер виджета, который автоматически присваивается ему системой. Используется для привязки данных из одного виджета к другому. |
| Вспомогательная привязка к другому виджету (и его данным). Настройка влияния данных связанного элемента на настраиваемый виджет производится в режиме «Просмотр (редактирование)». |
| Включение / блокировка возможности редактирования кода элемента в режиме «Предпросмотр (редактирование)» и в самом дашборд дизайнере. |
| Это сброс всех изменений кода виджета к стандартному виду. |
Положение элемента
| Точная настройка положения виджета. За положение с координатами (0;0) принимается левый верхний угол листа. |
| Точная настройка размеров виджета. |
Рамка
| Скрытие / отображение рамки виджета. |
| Задание цвета рамки виджета стандартными цветами. Если необходимый цвет отсутствует, то воспользуйтесь кнопкой «Дополнительные настройки». |
| С помощью ползунков осуществляется настройка цвета (R, G, B) и прозрачности (A). Существует возможность задать цвет HTML-кодом (#A6FF46F4). По кнопке «Стандартные цвета» осуществляется переход в окно с набором стандартных цветов. |
| Настройка скругления углов для выбранного виджета: |
| Блок для настройки тени для выбранного виджета: |
Фон
| Настройка отображения фона виджета. |
| Задание цвета фона виджета. |
| С помощью ползунков осуществляется настройка цвета (R, G, B) и прозрачности (A). Существует возможность задать цвет HTML-кодом (#A6FF46F4). По кнопке «Стандартные цвета» осуществляется переход в окно с набором стандартных цветов. |
Форматирование
| Настройка свойств виджета с помощью языков html, JavaScript. Чтобы начать визуальную настройку с помощью команд, необходимо сначала настроить привязку данных во вкладке «Привязка данных». |
Зарезервированные команды:
- @value – значения по оси;
- @value.x – значения точки по Х;
- @value.y – значения точки по Y;
- @point.color – цвет подписей;
- @series.name – имя серии;
- @total – суммарное значение для круговой диаграммы.
С синтаксисом зарезервированных команд можно ознакомиться в разделе Продвинутое форматирование свойств виджетов.
Пример 1
Виджет «Гистограмма». Форматирование подписей точек/столбцов: '<div style=»color:' + @point.color + '»> '+ @series.name+ '</div>'
![]()
Пример 2.
Форматирование виджета «Текст»: '<div style=»color: red»>' + @value + '</div>'
Панель фильтров и Drill down
| Раздел для настройки детализации данных. |
| Данный чек-бокс позволяет задавать детализацию данных по одному показателю и нескольким измерениям, выбранным в строках в разделе «Привязка данных».
|
| Так же, для задания уровней детализации, можно группировать данные по нескольким измерениям. Например, на первом уровне выбрать Год-квартал, на втором – месяц. Для этого, необходимо в строках в разделе «Привязка данных» выбрать «Режим группировки». |
| Настройка цвета и текста для элементов управления детализацией и очистки фильтров, отображаемых на виджете. |
Пример:
Выбрано три измерения в строках «Отдел», «Должность», «Фамилия».![]()
После выбора «Использовать Drill down», на гистограмме отображаются данные соответствующие первому уровню детализации «Отдел».![]()
Для того, чтобы попасть на следующий уровень детализации, необходимо кликнуть два раза левой кнопкой мыши по одному из столбцов или выбрать иконку
.
Иконки фильтра и Drill down увеличиваются при наведении на них и становится доступен переход на любой из уровней.![]()
Настройка серий и сегментов
| Выбор варианта фильтрации серий. Например, один виджет влияет на другой. При выбранном чек-боксе «Множественный виджет», для фильтрации можно выбрать несколько столбцов: |
Общая цветовая палитра (Colorpicker)
Для изменения цветов различных элементов виджетов используется компонент "Colorpicker":![]()
На вкладке "Стандартные" colorpicker содержит:
- "Тема" - отображаются все цвета из темы проекта
- "Стандартные" - набор стандартных цветов
- "Недавние" - 10 недавно использованных цветов. Цвета отображаются общие для всех виджетов и для всех элементов виджетов (текст, фон, рамка и т.д.)
На вкладке "Дополнительно" имеется возможность настройки цвета по:
- RGBA
- HEX
- Ручная настройка по шкале
![]()
"Недавние" цвета сохраняются только в рамках текущей сессии DashboardDesigner, после выхода и повторного входа все "Недавние" цвета очищаются. Если вы хотите их сохранить, но необходимо добавить эти цвета в вашу "Тему проекта"

























