Создание простого дашборда

Работа с SQL-подобными запросами

Чтобы узнать как работать с SQL-подобными запросами обратитесь к предыдущему примеру

ЭверГИС позволяет создавать различные диаграммы. В этом примере мы разберем процесс создания круговой диаграммы на основе информации о застройке Нижнего Новогорода. Мы создадим саму диаграмму, а также легенду к ней.

Исходные данные

Слой с исходными данными

Дашборд создается на основе слоя, созданного при помощи SQL-подобных запросов в примере работы с SQL. Готовые данные размещены по ссылке

После работы в предыдущем примере, наш набор данных имеет сразу несколько столбцов с полезной информацией. В слое есть информация о районах, а также два столбца с функциональными зонами и подробными категориями зданий. Для анализа категорий зданий на уровне внутригородских районов можно сделать запрос на выборку в SQL-подобных запросах. Также можно построить графики при помощи инструментов разработчика. Но есть и третий путь — создание дашборда при помощи конфигурации карты.

Сначала создадим простой дашборд, который будет включать в себя круговую диаграмму с подписями категорий. Для создания простого дашборда перейдем в конфигурацию проекта. Для этого нужно перейти в инструменты разработчика в главном меню. Далее нужно выбрать карту среди ресурсов инструментов разработчика.

Конфигурация карты

Мы видим, что конфигурация содержит записи в формате JSON. С помощью неё можно манипулировать данными на карте. Например, в блоке layers указаны все слои, а также их видимость. Меняя параметр isVisible можно включать/отключать видимость слоев. При создании дашбордов нам потребуется изменять элементы filters и children внутри блока, начинающегося с id видимой страницы. Так как объектов children в конфигурации много можно отметить, что нужный нам находится под блоком layers.

Место для дашборда

Создание вспомогательного слоя

Создание слоя

Слой может быть создан не только при помощи API. Его можно создать вручную при помощи создания Пустого слоя из главного меню. Такой способ создания рассмотрен в примере работы с инструментами разработчика

В нашем простом дашборде будет информация о количестве зданий в разрезе категорий функциональных зон в целом по городу. Для создания дашборда нам потребуется создать таблицу, которая бы хранила все необходимые нам данные в агрегированном виде. Создать слой можно несколькими способами. Самым удобным является создание слоя при помощи Инструментов разработчика. Откроем их из главного меню и создадим файл по нажатию на соответствующее поле в контекстном меню карты. Далее нам потребуется написать код для создания слоя без геометрии. Для этого надо создать класс, который бы наследовал базовую модель слоя. Этот класс должен содержать описание для всех создаваемых атрибутов: его название, тип данных, а также описание. Дашборду будет требоваться информация о количестве зданий, типе функциональной зоны, а также о цвете, соответствующем функциональной зоне на диаграмме. Код класса на языке Python, который бы описывал данную схему, выглядит следующим образом:

Показать Python скрипт 

class LayerEQLS(BaseModel):
    gid: int = Field(..., description="gid")
    func_zone: str = Field(..., description="func_zone")
    count: int = Field(..., description="count")
    color: str = Field(..., description="color")

Создание слоя при помощи API осуществляется функцией create_layer_from_schema. Она принимает в себя объект клиента, схему (мы создали её в предыдущем классе), системное имя слоя, название слоя. После написания класса и функции код будет выглядеть следующим образом:

Показать Python скрипт 

from pydantic import BaseModel, Field
from evergis_api import Client
from evergis_tools import create_layer_from_schema

class LayerEQLS(BaseModel):
gid: int = Field(…, description=“gid”)
func_zone: str = Field(…, description=“func_zone”)
count: int = Field(…, description=“count”)
color: str = Field(…, description=“color”)


client = Client() # создание объекта клиента
username = client.account.get_user_info().username # имя пользователя, который запускает код
layer_name = f”{username}.nn_agregated2” # Задание имени пользователя и системного имени слоя
create_layer_from_schema(
client=client,
schema=LayerEQLS,
layer_name=layer_name,
layer_alias=“Агрегированные данные НН”, # имя слоя, которое будет видно в каталоге
overwrite=True, # возможность перезаписи данных в слое
log=True # логирование в случае возникновения ошибок создания слоя
)
print(“Слой создан”)

Добавление данных в слой

Далее добавим данные при помощи редактирования SQL-подобных запросов. Если вы не знаете количество уникальных категорий для своих данных используйте запрос на выборку (SELECT). И используйте стандартное выражение SELECT DISCTINCT(название столбца) FROM системное имя источника данных. Мы уже знаем, что в слое Здания Нижнего Новгорода пять классов, и уже знаем цветовую палитру для каждой из категорий. В связи с этим мы сразу можем переходить к этапу заполнения данных. Добавим созданный источник данных на карту и перейдем в настройки EQL. Их можно открыть из контекстного меню источника данных.

