• arguments –
• alert – показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК»
• atob – Функция декодирует строку данных , которые были закодированы с помощью Base64 кодирования.

  • var decodedData = scope.atob(encodedData);

• angular –
• addEventListener – способ назначения обработчиков на события с привязкой к элементу. Синтаксис:
  • element.addEventListener(event, handler[, options]);
    • event – Имя события, например "click"
    • handler – Ссылка на функцию-обработчик
    • options – Дополнительный объект со свойствами: once, capture, passive.
  • Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента

    • function handler1() {
        alert('Спасибо!');
      };
      
      function handler2() {
        alert('Спасибо ещё раз!');
      }
      
      elem.onclick = () => alert("Привет");
      elem.addEventListener("click", handler1); // Спасибо!
      elem.addEventListener("click", handler2); // Спасибо ещё раз!

• app –

== B ==

• blur –
• btoa – Метод создает Base64 закодированную ASCII строку из двоичной строки / Binary (то есть String объект , в котором каждый символ в строке рассматриваются как байты двоичных данных). Вы можете использовать этот метод для кодирования данных, которые в противном случае могут вызвать проблемы со связью, передать их, а затем использовать метод atob() для повторного декодирования данных.

  • var encodedData = scope.btoa(stringToEncode);

• break –
• backendApi –

== C ==

• customElements –
• closed –
• clientInformation –
• crypto –
• cancelAnimationFrame –
• cancelIdleCallback –
• captureEvents –
• clearInterval – отменяет синхронизированное, повторяющееся действие, которое было ранее установлено вызовом setInterval().
• clearTimeout – отменяет тайм – аут ранее установленного вызовом метода setTimeout().
• close –
• confirm – отображает диалоговое окно, которое содержит две кнопки (OK и Cancel), а так же опциональное (необязательное) текстовое сообщение.
  • result = confirm(message);
    • message опциональная (необязательная) строка, которая будет отображена в диалоговом окне.
    • result булево значение, указывающее на нажатую кнопку OK или Cancel (true означает OK).
• createImageBitmap – Метод создает bitmap из источника, при необходимости можно использовать только часть источника. Метод существует в глобальной области как в окнах, так и в рабочих процессах. Он принимает множество различных источников изображений и возвращает Promise, которое resolve в ImageBitmap.
• chrome –
• caches –
• case –
• catch –
• continue –

== D ==

• dimensionInfo –
• document –
• devicePixelRatio –
• defaultStatus –
• dragomanClosure –
• define –
• debounceTimer –
• dispatchEvent –
• debugger –
• default –
• delete –
• do –

== E ==

• external –
• engineModuleGlobal –
• else –

== F ==

• frames –
• frameElement –
• fetch – Метод WindowOrWorkerGlobalScope Mixin начинается процесс извлечения ресурса из сети, возвращая обещание , которое выполняется , как только отклик доступен. Обещание преобразуется в Response объект, представляющий ответ на ваш запрос. Обещание не отклоняется при ошибках HTTP – оно отклоняется только при ошибках сети. Вы должны использовать then обработчики для проверки ошибок HTTP.
• find –
• focus –
• false –
• finally –
• for –
• function –

== G ==

• getComputedStyle –
• getSelection –

== H ==

• html –
• history –

== I ==

• innerWidth –
• innerHeight –
• isSecureContext –
• indexedDB –
• if –
• in –
• instanceof –

== L ==

• location –
• locationbar –
• length –
• localStorage –
• layout –

== M ==

• menubar –
• matchMedia –
• moveBy –
• moveTo –

== O ==

• opener – Свойство opener возвращает ссылку на окно, которое открыло текущее. Когда Вы открываете новое окно с помощью open() Вы можете воспользоваться этим свойством, чтобы взаимодействовать с родительским окном из нового окна.

  • //Создадим новое окно win 
    win = window.open();
    //Выведем в новое окно текст
    win.document.write("Текст нового окна");
    //Теперь выведем текст в родительское окно с помощью свойства opener
    win.opener.document.write("Текст родительского окна");

     

• origin –
• outerWidth –
• outerHeight –
• onsearch –
• onappinstalled –
• onbeforeinstallprompt –
• onabort –
• onblur –
• oncancel –
• oncanplay –
• oncanplaythrough –
• onchange –
• onclick –
• onclose –
• oncontextmenu –
• oncuechange –
• ondblclick –
• ondrag –
• ondragend –
• ondragenter –
• ondragleave –
• ondragover –
• ondragstart –
• ondrop –
• ondurationchange –
• onemptied –
• onended –
• onerror –
• onfocus –
• onformdata –
• oninput –
• oninvalid –
• onkeydown –
• onkeypress –
• onkeyup –
• onload –
• onloadeddata –
• onloadedmetadata –
• onloadstart –
• onmousedown –
• onmouseenter –
• onmouseleave –
• onmousemove –
• onmouseout –
• onmouseover –
• onmouseup –
• onmousewheel –
• onpause –
• onplay –
• onplaying –
• onprogress –
• onratechange –
• onreset –
• onresize –
• onscroll –
• onseeked –
• onseeking –
• onselect –
• onstalled –
• onsubmit –
• onsuspend –
• ontimeupdate –
• ontoggle –
• onvolumechange –
• onwaiting –
• onwebkitanimationend –
• onwebkitanimationiteration –
• onwebkitanimationstart –
• onwebkitanimationend –
• onwheel –
• onauxclick –
• ongotpointercapture –
• onlostpointercapture –
• onpointerdown –
• onpointermove –
• onpointerup –
• onpointercancel –
• onpointerover –
• onpointerout –
• onpointerenter –
• onpointerleave –
• onselectstart –
• onselectionchange –
• onanimationend –
• onanimationiteration –
• onanimationstart –
• ontransitionend –
• onafterprint –
• onbeforeprint –
• onbeforeunload –
• onhashchange –
• onlanguagechange –
• onmessage –
• onmessageerror –
• onoffline –
• ononline –
• onpagehide –
• onpageshow –
• onpopstate –
• onrejectionhandled –
• onstorage –
• onunhandledrejection –
• onunload –
• open –
• ondevicemotion –
• ondeviceorientation –
• ondeviceorientationabsolute –
• onpointerrawupdate –
• openDatabase –

== P ==

• personalbar –
• parent –
• pageXOffset –
• pageYOffset –
• performance –
• postMessage –
• print –
• prompt – отображает диалоговое окно с необязательным запросом на ввод текста: result = prompt(title, [default]);
  • Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
    • result — это строка, содержащая текст, поступивший от пользователя или null.
    • title – Текст для отображения в окне.
    • default – Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

== Q ==

• queueMicrotask – Метод, который подвергается воздействие на Window или Worker интерфейсе, в очередь microtask , которая будет выполнено в безопасное время до контроля возвращения в цикл обработки событий браузера. Микрозадача – это короткая функция, которая будет выполняться после того, как текущая задача завершит свою работу, и когда нет другого кода, ожидающего запуска, до того, как управление контекстом выполнения будет возвращено в цикл событий браузера. Это позволяет вашему коду выполняться без вмешательства в любой другой ожидающий выполнения код с потенциально более высоким приоритетом, но до того, как браузер восстановит контроль над контекстом выполнения, что может зависеть от работы, которую вам нужно выполнить.

  • scope.queueMicrotask(function);

