Создание фильтров для дашборда

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

Данный пример создан на основе итогового слоя из примера работы с SQL-подобными запросами и примера создания простого дашборда. Обратитесь к ним, если не уверены как подготовить исходные данные и конфигурацию карты для создания простой диаграммы

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

Создание источника данных

Не забудьте создать и сохранить карту!

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

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

  1. name — идентификатор ресурса
  2. limit — максимальное количество уникальных объектов, которые могут быть показаны в фильтре (в случае превышения этого числа все остальные окажутся в категории Другое)
  3. query — SQL запрос, который создает список из уникальных названий

В случае со слоем Здания Нижнего Новгорода информация о районе, в котором расположен дом, находится в столбце district. Соответственно, SQL запрос, создающий список из уникальных значений будет выглядеть так: SELECT DISTINCT(district) AS district FROM eromakh.nn_all_buildings ORDER BY district. А весь объект целиком будет выглядеть так:

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

{
   "name": "nn_districts",
   "limit": 100,
   "query": "SELECT DISTINCT(district) AS district FROM eromakh.nn_all_buildings ORDER BY district"
}

Ограничение в 100 объектов в данном случае не играет роли, так как в Нижнем Новгороде всего 8 районов. После того, как мы добавим этот объект в список ресурсов он отобразиться среди источников данных:

Источник данных для списка районов

Создание объекта фильтра

Объекты фильтров

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

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

  1. name — идентификатор в конфигурации
  2. valueType — фильтр будет выбирать одно значение или несколько
  3. attributeMax — максимальное значение
  4. attributeMin — минимальное значение
  5. defaultValue — значение по умолчанию
  6. attributeAlias — псевдоним фильтруемого атрибута
  7. attributeValue — имя фильтруемого атрибута
  8. relatedDataSource — ресурс из списка ресурсов в конфигурации, из которого берутся значения для фильтра

Зададим название фильтра, назовем его districts. Это название далее будет использоваться в параметрах фильтрации слоя. Так как мы создаем выпадающий список, и район — это один объект, то в поле valueType укажем значение single. В следующем разделе мы создадим фильтр при помощи диаграммы, и там возникнет другая ситуация, мы сможем фильтровать сразу по множеству значений, поэтому в конфигурации мы выберем array. Так как фильтр у нас имеет категориальные значения, а не числовые, мы оставим параметры attributeMax, attributeMin и defaultValue пустыми. В созданном нами при помощи SQL запроса источнике данных атрибут, хранящий информацию о районах, имеет название district и не имеет псевдонима. Поэтому для параметров attributeAlias и attributeValue мы укажем значение district. Источник данных в конфигурации называется nn_districts, мы укажем это значение для параметра relatedDataSource. В итоге объект фильтра будет выглядеть следующим образом:

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

{
   "name": "districts",
   "valueType": "single",
   "attributeMax": "",
   "attributeMin": "",
   "defaultValue": "",
   "attributeAlias": "district",
   "attributeValue": "district",
   "relatedDataSource": "nn_districts"
}

Фильтр слоя

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

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

Фильтр в странице

Создание выпадающего списка

Выпадающий список

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

Видимый на экране фильтр, так же как и дашборд, имеет несколько параметров:

  1. id (идентификатор объекта)
  2. options (параметры видимого элемента на карте)
    1. bgColor (цвет фона)
    2. expanded (состояние объекта на карте. Если установлено значение false, то фильтр по умолчанию будет в свернутом виде, если true, то он будет развернут. Это может быть важно в случае большого фильтра, в котором может быть несколько полей фильтрации. Оставлять его всегда развернутым может быть нецелесообразно — он будет занимать очень много места на карте)
    3. expandable (возможность раскрывать фильтр)
  3. Объекты фильтра (children):
    1. Иконка (“id”: titleIcon)
    2. Название (“id”: “title”)
    3. Способ представления данных (id зависит от названия фильтра в объекте filters, который мы создали на предыдущем этапе. В случае этого примере id: districts)
  4. templateName (значение шаблона, для фильров это Filters)

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

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

{
   "id": "filters",
   "options": {
     "bgColor": "transparent",
     "expanded": false,
     "expandable": true
   },
   "children": [],
   "templateName": "Filters"
}

Мы видим, что под диаграммой возникло пустое белое поле. Это заготовка визуального представления нашего фильтра.

Заготовка фильтра

Создание объекта заголовка фильтра

