Вывод данных в виде графа на сайте

Компонент основан на базе Javascript Infovit Toolkit и входит в состав компонента Таблица (как режим отображения).

Пример работы компонента на демостенде - https://demo.web-automation.ru/list/watch/vizualizaciya-dannykh-v-vide-grafa---62

Как настроить вывод графа

В SELECT 1 таблицы прописываем узлы графа 

    -- SELECT 1
    select 'node1' id, 'node1' name,
	union
    select 'node2' id, 'node2' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node3' id, 'node3' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node4' id, 'node4' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node5' id, 'node5' name, '#f00' color, 'circle' type, 3 dim
  • id - идентификатор узла (будет использоваться в SELECT4)
  • name - наименование, которое выводится на графе
  • color - цвет надписи
  • type - фигура (circle, triangle, square)
  • dim - размер фигуры
  • tip - если указан, то будет выведено в подсказке при наведении на узел (если не задан коллбек обработки подсказки)

В SELECT 3 прописываем viewType, graphOptions 

-- SELECT 3
select 'graph' viewType,
    	'{
           "contHeight": "1000px"
        }' graphOptions

В GraphOptions можно передать JS настройки компонента $jit.ForceDirected (за исключением функций). 

По умолчанию там такие настройки: https://pastebin.com/zdM8U6qn (если заменяется какой-либо узел (Navigation,Node, Edge, Label), то надо прописать все его настройки - ваши настройки полность перезатирают настройки по умолчанию). 

В SELECT 4 прописываем связи между узлами: 

    select 'node1' nodeFrom, 'node2' nodeTo, '#00f' color
    union
    select 'node2' nodeFrom, 'node3' nodeTo, '#0ff' color
    union
    select 'node3' nodeFrom, 'node2' nodeTo, '#0f0' color
  • nodeFrom, nodeTo - откуда и куда идет ребро графа (id из SELECT1) 
  • color - цвет связи

Примечание: 

1. Не используем paging (т.е. выводим все данные сразу). Учитывайте объем данных - не выводится слишком много узлов (ограничивайте выборку в SELECT 1), иначе это приведет к длительной обработке данных на браузере. 

2. Документация по настройках JS компонента - https://philogb.github.io/jit/static/v20/Docs/files/Core/Core-js.html

3. Вариант вывода структуры БД - https://pastebin.com/0uKZ30Mt

4. Ограничение. Компонент нестабильно работает в диалоговом окне (после скроллинга окна не работает перетаскивание узлов и подсказки)

Обработка клика на узле графа

Для этого необходимо создать JS коллбек вида as.crud2callbacks[tableCode + "_clickGraphNode"], например: https://pastebin.com/cJgQejhF

Если коллбека нет, то система ищет div с id = as-visGraphNodePanel и вставляет в него название элемента и его связи. 

Вывод подсказки при наведении

Если есть коллбек вида as.crud2callbacks[tableCode + "_showGraphTip"], то работает он. Если его нет, то выводится подсказка с названием элемента и полем tip у узла (если он есть). 

Пример коллбека: https://pastebin.com/Dsgw8MM6

Falcon Space - функциальная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space
Веб-платформа для создания личных кабинетов

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Веб-приложения на MS SQL. Партнерская программа для разработчиков и веб-студий

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space, используя только SQL и HTML.
Смотреть примеры с кодом SQL
Документация по платформе
Работа на MS SQL Server

Google поиск по нашей документации