• qJsonp –
• qvangularGlobal –
• qListObject – является базовым списком и подходит, если вы хотите создать список всех значений из поля. Объект списка – это визуализация, содержащая одно измерение. При получении макета объекта списка ( qListObjectDef ) отображаются все значения. Если выбор применяется к объекту списка, выбранные значения отображаются вместе с исключенными и дополнительными значениями.
  • Пример: горизонтальный список initialProperties

  • initialProperties : {  
                version : 1.0,  
                qListObjectDef : {  
                    qShowAlternatives : true,  
                    qFrequencyMode : "V",  
                    qSortCriterias : {  
                        qSortByState : 1  
                    },  
                    qInitialDataFetch : [{  
                        qWidth : 2,  
                        qHeight : 50  
                    }]  
                },  
                fixed: true,  
                width: 25,  
                percent: true,  
                selectionMode: "CONFIRM"  
    }

     

• qHyperCube –
• qlik –

== R ==

• rows –
• releaseEvents –
• requestAnimationFrame –
• requestIdleCallback –
• resizeBy –
• resizeTo –
• regeneratorRuntime –
• require –
• requirejs –
• removeEventListener –
• return –
• reply –

== S ==

• self –
• scrollbars –
• statusbar –
• status –
• screen –
• scrollX –
• scrollY –
• screenX –
• screenY –
• screenLeft –
• screenTop –
• styleMedia –
• sessionStorage –
• scroll –
• scrollBy –
• scrollTo –
• setInterval – Метод, предложенный на Window и Worker интерфейсах, неоднократно вызывает функцию или выполняет фрагмент кода, с фиксированной задержкой по времени между каждым вызовом. Он возвращает идентификатор интервала, который однозначно определяет интервал, поэтому вы можете удалить его позже, позвонив clearInterval(). Этот метод определяется WindowOrWorkerGlobalScope миксином.

  • var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);

• setTimeout – Метод WindowOrWorkerGlobalScope Mixin (и преемника Window.setTimeout()) устанавливает таймер , который выполняет функцию или указанный фрагмент кода один раз, когда таймер истекает.

  • var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);

• stop –
• showDirectory –
• showOpenFilePicker –
• showSaveFilePicker –
• speechSynthesis –
• switch –

== T ==

• this –
• toolbar –
• top –
• trustedTypes –
• throw –
• true –
• try –
• typeof –

== V ==

• visualViewport –
• var –
• void –

== W ==

• window –
• webkitStorageInfo –
• webkitCancelAnimationFrame –
• webkitRequestAnimationFrame –
• webkitRequestFileSystem –
• webkitResolveLocalFileSystemURL –
• webpackJsonpsensei_codearea –
• while –
• with –

Сообщение Обзор функций Javascript в редакторе Qlik Sense Extensions появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

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

Коллекция организована в @nebula.jsрамках области в виде пакетов npm. Основной пакет @nebula.js/stardustсодержит API-интерфейсы для интеграции существующих визуализаций с гибридными приложениями, а также API-интерфейсы для создания пользовательских визуализаций.

EMBEDDING VISUALIZATIONS. ВСТРАИВАНИЕ ВИЗУАЛИЗАЦИЙ

Configuration. Конфигурация

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

Вы можете управлять большинством из них через Configurationобъект.

Временный конфиг

ConfigurationОбъект является необязательным аргументом , который вы можете предоставить при инстанцировании embedэкземпляра:

import { embed } from '@nebula.js/stardust';

const n = embed(enigmaApp, {
  context: {
    theme: 'dark',
  },
  types: [
    /* types */
  ],
});

n.render(/* chart 1*/);
n.render(/* chart 2*/);

Многоразовая конфигурация

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

Создайте файл, baseConfigкоторый выполняет тяжелую работу по регистрации типов и тем:

const baseConfig = embed.createConfiguration({
  types: [
    /* register type once*/
  ],
  themes: [
    /* register themes once*/
  ],
});

Создайте другую конфигурацию, которая наследуется от baseConfig, примените 'dark'тему и установите ограничение, запрещающее выбор:

const noSelectionDark = baseConfig.createConfiguration({
  context: {
    theme: 'dark',
    constraints: { select: true },
  },
});

// render chart with dark theme with no selections allowed
noSelectionDark(enigmaApp).render(/*chart config*/);
noSelectionDark(anotherEnigmaApp).render(/*chart config*/);

Вы также можете напрямую привязать конфигурацию к приложению:

const swedishPink = baseConfig(enigmaApp, {
  context: {
    theme: 'pinkish',
    language: 'sv-SE',
  },
});

swedishPink.render(/* chart config */);

Регистрация типов

Перед визуализацией визуализации ее модуль необходимо загрузить и зарегистрировать. Вы можете загрузить необходимые модули из npm:

$npm install @nebula.js/sn-bar-chart @nebula.js/sn-pie-chart

А потом зарегистрируйте каждого typeиндивидуально:

import barchart from '@nebula.js/sn-bar-chart';
import piechart from '@nebula.js/sn-pie-chart';

embed.createConfiguration({
  types: [
    {
      name: 'bar',
      load: () => Promise.resolve(barchart),
    },
    {
      name: 'pie',
      load: () => Promise.resolve(piechart),
    },
  ],
});

Загрузка на лету

Если вы точно не знаете, какие типы вам нужны, и не хотите устанавливать все, чтобы уменьшить размер вашего пакета, вы можете загрузить визуализации во время выполнения, используя облегченный загрузчик определений асинхронных модулей, например d3-require .

Начнем с установки модуля:

npm install d3-require

а затем настройте его для загрузки модулей из CDN, например https://unpkg.com, а также укажите псевдоним для использования локальной версии @nebula.js/stardust:

import { requireFrom } from 'd3-require';
import * as stardust from '@nebula.js/stardust';

const loadSnType = requireFrom((name) => `https://unpkg.com/@nebula.js/sn-${name}-chart`).alias({
  '@nebula.js/stardust': stardust,
});

Затем вы можете настроить все типы, которые вы ожидаете использовать:

const types = ['bar', 'line', 'pie', 'sankey'].map((t) => ({
  type: t,
  load: () => loadSnType(t),
}));
const baseConfig = stardust.embed.createConfiguration({ types });

Тип загружается с удаленного URL-адреса при первом отображении:

baseConfig(enigmaApp).render({
  type: 'bar',
  fields: ['Product', '=sum(Sales)'],
});

Контекст

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

embed.createConfiguration({
  context: {},
});

Ограничения

Ограничения позволяют указать визуализации на отключение определенных типов взаимодействий и поведения.

Вы можете применить три различных ограничения:

• passive: отключить такие взаимодействия, как всплывающие подсказки.
• active: отключение взаимодействий, влияющих на состояние визуального представления, таких как масштабирование, прокрутка и т. д.
• select: выключить выделение.

{
  context: {
    constraints: {
      active: true,
      passive: true,
      select: true,
    },
  },
};

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

Язык

stardust поддерживает 15 языков:

• 'en-US' – Американский английский
• 'sv-SE' – шведский
• 'it-IT' – итальянский
• 'zh-CN' – Упрощенный китайский
• 'zh-TW' – Традиционный китайский
• 'ko-KR' – Корейский язык
• 'de-DE' – Немецкий
• 'es-ES' – Испанский
• 'pt-BR' – Бразильский португальский
• 'ja-JP' – Японский
• 'fr-FR' – Французкий язык
• 'nl-NL' – Голландский
• 'tr-TR' – Турецкий
• 'pl-PL' – польский
• 'ru-RU' – Русский

{
  context: {
    language: 'sv-SE',
  },
};

Тема

Из коробки доступны две основные темы: 'light'и 'dark'.

{
  context: {
    theme: 'dark',
  }
};

Светлая тема

Темная тема

Вы также можете зарегистрировать собственные темы и применить одну из них в контексте:

{
  themes: [{
    id: 'pinkish',
    load: () => Promise.resolve({
      palettes: {
        data: [{
          scale: [
            '#fac6e5',
            '#ff95d6',
            '#e76eb1',
            '#b44772',
          ],
        }]
      }
    })
  }],
  context: {
    theme: 'pinkish'
  }
};

Embedding visualizations. Встраивание визуализаций

Встраивание визуализаций

Вы можете встроить визуализацию двумя способами:

1. На лету
2. Из существующего объекта

Рендеринг выполняется с использованием render()метода экземпляра, возвращаемого embedфункцией, который, как минимум, требует того, в который HTMLElementвы хотите выполнить рендеринг:

import { embed } from '@nebula.js/stardust';

const n = embed(enigmaApp);
n.render({
  element,
  // rest of the config
});

Рендеринг на лету

При рендеринге визуализации на лету вам необходимо указать, что type вы хотите визуализировать:

n.render({
  element,
  type: 'barchart',
});

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

Чтобы предоставить визуализацию исходные данные, добавьте в fieldsсвойство измерения и меры данных :

n.render({
  element,
  type: 'barchart',
  fields: ['Region', '=sum(Sales)'],
});

Вы также можете изменить начальные свойства:

n.render({
  element,
  type: 'barchart',
  fields: ['Product', '=sum(Sales)'],
  properties: {
    title: 'Sales by region',
  },
});

Рендеринг из существующих объектов

Если вы уже создали общий объект в своем приложении и хотите его отобразить, вы можете сделать это, предоставив объекту id:

n.render({
  element,
  id: '<ObjectID>',
});

Current app selections. Выборки текущего приложения

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

Панель выбора текущего приложения

На панели выбора текущего приложения отображаются активные в данный момент выборки в указанном приложении. Для рендеринга этого бара вам сначала понадобится HTMLElement:

<div class="curr-selections"></div>

Затем вы можете mountвыбрать пользовательский интерфейс в этом элементе:

const n = embed(enigmaApp);

(await n.selections()).mount(document.querySelector('.curr-selections'));

Без каких-либо выделений должно получиться так:

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

Несколько баров

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

(await embed(enigmaApp).selections()).mount(document.querySelector('.curr-selections'));

(await embed(anotherApp, { context: { theme: 'dark' } }).selections()).mount(
  document.querySelector('.another-curr-selections')
);

DEVELOPING VISUALIZATIONS. РАЗРАБОТКА ВИЗУАЛИЗАЦИЙ

Visualization. Визуализация

Что такое визуализация

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

Визуализация состоит из двух основных частей:

• backend Generic Object, который описывает свойства этого визуализация и сохраняется в модели данных,
• и внешний интерфейс визуальной части, которая производит рендеринг layout  из Generic Object.

Определение

Минимальная визуализация, которая не содержит никаких данных и ничего не отображает, выглядит так:

export default function () {
  return {
    qae: {
      /* */
    },
    component() {},
  };
}

Здесь component()вы визуализируете визуальную часть, а qaeздесь вы определяете свойства и данные, обрабатываемые ассоциативным механизмом Qlik (QAE).

Rendering. Рендеринг

В componentчасти определения происходит весь рендеринг, это просто функция, которая ничего не возвращает:

export default function () {
  return {
    component() {
      // rendering logic goes here
    },
  };
}

Чтобы отрендерить что-то, что вам нужно для доступа к элементу DOM, которому назначена визуализация, вы можете сделать это, импортировав useElement функцию:

import { useElement } from '@nebula.js/stardust';

Эта функция возвращает простой HTMLElement, который является вашей точкой входа в визуальный мир:

component() {
  const element = useElement();
  element.innerHTML = 'Hello!';
}

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

Hooks

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

useElement

Вы уже видели useElementкрючок, его единственная цель – предоставить HTMLElement, к которому вы должны прикрепить свои собственные элементы, чтобы сделать ваш контент видимым, в следующем примере для элемента innerHTMLустановлено значение Hello!:

component() {
  // get the element
  const element = useElement();
  // set element content
  element.innerHTML = 'Hello!';
}

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

component()Функция выполняется каждый раз , когда что – то , что может быть связано с вашими изменениями рендеринга; тема, модель данных, выбор данных, состояние компонента и т. д. Таким образом, добавление и удаление прослушивателей событий, обновление узлов DOM и выборка данных не идеальны и могут быть довольно тяжелыми для производительности, если делать это каждый раз при component()запуске. Вместо этого вы должны выполнять пакетные обновления с useEffect.

useEffect

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

import { useEffect } from '@nebula.js/stardust';
// ...
component() {
  const element = useElement();

  useEffect(() => {
    // run only once when the component is created
    console.log('created');
  }, []);
}

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

component() {
  const element = useElement();

  useEffect(() => {
    const listener = () => {
      console.log('clicked');
    };

    element.addEventListener('click', listener);

    return () => {
      // clean-up
      element.removeEventListener('click', listener);
    };
  }, [element]);
}

В предыдущем примере elementв качестве второго аргумента предоставляется наблюдаемое значение, поэтому эффект запускается только при elementизменении. Однако, поскольку elementникогда не изменяется для одного и того же компонента, обратный вызов запускается только один раз при создании компонента. Таким образом listener, экземпляр может быть создан только один раз, и clickдобавляется только один прослушиватель событий. Обратный вызов также возвращает функцию в конце, это функция очистки, которая выполняется при изменении любого из наблюдаемых значений или при уничтожении компонента. Здесь вы должны очистить все добавленные побочные эффекты, в этом случае прослушиватель событий удаляется, чтобы избежать утечки памяти.

useState

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

import { useState } from '@nebula.js/stardust';

export default function () {
  return {
    component() {
      const [count, setCount] = useState(0);
    },
  };
}

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

