Создание диаграмм с помощью enigma.js

Если вы все еще не знаете, что такое enigma.js, то это прекрасная возможность познакомиться с этой открытой библиотекой кодов по работе со службами Qlik Sense. Из статьи вы узнаете, что можно делать с ее помощью. Но уже сразу хочу сказать, enigma.js дает доступ через API к движку QIX, позволяя создавать приложения на основе Qlik.

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

Итак, мы рассмотрим, как работают enigma.js и Vega для создания простой гистограммы. Для этого будем использовать модуль qApp.js и класс qSessionObject.

НА ЗАМЕТКУ! Enigma.js – фреймворк, который обеспечивает связь с Qlik Sense в бэкэнде. Службы Rest позволяют работать с Qlik REST API, а службы Qix Service позволяют работать с QiX Engine. Enigma.js – очень удобный инструмент для тех, кто владеет JS.

 

Настройки

Для начала работы с enigma.js нам нужно пройти путь настроек работы библиотеки, подключения к приложению, а затем создания сессии объектов. Также для работы вам понадобится установка jQuery и Vega (https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.25/vega.min.js).

 

1. Создайте новую директорию для вашего проекта или создайте новый файл package.json. npm install babel-loader babel-core babel-preset-es2015 webpack —save-dev. Это задаст ключевые зависимости и сохранит их в файл package.json. Затем запустите npm install enigma.js --save. Это установит enigma.js, сохранив ее в файл package.json.

 

Теперь наш файл примет следующий вид package.json:

1. {     "name": "enigmapatterns",     "version": "1.0.0",     "description": "",     "dependencies": {       "enigma.js": "^1.0.1"     },     "devDependencies": {       "babel-core": "^6.23.1",       "babel-loader": "^6.3.1",       "babel-preset-es2015": "^6.22.0",       "webpack": "^2.2.1"     },     "scripts": {       "webpack": "webpack"     }   }  

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   {     "name": "enigmapatterns",     "version": "1.0.0",     "description": "",     "dependencies": {       "enigma.js": "^1.0.1"     },     "devDependencies": {       "babel-core": "^6.23.1",       "babel-loader": "^6.3.1",       "babel-preset-es2015": "^6.22.0",       "webpack": "^2.2.1"     },     "scripts": {       "webpack": "webpack"     }   }

   
    

Затем создаем файл конфигурации webpack.config.js, который выглядит следующим образом:

1. module.exports = {     entry: './main.js',     output: {       path: __dirname,       filename: 'bundle.js'     },     devtool: 'source-map',     module: {       loaders: [         {           exclude: /(node_modules)/,           loader: 'babel-loader',           query: {             presets: ['es2015']           }         }       ]     }   }  

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   module.exports = {     entry: './main.js',     output: {       path: __dirname,       filename: 'bundle.js'     },     devtool: 'source-map',     module: {       loaders: [         {           exclude: /(node_modules)/,           loader: 'babel-loader',           query: {             presets: ['es2015']           }         }       ]     }   }

   
    

И, наконец, мы создаем main.js, который будет нашей точкой входа, а также файл index.html, который загружает bundle.js.

 

Подключение к приложению

Для этого мы создаем файл qApp.js, который выглядит таким образом:

1. import enigma from 'enigma.js';   const qixSchema = require('./node_modules/enigma.js/schemas/qix/3.1/schema.json');      const config = {     schema: qixSchema,     session: {       host: 'localhost',       prefix: '',       port: 4848,       unsecure: true     }   };      export default enigma.getService('qix', config).then((qix) => {     return qix.global.openApp('Helpdesk Management.qvf').then((app) => {       return app;     });   });

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   import enigma from 'enigma.js';   const qixSchema = require('./node_modules/enigma.js/schemas/qix/3.1/schema.json');      const config = {     schema: qixSchema,     session: {       host: 'localhost',       prefix: '',       port: 4848,       unsecure: true     }   };      export default enigma.getService('qix', config).then((qix) => {     return qix.global.openApp('Helpdesk Management.qvf').then((app) => {       return app;     });   });

   
    

Создание сессий объектов

Мне нравится создавать отдельные классы для создания сессий объектов. Итак, я создаю файл, который выглядит следующим образом qSessionObject.js:

1. import getApp from "./qApp";      class qSessionObject {        constructor(properties) {       this.properties = properties;       this.object = null;     }        open() {       if (!this.object) {         return getApp.then((app) => {           return app.createSessionObject(this.properties).then((object) => {             this.object = object;           });         });       }     }        close() {       if (this.object) {         return getApp.then((app) => {           return app.destroySessionObject(this.object.id).then(() => {             this.object = null;           });         });       }     }      }      export default qSessionObject;

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

   import getApp from "./qApp";      class qSessionObject {        constructor(properties) {       this.properties = properties;       this.object = null;     }        open() {       if (!this.object) {         return getApp.then((app) => {           return app.createSessionObject(this.properties).then((object) => {             this.object = object;           });         });       }     }        close() {       if (this.object) {         return getApp.then((app) => {           return app.destroySessionObject(this.object.id).then(() => {             this.object = null;           });         });       }     }      }      export default qSessionObject;

   
    

 

Для ускорения процесса работы, вы можете скачать архив getting-started.zip в конце статьи. Он включает getting-started.zip файлы package.json и webpack.config.js, файлы qApp.js и qSessionObject.js, а также страницу index.html и файл main.js. В пакет также включен файл.qext file, в случае если вы будете использовать серверную версию Qlik Sense.

 

НА ЗАМЕТКУ! Для этого пример я использую приложение Helpdesk Management app, поэтому убедитесь, что ваш файл qApp.js подключен к приложению Helpdesk Management.

 

Проект