Теперь нужно добавить внутреннее наполнение визуального представления. Для этого добавим элементы в блок children. В отличие от диаграммы, мы не можем сначала создать визуальное представление списка и только потом задать иконку и название. Первым объектом будет название фильтра. Оно имеет четыре параметра:

  1. id — идентификатор объекта, для названия он стандартный (title)
  2. type — тип данных в названии. Для фильтра мы используем текстовые значения (text)
  3. style — параметры стиля текста. Можем задать размер шрифта при помощи параметра fontSize
  4. value — текст, который будет отображаться в дашборде

Код, задающий название фильтру, будет выглядеть так:

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

{
    "id": "title",
    "type": "text",
    "style": {
      "fontSize": 18
    },
    "value": "Фильтр по районам"
}

После того, как мы добавим этот фрагмент в блок children нашего объекта фильтра, мы увидим изменения на карте. В белом блоке появилось название из параметра value, а также кнопка раскрытия фильтра. Сейчас на нее нажимать смысла нет, так как у нас нет наполнения этого элемента.

Название фильтра

Создание иконки фильтра

Следующим шагом создадим иконку фильтра. В отличие от диаграммы для фильтров есть стандратные значения для параметров иконок. У них есть четыре параметра, которые совпадают с параметрами иконок для диаграмм:

  1. id — идентификатор иконки. Для фильтров можно использовать стандартное значение titleIcon. вы можете загрузить свою картинку и повторить действия с иконками для диаграммы. В таком случае конфигурация объекта иконки будет абсолютно аналогична иконке диаграммы
  2. type — тип иконки, в случае использования значения по умолчанию укажем icon
  3. value — значение типа объекта. В случае фильтра это filter
  4. options — параметры визуального оформления
    1. width — ширина в пикселях
    2. height — высота в пикселях. Если используется иконка по умолчанию, то можно не указывать значение высоты, так как стандартная иконка квадратная
    3. fontColor — цвет заливки

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

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

{
    "id": "titleIcon",
    "type": "icon",
    "value": "filter",
    "options": {
    "width": 24,
    "fontColor": "#00AAFF"
    }
}

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

Иконка фильтра

Создание выпадающего списка

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

  1. id — идентификатор объекта. Для корректной работы фильтра мы зададим ему такое же имя, как и для объекта фильтра (districts)
  2. type — способ фильтрации. В данном случае мы фильтруем по категориальным данным, поэтому мы создадим выпадающий список
  3. options
    1. width — ширина объекта в пикселях
    2. filterName — название фильтра. Укажем такое же значение, как и для названия фильтра у объекта фильтра (districts)
    3. placeholder — надпись значения по умолчанию, при выборе этой опции фильтр применяться не будет. Относительно этого примера при выборе этого значения мы на диаграмме будем видеть значения для всего города (такие же, как и у простого дашборда), поэтому присвоим этому параметру значение Нижний Новгород

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

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

{
 "id": "districts",
 "type": "dropdown",
 "options": {
   "width": 275,
   "filterName": "districts",
   "placeholder": "Нижний Новгород"
 }
}

Теперь мы видим полноценный объект фильтра в дашборде. Если раскрыть список, то мы увидим все значения районов. Самый верхний элемент списка (Нижний Новгород) — значение параметра placeholder, выбирая его мы получим значения диаграммы аналогичные простому дашборду. На данном этапе мы можем выбрать любые значения в списке и диаграмма никак не измениться. Все дело в том, что она создается по источнику данных, который никак не обновляется при выборе значения из списка.

Выпадающий список

Обновление источника данных

Для того, чтобы диаграмма обновлялась в зависимости от значений в выпадающем списке нам нужно изменить SQL-подобный запрос, при помощи которого создавался источник данных для диаграммы. В этом примере это источник Агрегированные данные НН. Сначала нам нужно задать параметр для этого источника данных, который мы сможем использовать в запросе. Перейдем в объект dataSources страницы с дашбордом и для источника Агрегированные данные НН добавим новое значение параметра:

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

"parameters": {
  "@district": "%districts"
}

Установка параметра для источника данных