В следующем примере countувеличивается на 1, когда пользователь нажимает element:

component() {
  const element = useElement();
  const [count, setCount] = useState(0);

  useEffect(() => {
    const listener = () => {
      setCount(count + 1);
    };

    element.addEventListener('click', listener);

    return () => {
      element.removeEventListener('click', listener);
    };
  }, [element]);
}

Чтобы отобразить обновленное значение, вы можете добавить другое, useEffectкоторое будет запускаться при countизменении:

const [count, setCount] = useState(0);
useEffect(() => {
  element.innerHTML = `Count: ${count}`;
}, [count]);

Configuring data. Конфигурирование данных

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

{
  "qae": {
    "properties": {}
  }
}

Общий объект

Каждая визуализация связана со всей моделью данных и ассоциативным механизмом Qlik через универсальный объект . Это объект JSON, содержащий свойства, в результате которых создается макет , описывающий состояние внутренней части визуализации.

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

Свойства

Какие свойства вы устанавливаете, полностью зависит от вас, однако это должен быть действительный объект JSON. Большинство свойств – это просто настройки, которые вы, возможно, захотите сохранить с течением времени. Если вы разрабатываете гистограмму, вы можете сохранить настройку, которая указывает, следует ли ее складывать или какой цвет должны иметь столбцы:

{
  "isStacked": true,
  "barColor": "red"
}

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

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

Существует множество различных предопределенных динамических свойств для различных целей, например, вы можете использовать ValueExpression для выполнения простых вычислений:

{
  "simpleMath": {
    "qValueExpression": {
      "qExpr": "1+1"
    }
  }
}

Layout (Макет/Слой)

layout из Generic Object является результатом статических и динамических свойств. layout предыдущих свойств выглядит следующим образом:

{
  "isStacked": true,
  "barColor": "red",
  "simpleMath": 2
}

Обратите внимание, что статические свойства остаются точно такими же, в то время как динамическое свойство simpleMathтеперь содержит вычисленный результат ValueExpression.

Большинство динамических свойств имеют определение ввода и соответствующий вывод макета; а ListObjectDef приводит к ListObject , а SelectionObjectDef результаты в SelectionObject , и так далее.

Данные

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

{
  "qHyperCubeDef": {},
  "anotherOne": {
    "qHyperCubeDef": {},
    "andAThird": {
      "qHyperCubeDef": {}
    }
  }
}

Основными входными данными HyperCubeDef являются измерения и меры :

{
  "qHyperCubeDef": {
    "qDimensions": [{ "qLibraryId": "hdg534" }],
    "qMeasures": [{ "qLibraryId": "gt5dgd" }]
  }
}

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

Цели данных

Целевой объект данных – это способ определить, где расположены динамические HyperCubeDef в свойствах универсального объекта. Хотя вы stardustможете просматривать свойства и находить все их использования qHyperCubeDef, вы можете не захотеть, чтобы все они были динамическими, или вы можете сгенерировать их только для внутреннего использования.

Вы указываете целевые объекты данных с помощью data.targetsключа qae, каждая цель должна иметь pathключ, который указывает путь JSON к HyperCubeDef из корня объекта свойств:

qae: {
  properties: {
    qHyperCubeDef: {},
    my: {
      nested: {
        qHyperCubeDef: {}
      },
    }
  },
  data: {
    targets: [
      { path: '/qHyperCubeDef' },
      { path: '/my/nested/qHyperCubeDef' },
    ];
  }
}

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

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

Field limitations. Ограничения поля

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

targets: [
  {
    path: '/qHyperCubeDef',
    dimensions: {
      min: 1,
      max: 1,
    },
    measures: {
      min: 1,
      max: 2,
    },
  },
];

Field modifications

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

Если вы, например, хотите убедиться, что нулевые значения подавляются, поскольку это не то, что вы можете визуализировать или представить в хорошем виде, вы можете установить, qNullSuppression: trueкогда добавляется измерение:

dimensions: {
  added(dimension) {
    dimension.qNullSuppression = true;
  }
}

Consuming data. Потребление данных

Access layout

Вы можете получить доступ к layout Generic Object через набор предопределенных hooks.

useLayout

useLayout возвращает evaluated layout свойств Generic Object:

import { useLayout } from '@nebula.js/stardust';

export default function () {
  return {
    qae: {
      properties: {
        qHyperCubeDef: {},
        simpleMath: {
          qValueExpression: {
            qExpr: '1+1',
          },
        },
      },
    },
    component() {
      const layout = useLayout();
      console.log(layout); // { qHyperCube: {/* HyperCube Layout */}, simpleMath: 2 }
    },
  };
}

Вы должны useEffectпри наблюдении изменений на layout:

const layout = useLayout();

useEffect(() => {
  // do some heavy update
}, [layout]);

useAppLayout

useAppLayoutвозвращает NxAppLayout, к которому вы в данный момент подключены:

import { useAppLayout } from '@nebula.js/stardust';

export default function () {
  return {
    component() {
      const appLayout = useAppLayout();
      console.log(appLayout); // { qTitle: 'App title', qLocaleInfo: {/* */ } }
    },
  };
}

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

Models. Модели

Помимо макетов приложения и универсального объекта, у вас есть полный доступ к API, созданным с помощью enigma.js. Эти API-интерфейсы генерируются из схемы JSON-RPC и раскрывают всю мощь Associate Engine Qlik.

useModel

useModelвозвращает сгенерированный API Generic Object :

import { useModel } from '@nebula.js/stardust';

export default function () {
  return {
    component() {
      const model = useModel();
      model.getInfo().then((info) => {
        console.log(info);
      });
    },
  };
}

Общие операции в этом API:

• делать выбор с помощью beginSelections,  selectHyperCubeValues и endSelections
• получить больше данных с getHyperCubeData

useApp

useAppвозвращает сгенерированный API Doc:

import { useApp } from '@nebula.js/stardust';

export default function () {
  return {
    component() {
      const app = useApp();
      app.clearAll();
    },
  };
}

Общие операции в этом API:

• изменять стек выбора с clearAll,  back,forward
• создавать и применять закладки с помощью createBookmark и applyBookmark

useGlobal

useGlobalвозвращает сгенерированный API Global :

import { useGlobal } from '@nebula.js/stardust';

export default function () {
  return {
    component() {
      const g = useGlobal();
      g.engineVersion().then((v) => {
        console.log(v);
      });
    },
  };
}

Общие операции в этом API:

• получить список приложений с getDocList

HyperCube introduction. Введение в HyperCube

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

Конфигурация HyperCubeDef

Не все свойства одинаково важны, и есть несколько ключевых, о которых нужно помнить при настройке HyperCubeDef.

qMode

Хотя вам может не потребоваться qModeявно устанавливать, поскольку по умолчанию используется простейший режим 'S', важно знать, какое влияние он оказывает на структуру данных.

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

