Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
dojo-rql
Advanced tools
Readme
The best project ever. #dojo-rql Module Модуль для отображения данных с иcпользованием умных(разширеных) фильтров
Chart
- модуль для поддержки фильтров в графиках
Composite
- модуль для компоновки виджетов
DataPreviewControlPanel
- модуль для обьеденения панели управления фильтрами и виджетом с поддержкой фильтров для вывода данных
FilterControlPanel
- модуль панели управления фильтрами
FilteredGrid
- модуль для поддержки фильтров в таблицах
FilterEditor
- модуль для редактирования фильтров
TableWithConfiguration
- модуль для поддержки сохранения и загрузки настроек в таблицах
Tree
- модуль для поддержки деревьями dstore
Util
- модуль с вспомагательными утилитами
extensions/GridRqlFilter
- модуль с вспомагательными утилитами
extensions/StoreRqlFilter
- модуль с вспомагательными утилитами
Установите библиотеку командой: npm install dojo-rql
Что бы быстро приступить к использованию библиотеки следуйте следуще иструкции
Создаем Rest DataStore (вы должны иметь backend )
var centralDataStore = new (declare([StoreRqlFilter, Trackable]))({
'headers': {
'Accept': 'application/json'
},
'useRangeHeaders': true,
"target": "/rest/users"
});
Далее создаем таблицу с поддержкой фильтров
var filteredGridOption = {
"title": "Таблица пользователей", // указываем title элемента
"name": "usersProfile", // указываем name элемента
"options": { // Указываем опции для фильтров
"columns": [
{"label": "id", "field": "id"},
{"label": "Имя", "field": "name"},
{"label": "Фамилия", "field": "surname"}
],
"collection": centralDataStore,
"selectionMode": "single",
"pagingLinks": false,
"pagingTextBox": true,
"firstLastArrows": true,
"rowsPerPage": 15,
"pageSizeOptions": [10, 15, 25]
},
"declare": [
"Grid",
"Keyboard",
"Selection",
"ColumnHider",
"ColumnResizer",
"GridRqlFilter"
]
};
var filterGrid = new FilteredGrid(filteredGridOption);
Таблица уже поддежривает фильтры, но что бы мы могли ими управлять нам нужно добавить панель управлени фильтрами
var tableFilterControlPanel = new FilterControlPanel({
"title": "Панель управления фильтрами ",
"id": "tableFilter",
"name": "plotPublishPrice",
"filteredStoreDataOption": [
{
"label": "Имя",
"value": {
"type": "string",
"name": "name",
"field": {
'type': "TextBox"
}
},
"filter": [
{"id": 0, "label": "=", "value": "eq"},
{"id": 0, "label": "!=", "value": "ne"}
]
},
{
"label": "Фамилия",
"value": {
"type": "string",
"name": "surname",
"field": {
'type': "TextBox"
}
},
"filter": [
{"id": 0, "label": "=", "value": "eq"},
{"id": 0, "label": "!=", "value": "ne"}
]
}
],
"store": new (declare([Rest, RequestMemory, Trackable]))({
'headers': {
'Accept': 'application/json'
},
"target": "/rest/filters_list"
})
});
var tableDataPreviewControlPanel = new DataPreviewControlPanel({
title: "Таблица профилей пользователей",
filterControlPanel: tableFilterControlPanel,
dataViewer: filterGrid
});
(Coming soon)
Точно так же как мы создавали таблицу, мы можем создать график. Создадим Rest DataStore (Вы должны иметь backend )
var centralDataStore = new (declare([StoreRqlFilter, Trackable]))({
'headers': {
'Accept': 'application/json'
},
'useRangeHeaders': true,
"target": "/rest/sin"
});
Теперь создадим Char. В данном случаче мы будем сторить синусоиду, по этому Chart type будет Lines
var filterChartOption = {
"title": "Гистограмма цены выставленных товаров", // Указываем title элемента
"name": "plotPublishPrice", // Указываем name элемента
"store": centralDataStore, // Указываем хранилище
"type": Lines, // Указываем тип чарта
"xAxisLabel": 'Ось абсцисс', // Указываем лейбл для
"yAxisLabel": 'Ось ординат' // Указываем тип чарта
};
var filterChart = new Chart(filterChartOption);
Теперь можно так же добавить поддержку панели управления фльтрами. Сконфигурируем и создадим саму панель фильтров для нашего графика
var chartFilterControlPanel = new FilterControlPanel({
"title": "Панель управления фильтрами ", // Указываем title который будет ввиден как заголовок элемента
"id": "chartFilter", // указываем id элемента
"name": "plotPublishPrice", // указываем name элемента
"columns": [ // Передаем перечень колнок для таблици фильтров(колонки совместимы с колонками dgrid)
{"label": "id", "field": "id"},
{
"label": "Название",
"field": "name",
"editor": "text",
"editOn": "dblclick",
"autoSave": true
}
],
"filteredStoreDataOption": [ // Указываем опции для фильтров
{
"label": "Ось абсцисс", // Указываем label для фильтрованого параметра
"value": { // Указываем параметры значения
"type": "string", // Указываем тип значения
"name": "x", // Указываем фактическое имя
"field": {
'type': "TextBox" // Указываем editor для поля
}
},
"filter": [ // Указываем списко доступных фильтров для поля
{"id": 0, "label": "=", "value": "eq"},
{"id": 0, "label": ">", "value": "gt"},
{"id": 0, "label": "<", "value": "lt"},
{"id": 0, "label": ">=", "value": "gte"},
{"id": 0, "label": "<=", "value": "lte"},
{"id": 0, "label": "!=", "value": "ne"}
]
},
{
"label": "Ось ординат",
"value": {
"type": "string",
"name": "y",
"field": {
'type': "TextBox"
}
},
"filter": [
{"id": 0, "label": "=", "value": "eq"},
{"id": 0, "label": ">", "value": "gt"},
{"id": 0, "label": "<", "value": "lt"},
{"id": 0, "label": ">=", "value": "gte"},
{"id": 0, "label": "<=", "value": "lte"},
{"id": 0, "label": "!=", "value": "ne"}
]
}
],
"store": new (declare([Rest, RequestMemory, Trackable]))({ // Указываем сторе дл яхранения фильтров
'headers': {
'Accept': 'application/json'
},
"target": "/rest/filters_list"
})
});
Соеденим панель фильтров и chart DataPreviewControlPanel - обертка над таблицей которая дает возможность подключать панель фильтров к таблице.
var chartDataPreviewControlPanel = new DataPreviewControlPanel({
title: "Функция f(x) = sin(x) (Синусоида)",
filterControlPanel: chartFilterControlPanel,
dataViewer: filterChart
});
Теперь давайте обьеденим наш виджет Chart и виодет FilteredGrid. Сам по себе, обьект Composite может содержать любое количество дочерних элементов групируя их в одном виджете для удобного управления и взаимодейсвия этими элементами.
var composite = new Composite({
components: [tableDataPreviewControlPanel,
chartDataPreviewControlPanel
]
}).placeAt(dom.byId('grid'));
composite.startup();
Пример фильтра в rql();
and(and(eq(q,null()),ne(q,null()),le(q,r),ge(q,u)),or(lt(q,t),gt(q,y),in(q,(a,s,d,f,g)))) &limit(20,30)&sort(-q) &select(q,max(q),min(q),count(q))
####Отправка rql запросов
При отправке запроса нужно использовать зголовок
'Accept': 'application/json'
для получения данных в JSON формате.
Так же вы можете комбинировать limit() для запрпоса указывая фактичиский лимит на поулчения данный в самом rql,
а ограничивать выборку нужно в заголовке.
При таком подходе данные будут сначала отлимитированы по limit указаному в rql,
а после на них будет наложен фильтр который указан в заголовках.
Отправленый rql limit(37)
Отправленые заголовки
'Range': 'items=0-14'
'X-Range': 'items=0-14'
В ответе будет содержатся заголовки
'Content-Range': 'items 0-13/37'
Как видно, заголовок ответа содержит наш лимит отпрвленый в rql Работает как основной фильтр выборки 'items 0-13/37' -> limit(37) А лимиты отправлены в заголовках, действуют как фильтр поверх тех данных что мы получили на предыдущем шаге 'items 0-13/37' -> 'Range': 'items=0-14'
Подобные query запросы нужно отправлять методом GET.
Если мы хотим добавить даные в сторе, мы можем отправить POST запрос для того что бы добавить новый обект или отправить PUT запрос что бы удалить его. Так же мы можем отправить DELETE запрос что бы удалить нужный элемент.
В теле запроса мы должны указать либо один обькет лбо массив обьектов которые мы хотим добавить.
{
"id": "1",
"name": "Test",
"surname": "Test"
}
В теле запроса мы должны указать либо один обькет который хотим изменить. Обязательно указать id. Указать нужено либо в теле обьекта либо как часть REST запроса.
{
"id": "1",
"name": "Test",
"surname": "Test"
}
Copyright (c) 2016 avz-cmf Licensed under the GNU license.
FAQs
The best project ever.
The npm package dojo-rql receives a total of 16 weekly downloads. As such, dojo-rql popularity was classified as not popular.
We found that dojo-rql demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.