SQL-запрос должен включать в себя нескольких действий: в первую очередь мы создаем два массива, в которых прописываем категории застройки и соответствующие им цвета:

Показать SQL запрос 

WITH funczones AS ( 
    SELECT
        unnest(ARRAY['Зона высокоэтажной застройки', 'Зона малоэтажной застройки', 'Зона среднеэтажной застройки', 'Общественно-деловая зона', 'Производственная зона']) AS func_zone,
        unnest(ARRAY['#FF0000', '#FFFF00', '#FF8C00', '#BA55D3', '#A0522D']) AS color 
        )

Также мы создаем уникальный идентификатор. В ЭверГИС есть стандартное название для уникальных идентификаторов — gid. Создадим столько значений идентификатора, сколько есть строк в созданном нами массиве:

Показать SQL запрос 

row_number() OVER() AS gid,
COALESCE(count(a.gid), 0) AS count

Сделаем LEFT JOIN для данных из слоя Здания Нижнего Новгорода по столбцу func_zone. Этот столбец соответствует категориям зданий, которые мы указали в созданном массиве на первом этапе. И в конце мы сгруппируем значения по цвету и функциональной зоне:

Показать SQL запрос 

SELECT
    row_number() OVER() AS gid,
    COALESCE(count(a.gid), 0) AS count,
    b.func_zone as func_zone,
    b.color
FROM funczones AS b
LEFT JOIN eromakh.nn_all_buildings AS a ON
    a.func_zone = b.func_zone
GROUP BY b.color, b.func_zone

В итоге запрос будет автоматически обновлять данные в источнике данных Агрегированные данные НН по данным из слоя Здания Нижнего Новгорода. Также мы сможем видеть эти значения в таблице атрибутов источника данных Агрегированные данные НН. Для сохранения данных в источнике данных сохраним изменения. Итоговый запрос будет выглядеть следующим образом:

Показать SQL запрос 

WITH funczones AS ( 
    SELECT
        unnest(ARRAY['Зона высокоэтажной застройки', 'Зона малоэтажной застройки', 'Зона среднеэтажной застройки', 'Общественно-деловая зона', 'Производственная зона']) AS func_zone,
        unnest(ARRAY['#FF0000', '#FFFF00', '#FF8C00', '#BA55D3', '#A0522D']) AS color 
        )
SELECT
    row_number() OVER() AS gid,
    COALESCE(count(a.gid), 0) AS count,
    b.func_zone as func_zone,
    b.color
FROM funczones AS b
LEFT JOIN eromakh.nn_all_buildings AS a ON
    a.func_zone = b.func_zone
GROUP BY b.color, b.func_zone

Еще раз отметим важную особенность этого запроса. Мы запускали его не из главного меню карты, после чего сохраняли слой. Мы сначала создали источник данных со всеми необходимыми полями и после этого открыли связанный с ним SQL-подобный запрос через его контекстное меню. Такой способ задания данных помогает автоматически добавлять информацию в источнике данных в зависимости от слоя, из которого эти данные берутся.

Динамическое обновление

Создание объекта дашборда в конфигурации карты

После создания таблицы с данными приступим к созданию самого дашборда. Это можно сделать при помощи редактирования конфигурации карты. Внутри конфигурации переместимся к объекту children внутри объекта страницы. Этот объект будет вмещать в себя дашборд и его составляющие. Всего у простого дашборда пять элементов, первые четыре из которых являются объектом:

  1. Идентификатор (id)
  2. Настройки стиля (style)
    • Отступы (margin)
  3. Параметры дашборда
    • Объединение диаграммы и легенды
  4. Объекты диаграммы (children)
    • Тело диаграммы
    • Иконка диаграммы
    • Заголовок
    • Легенда
  5. Название шаблона объекта (templateName)

Не все эти параметры являются обязательными: мы можем не настраивать стиль дашборда и его параметры, можем не указывать объект иконки, заголовок и даже легенду. Строго говоря, обязательными являются только идентификаторы и сама диаграмма. Но в таком случае дашборд будет плохо читаться и пользователю будет сложно разобраться, какие категории соответствуют какому цвету.

Создадим скелет дашборда. В объекте children, находящимся внутри объекта страницы запишем следующие строки:

Показать код конфигурации 

{
    "id": func_zone,
    "style": {
        "marginBottom": 8
    },
    "options": {
        "twoColumns": true
    },
    "children": [],
    "templateName": "Chart"
}