qMode: 'T', или древовидный режим , дает вам структуру, напоминающую дерево и подходящую для визуализации древовидных визуализаций; древовидная карта, упаковка кругов, солнечные лучи, дендрограмма, решётка и т. д.

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

qDimensions и qMeasures

qDimensionsи qMeasuresявляются столбцами вашей «таблицы», нет явного ограничения на их количество, которое вы можете добавить, но часто существует ограничение на количество измерений и мер, которые может обрабатывать определенная диаграмма, и вам нужно сохранить это количество из них в виду, когда вы укажете qInitialDataFetch.

qInitialDataFetch

Ассоциативный движок Qlik – это решение на основе памяти, что означает, что объем данных, которые он может обрабатывать, полностью зависит от ресурсов памяти, к которым у него есть доступ. Таким образом, он может содержать миллиарды значений данных, и поэтому количество строк в гиперкубе также потенциально может достигать миллиардов.

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

qHyperCubeDef: {
  qInitialDataFetch: [{ qLeft: 0, qTop: 0, qHeight: 50, qWidth: 4 }];
}

Если вы думаете о прямой таблице как о сетке, из которой вы хотите извлечь некоторые данные, тогда qLeftи qTop– это верхний левый угол подмножества, которое вы хотите извлечь, а qHeightи qWidth– количество строк и столбцов.

Однако существует максимальный предел в 10 000 ячеек, которые вы можете извлечь за один раз, и это количество вызывает ошибку. Поэтому вам нужно следить за количеством столбцов может потребоваться для обеспечения общей не превышает 10 000. Если вы, например , знаете , что вы никогда не нужно больше , чем 4 колонки, то вы можете установить qHeightна 10000/4:

qInitialDataFetch: [{ qLeft: 0, qTop: 0, qHeight: 2500, qWidth: 4 }];

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

Потребление HyperCube

Выход, или компоновка , из HyperCubeDefявляется гиперкубом . В макете он расположен в том же месте, что и вы определили в своих свойствах, но без Def, например ввода:

{
  properties: {
    qHyperCubeDef: {},
    another: {
      one: {
        qHyperCubeDef: {}
      }
    }
  }
}

приводит к выводу:

{
  layout: {
    qHyperCube: {},
    another: {
      one: {
        qHyperCube: {}
      }
    }
  }
}

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

Страницы данных

На страницах данных содержатся фактические значения данных гиперкуба, где именно и какая структура они имеют, зависит от qModeзначения, которое вы установили ранее. Для режима 'S'это место qDataPages, которое, в свою очередь, содержит qAreaи qMatrix.

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

qDataPages: [
  {
    qMatrix: [
      [
        // first row
        { qText: '2 Fast 2 Furious', qNum: 'NaN', qElemNumber: 447, qState: 'O' }, // NxCell
        { qText: '6.2', qNum: 6.2, qElemNumber: 0, qState: 'L' },
      ],
      [
        // second
        { qText: '2 Guns', qNum: 'NaN', qElemNumber: 681, qState: 'O' },
        { qText: '6.6', qNum: 6.6, qElemNumber: 0, qState: 'L' },
      ],
    ],
    qArea: { qTop: 0, qLeft: 0, qWidth: 2, qHeight: 2 },
  },
];

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

// color scheme
const colors = ['#26A0A7', '#79D69F', '#F9EC86', '#EC983D'];

const cellColor = colors[cell.qElemNumber % colors.length];

Это свойство также необходимо отслеживать, когда вы хотите сделать выбор в своей диаграмме.

Получение дополнительных данных

Из-за ограничения объема данных, которые вы можете получить в исходном макете, могут возникнуть ситуации, когда вам потребуется получить остальные данные, если вы хотите отобразить их больше. Вы можете сделать это с помощью методов, представленных в модели универсального объекта. Какой метод использовать, опять же, зависит qModeот гиперкуба, для 'S'режима это GetHyperCubeData .

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

import { useModel, useLayout, useEffect } from '@nebula.js/stardust';

const NUM_CELLS_PER_PAGE = 10000;
const MAX_PAGES = 10;
// ...
component() {
  const model = useModel();
  const layout = useLayout();

  useEffect(() => {
    const Y = layout.qHyperCube.qSize.qcy;
    const X = layout.qHyperCube.qSize.qcx;

    const HEIGHT_PER_PAGE = Math.ceil(NUM_CELLS_PER_PAGE / X);
    const NUM_PAGES = Math.floor(MAX_PAGES, Math.ceil(Y / HEIGHT_PER_PAGE));

    const pagesToFetch = [];
    for (let i = 0; i < NUM_PAGES; i++) {
      pagesToFetch.push({ qLeft: 0, qTop: i * HEIGHT_PER_PAGE, qHeight: HEIGHT_PER_PAGE, qWidth: X });
    }

    Promise.all(pagesToFetch.map((page) => model.getHyperCubeData('/qHyperCubeDef', [page]))).then((pages) => {
      console.log(pages);
    });
  }, [layout]);

}

Однако вы должны быть очень осторожны при динамической выборке таких данных, имейте в виду, что размер куба может исчисляться миллионами, выборка такого большого набора данных может занять время и создать очень плохое взаимодействие с пользователем. В предыдущем примере максимальное количество страниц установлено равным 10, так что всего выбирается не более 100 000 значений.

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

• getHyperCubeBinnedData связывает точки данных в группы и отлично подходит для тепловых карт и 2D-графиков плотности.
• getHyperCubeContinuousData уменьшает количество точек в непрерывном измерении и отлично подходит для временных данных.
• getHyperCubeReducedData выполняет некоторую магию вейвлетов и отлично подходит для мини-диаграмм.

Selecting data. Выбор данных

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

Applying selections. Применение выделений

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

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

import { useModel } from '@nebula.js/stardust';
// ...
component() {
  const model = useModel();

  useEffect(() => {
    model.selectHyperCubeCells('/qHyperCubeDef', [1], []);
  }, [model])
}

Шаблоны выбора. Selection patterns

Есть два разных шаблона выбора: мгновенный и модальный.

Мгновенный выбор. Instant selections

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

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

Модальный выбор. Modal selections

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

В следующем примере пользователь сначала выбирает одно значение на линейчатой ​​диаграмме, после чего другие диаграммы обновляются, как и раньше. Однако гистограмма по-прежнему содержит все доступные данные и позволяет пользователю выбрать другое значение перед подтверждением изменений и обновлением самой гистограммы:

Чтобы реализовать этот тип паттерна, вам необходимо выполнить несколько простых шагов useSelectionsв сочетании с useModelними:

1. Войдите в модальное состояние, позвонив beginSelections.
2. Выберите значения.
3. Обеспечьте визуальную обратную связь с пользователем о том, что было выбрано, например, изменив прозрачность выбранных значений.
4. Следите за выходом из модального состояния, чтобы сбросить визуальную обратную связь.