После всех установок, мы создаем наш проект. Основной файл, с которым мы будем работать — main.js, поэтому откроем его. Импортируем объект qSessionObject.js и создадим нашу сессию объекта.

1. import qSessionObject from "./qSessionObject";      let chartCube = new qSessionObject({     qInfo: {       qType: "visualization"     },     qHyperCubeDef: {       qDimensions: [{         qDef: {           qFieldDefs: ["[Case Owner Group]"]         },         qNullSuppression: true       }],       qMeasures: [{         qDef: {           qDef: "Avg([Case Duration Time])"         }       }],       qInitialDataFetch: [{         qWidth: 2,         qHeight: 1000       }]     }   });

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   import qSessionObject from "./qSessionObject";      let chartCube = new qSessionObject({     qInfo: {       qType: "visualization"     },     qHyperCubeDef: {       qDimensions: [{         qDef: {           qFieldDefs: ["[Case Owner Group]"]         },         qNullSuppression: true       }],       qMeasures: [{         qDef: {           qDef: "Avg([Case Duration Time])"         }       }],       qInitialDataFetch: [{         qWidth: 2,         qHeight: 1000       }]     }   });

   
    

 

После того как мы создали qSessionObject, определим настройки Vega для нашей диаграммы:

1. let barchartSpec = {     "$schema": "https://vega.github.io/schema/vega/v3.0.json",     "width": 400,     "height": 200,     "padding": 5,     "data": [       {         "name": "table"       }     ],     "scales": [       {         "name": "xscale",         "type": "band",         "domain": {"data": "table", "field": "category"},         "range": "width"       },       {         "name": "yscale",         "domain": {"data": "table", "field": "amount"},         "nice": true,         "range": "height"       }     ],     "axes": [       {         "orient": "bottom",         "scale": "xscale",         "encode": {           "labels": {             "update": {               "angle": {"value": -50},               "align": {"value": "right"},               "baseline": {"value": "middle"},               "radius": {"value": -2}             }           }         }       },       {         "orient": "left",         "scale": "yscale"       }     ],     "marks": [       {         "type": "rect",         "from": {"data":"table"},         "encode": {           "enter": {             "x": {"scale": "xscale", "field": "category", "offset": 1},             "width": {"scale": "xscale", "band": 1, "offset": -1},             "y": {"scale": "yscale", "field": "amount"},             "y2": {"scale": "yscale", "value": 0}           },           "update": {             "fill": {"value": "steelblue"}           },           "hover": {             "fill": {"value": "red"}           }         }       }     ]   }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

   let barchartSpec = {     "$schema": "https://vega.github.io/schema/vega/v3.0.json",     "width": 400,     "height": 200,     "padding": 5,     "data": [       {         "name": "table"       }     ],     "scales": [       {         "name": "xscale",         "type": "band",         "domain": {"data": "table", "field": "category"},         "range": "width"       },       {         "name": "yscale",         "domain": {"data": "table", "field": "amount"},         "nice": true,         "range": "height"       }     ],     "axes": [       {         "orient": "bottom",         "scale": "xscale",         "encode": {           "labels": {             "update": {               "angle": {"value": -50},               "align": {"value": "right"},               "baseline": {"value": "middle"},               "radius": {"value": -2}             }           }         }       },       {         "orient": "left",         "scale": "yscale"       }     ],     "marks": [       {         "type": "rect",         "from": {"data":"table"},         "encode": {           "enter": {             "x": {"scale": "xscale", "field": "category", "offset": 1},             "width": {"scale": "xscale", "band": 1, "offset": -1},             "y": {"scale": "yscale", "field": "amount"},             "y2": {"scale": "yscale", "value": 0}           },           "update": {             "fill": {"value": "steelblue"}           },           "hover": {             "fill": {"value": "red"}           }         }       }     ]   }

   
    

 

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

1. $(() => {        //initialize vega view     let view = new vega.View(vega.parse(barchartSpec))       .renderer('canvas')       .initialize('#view')       .hover();        //open cube     chartCube.open().then(() => {          //get object layout and insert data into vega view       chartCube.object.getLayout().then((layout) => {         let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {           return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}         });         view.insert('table', values).run();       });          //when object data changes, update data in vega view       chartCube.object.on("changed", function() {         chartCube.object.getLayout().then((layout) => {           let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {             return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}           });           view.remove('table', (d) => { return true; }).run();           view.insert('table', values).run();         });       });          //add event listener to make selections on hypercube when a bar is clicked       view.addEventListener('click', function(event, item) {         if(item){           chartCube.object.selectHyperCubeValues("/qHyperCubeDef", 0, [item.datum.qElemNumber], true);         }       });        });   });

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   $(() => {        //initialize vega view     let view = new vega.View(vega.parse(barchartSpec))       .renderer('canvas')       .initialize('#view')       .hover();        //open cube     chartCube.open().then(() => {          //get object layout and insert data into vega view       chartCube.object.getLayout().then((layout) => {         let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {           return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}         });         view.insert('table', values).run();       });          //when object data changes, update data in vega view       chartCube.object.on("changed", function() {         chartCube.object.getLayout().then((layout) => {           let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {             return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}           });           view.remove('table', (d) => { return true; }).run();           view.insert('table', values).run();         });       });          //add event listener to make selections on hypercube when a bar is clicked       view.addEventListener('click', function(event, item) {         if(item){           chartCube.object.selectHyperCubeValues("/qHyperCubeDef", 0, [item.datum.qElemNumber], true);         }       });        });   });

   
    

Вот и все! Не забудьте запустить webpack, проверив результаты. В итоге у вас должен получиться такой график — Vega bar chart.

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

Диаграмма с помощью enigms.js

Enigma.js на GitHub

Принять участие в развитии проекта Enigma.js

На этом все на сегодня! Удачных вам разработок!