В первую очередь увеличим рабочую область с конфигурацией за счет списка ресурсов инструментов разработчика. Для того, чтобы скрыть список ресурсов нужно нажать на кнопку рядом с кнопкой закрытия инструментов разработчика в правом верхнем углу рабочего окна. После того, как мы ввели в конфигурацию вышенаписанный код, на карте возникнет пустой прямоугольник с прочерком. В этом месте в дальнейшем появится наша диаграмма.

Начало создания простого дашборда

Рассмотрим что делает каждый параметр. Идентификатор является названием данной диаграммы и может использоваться в других действиях, связанных с ней. Например, диаграмма может являться фильтром. Мы рассмотрим фильтрацию при помощи диаграммы в конце этого примера. Отступ снизу (marginBottom) в данном примере не играет большой роли, так как названия полей в легенде недостаточно большие, чтобы полностью заполнить поле. Однако, если в вашей диаграмме названия категорий имеют очень длинные названия вы можете добавить дополнительное пространство при помощи этого параметра, увеличив поле под диаграмму снизу. Параметр twoColumns ответственен за объединение диаграммы и легенды в один блок. Если установить для этого параметра значение false, или не прописать этот параметр вообще, то легенда будет располагаться в отдельном поле под диаграммой. Объекты в массиве children пустые, в них будут записаны объекты, связанные с диаграммой. templateName ответственен за шаблон объекта в конфигурации. В случае с диаграммой это Chart, но может быть и другой вариант — инструмент (Task). В последующих примерах мы разберем создание инструмента.

Создание объекта диаграммы

Далее разберем саму диаграмму. Объект в конфигурации для создания простой круговой диаграммы выглядит следующим образом:

Показать код конфигурации 

{
    "id": "chart",
    "type": "chart",
    "style": {},
    "options": {
      "limit": 5,
      "height": 100,
      "radius": 0.7,
      "padding": 1,
      "chartType": "pie",
      "showTotal": true,
      "otherItems": 100,
      "shownItems": 5,
      "cornerRadius": 1,
      "orderByValue": false,
      "relatedDataSources": [
        {
          "hideAxis": true,
          "axisColor": "#CB94E5",
          "chartAxis": "y",
          "attributeName": "count",
          "attributeColor": "color",
          "attributeTitle": "func_zone",
          "dataSourceName": "Агрегированные данные НН"
        }
      ]
    }
}

В этой конфигурации есть несколько важных параметров:

  1. chartType — тип диаграммы, для создания круговой диаграммы установлен тип pie, для создания линейной диаграммы можно установить значение line
  2. showTotal — отвечает за отображение числовой информации в центре диаграммы
  3. relatedDataSources — в этом объекте находится информация об источнике данных, на основе которого создана диаграмма
    1. attributeName — атрибут, из которого берутся числовые данные
    2. attributeColor — название атрибута, который отвечает за цвет каждой категории в диаграмме, именно поэтому мы задавали его при создании источника данных для диаграммы
    3. attributeTitle — атрибут, из которого берутся категориальные данные для диаграммы
    4. dataSourceName — название источника данных. Важный нюанс: это не системное имя, и не имя ресурса в каталоге. Название источника данных вы можете найти в конфигурации карты в параметре name внутри объекта dataSources объекта страницы (в данном примере это page 1). Будьте внимательны и не перепутайте название в списке ресурсов с системным именем или с названием в каталоге

После того, как мы добавим этот код в блок children объекта дашборда и обновим страницу в браузере, мы увидим диаграмму. Справа от диаграммы видно пустое пространство. Так как в параметре twoColumns дашборда мы указали значение true система ожидает, что справа от диаграммы будет легенда. Мы пока что не прописали легенду в конфигурации, из-за чего там видно пустое место. В центре диаграммы мы видим число — это количество всех объектов, удовлетворяющих условиям фильтров диаграммы. Так как параметр фильтрации в диаграмме на данном этапе не задан, а параметр showTotal имеет значение true мы видим сумму всех значений в поле count из источника данных, по которому строится диаграмма. В данном примере в центре указано общее количество зданий для Нижнего Новгорода, и оно равно 61 500. При наведении курсора на элементы диаграммы вы можете увидеть подпись категории, а также количественное значение, ассоциированное с этой категорией. Например, в данном случае мы видим, что в Нижнем Новгороде 6642 здания относятся к категории Зона высокоэтажной застройки.

Диаграмма 1

Создание объекта легенды

Следующим шагом добавим на дашборд легенду. Объект легенды вставляется под объектом диаграммы в блоке children дашборда. Код для объекта легенды:

Показать код конфигурации 

{
 "id": "legend",
 "type": "legend",
 "options": {
   "chartId": "chart"
 }
}