import { useModel, useSelections, useElement } from '@nebula.js/stardust';
// ...
component() {
  const element = useElement();
  const model = useModel();
  const selections = useSelections();

  useEffect(() => {
    const clicked = () => {
      const clickedOnRow = 1;

      // 1. enter modal state if not already in it
      if (!selections.isActive()) {
        selections.beginSelections(['/qHyperCubeDef']);
      }
      // 2. select the clicked row
      model.selectHyperCubeCells('/qHyperCubeDef', [clickedOnRow], []);
    }

    element.addEventListener('click', clicked);
    return () => {
      element.removeEventListener('click', clicked);
    }
  }, [element, model, selections]);

  useEffect(() => {
    if (layout.qSelectionInfo.qInSelections) {
      // 3. update with visual feedback on active selections
      // YOUR CODE HERE
    } else {
      // 4. normal update
      // YOUR CODE HERE
    }
  }, [layout]);
}

Сообщение nebula.js – Qlik Sense API Javascript библиотека. Примеры появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Engine JSON API

Qlik Engine JSON API представляет собой протокол WebSocket, который использует JSON для передачи информации между Qlik Sense Engine и клиентами. Qlik Engine JSON API состоит из набора объектов , представляющих приложения, списки и так далее. Эти объекты организованы в иерархическую структуру. Когда вы отправляете запросы в API, вы выполняете действия над этими объектами.

Qlik Engine JSON API может быть использован для:

• создания приложений и загрузки данных
• создания историй (data stories)
• получение системной информации

Типичные ситуации, в которых вы бы использовали JSON API Qlik Engine:

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

Extension API

API расширения (Extension API) состоит из методов и свойств, используемых для создания пользовательских расширений визуализации (custom visualization extensions).

Backend API

Backend API состоит из нескольких методов и используется для связи с ассоциативным механизмом Qlik. Он предоставляет вспомогательные функции для вызовов ассоциативного механизма Qlik и доступ к данным ассоциативного механизма Qlik. Вкратце, Backend API – это оболочка для выбранных методов Qlik Engine JSON API, но с той разницей, что Backend API знает о контексте, то есть текущем соединении WebSocket и приложении Qlik Sense.

Capability APIs

API-интерфейсы Capability представляют собой набор API-интерфейсов JavaScript, которые позволяют легко встраивать контент Qlik Sense в веб-страницу. С помощью всего лишь нескольких строк кода можно создать визуализацию, использующую библиотеку визуализации Qlik Sense.

API-интерфейсы Capability зависят от AngularJS и RequireJS, поэтому вам необходимо принять это во внимание при интеграции API-возможностей Capability в существующий проект, в котором также используются эти библиотеки.

Термин «API-интерфейс Capability» был введен в Qlik Sense 2.1. Некоторые из API-интерфейсов Capability были доступны до этой версии, опубликованной под названием Mashup API.

Root API

Root API является внешним интерфейсом Qlik Sense и доступен в виде пространства имен qlik. Он предоставляет методы открытия приложений, получения ссылки на текущее приложение, установки определенного языка и регистрации обратных вызовов для обработки ошибок. Корневой API также содержит методы для перечисления доступных приложений и расширений, а также для регистрации расширений (extensions), которые вы создаете на лету (используя API визуализации – Visualization API).

App API

Метод qlik.openApp является точкой входа в API приложения и возвращает объекты JavaScript приложения с методами для работы с приложением Qlik Sense, к которому вы подключены.

Bookmark API

Bookmark API содержит методы для работы с закладками в приложении Qlik Sense, к которому вы подключены.

Field API

Метод qlik.app.field является точкой входа в Field API. Он возвращает объект QField с методами и свойствами, которые можно использовать для управления полем.

Global API

Метод qlik.global является точкой входа в Global API. Возвращает объект JavaScript с глобальными методами.

Navigation API

Navigation API (API навигации) позволяет вам перемещаться в приложении Qlik Sense и предназначен для использования в виджетах и ​​расширениях визуализации, и не будет работать в сценариях Mashup.

Selection API

Selection API является внешним интерфейсом для изменения выборки по модели данных Qlik Sense (фильтрация данных) и позволяет разработчикам работать с ассоциативной моделью.

Table API

Table API (API таблиц) позволяет разработчикам работать с табличными данными, возвращаемыми из ассоциативного механизма Qlik, не имея глубоких знаний о внутренних конструкциях, таких как, например, Гиперкуб (Hypercube).

Theme API

Theme API – это внешний интерфейс для тем Qlik Sense. Он позволяет настраивать визуализации, включая расширения и виджеты, вне Qlik Sense.

Variable API

Variable API – это внешний интерфейс для управления переменными Qlik Sense.

Visualization API

Visualization API (API визуализации) – это внешний интерфейс для визуализаций Qlik Sense. Вы можете создавать новые визуализации на лету на основе объекта сессии. Эти визуализации не сохраняются в приложении. Вы также можете получить уже существующие визуализации из приложения, используя Visualization API.

Custom Component API

API для создания пользовательских компонентов (собственных компонентов).

Пользовательские компоненты содержат следующие элементы:

• Файл определения (QEXT).
• Основной файл JavaScript.
• Дополнительные ресурсы, такие как библиотеки JavaScript, изображения и шрифты.

Пользовательские компоненты – это в основном директивы AngularJS. Цель файла JavaScript – вернуть подпись директивы AngularJS.

App Integration API

Используется для embedded аналитика, позволяет генерировать ссылки url для встраивания в iframe.

Single Integration API

Single Integration API позволяет создавать URL-адреса, который возвращает полную HTML-страницу, содержащую, например, встроенную визуализацию Qlik Sense . Этот URL-адрес можно встроить в веб-страницу, например, включив его в iframe.

qlik-visual web component

Qlik-Visual Web Component – это определение пользовательского элемента <qlik-visual>, которое использует API визуализации и представляет его как веб-компонент. Он позволяет создавать и изменять визуализации на лету, не используя клиент Qlik Sense.

Qlik Visual поддерживает:

• Отображение существующей визуализации (путем определения видимости элемента) на веб-странице.
• Создание визуализаций на лету с использованием существующего приложения путем внедрения их в веб-страницу.
• Динамически изменяющие свойства и атрибуты визуализаций.

enigma.js

Библиотека enigma.js помогает вам общаться с ассоциативным механизмом Qlik в Qlik Sense и Qlik Sense Desktop. Вы можете использовать его для создания своего собственного клиента или для создания собственного сервиса Node.js. Примерами использования могут быть создание ваших собственных аналитических инструментов на основе браузера, серверных служб или сценариев командной строки.

Библиотека enigma.js может использоваться в качестве SDK или для выполнения операций CRUD (то есть создания, чтения, обновления и удаления) в приложениях и в сущностях приложений.

enigma.js – это библиотека, предназначенная исключительно для Engine API (websocket). Экспорт изображений / PDF-файлов – это API-интерфейсы REST в Qlik Sense для других служб (отчеты), которые предоставляются через интерфейс capability API:

• https://help.qlik.com/en-US/sense-developer/September2019/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/VisualizationAPI/exportImg-method.htm
• https://help.qlik.com/en-US/sense-developer/September2019/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/VisualizationAPI/exportPdf-method.htm

