Вкладки

Вкладки — дэш с возможностью переключения отображаемого дэша.

Вкладки (tabs)

Блоки конструктора

Логика работы конструктора для данного дэша представлена в расширенном руководстве пользователя.

JSON-конфигурация

Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.

Секция children

Позволяет задать дочерние деши

“children” :[]

• Принимает массив ВИЗЕЛЕЙ
• Пример:

"children": [{
            "view_class": "text"
            "frame": {},
            "display": {},
            "options": [],
            "dataSource": {}
            }, {...},{...} 
]

options

Описывает различные дополнительные настройки при отображении деша.

Пример указания:

"options": ["Fixed"].

Название ключа	Описание
Fixed	При включенной опции дэш закреплен на экране при скроллировании.
!TopBarMenu	Скрыть меню визеля.
!TopBar	Скрыть заголовок дэша.
!Expanded	Сокрытие возможности разворачивания дэша на весь экран.
Hidden	Сокрытие дэша.
Transparent	Фон дэша соответствует фону подложки дэшборда.

Книга рецептов

Пример конфигурации дэша

Для данного визеля конфигурация работает аналогично визелю “Доска”. Конфигурации дочерних элементов прописываются в массиве children:

{
  frame: {
    h: 6,
    w: 6,
    x: 4,
    y: 6,
  },
  options: [
    '!TabsPanel',
    '!TopBar',
  ],
  children: [
    {
      id: '-1000000:0',
      title: 'Новая вкладка 1',
      options: [
        '',
      ],
      dataSource: {},
      view_class: '1II.bar',
    },
    {
      id: '-1000000:1',
      title: 'Новая вкладка 2',
      options: [],
      dataSource: {},
      view_class: '1I1.pie',
    },
  ],
  dataSource: {
  },
  view_class: '11I.tabs',
  title: '',
}

Переключение двух вкладок одновременно

В данном визеле существует возможность “прослушивания” действий, прописанных в другом дэше в функции navigate в onClickDataPoint. Например, нам необходимо, чтобы два визеля “Вкладки” переключались одновременно при переключении вкладок на одном. Для этого в первом визеле необходимо использовать onChangeTab и прописать для него LPE-выражение с использованием функции navigate:

onChangeTab: 'lpe:navigate("tab", tab)',

Данный функционал позволяет дописывать к URL-странице дэшборда открытую в данный момент вкладку:

http://test.ru/#/ds/ds_1661/dashboards?dboard=105&=&tab=0

С помощью данной функции можно для “прослушивания” как переход на определенный дэшборд или дэш.

Во втором визеле “Вкладки” необходимо использовать activeTab для “прослушивания” URL:

activeTab: 'lpe:url("tab") || 0',

Прописанное LPE-выражение позволяет визелю отображать вкладку, прописанную в URL, в противном случае будет отображена первая вкладка.

Полные конфигурационные JSON-файлы для двух визелей “Вкладки” представлены ниже.

Визель для записи открытой вкладки в URL:

{
  frame: {
    h: 6,
    w: 4,
    x: 0,
    y: 6,
  },
  options: [
    '!TopBarMenu',
    'TabsPanel',
  ],
  children: [
    {
      id: '981:0',
      title: 'Новая вкладка 1',
      options: [],
      dataSource: {},
      view_class: '1I1.pie',
    },
    {
      id: '981:1',
      title: 'Новая вкладка 2',
      options: [],
      dataSource: {},
      view_class: '1II.line',
    },
    {
      id: '981:2',
      title: 'Новая вкладка 3',
      options: [
        'ActiveTab',
      ],
      dataSource: {
        koob: '',
      },
      view_class: '1II.bar',
    },
  ],
  dataSource: {
    koob: 'oracle.orders_full',
    style: {},
    yAxis: 'measures',
    measures: [
      'avg(unit_cost):avg_unit_cost',
    ],
  },
  onChangeTab: 'lpe:navigate("tab", tab)',
  view_class: '11I.tabs',
  title: '',
}

Визель для “прослушивания” какая вкладка должна быть открыта с учетом значения в URL:

{
  frame: {
    h: 6,
    w: 6,
    x: 4,
    y: 6,
  },
  options: [
    '!TabsPanel',
    '!TopBar',
  ],
  children: [
    {
      id: '-1000000:0',
      title: 'Новая вкладка 1',
      options: [
        '',
      ],
      dataSource: {},
      view_class: '1II.bar',
    },
    {
      id: '-1000000:1',
      title: 'Новая вкладка 2',
      options: [],
      dataSource: {},
      view_class: '1I1.pie',
    },
  ],
  activeTab: 'lpe:url("tab") || 0',
  dataSource: {
    koob: 'Цитатник.sisis',
    style: {},
    yAxis: 'measures',
    measures: [
      'count(c):count_c',
    ],
  },
  view_class: '11I.tabs',
  title: '',
}

Скрытие вкладки по LPE-условию

Для дэша “Вкладки” существует возможность скрытия одной из вкладок по определенному условию, прописанному в LPE-выражении по ключу hidden:

{
  frame: {
    h: 6,
    w: 6,
    x: 4,
    y: 6,
  },
  children: [
    {
      id: '-1000000:0',
      title: 'Новая вкладка 1',
      hidden: 'lpe:if(100>10,true, false)',
      options: [
        '',
      ],
      dataSource: {},
      view_class: '1II.bar',
    },
    {
      id: '-1000000:1',
      title: 'Новая вкладка 2',
      options: [],
      dataSource: {},
      view_class: '1I1.pie',
    },
  ],
  view_class: '11I.tabs',
  title: '',
}

В данном условии можно также использовать функцию getFilters описанную выше, в секции title.