У легенды есть один важный параметр: chartId. вы должны указать идентификатор нужного вам объекта диаграммы. Это может быть очень важно в случае, если у вас несколько диаграмм в дашборде. Идентификатор диаграммы — первый параметр в объекте диаграммы (id). После добавления объекта легенды в конфигурацию не забудьте сохранить изменения и обновите страницу. После этого на месте пустого поля справа от диаграммы появится легенда:

Легенда диаграммы

Создание объекта названия дашборда

Следующим шагом добавим название дашборда. Порядок, в котором могут идти элементы дашборда на данном этапе не важен. вы можете вставить его до или после объекта легенды. Это не повлияет на его отображение. Код объекта названия:

Показать код конфигурации 

{
 "id": "title",
 "type": "text",
 "value": "Распределение зданий по функциональным зонам"
}

У названия дашборда идентификатор имеет значение title, а в параметр value вам нужно вписать текст, который будет отображаться на экране. Если текст большой и не вмещается в поле дашборда по ширине, он автоматически будет переноситься на новую строку.

Название диаграммы

Создание объекта иконки дашборда

Последним шагом добавим иконку в названии дашборда. Для иконки поддерживается векторный формат SVG. Для того, чтобы использовать иконку вам нужно предварительно загрузить её в каталог. Для этого откройте каталог в главном меню, в нем перейдите в папку, в которой вы хотите сохранить SVG файл. Нажмите на кнопку Добавить и выберите Загрузить файл. Данное действие не является операцией импорта, поэтому оно осуществляется не через импорт из главного меню, а через загрузку файла в каталоге.

Загрузка SVG файла

После того, как вы загрузите файл добавьте его в инструменты разработчика. Для использования SVG файла в качестве иконки нам нужен его уникальный идентификатор. В инструментах разработчика нажмите на Добавить ссылку в контекстном меню карты. Выберите SVG файл в каталоге и добавьте его в список ресурсов.

Link SVG картинки

После добавления картинки нажмите на её контекстное меню и выберите Копировать ID ресурса. В буфере обмена у Вас будет уникальный идентификатор ресурса, который далее можно использовать в конфигурации карты.

ID SVG картинки

После загрузки SVG-изображения мы можем создать объект иконки. Код объекта:

Показать код конфигурации 

{
 "id": "titleIcon",
 "type": "svg",
 "value": "51979ff30cdf4d5faa77f23f43b0888a",
 "options": {
   "width": 35,
   "height": 35,
   "fontColor": "#000000"
 }
}

Объект имеет идентификатор titleIcon, тип svg, а также параметр value, в который надо вписать ID ресурса картинки, которую вы хотите использовать в качестве иконки. Обратите внимание, что значение параметра value зависит от идентификатора ресурса, который вы загрузили. Также у иконки есть несколько параметров:

  1. width — ширина картинки в пикселях
  2. height — высота картинки в пикселях
  3. fontColor — фоновый цвет картинки. Этот параметр важен, если у картинки есть полигоны с пустотами. Эти пустоты будут закрашены в фоновый цвет

Конфигурация простого дашборда

После создания объекта иконки в конфигурации дашборд примет свой окончательный вид:

Иконка дашборда

Итоговый код простого дашборда находится под спойлером.

Показать код конфигурации 

{
"id": "func_zone",
"style": {
  "marginBottom": 8
},
"options": {
  "twoColumns": true
},
"children": [
  {
    "id": "chart",
    "type": "chart",
    "style": {},
    "options": {
      "limit": 5,
      "height": 100,
      "radius": 0.7,
      "padding": 1,
      "chartType": "pie",
      "showTotal": true,
      "otherItems": 100,
      "shownItems": 5,
      "cornerRadius": 1,
      "orderByValue": false,
      "relatedDataSources": [
        {
          "hideAxis": true,
          "axisColor": "#CB94E5",
          "chartAxis": "y",
          "attributeName": "count",
          "attributeColor": "color",
          "attributeTitle": "func_zone",
          "dataSourceName": "Агрегированные данные НН"
        }
      ]
    }
  },
  {
    "id": "legend",
    "type": "legend",
    "options": {
      "chartId": "chart"
    }
  },
  {
    "id": "title",
    "type": "text",
    "value": "Распределение зданий по функциональным зонам"
  },
  {
    "id": "titleIcon",
    "type": "svg",
    "value": "51979ff30cdf4d5faa77f23f43b0888a",
    "options": {
      "width": 35,
      "height": 35,
      "fontColor": "#000000"
    }
  }
],
"templateName": "Chart"
}

После создания простого дашборда с диаграммой мы можем добавить фильтры, позволяющие динамически изменять диаграмму и даже использовать её саму в качестве фильтра. Расширение функциональности дашборда описано в следующем примере.

Обратные ссылки