Продвинутое форматирование свойств виджетов

Для настройки внешнего вида элементов в зависимости от условия или форматирования отдельных элементов виджетов, используется продвинутое форматирование свойств виджетов. Данная настройка включается соответствующими настройками на вкладке визуальных свойств виджетов.

  1. Для настройки форматирования визуальных свойств, в платформе существуют зарезервированные функции, используя которые можно получить интерактивное отображение данных на виджетах или виджеты удовлетворяющие особым визуальным аспектам.
  2. Для работы с цветом, существует несколько способов задания цвета
    • HTML имя цвета
    • rgba
    • HEX
  3. Правила синтакисиса
    • Математические операции:
      • @value * 1000
      • (@value +100)/100
      • и т.д.
    • Логические операции:
      • @row[0] - @row[1] > 100 ? 'blue':'red'
      • @level == 0 ? @value + ' год' : @level==1? 'месяц ' + @value : ''
      • @value == 'Стоимость реализации товара' ? @value + " руб." : ""
      • @columnPath == "Январь" ? '#03a9e3' : ""
      • и т.д.
    • Дополнение текста:
      • @value + " руб."
      • @value == "Ж" ? @value = "Женщины": @value == "М" ? @value = "Мужчины": @value
      • и т.д.
    • Форматирование стиля текста:
      • '<div style=»color: red»>' + @value + '</div>'
      • '<div style=»color:' + @point.color + '»> '+ @series.name+ '</div'


Доступные функции для виджетов:


  1. Виджеты "График", "Гистограмма", "Линейчатая диаграмма"
    • Доступные функции:
      • Форматирование подписей и подсказки:

        • @value.y - значение точки
        • @value.x - название точки
        • @point.name - название точки
        • @point.color - цвет серии
        • @series.name - название серии
      • Форматирование Оси X и Оси Y:

        • @value - название (занчение, если числа) точки
  2. Виджет "Круговая диаграмма"
    • Доступные функции:
      • Форматирование подписей и подсказки:
        • @value.y - значение точки
        • @point.name - название точки
        • @point.color - цвет точки
        • @series.name - название серии
        • @total - сумма значений всех точек в серии
      • Форматирование подписи в центре:
        • @total - сумма значений всех точек в серии
  3. Виджет "Таблица"
    • Доступные функции:
      • Форматирование значений:
        • @value - значение в ячейке таблицы
  4. Виджет "Сводная таблица"
    • Доступные переменные:
      • Форматирование шапки:
        • @value - значение ячейки
      • Форматирование текста боковика:
        • @value - значение в ячейке таблицы
        • @level - уровень вложенности
        • @rowLevel (@level) - текущий уровень вложенности
        • @path- массив всех родительских уровней
          • @path[0] - самый первый родитель
          • @path[@level-1] - ближайший родитель
      • Форматирование ячеек данных:
        • @value - значение в ячейке таблицы
        • @rowPath- массив родителей-строк
        • @rowLevel - текущий уровень вложенности по строкам (РАБОТАЕТ С 1)
        • @columnPath- массив родителей-столбцов
        • @columnLevel - текущий уровень вложенности
        • @value - значение ячейки
  5. Виджет "Плоская таблица"
    • Доступные переменные:
      • Форматирование шапки:
        • @value - значение в шапке таблицы
      • Форматирование ячеек данных:
        • @value - значение в ячейке таблицы
        • @column - название столбца в таблице
        • @row - массив значений строчки
          • @row[0] - обращение к элементу массива через индекс столбца
          • @rowByName['"Fakticheskie_prodazhi_v_rublyah","Stoimost_realizatsii"'] - обращение к элементу массива через unique name
  6. Виджет "Текст"
    • Доступные функции:
      • @value - первое значение в данных
      • @array - массив данных. Можно указывать индекс @array[1] - взять второй элемент в массиве. Индекс начинается с нуля.


Примеры использования:

  1. Замена значения первого уровня измерения

    @level===0&&@path[0]===`ru-al`?`Алтайский край` : @level===0&&@path[0]===`ru-ir`?`Иркутская область` :@level===0&&@path[0]===`ru-ms`?`Москва` :@level===0&&@path[0]===`ru-pr`?`Приморский край` :@level===0&&@path[0]===`ru-sa`?`Самарская область` :@level===0&&@path[0]===`ru-sc`?`Севастополь` :@value

  2. Дополнение подписей показателя

    @value + ' RUR'

  3. Дополнение подписей измерения

    @level == 0 ? @value + ' год' : @level==1? 'месяц ' + @value : ''

  4. Изменение значений в ячейке при помощи логических и математических операция

    @value >2200 ? @value * 5: @value/5

  5. Изменение цвета текста в ячейках в зависимости от определенного значения и названия измерения

    @value < 2200 && @columnPath =="Январь"? "red" : "black"

  6. Изменение цвета фона ячеек в зависимости от названия месяца

    @columnPath == "Январь" ? '#03a9e3' : @columnPath == "Февраль" ? '#0bb2c4' : @columnPath == "Март" ? '#3bad68' :  @columnPath == "Апрель" ? '#8bbd38' :  @columnPath == "Май" ? '#cfc903' :  @columnPath == "Июнь" ? '#f9ad01' : @columnPath == "Июль" ? '#f08002' : @columnPath == "Август" ? '#ec494c' : @columnPath == "Сентябрь" ? '#cf687d' : @columnPath == "Октябрь" ? '#98648a' : @columnPath == "Ноябрь" ? '#6881b9' : @columnPath == "Декабрь" ? '#0078aa' : '000000'
    
    

  7. Корректировка названий столбцов

    @value == 'Стоимость реализации товара' ? @value + " руб." : @value == 'Закупочная стоимость' ? @value + " руб." : @value == 'Город' ? @value = "Города России" : " "
    
    

  8. Корректировка значений в ячейках

    @value == "Ж" ? @value = "Женщины": @value == "М" ? @value = "Мужчины": @value
    

  9. Подкраска цветом в зависимости от значения:

    @value =='Самара' || @value == 'Барнаул' ? "red": 'rgba(0,0,0,0)' && @value == 'Севастополь' || @value =='Тольятти' || @value
    
    

  10. Подкраска цветом при сравнении значений, если разница между значениями больше 100:

    @row[0] - @row[1] > 100 ? 'blue':'red'
    или
    @rowByName['"Fakticheskie_prodazhi_v_rublyah","Stoimost_realizatsii"'] - @rowByName['"Fakticheskie_prodazhi_v_rublyah","Zakupochnaya_stoimost"'] > 100 ? 'blue':'red'