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

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

  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] - взять второй элемент в массиве. Индекс начинается с нуля.
  7. Виджет "Фильтра"
    • Доступные функции:
      • @value - первое значение в данных
      • @array - массив данных. Можно указывать индекс @array[1] - взять второй элемент в массиве. Индекс начинается с нуля.
      • @value - значение фильтра на уровне
      • @path - массив всех родительских уровней
        • @path[0] - самый первый родитель
        • @path[@level-1] - ближайший родитель
      • @level - уровень вложенности


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

  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'

  11. Форматирование подписей значения фильтра в виде периода дней относительно недели в году

    Для корректной работы, в иерархии измерений должны быть выбраны следующие атрибуты измерения:

    • Год для недели
    • Номер недели


    @level===0?@value:((year,weekNo)=>{var d1=new Date();d1.setFullYear(year);var numOfdaysPastSinceLastMonday=(d1.getDay()-1);d1.setDate(d1.getDate()-numOfdaysPastSinceLastMonday);var weekNoToday=(dt=>{var target=new Date(dt.valueOf());var dayNr=(dt.getDay()+6)%7;target.setDate(target.getDate()-dayNr+3);var firstThursday=target.valueOf();target.setMonth(0,1);if(target.getDay()!=4){target.setMonth(0,1+((4-target.getDay())+7)%7)}
    return 1+Math.ceil((firstThursday-target)/604800000)})(d1);var weeksInTheFuture=(weekNo-weekNoToday);d1.setDate(d1.getDate()+(7*weeksInTheFuture));var rangeIsFrom=weekNo+" неделя "+d1.getDate()+"."+(d1.getMonth()+1);d1.setDate(d1.getDate()+6);var rangeIsTo=d1.getDate()+"."+(d1.getMonth()+1);return rangeIsFrom+" - "+rangeIsTo})(@path[0].text,@path[1])

  12. Добавление подписей к заголовкам в зависимости от уровня

    @level == 0 ? @value + ' год' :  @value + ' неделя'

  13. Форматирование подписи в зависимости от серии

    @series.name == "Прибыль" ? @value.y + " %" : @value.y

  14. Инвертирование формата даты с YYYY-MM-DD на DD-MM-YYYY

    @value.split('-').reverse().join('-')