Официальная документация Enigma.JS: https://github.com/qlik-oss/enigma.js

enigma-go

Библиотека enigma-go помогает вам общаться с ассоциативным механизмом Qlik в Qlik Sense и Qlik Sense Desktop. Примерами использования могут быть создание ваших собственных аналитических инструментов, серверных служб или других инструментов, взаимодействующих с ассоциативным механизмом Qlik. Библиотека enigma-go может использоваться в качестве SDK или для выполнения операций CRUD (то есть создания, чтения, обновления и удаления) в приложениях и в сущностях приложений.

leonardo-ui

leonardo-ui – это библиотека с открытым исходным кодом, которая используется в Qlik Sense и предоставляет множество графических компонентов пользовательского интерфейса. Разметка этих компонентов может использоваться в расширениях, гибридных приложениях и виджетах. Библиотека поддерживается и поддерживается Qlik. leonardo-ui можно использовать как с Qlik Sense, так и с Qlik Sense Desktop.

picasso.js

Библиотека диаграмм picasso.js оптимизирована для создания пользовательских, интерактивных и мощных визуализаций для платформы Qlik Sense Analytics.

nebula.js

nebula.js – это библиотека с открытым исходным кодом, разработанная на GitHub. nebula.js – это набор библиотек и API-интерфейсов JavaScript, не зависящих от продукта и инфраструктуры, который помогает разработчикам интегрировать визуализации и гибридные приложения поверх ассоциативного механизма Qlik в Qlik Sense Desktop , Qlik Sense Enterprise для Windows и SaaS-версиях Qlik Sense . Он предлагает разработчикам альтернативу capability APIs, которые исторически использовались для создания гибридных приложений.

Чтобы использовать nebula.js , вы должны быть знакомы с JavaScript, promises, websockets и библиотеками с открытым исходным кодом. Вам понадобится Node.js и доступ к ассоциативному движку Qlik . Также будет полезно знание таких концепций Qlik, как generic objects и гиперкубы.

Qlik Explorer для разработчиков

Qlik Explorer для разработчиков – это инструмент, созданный для упрощения процесса интеграции функциональности Qlik Sense в другие среды.

Qlik Explorer для разработчиков обеспечивает быстрый доступ к соответствующей информации из вашей среды Qlik Sense, что, например, позволяет легко интегрировать визуализации Qlik Sense в существующий веб-сайт.

Автоматическое обновление
Qlik Explorer для разработчиков автоматически обновляется при появлении новой версии.

Как подключить Qlik Explorer к Qlik Sense Desktop Hub

В настройках вбиваете http://localhost:4848/

После подключения отобразится список приложений со свойствами и методами. Profit

Engine API Explorer в браузере

http://localhost:4848/dev-hub/engine-api-explorer

Скачать (DOCX, 661KB)

Подключение к API Qlik Engine

todo

Подключение к Qlik Sense API с помощью PowerShell

https://community.qlik.com/t5/Qlik-Sense-Integration/How-to-export-an-app-to-a-folder-using-API-and-Powershell/td-p/1608192

Qlik Sense python API client for QPS and QRS interfaces

https://developer.qlik.com/garden/570e73c36c8c33c066a0f11c

Пример подключения Python 3 к Qlik Sense Engine API

Для подключения и работы необходимо установить библиотеки:

pip3 install asyncio
pip3 install websocket-client
pip3 install requests_ntlm
pip3 install requests
pip3 install json

Дальше приведен скрипт подключения Python 3 к Qlik Sense Desktop:

from websocket import create_connection

import json

ws = create_connection("ws://localhost:4848/app/")

data=json.dumps({
    'jsonrpc': '2.0',
    'id': 2,
    'method': 'GetActiveDoc',
    'handle': 1,
    'params': ['C:\\Users\\User\\Documents\\Qlik\\Sense\\Apps\\Анализ продаж - простое приложение.qvf']
})

print("Sending req...")
ws.send(data)

print("Receiving...")
result = ws.recv()

print("Received '%s'" % result)

qclosed = ws.close()
print("Closed '%s'" % qclosed)

Результат работы скрипта:

>>> 
 RESTART: D:/QlikProject/Подключаемся к Qlik Sense из Python.py 
Sending req...
Receiving...
Received '{"jsonrpc":"2.0","method":"OnConnected","params":{"qSessionState":"SESSION_CREATED"}}'
Closed 'None'

Пример скрипта Python 3 для получения списка документов с hub Qlik Sense Desktop

from websocket import create_connection

import json

ws = create_connection("ws://localhost:4848/app/")

ws.send(json.dumps({
  "handle": -1,
  "method": "GetDocList",
  "params": [],
  "outKey": -1,
  "id": 1
}))

result = ws.recv()

while result:
    result=ws.recv()
    y = json.loads(result)
    print(y)

ws.close()

Список классов, свойств и методов https://betahelp.qlik.com/en-US/sense-developer/June2019/apis/EngineAPI/index.html

Подключаемся к Qlik Sense Engine API с помощью Node.JS

Рассматривается пример подключения к Qlik Sense Desktop

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:4848/app/engineData');

var request = {
    "handle": -1,
    "method": "GetDocList",
    "params": {},
    "outKey": -1,
    "id": 2
}

ws.onopen = function(event){
    ws.send(JSON.stringify(request));
    
    ws.onmessage = function (event) {
        var response = JSON.parse(event.data);

        if(response.method != ' OnConnected'){
            
            var obj = response.result;
            str = JSON.stringify(obj, null, 4);
            console.log(str);

        }
   }
}

Получаем перечень приложений Qlik Sense Desktop с помощью Enigma JS

const enigma = require('enigma.js');
const WebSocket = require('ws');
const schema = require('enigma.js/schemas/12.20.0.json');

// create a new session:
const session = enigma.create({
  schema,
  url: 'ws://localhost:4848/app/engineData',
  createSocket: url => new WebSocket(url),
});

// bind traffic events to log what is sent and received on the socket:
session.on('traffic:sent', data => console.log('sent:', data));
session.on('traffic:received', data => console.log('received:', data));

// open the socket and eventually receive the QIX global API, and then close
// the session:
session.open()
    .then(function(global) {
        global.getDocList().then(function(docList) {
            for (i = 0; i < docList.length; i++) {
                var AppName = docList[i].qDocName;
                console.log('App list:',JSON.stringify(AppName));
            }

            session.close();
        })
    });

Получаем свойства документа Qlik Sense с помощью запроса Enigma.JS через QS API Engine

const enigma = require('enigma.js');
const WebSocket = require('ws');
const schema = require('enigma.js/schemas/12.20.0.json');

// create a new session:
const session = enigma.create({
  schema,
  url: 'ws://localhost:4848/app/engineData',
  createSocket: url => new WebSocket(url),
});

// bind traffic events to log what is sent and received on the socket:
session.on('traffic:sent', data => console.log('sent:', data));
session.on('traffic:received', data => console.log('received:', data));