Теперь мы можем в SQL подобном запросе вызвать параметр district, который связан с фильтром с идентификатором districts. Он в свою очередь связан с визуальным представлением фильтра district, в котором находится объект выпадающего списка. Выбирая к нём объект, мы передаем этот параметр в SQL-подобный запрос. Для того, чтобы измененный параметр мог влиять на источник данных (Агрегированные данные НН) нам нужно обновить SQL-подобный запрос, при помощи которого он был создан. Для работы с этим пользовательским параметром был создан особый оператор isset. Он проверяет, установлено ли значение параметра внешним ресурсом (в данном случае — фильтром). Добавим условие WHERE в SQL-подобный запрос источника Агрегированные данные НН. Для этого откроем контекстное меню этого источника данных и выберем в нем EQL.

Добавим следующее условие к этому запросу:

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

WHERE TRUE
    ${isset:@district, { and a.district = @district }}

Как вы видите оператор WHERE имеет дополнительный параметр TRUE. Это сделано специально на случай, если внешний ресурс не передал никакого значения. Если бы этого значения не было, то возникла бы ошибка, так как isset был бы пустым. вы можете заменить TRUE на другое выражение, которое всегда было бы истинным, например 1 = 1. Добавив это выражение, мы изменили условие создания данных в запросе. Теперь, если в фильтре выбрано значение района, то данные будут сгруппированы и рассчитаны для конкретного района, а не для всего города. Полный SQL-подобный запрос будет выглядеть так:

Показать 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
WHERE TRUE
    ${isset:@district, { and a.district = @district }}
GROUP BY b.color, b.func_zone

Теперь при выборе района мы видим, что значения в диаграмме пересчитываются. Выбрав Нижегородский район, мы видим, что в нем 7283 здания и большинство из них относится к общественно-деловой зоне.

Фильтр для диаграммы

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

Применение выпадающего списка к слою

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

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

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

"parameters": {
  "@district": "%districts"
}

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

Фильтр по слою из списка

Фильтрация слоя при помощи диаграммы

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

  1. name — идентификатор в конфигурации
  2. valueType — фильтр будет выбирать одно значение или несколько
  3. attributeMax — максимальное значение
  4. attributeMin — минимальное значение
  5. defaultValue — значение по умолчанию
  6. attributeAlias — псевдоним фильтруемого атрибута
  7. attributeValue — имя фильтруемого атрибута
  8. relatedDataSource — ресурс из списка ресурсов в конфигурации, из которого берутся значения для фильтра

В данном случае мы также делаем категориальный фильтр. Однако он будет принимать множество значений, поэтому в отличие от фильтра диаграммы в параметре valueType мы установим значение array.

Выбор значений

Установив значение array в поле valueType мы сможем выбирать несколько категорий в диаграмме. Для того, чтобы выбрать категорию, нужно нажать на неё на диаграмме или в легенде диаграммы

Далее нам нужно связать группируемые категории в диаграмме и поле из слоя, который мы будем фильтровать. В обоих случаях этот атрибут называется func_zone. Источником данных будет таблица Агрегированные данные НН. Ещё раз напоминаем, что названия источника данных берется не из системного имени, и не из каталога, а из блока dataSources конфигурации. Технически мы могли бы создать отдельный источник данных, подобно тому, что мы сделали для выпадающего списка. В нем мы могли бы перечислить все фильтруемые категории. Это можно сделать при помощи запроса SELECT DISTINCT() FROM, подобно тому, как мы создали список nn_districts. Однако в данном случае этого можно не делать, так как мы уже создали список уникальных названий категорий в источнике данных Агрегированные данные НН. Они доступны в нем по атрибуту func_zone, который мы впишем в attributeAlias и attributeValue. Итоговая конфигурация объекта фильтра будет такой:

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

{
   "name": "func_zones",
   "valueType": "array",
   "attributeMax": "",
   "attributeMin": "",
   "defaultValue": "",
   "attributeAlias": "func_zone",
   "attributeValue": "func_zone",
   "relatedDataSource": "Агрегированные данные НН"
}

Добавим его в список фильтров. Далее нам нужно будет связать его со слоем. Для этого добавим этот фильтр в список фильтров слоя. Название параметра соответствует фильтруемому атрибуту, значение параметра — названию фильтра:

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

"@func_zone": "%func_zones"

И наконец свяжем этот фильтр с диаграммой. Для этого перейдем в блок relatedDataSources диаграммы, и добавим там новый параметр filterName со значением func_zones. После этого конфигурация диаграммы будем выглядеть так:

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

{
 "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",
       "filterName": "func_zones",
       "attributeName": "count",
       "attributeColor": "color",
       "attributeTitle": "func_zone",
       "dataSourceName": "Агрегированные данные НН"
     }
   ]
 }
}

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

Фильтрация диаграммой

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

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