Как создать дашборд в личном кабинете пользователя

1.Переходим в управление Дашбордами через меню "Компоненты". Прописываем роли и название дашборда.

2. Настроим пару счетчиков для нашего дашборда. В хранимке уже есть готовая процедура в качестве заглушки.
Выведем наш дашборд на главной и посмотрим что за что отвечает. Чтобы это сделать прописываем сниппет в настройках страницы.

Код:

select
	'Текущие' Title,
	'Это просто пример' Tooltip,
	'fa fa-users' Icon,
	'15' Number,
	'МОИ СТАВКИ' AdditionalNumber,
	'Ставки' DownTitle,
	'/bids' DownLink

3. Поля в хранимке для получения счетчиков имеют тип nvarchar, чтобы получить необходимые данные (а не тестовые как на скрине выше), используем подзапросы.

Здесь мы используем дашборд уже из готовой системы. На скрине наглядно показано, как использовать подзапросы для получения нужных нам данных.
Главное не забывать приводить подзапрос к строке чтобы не возникло проблем в дальнейшем.

4. Далее разберем панели, начнем с вывода таблиц. Переходим по ссылке панели в настройках нашего дашборда.

5. Есть два способа вывести таблицу на панели: через хранимку в настройках или через поле html. Разберем их по порядку. Настроим тип отображения панели и зададим ее ширину.

Код:

select top 10 id hide_id,
	   header as 'Ошибка',
       convert(nvarchar,created, 120) as 'Дата'
from as_trace
where code='exception'
order by id desc    

6. Теперь мы выведем уже готовую таблицу через поле html. Создадим новую панель, настроим по аналогии с примером выше, и в поле html добавим сниппет готовой таблицы.
Аналогично через сниппет мы можем выводить формы.

Сниппет:

<div class="as-table" data-code="tableForHowTo"></div>

Отображение диаграмм, графиков и прогресс бара

Линейный график

В настройках панелей поставим тип вывода line. Хранимая процедура состоит из двух select. В первом мы прописываем основные настройки отображения графика.

Во втором - какие данные будут отображаться, в примере используются тестовые данные, чтобы отобразить выборку из таблиц используются подзапросы. Для нескольких показателей используем union, во втором select.

Код:

declare @daypay nvarchar(max)
select @daypay = try_cast(day(dateadd(day,-6,getdate())) as nvarchar) + ',' +
	         try_cast(day(dateadd(day,-5,getdate())) as nvarchar) + ',' +
	         try_cast(day(dateadd(day,-4,getdate())) as nvarchar) + ',' +
	         try_cast(day(dateadd(day,-3,getdate())) as nvarchar) + ',' +
	         try_cast(day(dateadd(day,-2,getdate())) as nvarchar) + ',' +
	         try_cast(day(dateadd(day,-1,getdate())) as nvarchar) + ',' +
	         try_cast(day(getdate()) as nvarchar)

select 'line' Type,
	'' Title,
	450 Width,
	450 Height,
	@daypay as CommaLabels

select 'Доходы' Title,
       '12,18,17,14,8,11,13' Value,
       '' Color
union all
select 'Расходы' Title,
       '5,7,4,5,6,5,3' Value,
       '' Color	

Progress bar

Меняем тип в настройках панели. Через union объединяем нужные показатели (см. скрин)

Код:

select 'Тест1' as Title,
	    12 as value,
        1 as ord
union all
select 'Тест2' as Title,
	    34 as value,
        2 as ord
union all
select 'Тест3' as Title,
	    67 as value,
        4 as ord
union all
select 'Тест4' as Title,
	    100 as value,
        3 as ord
order by ord

Диаграммы bar

Настраиваются аналогично line, но в настройках панели нужно указать тип bar. В самой процедуре имеется подтип, вид нашего графика (bar, pie, doughnut, polarArea)

Код:

select 'bar' Type,
		'По активности закупок' Title,
        450 Width,
        450 Height

select 'ДонМебель' Title,
	   12 Value,
       '' Color
union
select 'Nesstle' Title, 10 Value, '' Color
union
select 'Эльдорадо' Title, 18 Value, '' Color
union
select 'Роснефть' Title, 24 Value, '' Color
union
select 'МеталРус' Title, 20 Value, '' Color
union
select 'Икеа' Title, 28 Value, '' Color

Более подробная информация по настройке и отображению дашборда находится в статье по ссылке Работа с дашбордами.