// open the socket and eventually receive the QIX global API, and then close
// the session:
session.open()
    .then(function(global) {
        global.getDocList().then(docs=>{
            global.openDoc("Анализ продаж - простое приложение.qvf").then(doc=>{
                doc.getAppProperties().then(appProp => {
                    console.log(doc)
                    console.log(appProp)
                })
            })
        })
    })

Пример получения списка полей в Qlik Sense API Engine, с помощью Enigma.JS

Пример актуален для Qlik Sense Desktop

const enigma = require('enigma.js');
const WebSocket = require('ws');
const schema = require('enigma.js/schemas/12.20.0.json');

// Создаем новую сессию:
const session = enigma.create({
  schema,
  url: 'ws://localhost:4848/app/engineData',
  createSocket: url => new WebSocket(url),
});

// Привязываем traffic events к log (что отправлено и что получено socket)
session.on('traffic:sent', data => console.log('sent:', data));
session.on('traffic:received', data => console.log('received:', data));

var config = { 
    schema: schema,
    docId: "Анализ продаж - простое приложение.qvf"
}

// Открываем сессию
session.open()
    .then(function(global) {

        global.openDoc(config.docId).then(function(doc){
            //Создаем SessionObject для FieldList
            doc.createSessionObject( {
                qFieldListDef: {
                    qShowSystem: false,
                    qShowHidden: false,
                    qShowSrcTables: true,
                    qShowSemantic: true,
                    qShowDerivedFields: true
                }, 
                qInfo: {
                    qId: "FieldList",
                    qType: "FieldList"
                }
            } ).then( function(list) {
                return list.getLayout();
                } ).then( function(listLayout) {
                    return listLayout.qFieldList.qItems;
                    } ).then( function(fieldItems) {
                        console.log(fieldItems)
                        } );
        })
    });

Пример javascript скрипта выгрузки / экспорта данных из QS, используя Enigma.JS

В результате выполнения JS-скрипта Вы получите qURL:

qUrl:”/Exports/1b2f8662-570b-4f77-b37b-94a4a347fe91\FileName(6bb5e11a-427a-4e77-ac30-e49abf602c87).xlsx”

Код запроса exportData Enigma.JS Qlik Sense Table API:

const enigma = require('enigma.js');
const WebSocket = require('ws');
const schema = require('enigma.js/schemas/12.20.0.json');

// Создаем новую сессию:
const session = enigma.create({
  schema,
  url: 'ws://localhost:4848/app/engineData',
  createSocket: url => new WebSocket(url),
});

// Привязываем traffic events к log (что отправлено и что получено socket)
session.on('traffic:sent', data => console.log('sent:', data));
session.on('traffic:received', data => console.log('received:', data));

var config = { 
    schema: schema,
    docId: "Анализ продаж - простое приложение.qvf"
}

var exportOptions = {
    "qFileType": "OOXML",
    "qPath": "/qHyperCubeDef",
    "qFileName": "FileName",
    "qExportState": 1
}

// Открываем сессию
session.open()
    .then((global) => {
        console.log('We are connected!')
        global.openDoc(config.docId)
        .then(doc => {
            doc.getObject('XPbGUe')
            .then((api) => {
                api.exportData(exportOptions)
                .then((reply) => {
                    console.log(reply);
                });
            });
        });
    });

Пример javascript скрипта выгрузки / экспорта данных из Qlik Sense Enterprise, используя Enigma.JS

Данные выгружаем из прямой таблицы, в поле TargetFieldSelect выбираем значение NeededValueToSelect.

const enigma = require('enigma.js');
const WebSocket = require('ws');
const path = require('path');
const fs = require('fs');
const fetch = require('node-fetch');

const schema = require('enigma.js/schemas/12.20.0.json');
const { Console } = require('console');

// Your Sense Enterprise installation hostname:
const engineHost = 'qlik.company.com';

// Make sure the port below is accessible from the machine where this example
// is executed. If you changed the QIX Engine port in your installation, change this:
const enginePort = 4747;

// 'engineData' is a special "app id" that indicates you only want to use the global
// QIX interface or session apps, change this to an existing app guid if you intend
// to open that app:
const appId = 'engineData';

// The Sense Enterprise-configured user directory for the user you want to identify
// as:
const userDirectory = 'QLIKDEV';

// The user to use when creating the session:
const userId = 'username';

// Path to a local folder containing the Sense Enterprise exported certificates:
const certificatesPath = './';

// Helper function to read the contents of the certificate files:
const readCert = (filename) => fs.readFileSync(path.resolve(__dirname, certificatesPath, filename));

const session = enigma.create({
  schema,
  url: `wss://${engineHost}:${enginePort}/app/${appId}`,
  // Notice the non-standard second parameter here, this is how you pass in
  // additional configuration to the 'ws' npm library, if you use a different
  // library you may configure this differently:
  createSocket: (url) => new WebSocket(url, {
    ca: [readCert('root.pem')],
    key: readCert('client_key.pem'),
    cert: readCert('client.pem'),
    headers: {
      'X-Qlik-User': `UserDirectory=${encodeURIComponent(userDirectory)}; UserId=${encodeURIComponent(userId)}`,
    },
  }),
});


// Открываем сессию
session.open()
    .then((global) => {
        global.openDoc('03h5ed8-5gdfb-40a5-b733-41fc4beb718e')
        .then(doc => {
            doc.getField("TargetFieldSelect")
            .then((appField) => {
              appField.select('NeededValueToSelect',false,0)
              .then((selectResult) => {
                console.log(selectResult);

                doc.getObject('jwAJbyL')
                .then((objectTable) => {
                  objectTable.getHyperCubeData("/qHyperCubeDef", [{ qTop: 0, qWidth: 10, qLeft: 0, qHeight: 1000 }])
                  .then(function (data) {
                    let dataSTR = JSON.stringify(data[0].qMatrix);
                    fs.writeFileSync('DataOutput.json', dataSTR);

                    session.close();
                  })
                })   

                
              })
            })
            
        })
              
                


    });

_____

Описание архитектуры Qlik Engine API

Структура объектов

Схемка сделана “на глаз”, но вероятно так и работает.

API Component Overview

MindMap API Integration

Схема по-умолчанию для процесса authenticate (default flowchart)

YouTube Enigma.JS Qlik Sense API Development

Youtube Другие видео по Qlik Sense API

Полезные ссылки по Enigma.JS и Qlik Sense API

• https://dev.to/qlikbranch/getting-started-with-qlik-core-2781 – Getting Started with Qlik Core
• https://branch-blog.qlik.com/system-integration-with-qliks-apis-why-and-how-1663025cf54d – System Integration with Qlik’s APIs — Why and How
• https://alcmst.net/2019/03/01/quiz-sense-who-wants-to-be-a-qlikionnaire/ – Quiz Sense – Who wants to be a Qlikionnaire?

_____

Сообщение Руководство разработчика API – Справочник по Qlik Sense API появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.