Falcon Space. Работа с дашбордами
Смотреть пример вывода Дашборда
Также посмотрите пошаговое руководство по созданию дашборда
Управление дашбордами
Панели с графиками и таблицами располагаются в сворачиваемых контейнеах под 4 виджетами чисел.
Чтобы создать дашборд, необходимо сделать следующее:
<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
Примечание
- можно кешировать результаты панели, для этого укажите значение больше 0 в поле панели Кеширование в минутах.
- Если необходима дополнительная нетиповая функциональность на дашбордах, это можно сделать через дополнительную разметку в поле панели HTML.
- Вы можете указать в сниппете data-hideDigits='1' и data-hidePanels='1' для того, чтобы не выводить Показатели и Панели на странице.
- В панели в HTML можно вставлять формы, таблицы и панели-подсказки (flashLabel).
- У вас есть возможность отключать панели - для этого необходимо установить у панели галку Отключено.
- Если панель одна, то она выводится на всю ширину (без разбиения на 2 столбца).
- В разметку панелей дашборда можно включать сниппеты других компонентов - т.е. выводить в панелях Таблицы, Формы, Ресурсы, Метрики и т.д.
- Для таблиц можно изменять вывод ячеек как для таблиц, т.е. использовать префиксы color_, backcolor_, icon_, progressBar_, progressClass_.
- Нечетко отображаются на больших экранах графики? Необходимо в SQL панели дашборда в SELECT 1 установить достаточно большие значения ширины и высоты
- Можно добавить 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 сниппет таблицы.
- Реализуем таблицу как обычно.
- Аналогично можно вывести и другие компоненты, например Ресурсы, Чат и т.д.
Примеры работы компонентов платформы Falcon Space
Примеры удобных таблиц и форм Примеры дашборда Примеры графиков и диаграмм Пример календаря Таблица с данными по API Пример вывода карты с точками Виды полей форм Пример виджета статистики Пример дерева иерархии Пример компонента Временная линия Пример карточки товаров Пример учета загрузки ресурса Пример Канбан доски Пример мастер формы Пример выгрузки документов Excel/Word Пример заполнения данных по ИНН- Руководства
- Основа Falcon Space
- Основные компоненты Falcon Space. Работа с таблицами Falcon Space. Работа с формами Falcon Space. Работа с дашбордами Falcon Space. Работа с ресурсами Falcon Space. Работа со статусами Falcon Space. Бизнес-процессы Falcon Space. Генерация документов Docx и Xlsx Falcon Space. Работа с деревьями (иерархия) Работа с HTML блоками Внешние действия (уведомления, пуш, email, вызов API) Диаграммы и графики Интерактивное дерево Диаграмма Ганта Доска Канбан Диаграмма Chartbar Карта с маркерами Карточки Полоски прогресса Временная линия (timeline) Календарь
- Возможности Falcon Space
- Подсистемы
- Дополнительные компоненты
- Интеграции
- HOWTO
- HOWTO Таблицы
- HOWTO Формы
- HOWTO JS
- HOWTO CSS
- HOWTO Верстка
- Решение проблем
Платформа Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки
Это быстрое внесение изменений
по ходу эксплуатации программы
Это современный интерфейс
полная адаптация под мобильные устройства
Бесплатное обучение разработке на Falcon Space
