Примеры условного форматирования

Сценарий 1. Форматирование данных, отображаемых в индикаторе

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

1. Создать индикатор на базе виджета Текст;

2. Вывести нужное значение и отформатировать его:

   • округлить;

   • изменить цвет значения и фона;

   • разделить разряды значения для удобного восприятия.

3. Изменить цвет значения и фона.

Шаг 1. Создание индикатора на базе виджета Текст

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

1. Откройте приложение Dashboard Designer.

2. Создайте новый дашборд или откройте существующий.

3. Перейдите на вкладку Вставка и выберите виджет Текст:
   

   

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

   

5. Для завершения создания индикатора озаглавим его. Можно также изменить фон заголовка:
   

   

Шаг 2. Вывод нужного значения и его форматирование

Теперь, для вывода в виджет самого первого значения таблицы, достаточно ввести команду @value в поле Настройка текста > Текст. Но у нас другая задача. Нам нужно вывести определенное значение и отформатировать его. Для этого нам необходимо сделать следующее:

• вывести данные, например, по февралю (вторая строка таблицы);

• округлить значение;

• добавить слово руб.;

• разделить разряды значения для удобного восприятия.

Все это можно выполнить одной командой, введенной в поле Текст:

Math.round(@array[1]).toLocaleString('ru') + " руб."

Где
Math.round – функция округления;
@array[1] – строка с необходимым нам значением. В таблице это вторая строка, но мы указали 1, так как первая строка имеет индекс 0.
toLocaleString('ru') – преобразует числовое значение в строковое и возвращает это значение, используя указанный языковой стандарт;
+ " руб." – добавленный текст.

То же самое можно сделать и другими способами:

Math.round(@value).toString().replace(/(?!^)(?=(?:\d{3})+(?:.|$))/gm, '')+ " руб."
или
Math.round(@array[1]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " " )+ " руб."

Шаг 3. Изменение цвета значения и фона

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

Сценарий 2.