Работа с дашбордами личных кабинетов

Смотреть пример вывода Дашборда

Также посмотрите пошаговое руководство по созданию дашборда

Управление дашбордами

<div class="as-dashboard" data-code="code1" data-animated="1"></div>

2.Создать в разделе Дашборды элемент с указанным кодом code1. Указать правильные права для users, roles
3.Создать дополнительные панели в дашборде (ссылка в таблице Панели)
4.Для панели указываем код (задает название хранимых процедур), Колонка (1-12  как часть разметки Bootstrap - сколько занимает колонка).
Тип (table, bar, line), Html (если указано, то данная разметка будет выводиться в панели).  Height - в px, % или auto - высота панели. 
5.Создаем необходимые хранимые процедуры. Для счетчиков это хранимая процедура вида dashboard_{dashboardCode}_getCounters,
для табличных данных (тип table) - это dashboard_{dashboardCode}_{panelCode}_getPanelTable, для bar и подобных графиков -
это dashboard_{dashboardCode}_{panelCode}_GetPanelChart

Процедура GetCounters

CREATE PROCEDURE [dbo].[dashboard_forAdmin_getCounters]
       @username nvarchar(128)
AS
BEGIN
-- select 1
SELECT
        /*Выходной результат - это 4 строки в указанном формате
          На входе - username */
	'Falcon' Title,
	'Falcon 2. Документация' Tooltip,
	'fa fa-cogs' Icon,
	'2.0' Number,
	'' AdditionalNumber,
	'Документация разработчика' DownTitle,
	'DownLink' DownLink -- нижняя ссылка выводится если указан DownTitle,
        2000 AnimateDuration,
        '' Makeup

-- select 2
SELECT 'Название1' panel1, -- код панели
       'Название2' panel2

-- SELECT 3 Dashboard settings
select '' Title, '' Subtitle, '' Makeup

END

• Title - заголовок 
• Tooltip - подсказка к показателю
• Icon - иконка (например, fa fa-cube)
• Number - главный показатель (может быть и текстом)
• AdditionaNumber - дополнительный номер (например, значение за прошлую неделю)
• DownTitle, Downlink - текст и ссылка нижнего блока в показателе
• AnimateDuration - если больше 0, то при выводе будет анимация от 0 до Number за указанное число миллисекунд
• Color - задает цвет счетчика - danger,warning, success и т.д. (если не заданы - то идут цвета по умолчанию).
• Makeup - кастомная разметка для параметра. Если пустая - то используется стандартный показатель. Использует параметры {title}, {tooltip}, {icon}, {number}, {additionalNumber}, {downTitle}, {downLink}, {color}. Пример: 

<div class="col-12 col-md-2">{title}<br>{number}</div>

SELECT 2 возвращает названия панелей (если их надо сделать динамическими).

SELECT 3 задает настройки дашборда: 

• title - подменяет название дашборда
• subtitle - задает описание дашборда
• makeup - позволяет задать кастом разметку, в кооторой можно использовать следующие параметры: 
  • {title} - заменяется на заголовок дашборда.
  • {subtitle} - заменяется на подпись к дашборду
  • {counters} - заменяется за панель счетчиков
  • {panels} - заменяется на структуру панелей дашборда
  • {counter1}, {counter2} и т.д. - заменяется соотвествтующим счетчиком с таким номером
  • {panelABC}, {panelXYZ} - заменяется панелью с соответствующим кодом (ABC, ZYZ в примере).

Процедура GetPanelTable

CREATE PROCEDURE [dbo].[dashboard_forAdmin_panel1_getPanelTable]
	@username nvarchar(128) -- на входе username
AS
BEGIN
      -- На выходе любая таблица с полями (выведется как таблица на панели)
      SELECT isnull(name,'') as name,
             isnull(code,'') as code
      FROM as_trace
      ORDER BY id
END

Процедура GetPanelChart (bar и похожие типы)

CREATE PROCEDURE [dbo].[dashboard_forAdmin_panel2_getPanelChart]
	@username nvarchar(128) -- на входе username
AS
BEGIN
      SELECT 'bar' type, -- определяющий тип при выводе графика
             'График 1' title,
             260 width,
             260 height

      /*На выходе 2 select
        Первый - настройки диаграммы(1 строка)
        Второй - данные для графика*/

      SELECT code Title,
             count(*) Value,
             '' Color
      FROM as_trace
      GROUP BY code
END

Процедура GetPanelChart (для line)

Можно указать несколько графиков на 1 панели.

CREATE PROCEDURE [dbo].[dashboard_forAdmin_panel2_getPanelChart]
	@username nvarchar(128) -- на входе username
AS
BEGIN
      -- на выходе 2 запроса select
      SELECT 'line' type, -- определяющий тип при выводе графика
             'График 1' title,
             260 width,
             260 height,
             '2,35,45,23' CommaLabels -- это метрик по оси абсцисс (ось Х)

      /*На выходе 2 select
        Первый - настройки диаграммы(1 строка)
        Второй - данные для графика*/

      SELECT 'График 1' title,
             '1,4,5,12' Value,
             '' Color -- если цвет не установлен, то будет исользовано случайное значение
      UNION
      SELECT 'График 1' title,
             '12,4,2,48' Value,
             '' Color

END

Примечание

1. можно кешировать результаты панели, для этого укажите значение больше 0 в поле панели Кеширование в минутах.
2. Если необходима дополнительная нетиповая функциональность на дашбордах, это можно сделать через дополнительную разметку в поле панели HTML. 
3. Вы можете указать в сниппете data-hideDigits='1' и data-hidePanels='1' для того, чтобы не выводить Показатели и Панели на странице. 
4. В панели в HTML можно вставлять формы, таблицы и панели-подсказки (flashLabel).
5. У вас есть возможность отключать панели - для этого необходимо установить у панели галку Отключено. 
6. Если панель одна, то она выводится на всю ширину (без разбиения на 2 столбца). 
7. В разметку панелей дашборда можно включать сниппеты других компонентов - т.е. выводить в панелях Таблицы, Формы, Ресурсы, Метрики и т.д.
8. Для таблиц можно изменять вывод ячеек как для таблиц, т.е. использовать префиксы color_, backcolor_, icon_, progressBar_, progressClass_.
9. Нечетко отображаются на больших экранах графики? Необходимо в SQL панели дашборда в SELECT 1 установить достаточно большие значения ширины и высоты
10. Можно добавить JS коллбек после загрузки дашборда в в виде as.dashboard.callbacks.{dashboardCode}_getItems в коде страницы.

$(function(){
     as.dashboard.callback.forAdmin_getItems = function(data){
        console.log('clGet',data)
     }
});

Тип панели progress (прогресс в % по элементам)

Запрос панели возвращает модель из Title, Value (именно в таком порядке).
Value - это число от 0 до 100 (лучше целое). 

Отображается следующим образом: 

Как вывести в дашборде существующую таблицу или форму? 

• Указываем в разметке поля HTML сниппет таблицы. 
• Реализуем таблицу как обычно. 
• Аналогично можно вывести и другие компоненты, например Ресурсы, Чат и т.д.

Документация по таблицам

Документация по формам