Дашборд - это страница с некоторыми показателями и панелями с выводом таблиц, графиков и диаграмм.
Обычно дашборд играет роль рабочего стола пользователя в личном кабинете.
Смотреть пример вывода Дашборда на демостенде
Также посмотрите пошаговое руководство по созданию дашборда
<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
CREATE PROCEDURE [dbo].[dashboard_forAdmin_getCounters]
@username nvarchar(128),
@parameters ExtendedDictionaryParameter readonly -- необязательный параметр, в нем хранится фильтр значение key=filter
AS
BEGIN
-- select 1 4 верхних показателя
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, 'radio' FilterType
-- SELECT 4 Значения для фильтров
select value,text from (
select '' Value, 'День' text, 1 ord
union
select 'week' Value, 'Неделя' text, 2 ord
union
select 'month' Value, 'Месяц' text, 3 ord
union
select 'quarter' Value, 'Квартал' text, 4 ord
union
select 'year' Value, 'Год' text, 5 ord
) t1
order by ord
END
<div class="col-12 col-md-2">{title}<br>{number}</div>
SELECT 2 возвращает названия панелей (если их надо сделать динамическими).
SELECT 3 задает настройки дашборда:
Пример кастом дашборда на демостенде - https://demo.web-automation.ru/list/watch/panel-upravleniya-s-kastom-razmetkoy---89
SELECT 4 возвращает значения фильтра (text,value). Фильтр выводится справа вверху
Данная процедура используется для типов table и apexchart (диаграммы Apex - о них будет сказано ниже).
Для вывода таблицы просто указываем в SELECT 1 данные таблицы (названия столбцов будут отражены в названии колонок выводимой таблицы в панели).
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
CREATE PROCEDURE [dbo].[dashboard_forAdmin_panel2_getPanelChart]
@username nvarchar(128) -- текущий пользователь
@filter nvarchar(128) = '' -- необязательный параметр выбранного фильтра
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
Можно указать несколько графиков на 1 панели.
CREATE PROCEDURE [dbo].[dashboard_forAdmin_panel2_getPanelChart]
@username nvarchar(128) -- текущий пользователь
@filter nvarchar(128)='' -- необязательный параметр выбранного фильтра
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
Примечание
$(function(){
as.dashboard.callback.forAdmin_getItems = function(data){
console.log('clGet',data)
}
});
Прогресс в процентах по элементам. Запрос панели возвращает модель из Title, Value (именно в таком порядке).
Value - это число от 0 до 100 (лучше целое).
Позволяет выводить более продвинутые графики и диаграммы - с интерактивом и улучшенной адаптивностью. Указываем тип панели apexchart
В процедуре getpanelTable выводим JSON настройки в SELECT 1 в параметре apexChartOptions
Пример:
CREATE PROCEDURE [dbo].[dashboard_forAdmin_p1_getPanelTable]
@username nvarchar(128)
AS
BEGIN
select '{
"chart": {
"type": "line"
},
"series": [{
"name": "Выручка",
"data": [30,40,35,50,49,60,70,91,125],
"color": "#afa"
},
{
"name": "Затраты",
"data": [20,10,15,40,29,50,20,15,45],
"color": "#faa"
}],
"xaxis": {
"categories": [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}' apexChartOptions
END
1. Добавляем параметр @parameters ExtendedDictionaryParameter readonly в процедуру GetCounter и извлекаем значение фильтра:
declare @filter nvarchar(128) = ''
select @filter = Value from @parameters where [Key] = 'filter'
2. В SELECT 3 прописываем filterType = radio или select (select по умолчанию)
3. В SELECT 4 прописываем возможные значения фильтра
select value,text from (
select '' Value, 'День' text, 1 ord
union
select 'week' Value, 'Неделя' text, 2 ord
union
select 'month' Value, 'Месяц' text, 3 ord
union
select 'quarter' Value, 'Квартал' text, 4 ord
union
select 'year' Value, 'Год' text, 5 ord
) t1
order by ord
4. В хранимых процедурах для панелей (GetPanelChart и GetPanelTable) передается необязательный параметр @filter (строка).
5. Если планируется использовать внутри компоненты через кастом HTML в панели, то его можно получить через переменную {filter}.
<div class="as-table" data-code="table1" data-itemid="{filter}"></div>
Примечание:
Пример дашборда с фильтром на демостенде