Не делай этого !!!  

Почему не нужно использовать вызовы API

• вы можете легко получить утечку памяти или «утечку общих объектов», когда вы создаете множество общих объектов.
• вы можете легко потерять контроль над всеми работающими функциями обратного вызова при повторной проверке общих объектов.
• если пользователь делает снимок, вызовы API будут обращаться к последней версии данных, а не к той, что в снимке, и, возможно, дадут неправильные данные.
• если пользователь попытается экспортировать ваше расширение в PDF или Excel, оно может сломаться, поскольку служба, отвечающая за этот экспорт, не имеет доступа к оперативным данным, а только к моментальному снимку.

Что нужно делать вместо этого

initialProperties: {
                moneyFormat: {
                    qStringExpression: '=MoneyFormat'
                },
                qMeasureListDef: {
                    qType: "measure",
                    qData: {
                        qMeasure: "/qMeasure"
                    }
                },
                qDimensionListDef: {
                    qType: "dimension",
                    qData: {
                        qDim: "/qDim",
                        qDimInfos: "/qDimInfos"
                    }
                },
                qVariableListDef: {
                    qType: "variable",
                    qShowReserved: true,
                    qShowConfig: true
                },
                qFieldListDef: {
                    qShowSystem: true,
                    qShowHidden: true,
                    qShowSemantic: true,
                    qShowSrcTables: true,
                    qShowDerivedFields: true,
                    qShowImplicit: true
                }
            }

Когда следует использовать эти вызовы API

Источник

Сообщение Доступ к системным данным и переменным в Extension Qlik Sense появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

В этой серии руководств мы собираемся создать расширение Qlik Sense с использованием Nebula.js и React, используя Recharts библиотеки построения диаграмм React. Recharts — это компонуемая библиотека диаграмм компонентов React, созданная на основе D3. Вы можете найти домашнюю страницу библиотеки здесь .

В частности, мы собираемся создать расширение диаграммы с областями на основе некоторых данных о COVID-19. Я знаю, что это не супер оригинально, но он научит вас основам создания расширений в Nebula и React.

Что вы узнаете

• Как начать создавать расширения Qlik Sense с помощью Nebula.js и React
• Основы хуков React
• Библиотека графиков Recharts

Что вам нужно

• Qlik Sense Desktop или Qlik Sense Business Cloud
• Node и NPM, установленные на вашем компьютере, и редактор кода
• Доступ к нашему стартовому проекту Nebula React доступен здесь: https://github.com/datalitlearning/nebula-react-starter .

Проект github Nebula — React

Загрузите стартовый проект Nebula — React с Github и запустите пользовательский интерфейс Nebula.js.

Мы создали стартовый проект, чтобы избежать головной боли при настройке. Это тесно связано с примером React на странице github Nebula.js. Чтобы начать работу с ним, перейдите к: https://github.com/datalitlearning/nebula-react-starter

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

npm i
npm run start

Это запустит пользовательский интерфейс, в котором вы можете ввести свои учетные данные сайта Qlik Sense и подключиться к своему сайту. Он должен выглядеть примерно так, как показано ниже:

Подключение к вашему сайту Qlik Sense с помощью Nebula.js

Если у вас возникли проблемы с подключением к вашему сайту, щелкните знак вопроса, чтобы получить помощь (рядом с пунктом «Подключиться к движку» в пользовательском интерфейсе), вам необходимо передать URL-адрес Websocket для подключения к вашему сайту Qlik.

После этого выберите приложение, и запустится среда разработки Nebula.js! 

Обратите внимание, что в этом руководстве мы будем использовать данные COVD -19. Я предварительно загрузил эти данные в qvf-файл, который можно найти в репозитории руководства на GitHub.

Теперь ваша среда разработки nebula должна работать на http://localhost:8000 и, по сути, представляет собой упрощенный пользовательский интерфейс Qlik, который вы можете использовать для разработки своего расширения. При первом запуске вы получите бесконечно работающий счетчик, который выглядит примерно так:

Не идеально. Nebula.js ищет ваше скомпилированное расширение, но пока ничего не может найти. Давайте исправим это, открыв новое окно терминала и перейдя в корень вашего проекта туманности…

cd nebula-react-starter

далее запускаем сборку

npm run build

Ура, теперь мы должны увидеть наше расширение в пользовательском интерфейсе Nebula.js…

Теперь мы запускаем наш сервер разработки ( через npm run start ) и перекомпилируем наше расширение при внесении изменений ( через npm run build ).

Вы также заметите, что у нас есть новая папка dist в наших файлах проекта, она содержит наш скомпилированный код расширения, который подбирает nebula.

Проверка файлов проекта

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

data.js: содержит цель данных. Цель данных — это способ определить, где находятся динамические HyperCubeDef в свойствах универсального объекта. Для каждого целевого объекта данных вы можете указать дополнительные сведения, такие как максимальное/минимальное количество измерений и показателей.

extDefinition.js : он будет содержать определение нашей панели свойств, но пока должен быть пустым объектом.

object-properties.js : свойства нашего расширения, включая выборку данных HyperCube и те, которые мы хотим изменить с помощью нашей панели свойств.

root.jsx : это точка входа в реакцию. Мы экспортируем функцию рендеринга , которая содержит метод рендеринга React DOM. Он отображает JSX в переменную элемента , которая передается в функцию при вызове в index.js.

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

Начало работы с Recharts

Я бы порекомендовал вам прочитать руководство по началу работы с Rechart, прежде чем мы начнем, чтобы у вас было некоторое представление о библиотеке.

Мы начнем с установки библиотеки и импорта компонентов в наш проект.

В терминальном режиме

npm install recharts --save

Затем создайте новый файл с именем App.jsx в папке src . В этом компоненте мы импортируем и визуализируем диаграмму областей Recharts, используя некоторые фиктивные данные. Нам также нужно импортировать и отображать App.jsx в нашем файле root.jsx .

App.jsx

import React from 'react';
import { XAxis, YAxis, AreaChart, Area } from 'recharts';

const App = () => {

  const data = [
    {
      name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
    },
    {
      name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
    },
    {
      name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
    },
    {
      name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
    },
    {
      name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
    },
    {
      name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
    },
    {
      name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
    },
  ];

  return (
    <AreaChart 
      width={500}
      height={400}
      data={data}
    >
      <XAxis dataKey="name" />
      <YAxis />
      <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
      <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
      <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
    </AreaChart>
  );
};

export default App;

root.jsx

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App'

export function render(element) {
  ReactDOM.render(<App />, element);
}

export function teardown(element) {
  ReactDOM.unmountComponentAtNode(element);
}

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

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

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

Использование данных из нашего HyperCube

Теперь мы возьмем данные из нашего гиперкуба и вставим их в нашу диаграмму. Для этого мы будем использовать пользовательские хуки Nebula для получения данных из нашего движка.

Пользовательские хуки — это механизм повторного использования логики с отслеживанием состояния.

В index.js мы уже используем два таких хука: useElement (который получает HTMLElement, в который визуализируется эта визуализация) и useLayout (который получает макет универсального объекта, связанного с этой визуализацией).

Гиперкуб Qlik находится в макете универсального объекта, поэтому давайте сохраним его в переменной с именем hc:

const hc = layout.qHyperCube

Теперь ваш index.js должен выглядеть так, как показано ниже. Вы также можете консольно войти в hc и посмотреть на объект в консоли. Обратите внимание, что когда вы добавляете в расширение измерения и меры , данные в hc.qDataPages[0].qMatrix обновляются.

index.js

import { useElement, useLayout, useEffect } from '@nebula.js/stardust';
import properties from './object-properties';
import data from './data';
import { render } from './root';

export default function supernova() {
  return {
    qae: {
      properties,
      data,
    },
    component() {
      const el = useElement();
      const layout = useLayout();
      const hc = layout.qHyperCube;

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

      render(el, hc, { layout });
    },
  };
}

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

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

Объясняя Nebula / React Hooks

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

Хуки имеют ряд преимуществ, включая упрощение повторного использования логики с сохранением состояния между компонентами и упрощение нашего кода React (нам больше не нужно использовать компоненты класса!)

Библиотека Nebula.js создала реализацию в стиле хуков для реализации повторно используемой логики.

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

На самом деле, Nebula.js поставляется со своими собственными хуками useState& useEffect, которые выполняют те же функции, что и собственные хуки React. Все пользовательские хуки в библиотеке Nebula можно найти здесь (с префиксом use ).

Вернемся к нашему коду..

Чтобы манипулировать нашими данными из HyperCube, нам нужно использовать useEffectхук Nebula.js.

Переданная функция useEffectбудет запущена после того, как рендеринг будет зафиксирован на экране.

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

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

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

Мы можем установить это в нашем файле data.js , который теперь должен выглядеть следующим образом:

data.js

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

Мы также собираемся добавить следующий код в раздел компонентов нашей функции supernova в нашем файле index.js .

// state to store our data used in our chart
const [seriesData, setSeriesData] = useState([]);

//state to store our dimension name
const [dimKey, setDimKey] = useState([]);

//state to store our measure names
const [measKeys, setMeasKeys] = useState([]);

//Array that we will populate with restructured data
const series = [];

Мы создаем 3 набора начального состояния для хранения:

• Реструктурированные данные, которые мы передадим на нашу диаграмму
• Массив, содержащий имя нашего измерения
• Массив, содержащий имена наших мер

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

Далее, в нашем useEffect, мы сопоставим наши данные HyperCube и создадим новый массив объектов. Обратите внимание, что в приведенном ниже коде мы сопоставляем hcData и помещаем объекты в массив с именем series , который содержит данные измерений и измерений в парах ключ-значение.

Затем мы помещаем эти данные вместе с именами измерений и показателей в состояние (строки 41–43 ниже). Наконец, мы добавляем эти данные в наш метод рендеринга и в root.jsx передаем их в наш компонент приложения.

index.js

import { useElement, useLayout, useEffect, useState } from '@nebula.js/stardust';
import properties from './object-properties';
import data from './data';
import { render } from './root';

export default function supernova() {
  return {
    qae: {
      properties,
      data,
    },
    component() {

      const el = useElement();
      const layout = useLayout();
      
      const [seriesData, setSeriesData] = useState([]);
      const [dimKey, setDimKey] = useState([]);
      const [measKeys, setMeasKeys] = useState([]);
      const hc = layout.qHyperCube;
      const series = [];

      useEffect(() => {

        const hcData =  hc.qDataPages[0].qMatrix;

        if (hcData.length === 0) return;

        const dim1 = hc.qDimensionInfo[0].qFallbackTitle;
        const meas1 = hc.qMeasureInfo[0].qFallbackTitle;
        const meas2 = hc.qMeasureInfo[1].qFallbackTitle;

        hcData.map(e => (
          series.push({
            [dim1]: e[0].qText,
            [meas1]: e[1].qText,
            [meas2]: e[2].qText,
          })
        ));

        setDimKey([dim1]);
        setMeasKeys([meas1, meas2]);
        setSeriesData(series);
      }, [layout]);

      render(el, seriesData, dimKey, measKeys, { layout });
    },
  };
}

root.jsx

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App'

export function render(element, seriesData, dimKey, measKeys) {
  ReactDOM.render(<App data={seriesData} dimKey={dimKey} measKeys={measKeys} />, element);
}

export function teardown(element) {
  ReactDOM.unmountComponentAtNode(element);
}

Итак, теперь у нас есть все данные, которые нам нужны в App.jsx . Теперь мы можем передать это в нашу диаграмму. Если вы помните ранее в этом руководстве, мы заметили, что нам нужно визуализировать компонент AreaChart для каждой визуализируемой линии/области. Для этого нам нужно сопоставить наши ключи измерений.

Мы также создали массив цветов для окрашивания наших компонентов Area.

import React from 'react';
import { XAxis, YAxis, AreaChart, Area } from 'recharts';

const App = ({ data, dimKey, measKeys }) => {

  const colors = ["#8884d8", "#82ca9d"]

  return (
    <AreaChart 
      width={500}
      height={400}
      data={data}
    >
      <XAxis dataKey={dimKey[0]} />
      <YAxis />
      {measKeys.map((m, i) => (
        <Area type="monotone" dataKey={m} stackId="1" stroke={colors[i]} fill={colors[i]} />
      ))}
    </AreaChart>
  );
};

export default App;

Теперь ваше расширение должно выглядеть примерно так, как показано ниже.

Делаем нашу диаграмму отзывчивой

Мы закончим написание кода в части 1 этого руководства, сделав нашу диаграмму адаптивной. К счастью, у Recharts есть хороший и простой пример этого на своем сайте, который можно найти здесь .

Они предоставляют компонент ResonsiveContainer , который мы можем обернуть вокруг нашей диаграммы, чтобы она расширялась до размера своего родительского контейнера. Мы можем импортировать и использовать это в App.jsx , как показано ниже.

import React from 'react';
import { XAxis, YAxis, AreaChart, Area, ResponsiveContainer } from 'recharts';

const App = ({ data, dimKey, measKeys }) => {

  const colors = ["#8884d8", "#82ca9d"]

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <ResponsiveContainer>
        <AreaChart 
          width={500}
          height={400}
          data={data}
        >
          <XAxis dataKey={dimKey[0]} />
          <YAxis />
          {measKeys.map((m, i) => (
            <Area type="monotone" dataKey={m} stackId="1" stroke={colors[i]} fill={colors[i]} />
          ))}
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
};

export default App;

Тестирование расширения в Qlik Sense

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

Запустите приведенную ниже команду в своем терминале

npm run sense

Это поместит наше расширение в новую папку в нашем репозитории. Затем мы можем заархивировать это и импортировать на наш сайт Qlik Sense.

И вот, у нас есть рабочее расширение, созданное с использованием Nebula.js и React!

Использованные материалы при создании статьи

• https://medium.com/data-lit/lets-build-a-qlik-sense-extension-with-nebula-js-react-part-1-2-44909ab15a47

Сообщение Как создать Qlik Sense Extension с помощью Nebula.js и React появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

В моем последнем посте я рассказал о надежных возможностях API-интерфейсов Qlik Sense (QS) для создания готовых визуальных метафор и способах их интеграции в экосистему Qlik. Естественным выбором для разработчиков при создании расширений QS на протяжении многих лет был Extension API , в  основном использующий ванильный JavaScript, jQuery и AngularJS.

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

Введите… Решение Qlik Sense с открытым исходным кодом — Nebula.js ! 

Nebula.js — это набор библиотек и API-интерфейсов JavaScript, не зависящих от продукта и платформы, которые помогают разработчикам интегрировать визуализации и гибридные приложения поверх Qlik Associative Engine в QS Desktop, QS Enterprise для Windows и SaaS-редакции Qlik Sense. Это руководство специально относится к выпуску QS SaaS. Nebula.js предлагает разработчикам альтернативу API возможностей, которые исторически использовались для создания гибридных приложений. В этом руководстве основное внимание будет уделено разработке новой визуализации на основе пользовательского сценария с использованием Nebula.js и сторонней библиотеки визуализации D3.js. Наша цель — понять, как мы можем использовать Nebula.js для создания объекта расширения QS и реализации готовых возможностей визуализации в рамках SaaS .Платформа. В этом руководстве не делается акцент на части программирования D3.js, но обсуждается мотивация визуализации.

Сценарий пользователя. У организации, использующей Qlik Sense, есть новое требование по разработке визуального представления для понимания многомерного многомерного набора данных для своей организации. Их набор данных состоит из числовых значений, и они хотят сравнить несколько объектов вместе, чтобы проанализировать отношения между ними. Основываясь на этих требованиях, их инженер по визуализации данных представляет им «график с параллельными координатами». 

Итак, что такое график с параллельными координатами?

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

Основываясь на требованиях, давайте начнем с создания расширения QS с помощью Nebula.js .

Предпосылки :

1. Node.js (версия 10 или новее)
2. Терминал (например, Git Bash в Windows или Terminal в Mac)
3. IDE на ваш выбор, например, VS Code.
4. Существующая веб-интеграция или возможность ее создания в вашем арендаторе (особенно это относится к выпуску QS SaaS).
5. Приложение Qlik Sense с данными.

Шаг 1: Используйте интерфейс командной строки nebula.js для импорта необходимых пакетов. Команда помещает проект в папку /hello со следующей структурой:

• /src
• index.js — основная точка входа этой визуализации
• object-properties.js — свойства объекта, хранящиеся в приложении.
• data.js — конфигурация данных
• /test – Интеграционные тесты
• package.json

Команда:

npx @nebula.js/cli create hello --picasso none

Шаг 2: Запустите сервер разработки, выполнив:

cd hello
npm run start

Команда запускает локальный сервер разработки и открывает http://localhost:8080 в вашем браузере. Преимущество наличия сервера разработки с Nebula.js заключается в том, что он предоставляет интерактивный способ тестирования и редактирования вашего расширения без необходимости итеративного развертывания в QS каждый раз, когда вносится новое изменение.

Шаг 3: Настройте структуру данных.

Визуализации в QS основаны на определении гиперкуба (qHyperCubeDef). Следовательно, любой новый визуальный объект, который мы хотим добавить в экосистему QS, должен иметь определенную структуру данных. В Nebula.js у нас есть файл object-properties.js, который позволяет определить структуру нашего объекта.

const properties = {
  showTitles: true,
  qHyperCubeDef: {
    qInitialDataFetch: [{ qWidth: 30, qHeight: 200 }],
  }
}

Нам также необходимо установить цель данных в файле data.js, чтобы мы ссылались на правильное определение гиперкуба (важно отметить, если у вас есть несколько объектов qHyperCubeDef).

export default {
  targets: [
    {
      path:'/qHyperCubeDef',
    }
  ],
};

Шаг 4: Разработка расширения визуализации с использованием Nebula.js и D3.js.

Специальный код QS Nebula.js:

Теперь, когда у нас все готово, мы начинаем разработку нашего расширения с пользовательским объектом визуализации, используя файл index.js из нашего проекта.

Обратите внимание, что Nebula.js и его основной пакет @nebula.js/stardust построены на концепции настраиваемых хуков . Это может показаться знакомым людям, работающим с React.js . Хуки — это концепция, которая делает упор на повторно используемые составные функции, а не на классические объектно-ориентированные классы и наследование. Основные хуки, от которых мы зависим при разработке нашего объекта расширения, описаны ниже:

Метод, который помогает нам визуализировать наш объект визуализации, — это функция component(). Функция component() выполняется каждый раз, когда что-то, связанное с рендерингом объекта, изменяется, например, тема, модель данных, выборка данных, состояние компонента и т. д. Эту функцию можно сравнить с функцией paint() в Extension API.

Чтобы отобразить наши данные, нам сначала нужно получить доступ к макету через хук useLayout, а затем использовать его в сочетании с хуком useEffect. qDataPages [0].qMatrix гиперкуба содержит все данные (измерения и меры), используемые в среде QS, и нам нужно будет передать эти данные в нашу визуализацию на основе D3.js.

component() {
      const element = useElement();
      const layout = useLayout();
      useEffect(() => {
        var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix;
      }
                }

Чтобы увидеть значения данных и понять структуру qHyperCube , всегда полезно выполнить console.log(layout) . Фрагмент показывает значения, характерные для нашего варианта использования. Каждый раз, когда к нашему объекту расширения добавляется новое измерение или мера, qDataPages[0].qMatrix обновляется этими значениями .

Затем необходимые значения измерения для нашей диаграммы извлекаются из гиперкуба с использованием свойства qText из qDataPages[0].qMatrix, как показано ниже.

var data = qMatrix.map(function (d) {
          return {
            PetalLength: d[0].qText,
            PetalWidth: d[1].qText,
            SepalLength: d[2].qText,
            SepalWidth: d[3].qText,
            Species: d[4].qText,
          };
        });

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

var width = 1000;
var height = 400;
var id = "container_" + layout.qInfo.qId;
const elem_new = `<div id=${id}></div>`;
element.innerHTML = elem_new;

Наконец, мы вызываем функцию D3.js из хука useEffect.

viz(data, width, height, id);

Специальный код D3.js:

Функция viz() содержит весь наш код D3.js, который позволяет нам рисовать график в параллельных координатах. Во-первых, нам нужно добавить SVG к <div> , содержащему идентификатор нашего объекта QS, как показано ниже.

var svg = d3
          .select("#" + id)
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")"
          );

Затем мы получаем все измерения, кроме Species , для построения наших осей x и y.

var dimensions = Object.keys(data[0]).filter(function (d) {
          return d != "Species";
        });

        var y = {};
        for (var i in dimensions) {
          var name_new = dimensions[i];
          y[name_new] = d3.scaleLinear().domain([0, 8]).range([height, 0]);
        }

        var x = d3.scalePoint().range([0, width]).domain(dimensions);

Чтобы нарисовать линии для нашего графика с параллельными координатами, нам нужно построить функцию пути , которая будет брать строку из нашего qHyperCube и возвращать координаты x и y линии.

function path(d) {
          return d3.line()(
            dimensions.map(function (p) {
              return [x(p), y[p](d[p])];
            })
          );
        }

И, наконец, мы связываем все с нашим SVG, как показано ниже:

svg
  .selectAll("myPath")
  .data(data)
  .enter()
  .append("path")
  .attr("class", function (d) {
    return "line " + d.Species;
  })
  .attr("d", path)
  .style("fill", "none")
  .style("stroke", function (d) {
    return color(d.Species);
  })
  .style("opacity", 0.5);

Шаг 5: Развертывание расширения.

Чтобы создать наш проект, мы используем приведенную ниже команду, чтобы сгенерировать все файлы, доступные для чтения QS, и поместить их в папку /hello-ext. Затем эту папку можно сжать (.zip) и загрузить в раздел расширений консоли SaaS для использования в среде QS.

npm run sense

Dashboard:

Если вы только начинаете работать с Nebula.js, https://qlik.dev — отличное место для ознакомления с основами и подробного изучения связанных функций.

Исходный код этого проекта доступен по адресу: https://github.com/dipankarqlik/Nebula

Сообщение Создание Extension с помощью qlik nebula.js и D3.js – Tutorial появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

В этом уроке мы создадим расширение HelloWorld, используя nebula.js и Qlik Sense Desktop

Видео

Hello World Extension – What is Nebula.js?

Making Sense of Qlik APIs – Nebula CLI

Создайем расширение HelloWorld, используя nebula.js

В этом руководстве вы узнаете, как создать простое расширение, отображающее таблицу с использованием nebula.js.

В статье будут пройдены следующие шаги:

1. Создание проекта
2. Настройка структуры данных
3. Данные рендеринга
4. Выбор данных
5. Создание и загрузка расширения

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

Требования

Этот учебник требует, чтобы у вас было следующее:

• Node.js (версия 10 или новее)
• Терминал (например , Git Bash для Windows или Terminal.app для Mac)
• Современный веб-браузер, например Google Chrome
• Текстовый редактор или IDE по вашему выбору, например Visual Studio Code.
• Существующая веб-интеграция или возможность ее создания. Или клиент Qlik Sense Desktop.

Создание проекта

Самый быстрый способ начать работу — использовать nebula.js интерфейс командной строки:

npx @nebula.js/cli create hello --picasso none

Параметр --picasso none указывает команде не создавать шаблон визуализации Пикассо, другие параметры – minimalи barchart.

Команда формирует проект в папке /hello со следующей структурой:

• /src
  • index.js – Основная точка входа этой визуализации
  • object-properties.js – Свойства объекта, хранящиеся в приложении
  • data.js – Конфигурация данных
• /test – Интеграционные тесты
• package.json

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

Запуск сервера разработки

Запустите сервер разработки с помощью команды:

cd hello
npm run start

Команда запускает локальный сервер разработки и открывает http://localhost:8080 в вашем браузере.

Сервер разработки должен подключаться к ассоциативному движку Qlik, работающему в любом развертывании Qlik. Введите URL-адрес WebSocket, соответствующий используемому вами продукту Qlik.

Чтобы открыть WebSocket для движка, используйте один из следующих URI:

• Qlik Sense Enterprise: wss://server.domain.com:4747/ или wss://server.domain.com[/virtual proxy]/
• Qlik Sense Desktop: ws://localhost:4848/

Затем выберите приложение для подключения.

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

Любые обновления /src/index.js, влияющие на вывод, автоматически вызывают обновление визуализации, и вы сразу же видите изменения.

Настроить структуру данных

Простое Helloсообщение на самом деле не так уж полезно, пора добавить некоторые данные.

Добавьте qHyperCubeDef определение в object-properties.js:

const properties = {
  qHyperCubeDef: {
    qInitialDataFetch: [{ qWidth: 2, qHeight: 10 }],
  },
  // ...
};

Затем добавьте /qHyperCubeDef в качестве цели данных в data.js:

export default {
  targets: [
    {
      path: '/qHyperCubeDef',
    },
  ],
};

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

Добавьте измерение, нажав Add dimension и выбрав значение в появившемся меню. Затем проделайте то же самое с мерой – Add measures.

Данные рендеринга

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

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

// ...
component() {
  console.log(useLayout());
}

Затем вы можете useLayout в сочетании с useEffect отображать заголовки и строки данных в qHyperCube:

component() {
  const element = useElement();
  const layout = useLayout();

  useEffect(() => {
    if (layout.qSelectionInfo.qInSelections) {
      // skip rendering when in selection mode
      return;
    }
    const hc = layout.qHyperCube;

    // headers
    const columns = [...hc.qDimensionInfo, ...hc.qMeasureInfo].map((f) => f.qFallbackTitle);
    const header = `<thead><tr>${columns.map((c) => `<th>${c}</th>`).join('')}</tr></thead>`;

    // rows
    const rows = hc.qDataPages[0].qMatrix
      .map((row) => `<tr>${row.map((cell) => `<td>${cell.qText}</td>`).join('')}</tr>`)
      .join('');

    // table
    const table = `<table>${header}<tbody>${rows}</tbody></table>`;

    // output
    element.innerHTML = table;

  }, [element, layout])
}

Выберите данные

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

// rows
const rows = hc.qDataPages[0].qMatrix
  .map(
    (row, rowIdx) =>
      `<tr data-row="${rowIdx}">
        ${row.map((cell) => `<td>${cell.qText}</td>`).join('')}
      </tr>`
  )
  .join('');

Затем добавьте 'click'обработчик событий, elementкоторый выполняет следующие действия:

• Проверяет, что выбранный элемент является td
• Начинает выбор /qHyperCubeDef, если он еще не активирован
• Извлекает data-row индекс из tr
• Обновления selectedRows по клику data-row

const element = useElement();
const selections = useSelections();
const [selectedRows, setSelectedRows] = useState([]);

useEffect(() => {
  const listener = (e) => {
    if (e.target.tagName === 'TD') {
      if (!selections.isActive()) {
        selections.begin('/qHyperCubeDef');
      }
      const row = +e.target.parentElement.getAttribute('data-row');
      setSelectedRows((prev) => {
        if (prev.includes(row)) {
          return prev.filter((v) => v !== row);
        }
        return [...prev, row];
      });
    }
  };

  element.addEventListener('click', listener);

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

Затем обновите стиль выбранных строк в таблице всякий раз, когда они изменяются:

useEffect(() => {
  if (!layout.qSelectionInfo.qInSelections) {
    // no need to update when not in selection mode
    return;
  }
  element.querySelectorAll('tbody tr').forEach((tr) => {
    const idx = +tr.getAttribute('data-row');
    tr.style.backgroundColor = selectedRows.includes(idx) ? '#eee' : '';
  });
}, [element, selectedRows, layout]);

Наконец, примените выбранные значения через selections API:

useEffect(() => {
  if (selections.isActive()) {
    if (selectedRows.length) {
      selections.select({
        method: 'selectHyperCubeCells',
        params: ['/qHyperCubeDef', selectedRows, []],
      });
    } else {
      selections.select({
        method: 'resetMadeSelections',
        params: [],
      });
    }
  } else if (selectedRows.length) {
    setSelectedRows([]);
  }
}, [selections.isActive(), selectedRows]);

Создайте и загрузите расширение

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

Команда:

npm run build

генерирует пакет в /dist папку, и это все, что вам нужно для распространения диаграммы в виде пакета npm.

Однако Qlik Sense требует некоторых дополнительных файлов и немного другого формата для интерпретации диаграммы как расширения. Чтобы сгенерировать эти файлы, вы можете запустить команду:

npm run sense

Команда создает все файлы в папку /hello-ext, которую затем можно использовать в качестве расширения в Qlik Sense по вашему выбору.

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

Важная и неочевидный шаг для использования собранного расширения из директории hello-ext: Обязательно нужно удалить “-ext” из директории, иначе экстеншен не будет работать и появится приписка, что экстеншен не найден на сервере. Хотя в списке визуализаций в Qlik Sense он появится.

Сообщение Создание Extensions с помощью nebula.js – пример Hello World появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

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

Посмотреть проект на GitHub

Qlik Sense Extensions – Расширения Qlik Sense

Анатомия Qlik Extension

Расширения Qlik Sense позволяют создавать собственные объекты визуализации и функциональные объекты в приложении Qlik Sense. Расширения обычно используются для расширения возможностей визуализации Qlik для пользователей, использующих приложения Qlik в режиме самообслуживания. Дополнительные сведения об объектах расширения qlik sense можно найти на сайте Qlik здесь .

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

файл qext

файл qext в проекте расширения содержит объект json, который определяет метаданные объекта расширения. Имя файла — это уникальное имя, которое Qlik будет использовать для идентификации расширения, и оно должно совпадать с именем файла сценария.

как минимум, файл qext должен включать свойства имени и типа. (полные свойства qext можно найти здесь )

пример файла qext:

// hello-world.qext
{
    "name": "Hello World",
    "description": "Hello world example",
    "type": "visualization",
    "version": "1.0.0",
    "author": "john bellizzi"
}

Script File

файл сценария в проекте расширения — это файл javascript, содержащий всю логику работы вашего расширения. он определяет, как данные поступают в объект, что отображается в объекте, свойства, которые можно установить для объекта, и многое другое. имя файла должно соответствовать вашему файлу qext

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

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

Вот пример файла скрипта

define(["jquery"], function($) {
    return {
        paint: function($element, layout) {
            var $helloWorld = $(document.createElement("div"))
            $helloWorld.html('Hello World from the extension "SimpleHelloWorld"<br/>')
            $element.append($helloWorld)

            // layout contains the properties and calculated data of our object
            console.log(layout)
        },
    }
})

Deployment (Развертывание)

при развертывании расширения на сервере qlik правильным методом является сжатие всего каталога расширения в zip-файл, а затем переход к разделу расширений qmc и импорт заархивированного файла расширения. если расширение с таким именем уже развернуто, его необходимо предварительно удалить с сервера с помощью кнопки удаления в разделе расширений qmc

в qlik sense desktop проект расширения просто необходимо поместить в папку C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\. любые изменения в файлах расширения будут отражены в расширении при перезагрузке страницы приложения.

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

Для чего нужно qExt?

Библиотека qExt была создана по трем основным причинам.

1. обеспечить лучшую поддержку для компиляции javascript следующего поколения
2. упростить процесс развертывания расширений в средах qlik sense
3. сделать инициализацию новых проектов расширений более воспроизводимой с помощью стандартных шаблонов кода

JavaScript следующего поколения

скрипт, который вы видели на предыдущей странице (и javascript, который вы увидите во многих расширениях qlik), написан на ванильном javascript, который обычно можно использовать в большинстве современных веб-браузеров. это отличное начало для многих, кто начинает знакомиться с javascript, но многие разработчики хотят использовать более новые версии и возможности javascript, включая импорт модулей, функции стрелок и многое другое.

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

Оптимизация развертывания

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

Шаблоны

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

Введение в qExt Packages (Пакеты qExt)

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

1. qext-scripts — инструмент, который запускается в нашей среде разработки расширений для компиляции кода и развертывания его в средах qlik sense.
2. qext — инструмент cli, который позволяет нам создать новый проект расширения с определенным шаблоном.

qext-скрипты

если мы оглянемся назад на 3 проблемы, которые qExt решает в разделе почему qExt , qext-скрипты в основном помогают нам решить первые 2 проблемы. он поддерживает разработку javascript следующего поколения, компилируя наш код в обратно совместимый формат, и упрощает процесс развертывания, автоматически архивируя скомпилированный код и отправляя его в среды, которые нам нужно обновить.

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

$ npm install --save-dev qext-scripts

qext

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

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

$ npm install -g qext

Использование

Быстрый старт

прочитайте это, чтобы быстро установить инструменты qext и настроить новый проект

Установить QExt

установить основной инструмент qext глобально

npm install -g qext

Создать новое расширение

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

qext --create-extension my-extension --install
cd my-extension

по умолчанию qext установит starterшаблон проекта. другие шаблоны могут быть переданы через флаг шаблона. доступные шаблоны можно найти здесь

Build extension (сборка экстеншена)

обновите исходные файлы расширения по мере необходимости, затем запустите

npm run build

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

Просмотр экстеншена

запустите команду qext watch

npm run watch

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

Deploy extension

добавьте следующую конфигурацию развертывания в файл qext.config.json

{
    ...,
    "serverDeploy": {
        "host": "hostname",
        "isSecure": true,
        "windowsAuth": true
    }
}

затем запустите

npm run deploy

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

конфигурация serverDeploy может потребовать другие параметры в зависимости от конфигурации сервера. проверьте qExt config для полных настроек конфигурации

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

Templates (Шаблоны)

Шаблоны позволяют вам устанавливать предварительно определенные каталоги проектов и настройки при использовании инструмента qext cli. имя используемого шаблона может быть передано через -t, --template [type]флаг. ниже приведены шаблоны, которые вы можете выбрать

• vanilla-base — самый простой проект, настроенный для проектов, которые будут написаны с использованием vanilla javascript.
• base — базовый каталог проекта, который устанавливает минимальные исходные файлы, которые будут скомпилированы с использованием webpack и babel.
• starter — начальный шаблон, включая общие методы расширения и файлы конфигурации

Vanilla base

базовый шаблон vanilla — это самый простой шаблон, с которого вы можете начать, используя qExt.

Каталог проекта

├── src
│ ├── qext-template.qext
│ ├── qext-template.js
├── static
├── package.json
├── qext.config.json

каталог src

исходный каталог имеет 2 исходных файла qext-template.qextи qext-template.js. эти файлы следует переименовать в имя расширения, поскольку оно должно храниться в Qlik Sense (имя, которое вы видите при просмотре расширений в QMC).

qext.config.json

{
    "extension": "qext-template",
    "output": "./dist",
    "vanilla": {
        "entry": "./src",
        "static": "./static"
    }
}

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

Base

базовый шаблон — это базовый шаблон, используемый для компиляции исходного кода расширения с помощью babel и webpack.

Каталог проекта

├── src
│ ├── index.qext
│ ├── index.js
├── static
├── package.json
├── qext.config.json

каталог src

исходный каталог имеет 2 исходных файла, index.qextиindex.js

qext.config.json

{
    "extension": "qext-template",
    "output": "./dist",
    "compile": {
        "entry": "./src/index.js",
        "qext": "./src/index.qext",
        "static": "./static"
    }
}

файл конфигурации qext настроен с именем расширения, установленным на qext-template, и для сборки в режиме компиляции. когда проект будет построен, webpack скомпилирует файлы через файл compile.entry и поместит скомпилированные файлы в выходной каталог. он также скопирует файл qext в выходной каталог

Starter

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

Каталог проекта

├── src
│ ├── index.qext
│ ├── index.js
│ ├── style.css
│ ├── methods
│ │ ├── controller.js
│ │ ├── definition.js
│ │ ├── index.js
│ │ ├── initial-properties.js
│ │ ├── paint.js
│ │ ├── resize.js
│ │ ├── template.html
├── static
├── package.json
├── qext.config.json

qext.config.json

{
    "extension": "qext-template",
    "output": "./dist",
    "compile": {
        "entry": "./src/index.js",
        "qext": "./src/index.qext",
        "static": "./static"
    }
}

файл конфигурации qext настроен с именем расширения, установленным на qext-template, и для сборки в режиме компиляции. когда проект будет построен, webpack скомпилирует файлы через файл compile.entry и поместит скомпилированные файлы в выходной каталог. он также скопирует файл qext в выходной каталог

src/index.qext

{
    "type": "visualization",
    "name": "qExt Template"
}

это метаданные расширения. свойство name должно быть обновлено до имени, которое видит конечный пользователь на панели объектов расширения приложения qlik. файл будет переименован в extensionзначение свойства вqext.config.json

src/index.js

import { initialProperties, template, definition, controller, paint, resize } from "./methods"
import "./style.css"

window.define([], function() {
    return {
        initialProperties,
        template,
        definition,
        controller,
        paint,
        resize,
    }
})

src/style.css

это файл css, используемый для определения любых стилей для нашего объекта расширения. обратите внимание, что все классы должны быть предварительно выбраны с именем класса объекта расширения, которое будет в формате-qv-объект. например, если вы хотите установить цвет фона элемента с классом containerв вашем объекте расширения, а имя вашего расширения — my-extension, ваш css должен выглядеть так:

.my-extension-qv-object .container {
    background-color: lightblue;
}

src/methods/initial-properties.js

export default {
    qHyperCubeDef: {
        qDimensions: [],
        qMeasures: [],
        qInitialDataFetch: [],
    },
}

Initial-properties определяет определение свойств объекта при его первом создании пользователем qlik sense. шаблон устанавливает свойства с помощью HyperCubeDef, но это можно изменить на другие определения qlik, такие как ListObjectDef, или пользовательские свойства

src/methods/definition.js

export default {
    type: "items",
    component: "accordion",
    items: {
        settings: {
            uses: "settings",
        },
    },
}

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

больше о том, как настроить объект определения, можно найти здесь

src/methods/paint.js

export default function($element, layout) {
    // ..paint code here
}

функция рисования запускается каждый раз, когда происходит обновление макета нашего объекта расширения. это может быть вызвано изменением состояния выбора приложения qlik sense, а также изменением размера окна. это позволяет «перекрашивать» наше расширение при изменении, чтобы отображаемый вывод отображал самую последнюю версию данных, передаваемых в расширение. $elementсодержит ссылку элемента dom на объект расширения, который можно использовать для управления тем, что отображается в dom расширения, а layout содержит рассчитанный макет объекта расширения, включая любые выходные данные гиперкуба и настройки свойств.

src/methods/resize.js

export default function($element, layout) {
    // ..resize code here
}

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

src/methods/template.html

<div class="chart-container">qExt Template</div>

файл шаблона определяет исходный html, который отображается в нашем расширении. этот html можно увидеть в $elementdom, который передается функциям рисования и изменения размера.

src/methods/controller.js

export default [
    "$scope",
    "$element",
    function($scope, $element) {
        // ..controller code here
    },
]

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

src/methods/index.js

export { default as initialProperties } from "./initial-properties"
export { default as template } from "./template.html"
export { default as definition } from "./definition"
export { default as controller } from "./controller"
export { default as paint } from "./paint"
export { default as resize } from "./resize"

этот файл экспортирует все модули из methodsкаталога

Configuration

CLI Flags (Флаги командной строки)

qext Config

vanilla

compile

serverDeploy

desktopDeploy

Использованные источники

1. https://opensrc.axisgroup.com/qext/
2. https://medium.com/@jbellizzi/new-qext-277121a59b93
3. https://github.com/axisgroup/qExt

Сообщение qExt v2.0 – Extension Development Environment (Qlik Sense) появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Введение в свойства расширения. Что такое панель свойств?

Перед тем, как перейти к разработке Qlik Sense Visualization Extensions, необходимо понять основные принципы определения и использования свойств в Qlik Sense расширениях.

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

Определение панели свойств

Свойства структурированы иерархически (есть еще такой термин, как аккордеон панели свойств):

A – Sections
B – Header
C – Items

Есть еще одна иллюстрация (с сайта http://qliksite.io/tutorials/qliksense-visualization-extensions/part-01/06-Introduction-to-Using-Properties/):

Accordion

• Accordion sections
  • Section headers
    • Property items

Свойства добавляются путем их определения в свойстве definition в файле JavaScript. 

Есть два способа определения свойств:

• Повторное использование существующих встроенных свойств (Reusing existing, built-in, properties)
• Создать настраиваемые свойства (custom properties)

Reusable Properties:

• Dimensions
• Measures
• Sorting
• Appearance
• Add-Ons

Повторное использование существующих свойств

Вот некоторые типичные свойства, используемые для наиболее распространенных встроенных визуализаций Qlik Sense:

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

Определение свойств

Если вы создаете расширение визуализации без defining a properties panel, Qlik Sense по умолчанию будет включать раздел “Внешний вид“ или “Appearance section”.

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

define( [
        'jquery'
    ],
    function ( $ ) {
        'use strict';

        return {

            // Define what the properties panel looks like
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    appearance: {
                        uses: "settings",
                    }
                }
            },
            // Paint/Rendering logic
            paint: function ( $element /*, layout*/ ) {

                $element.empty();
                var $msg = $( document.createElement( 'div' ) );
                $msg.html( 'Just demonstrating default behavior of the property panel"' );
                $element.append( $msg );

            }
        };

    } );

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

// Define what the properties panel looks like
definition: {
    type: "items",
    component: "accordion",
    items: {
        dimensions: {
            uses: "dimensions"
        },
        measures: {
            uses: "measures"
        },
        sorting: {
            uses: "sorting"
        },
        appearance: {
            uses: "settings",
        }
    }
},

В результате мы получим следующую панель свойств:

Ссылка на свойства

Параметр макета (layout) передается в метод paint, и он включает текущую область расширения визуализации вместе с определенными свойствами.

// Paint/Rendering logic
paint: function ( $element, layout ) {

    console.info('paint >> layout >> ', layout);

}

Если вы посмотрите на вывод консоли, например, в Chrome DevTools, вы найдете то, что ищете.

С этой информацией теперь вы можете начать выводить некоторые значения в метод paint.

// Paint/Rendering logic
paint: function ( $element, layout ) {

    //output values from the property panel
    $element.empty();
    
    //output container
    var $msg = $( document.createElement( 'div' ) );
    
    //variable holding the output
    var html = '<b>Property values:</b><br/>';
    html += 'Title: ' + layout.title + '<br/>';
    html += 'Subtitle: ' + layout.subtitle + '<br/>';
    
    //assign the variable to the output container
    $msg.html( html );
    
    //add the output container to the current element
    $element.append( $msg );

}

Получим следующий результат:

Собственные свойства, которые можно использовать повторно

В этом разделе перечислены собственные свойства Qlik Sense, которые можно повторно использовать в определении панели свойств.

Dimensions

Когда вы повторно используете раздел Dimensions section, он включает в себя следующее:

• Add dimension

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

• Field
• Label
• Show null values
• Limitation
• Show others
• Others label

Пример: Add Dimensions section

В приведенном ниже примере показано, как добавить раздел “Dimensions” на панель свойств вашего расширения визуализации. Обратите внимание, что определено, что расширение визуализации должно иметь ровно одно измерение.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            }
        }
    };
 
});

Measures

Когда вы повторно используете раздел “Меры”, он включает в себя следующее:

• Add measure

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

• Label
• Expression
• Number formatting

Пример: Add Measures section

В этом примере показано, как мы теперь добавили определение раздела «Меры» на панель свойств нашего расширения визуализации. Обратите внимание, что здесь мы также определяем, что расширение визуализации должно иметь ровно одну меру.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            }
        }
    };
 
});

Sorting

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

• Labels of the dimension and measure, используемые в расширении визуализации
• Sorting option (Auto or Custom)Опция Custom включает в себя следующее:
  • Sort by expression (only available for dimensions)
  • Sort numerically
  • Sort alphabetically
  • Sort by frequency (only available for filter panes)

Пример: Add Sorting section

В этом примере показано, как мы теперь добавили определение раздела «Сортировка» на панель свойств вашего расширения визуализации. Мы не вносили никаких изменений в раздел «Сортировка», предварительно определенный Qlik Sense.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            },
            sorting: {
                uses: "sorting"
            }
        }
    };
 
});

Add-ons (Надстройки)

Когда вы повторно используете раздел надстроек (Add-ons), он включает в себя следующее:

• Data handling
• Reference lines

Пример: Add Add-ons section

В этом примере показано, как мы добавляем определение раздела «Надстройки» на панель свойств вашего расширения визуализации. Мы не вносили никаких изменений в раздел «Надстройки», предварительно определенный Qlik Sense.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            },
            sorting: {
                uses: "sorting"
            },
            addons: {
                uses: "addons"
            }
        }
    };
 
});

Appearance (settings) – Внешний вид

Appearance section называется settings в коде.

Когда вы повторно используете раздел «Внешний вид», он включает в себя следующее:

• General – ОбщийВключает настройки для заголовка, подзаголовка и сноски
• Presentation – Презентация (доступна только для визуализаций с более чем одним измерением)
• Colors and legend – Цвета и легенда (доступно только в некоторых типах визуализаций)
• X-axis – Ось X (доступна только в некоторых типах визуализаций)
• Y-axis – Ось Y (доступна только в некоторых типах визуализаций)

Пример: Add Appearance section

В этом примере показано, как мы добавляем определение раздела «Внешний вид» на панель свойств вашего расширения визуализации. Мы не вносили никаких изменений в раздел «Надстройки», предварительно определенный Qlik Sense.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            },
            sorting: {
                uses: "sorting"
            },
            addons: {
                uses: "addons"
            },
            settings: {
                uses: "settings"
            }
        }
    };
 
});

Добавление дополнительных свойств (custom properties)

Вы можете задать custom properties для visualization extension. Qlik Sense автоматически добавляет их на панель свойств и заботится о сохранении. Затем вы найдете выбранные значения в параметре layout.

Для каждого свойства вы задаете объект JavaScript с разными полями в зависимости от того, какой тип настраиваемого свойства вы определяете.

Следующие компоненты пользовательского интерфейса могут использоваться для отображения ваших custom properties на панели свойств:

• Button – Кнопка
• Button group – Группа кнопок
• Check box – Флажок
• Color-picker – выбор цвета
• Drop down list – Выпадающий список
• Input box / text box – Поле ввода / текстовое поле
• Link – Ссылка
• Media
• Radio button – Переключатель
• Range slider – Ползунок для выбора диапазона
• Slider
• Switch – Переключатель
• Text – Текст
• Text area – Текстовая область

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

Совет: Как улучшить управляемость скриптом Javascript при разработке Extension?

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

• Разделите раздел definition на несколько переменных JavaScript.
• Создайте отдельный файл JavaScript для определения ваших свойств и загрузите этот файл в основной файл сценария расширения визуализации.

Определение свойств в отдельном файле JavaScript

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

define( [
        'jquery'
    ],
    function ( $ ) {
        'use strict';

        return {

            // Define what the properties panel looks like
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    dimensions: {
                        uses: "dimensions"
                    },
                    measures: {
                        uses: "measures"
                    },
                    appearance: {
                        uses: "settings",
                    }
                }
            },
            // Paint/Rendering logic
            paint: function ( $element, layout ) {
            // Main rendering logic goes here
            }
        };
    } );

Создайте файл и назовите его properties.js. Сохраните его в той же папке, где находятся ваши основные файлы расширения визуализации. Новый файл properties.js должен выглядеть так:

define( [], function () {
    'use strict';
    // *****************************************************************************
    // Dimensions & Measures
    // *****************************************************************************
    var dimensions = {
        uses: "dimensions",
        min: 0,
        max: 1
    };
    var measures = {
        uses: "measures",
        min: 0,
        max: 1
    };
    // *****************************************************************************
    // Appearance section
    // *****************************************************************************
    var appearanceSection = {
        uses: "settings"
    };
    // *****************************************************************************
    // Main properties panel definition
    // Only what is defined here is returned from properties.js
    // *****************************************************************************
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: dimensions,
            measures: measures,
            appearance: appearanceSection
        }
    };
});

Затем вам нужно загрузить внешнее определение свойств в ваш основной файл сценария и назначить definition.

define( [
        // Load properties.js using requireJS
        // Note: if you load .js files, omit the file extension
        // otherwise requireJS will not load it correctly
        './properties'
    ],
    function ( props ) {
        'use strict';
        return {
            definition: props,
            // Paint/Rendering logic
            paint: function ( $element, layout ) {
            // Main rendering logic goes here
            }
        };
    } );

Добавление basic custom property

В этом разделе мы определим самый простой, но один из наиболее распространенных компонентов – текстовое поле.

// Text box definition
var myTextBox = {
    ref: "props.myTextBox",
    label: "My text box",
    type: "string"
};

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

type

Используется для всех определений типов настраиваемых свойств. Может быть string, integer, number или boolean.

ref

Имя или идентификатор, используемый для ссылки на свойство.

label

Используется для определения метки, отображаемой на панели свойств.

component

Используется для определения того, как свойство отображается на панели свойств.

В приведенном выше примере component не определен. Qlik Sense автоматически по умолчанию использует текстовое поле, если component не определен для элементов, type которых является string или integer.

Добавление определения компонента на панель свойств

В этом разделе мы добавим вновь созданное текстовое поле на основе строки в раздел Внешний вид.

Перед:

// Appearance section
var appearanceSection = {
    uses: "settings"
};
// Main properties panel definition
// Only what is defined here is returned from properties.js
return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection
    }
};

После:

var myTextBox = {
    ref: "props.myTextBox",
    label: "My text box",
    type: "string"
};

// Appearance section
var appearanceSection = {
    uses: "settings",
    items: {
        myTextBox: myTextBox
    }
};

// Main properties panel definition
// Only what is defined here is returned from properties.js
return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection
    }
};

Результат:

Добавление собственного заголовка раздела

В предыдущем примере вы добавили текстовое поле в новый раздел. В заголовке раздела автоматически повторно использовалась метка компонента. В этом разделе вы добавите собственный заголовок раздела. Для этого вы создаете новый заголовок ( myNewHeader в примере ниже) в существующем разделе «Внешний вид», а затем добавляете туда элементы:

var appearanceSection = {
    uses: "settings",
    items: {
        // Definition of the custom section header
        myNewHeader: {
            type: "items",
            label: "My header, containing text box",
            items: {
                myTextBox: myTextBox
            }
        }
    }
};

// NOTHING CHANGED HERE ...
// Return overall definition of the property accordion
return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection
    }
};

Результат:

Добавление настраиваемого раздела

Вы также можете создавать совершенно новые разделы аккордеона.

// Some components
var header1_item1 = {
    ref: "props.section1.item1",
    label: "Section 1 / Item 1",
    type: "string",
    expression: "optional"
};

...
...

// Define a custom section
myCustomSection = {
    // not necessary to define the type, component "expandable-items" will automatically
    // default to "items"
    // type: "items"
    component: "expandable-items",
    label: "My Accordion Section",
    items: {
        header1: {
            type: "items",
            label: "Header 1",
            items: {
                header1_item1: header1_item1,
                header1_item2: header1_item2
            }
        },
        header2: {
            type: "items",
            label: "Header 2",
            items: {
                header2_item1: header2_item1,
                header2_item2: header2_item2
            }
        }

    }
}

Ключ в приведенном выше коде заключается в том, что вы добавляете expandable-items компонента . Остальной код работает как в предыдущих примерах.

return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection,
        customSection: myCustomSection
    	 }
    };
});

Результат:

Отображение и сохранение custom (настраиваемых) свойств

После того как вы определили custom properties, Qlik Sense позаботится обо всем остальном, а именно:

• Отображение custom properties вместе со встроенными свойствами
• Сохранение значений свойств. Если значение свойства изменяется, вам не нужно заботиться о сохранении, то есть о сохранении и загрузке значения свойства.

Ссылка на значения настраиваемых свойств

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

Примеры:

Определяем текстовое поле:

var myTextBox = {
    ref: "myTextBox",
    ...
};

На это значение можно ссылаться в вашем скрипте:

console.log( layout.myTextBox );

В то время как:

var myTextBox = {
    ref: "prop.myTextBox",
    ...
};

Будет вызываться с использованием:

console.log( layout.prop.myTextBox );

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

Определение настраиваемых свойств

Custom string properties

todo

Custom integer properties

todo

Custom number properties

todo

Custom array properties

todo

Custom button properties

todo

Custom button group properties

todo

Custom check box properties

todo

Custom color-picker properties

todo

Custom drop down list properties

todo

Custom link properties

todo

Custom media properties

todo

Custom radio button properties

todo

Custom slider properties

todo

Custom range-slider properties

todo

Custom switch properties

todo

Custom text properties

todo

Custom textarea properties

todo

Сообщение Панель свойств расширения или Properties Panel появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

disableNavMenu: false
extensionMeta: {translationKey: "", icon: "table", iconChar: "puzzle", isLibraryItem: true, visible: true, …}
footnote: ""
qHyperCube: {qSize: {…}, qDimensionInfo: Array(1), qMeasureInfo: Array(1), qEffectiveInterColumnSortOrder: Array(2), qGrandTotalRow: Array(1), …}
qInfo: {qId: "BgJXgdA", qType: "TableExtensionTest"}
qMeta: {privileges: Array(4)}
qSelectionInfo: {}
showDetails: false
showTitles: true
subtitle: ""
title: ""
version: "1.0.0"
visualization: "TableExtensionTest"

layout -> extensionMeta

extensionMeta:
    author: ""
    dependencies: {qlik-sense: ">=3.0.x"}
    description: "Table visualization template"
    homepage: ""
    icon: "table"
    iconChar: "puzzle"
    iconPath: "M14.5,... 14.5,9 Z"
    isLibraryItem: true
    isThirdParty: true
    keywords: "qlik-sense, visualization"
    license: ""
    name: "TableExtensionTest"
    repository: ""
    template: "TableExtensionTest"
    translationKey: ""
    type: "visualization"
    version: "1.0.0"
    visible: true
footnote: ""

layout -> qHyperCube

qHyperCube:
    qColumnOrder: Array(0)
    qDataPages: [{…}]
    qDimensionInfo: [{…}]
    qEffectiveInterColumnSortOrder: (2) [0, 1]
    qGrandTotalRow: [{…}]
    qMeasureInfo: [{…}]
    qMode: "S"
    qNoOfLeftDims: -1
    qPivotDataPages: []
    qSize: {qcx: 2, qcy: 11}
    qStackedDataPages: []
    qTreeNodesOnDim: []

layout -> qHyperCube -> qDataPages

qHyperCube:
    qDataPages: Array(1)
        0:
            qArea:
            qHeight: 11
            qLeft: 0
            qTop: 0
            qWidth: 2
    qMatrix: Array(11)
        0: Array(2)
            0: {qText: "Closed", qNum: "NaN", qElemNumber: 0, qState: "O"}
            1: {qText: "8614", qNum: 8614, qElemNumber: 0, qState: "L"}
        1: (2) [{…}, {…}]
        2: (2) [{…}, {…}]
        3: (2) [{…}, {…}]
        4: (2) [{…}, {…}]
        5: (2) [{…}, {…}]
        6: (2) [{…}, {…}]
        7: (2) [{…}, {…}]
        8: (2) [{…}, {…}]
        9: (2) [{…}, {…}]
        10: (2) [{…}, {…}]
        length: 11
    qTails: Array(1)
        0:
            qDown: 0
            qUp: 0

layout -> qHyperCube -> qDimensionInfo

qDimensionInfo: Array(1)
    0:
        autoSort: true
        cId: "mrqmqF"
        othersLabel: "Others"
        qApprMaxGlyphCount: 35
        qAttrDimInfo: []
        qAttrExprInfo: []
        qCardinal: 11
        qCardinalities: {qCardinal: 11, qHypercubeCardinal: 11, qAllValuesCardinal: -1}
        qDimensionType: "D"
        qFallbackTitle: "Status"
        qGroupFallbackTitles: Array(1)
            0: "Status"
            length: 1
        qGroupFieldDefs: ["Status"]
        qGroupPos: 0
        qGrouping: "N"
        qIsAutoFormat: true
        qMax: "NaN"
        qMin: "NaN"
        qNumFormat: {qType: "U", qnDec: 0, qUseThou: 0}
        qSortIndicator: "A"
        qStateCounts: {qLocked: 0, qSelected: 0, qOption: 11, qDeselected: 0, qAlternative: 0, …}
        qTags: (2) ["$ascii", "$text"]
    length: 1

layout -> qHyperCube -> qMeasureInfo

qMeasureInfo: Array(1)
    0:
        autoSort: true
        cId: "dWPU"
        numFormatFromTemplate: true
        qApprMaxGlyphCount: 4
        qAttrDimInfo: []
        qAttrExprInfo: []
        qCardinal: 0
        qFallbackTitle: "Count([Case Count])"
        qIsAutoFormat: true
        qMax: 8614
        qMin: 6
        qNumFormat:
            qDec: "."
            qFmt: "###0"
            qType: "I"
            qUseThou: 1
            qnDec: 0
        qSortIndicator: "D"
        qTrendLines: []
        length: 1

layout -> qInfo

qInfo:
    qId: "BgJXgdA"
    qType: "TableExtensionTest"

layout -> qMeta

qMeta:
    privileges: Array(4)
        0: "read"
        1: "update"
        2: "delete"
        3: "exportdata"

Использование layout в javascript при разработке расширения

Посчитать количество строк в таблице через layout.hypercube

hypercube = layout.qHyperCube,
rowcount = hypercube.qDataPages[0].qMatrix.length,
colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length;

Сообщение Extension Development – Структура объекта layout появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

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

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

Backend API доступен для разработчиков расширений как this.backendApi:

this.backendApi.eachDataRow(function(rownum, row) {
    .....
});

Примеры использования

Selections

Следующие методы Backend API доступны, когда вы работаете с выборками в универсальном объекте, стоящем за вашим расширением.

• selectValues
• selectRange
• clearSelections
• hasSelections

Используйте метод selectValues для выбора значений в этом объекте. Вызов вызывает перерисовку объекта.

$element.find('li').on('click', function() {
    if(this.hasAttribute("data-value")) {
        var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
        self.backendApi.selectValues(dim, [value], true);
    }
});

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

var range = {
    "qMeasureIx": 1,
    "qRange": {
        "qMin": 10,
        "qMax": 100,
        "qMinInclEq": true,
        "qMaxInclEq": true
    }
};
self.backendApi.selectRange( [range], false);

Метод hasSelections можно использовать, чтобы узнать, есть ли неподтвержденные выборы для этого объекта.

this.backendApi.hasSelections();

Если для этого объекта есть неподтвержденные выборки, вы можете использовать метод clearSelections, чтобы очистить их.

this.backendApi.clearSelections();

Search

При работе с поиском в объектах списка вы можете использовать следующие методы Backend API.

• search
• acceptSearch
• abortSearch

Используйте метод search для поиска термина в list object. Это приводит к обновленному layout, который содержит только совпадающие записи.

this.backendApi.search("A");

Метод acceptSearch принимает результат поиска и делает его выбранным в поле.

this.backendApi.acceptSearch(false);

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

this.backendApi.abortSearch();

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

Исторически сложилось так, что разработчики JavaScript часто использовали alert() для целей отладки, но это может восприниматься как раздражающее, поэтому вместо этого рекомендуется использовать console.log() для отправки данных в консоль браузера.

Инструменты веб-разработчика

Большинство веб-браузеров предлагают какой-то инструмент разработчика, но в этом разделе вы познакомитесь с некоторыми основными концепциями, основанными на Google Chrome.

Инструменты разработчика в вашем браузере

Если вы разрабатываете расширения визуализации с помощью Qlik Sense Desktop, вы можете использовать свой любимый браузер для целей отладки. Просто откройте Qlik Sense Desktop и оставьте его открытым. Затем откройте свой браузер и перейдите по адресу http://localhost:4848. Отобразится Hub, и оттуда вы сможете открыть инструменты разработчика браузера.

Инструменты разработчика из Qlik Sense Desktop

Поскольку Qlik Sense Desktop использует Chromium в качестве встроенного браузера, вы можете получить доступ к Chrome DevTools из Qlik Sense Desktop. Нажмите Ctrl + Shift и одновременно щелкните правой кнопкой мыши по листу, а затем выберите «Показать DevTools» в диалоговом окне.

Откроется окно devtools

Отладка с помощью Chrome DevTools

В этом разделе выделены три области, которые имеют большое значение при разработке расширений визуализации:

• Использование console
• Inspect elements
• Debugging

Использование консоли

Как упоминалось выше, удобнее использовать console в веб DevTools вместо запуска предупреждений. Для этого используйте console.info или console.log, чтобы передать что-нибудь в консоль.

Пример: 

paint: function ( $element, layout ) {

    var err = {
        message: 'Something went wrong',
        errCode: 'bla'
    };

    console.info( 'We are re-painting the extension' );
    console.error( 'Oops, we haven an error', err );
    console.log( 'We are here' );
    console.log( 'layout', layout );

}

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

console.assert();
console.group();
console.groupCollapsed();
console.groupEnd();
console.table();

Некоторые соображения

Функции console.xyz() поддерживаются не всеми веб-браузерами, поэтому рекомендуется убедиться, что в коде не осталось console.xyz(), когда он попадет в рабочую среду. Для этого есть несколько стратегий:

• Вручную удалите все console.xyz() из кода перед развертыванием в производственной среде.
• Оберните все ваши вызовы в консоль, чтобы они выполнялись только в том случае, если текущий веб-браузер поддерживает консольные вызовы.
• Используйте инструменты, например Grunt или Gulp, для создания процесса развертывания, в котором все операторы консоли удаляются автоматически.

Inspect elements (Осмотрите элементы)

Манипуляции с объектной моделью документа (DOM) можно просмотреть с помощью инспектора элементов, который встречается в большинстве инструментов веб-разработчика. В Chrome DevTools вы получаете доступ к функции проверки элементов, щелкнув увеличительное стекло на панели инструментов.

Отладка

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

• Chrome DevTools
• Firebug
• Инструменты разработчика F12 для Internet Explorer

Для того, чтобы запустить режим debugging в расширении, необходимо написать команду debugger;.

Пример:

paint: function($element, layout) {
    
    console.log(layout);
    
    var hypercube = layout.qHyperCube;
    
    console.log(hypercube);
    
    debugger;
}

Сообщение Отладка visualization extension с помощью web developer tools появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

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

Обзор Visualization extension templates

Для начала рассмотрим шаблоны Visualization extension templates. В dev-hub при создании Extension вам предлагают выбрать шаблон.

Basic Visualization template

Назовем наш Extension “1_BVT”. При инициализации создадутся два файла:

1_BVT.qext

{
    "name": "1_BVT",
    "description": "Basic empty visualization template",
    "type": "visualization",
    "version": "1.0.0",
    "icon": "extension",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

1_BVT.js

define( [ "qlik"
],
function ( qlik) {

    return {
        support : {
            snapshot: true,
            export: true,
            exportData : false
        },
        paint: function ($element) {
            //add your rendering code here
            $element.html( "1_BVT" );
            //needed for export
            return qlik.Promise.resolve();
        }
    };

} );

Chart Template

Назовем наш Extension “2_CT”. При инициализации создадутся 4 файла:

2_CT.qext

{
    "name": "2_CT",
    "description": "Chart visualization template",
    "icon": "bar-chart-horizontal",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

2_CT.js

define( ["qlik", "text!./2_CT.ng.html", "css!./2_CT.css"],
    function ( qlik, template ) {
        "use strict";
        return {
            template: template,
            initialProperties: {
                qHyperCubeDef: {
                    qDimensions: [],
                    qMeasures: [],
                    qInitialDataFetch: [{
                        qWidth: 2,
                        qHeight: 50
                    }]
                }
            },
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    dimensions: {
                        uses: "dimensions",
                        min: 1,
                        max: 1
                    },
                    measures: {
                        uses: "measures",
                        min: 1,
                        max: 1
                    },
                    sorting: {
                        uses: "sorting"
                    }
                }
            },
            support: {
                snapshot: true,
                export: true,
                exportData: true
            },
            paint: function () {
                //needed for export
                this.$scope.selections = [];
                return qlik.Promise.resolve();
            },
            controller: ["$scope", "$element", function ( $scope ) {
                $scope.getPercent = function ( val ) {
                    return Math.round( (val * 100 / $scope.layout.qHyperCube.qMeasureInfo[0].qMax) * 100 ) / 100;
                };

                $scope.selections = [];

                $scope.sel = function ( $event ) {
                    if ( $event.currentTarget.hasAttribute( "data-row" ) ) {
                        var row = parseInt( $event.currentTarget.getAttribute( "data-row" ), 10 ), dim = 0,
                            cell = $scope.$parent.layout.qHyperCube.qDataPages[0].qMatrix[row][0];
                        if ( cell.qIsNull !== true ) {
                            cell.qState = (cell.qState === "S" ? "O" : "S");
                            if ( $scope.selections.indexOf( cell.qElemNumber ) === -1 ) {
                                $scope.selections.push( cell.qElemNumber );
                            } else {
                                $scope.selections.splice( $scope.selections.indexOf( cell.qElemNumber ), 1 );
                            }
                            $scope.selectValues( dim, [cell.qElemNumber], true );
                        }
                    }
                };
            }]
        };

    } );

2_CT.css

.qv-object-2_CT .css_bars_row {
    transition: all 0.3s ease;
    float: left;
    width: 98%;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    margin-bottom: 2px;
    border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.qv-object-2_CT .css_bars_bar {
    float: left;
    clear: left;
    height: 30px;
    background-color: #5f5f5f;
}

.qv-object-2_CT .css_bars_bar span {
    font-weight: bold;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    white-space: nowrap;
}

.qv-object-2_CT .css_bars_per {
    position: relative;
}

.qv-object-2_CT .css_bars_per span {
    font-weight: bold;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
}

.qv-object-2_CT .css_bars_per span.over {
    position: absolute;
    right: 15px;
    color: #f0f0f0;
}

.qv-object-2_CT .css_bars_row:hover, .qv-object-2_CT .css_bars_row.selected {
    border: 1px solid #000;
}

2_CT.ng.html

<div qv-extension style="height: 100%; position: relative; overflow: auto;">
    <div class="css_bars_row" ng-repeat="item in layout.qHyperCube.qDataPages[0].qMatrix" title="{{item[0].qText}}" data-row="{{ $index }}"
         ng-click="sel($event)" data-value="{{ item[0].qElemNumber }}" ng-class="{selected: (item[0].qState) === 'S' || selections.indexOf(item[0].qElemNumber) !== -1 }">
        <div class="css_bars_bar" ng-style="{'width':getPercent(item[1].qNum)+'%'}"><span>{{item[0].qText}}</span></div>
        <div class="css_bars_per">
            <span ng-class="{over: (getPercent(item[1].qNum)>95)}">{{getPercent(item[1].qNum)}} %</span></div>
    </div>
</div>

Listbox template

Назовем наш Extension “3_LBT”. При инициализации создадутся 3 файла:

3_LBT.js

define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {
    'use strict';
    $( "<style>" ).html( cssContent ).appendTo( "head" );
    return {
        initialProperties: {
            qListObjectDef: {
                qShowAlternatives: true,
                qFrequencyMode: "V",
                qInitialDataFetch: [{
                    qWidth: 2,
                    qHeight: 50
                }]
            }
        },
        definition: {
            type: "items",
            component: "accordion",
            items: {
                dimension: {
                    type: "items",
                    label: "Dimensions",
                    ref: "qListObjectDef",
                    min: 1,
                    max: 1,
                    items: {
                        label: {
                            type: "string",
                            ref: "qListObjectDef.qDef.qFieldLabels.0",
                            label: "Label",
                            show: true
                        },
                        libraryId: {
                            type: "string",
                            component: "library-item",
                            libraryItemType: "dimension",
                            ref: "qListObjectDef.qLibraryId",
                            label: "Dimension",
                            show: function ( data ) {
                                return data.qListObjectDef && data.qListObjectDef.qLibraryId;
                            }
                        },
                        field: {
                            type: "string",
                            expression: "always",
                            expressionType: "dimension",
                            ref: "qListObjectDef.qDef.qFieldDefs.0",
                            label: "Field",
                            defaultValue: "=ValueList('A','B','C')",
                            show: function ( data ) {
                                return data.qListObjectDef && !data.qListObjectDef.qLibraryId;
                            }
                        },
                        frequency: {
                            type: "string",
                            component: "dropdown",
                            label: "Frequency mode",
                            ref: "qListObjectDef.qFrequencyMode",
                            options: [{
                                value: "N",
                                label: "No frequency"
                            }, {
                                value: "V",
                                label: "Absolute value"
                            }, {
                                value: "P",
                                label: "Percent"
                            }, {
                                value: "R",
                                label: "Relative"
                            }],
                            defaultValue: "V"
                        }
                    }
                },
                settings: {
                    uses: "settings"
                }
            }
        },
        support : {
            snapshot: true,
            export: true,
            exportData : false
        },
        paint: function ( $element,layout ) {
            var self = this, html = "<ul>";
            layout.qListObject.qDataPages[0].qMatrix.forEach( function ( row ) {
                html += '<li class="data state' + row[0].qState + '" data-value="' + row[0].qElemNumber + '">' + row[0].qText;
                if ( row[0].qFrequency ) {
                    html += '<span>' + row[0].qFrequency + '</span>';
                }
                html += '</li>';
            } );
            html += "</ul>";
            $element.html( html );
            if ( this.selectionsEnabled ) {
                $element.find( 'li' ).on( 'click', function () {
                    if ( this.hasAttribute( "data-value" ) ) {
                        var value = parseInt( this.getAttribute( "data-value" ), 10 ), dim = 0;
                        self.selectValues( dim, [value], true );
                        this.classList.toggle("selected");
                    }
                } );
            }
            return qlik.Promise.resolve();
        }
    };
} );

3_LBT.qext

{
    "name": "3_LBT",
    "description": "Listbox visualization template",
    "icon": "list",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

style.css

.qv-object-3_LBT div.qv-object-content-container {
    overflow: auto;
}
.qv-object-3_LBT ul {
    list-style: none;
}
.qv-object-3_LBT li.data {
    padding: 4px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* frequency */
.qv-object-3_LBT li.data span
{
    padding-left: 10px;
    font-style: italic;
    float:right;
}
/* colors when NOT in selection mode */

.qv-object-3_LBT li.stateS, .qv-object-3_LBT li.stateL {
    background-image: linear-gradient(top, #52cc52, #4dc04d);
    background-image: -o-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -moz-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -webkit-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -ms-linear-gradient(top, #52cc52, #4dc04d);
    color: #fff;
}

.qv-object-3_LBT li.stateX, .qv-object-3_LBT li.stateXL, .qv-object-3_LBT li.stateXS {
    background-color: #A9A9A9;
    color: #fff;
}

.qv-object-3_LBT li.stateA {
    background-image: none;
    background-color: #ddd;
    color: #000;
}
/* colors when in selection mode */
.qv-object-3_LBT.qv-selections-active li {
    background-image: none;
    background-color: #ddd;
    color: #000;
}

.qv-object-3_LBT.qv-selections-active li.selected {
    background-image: linear-gradient(top, #52cc52, #4dc04d);
    background-image: -o-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -moz-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -webkit-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -ms-linear-gradient(top, #52cc52, #4dc04d);
    color: #fff;
}

Angular Basic Visualization template

Назовем наш Extension “4_ABVT”. При инициализации создадутся 3 файла:

4_ABVT.qext

{
    "name": "4_ABVT",
    "description": "Basic empty visualization template based on angular.js",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

4_ABVT.js

define( ["qlik", "text!./template.html"],
    function ( qlik, template ) {

        return {
            template: template,
            support: {
                snapshot: true,
                export: true,
                exportData: false
            },
            paint: function () {
                return qlik.Promise.resolve();
            },
            controller: ['$scope', function ( $scope ) {
                //add your rendering code here
                $scope.html = "Hello World";
            }]
        };

    } );

template.html

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">
    {{ html }} 
</div>

Angular Table template

Назовем наш Extension “5_ATT”. При инициализации создадутся 4 файла:

5_ATT.js

define( ["qlik","jquery", "text!./style.css", "text!./template.html"], function (qlik, $, cssContent, template ) {'use strict';
    $("<style>").html(cssContent).appendTo("head");
    return {
       template: template,
       initialProperties : {
            qHyperCubeDef : {
                qDimensions : [],
                qMeasures : [],
                qInitialDataFetch : [{
                    qWidth : 10,
                    qHeight : 50
                }]
            }
        },
        definition : {
            type : "items",
            component : "accordion",
            items : {
                dimensions : {
                    uses : "dimensions",
                    min : 1
                },
                measures : {
                    uses : "measures",
                    min : 0
                },
                sorting : {
                    uses : "sorting"
                },
                settings : {
                    uses : "settings",
                    items : {
                        initFetchRows : {
                            ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
                            label : "Initial fetch rows",
                            type : "number",
                            defaultValue : 50
                        }
                    }
                }
            }
        },
        support : {
            snapshot: true,
            export: true,
            exportData : true
        },
        paint: function ( ) {
            //setup scope.table
            if ( !this.$scope.table ) {
                this.$scope.table = qlik.table( this );
            }
            return qlik.Promise.resolve();
        },
        controller: ['$scope', function (/*$scope*/) {
        }]
    };

} );

5_ATT.qext

{
    "name": "5_ATT",
    "description": "Table visualization template based on angular.js",
    "icon": "table",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

style.css

.qv-object-5_ATT div.qv-object-content-container {
    overflow: auto;
}
.qv-object-5_ATT td,
.qv-object-5_ATT th {
    border-top: 0px solid #fff;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
    font-size: 12px;
}
.qv-object-5_ATT td.numeric {
    text-align: right;
}
.qv-object-5_ATT button {
    width: 100%;
}

template.html

<div qv-extension style="height: 100%; position: relative; overflow: auto;">
    <table>
        <thead>
        <tr>
            <th ng-repeat="head in table.headers track by $index" ng-click="head.orderBy()">{{head.qFallbackTitle}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in table.rows track by $index">
            <td ng-repeat="cell in row.cells track by $index" class="selectable" ng-class="{'selected':cell.selected,'numeric':cell.qNum}" ng-click="cell.select($event)">{{cell.qText}}</td>
        </tr>
        </tbody>
    </table>
    <button ng-if="table.rowCount>table.rows.length" ng-click="table.getMoreData()" class="lui-button more">More...</button>
</div>

Table template

Назовем наш Extension “6_TT”. При инициализации создадутся 3 файла:

6_TT.js

/*globals define*/
define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {
    'use strict';
    $( "<style>" ).html( cssContent ).appendTo( "head" );
    function createRows ( rows, dimensionInfo ) {
        var html = "";
        rows.forEach( function ( row ) {
            html += '<tr>';
            row.forEach( function ( cell, key ) {
                if ( cell.qIsOtherCell ) {
                    cell.qText = dimensionInfo[key].othersLabel;
                }
                html += "<td ";
                if ( !isNaN( cell.qNum ) ) {
                    html += "class='numeric'";
                }
                html += '>' + cell.qText + '</td>';
            } );
            html += '</tr>';
        } );
        return html;
    }

    return {
        initialProperties: {
            qHyperCubeDef: {
                qDimensions: [],
                qMeasures: [],
                qInitialDataFetch: [{
                    qWidth: 10,
                    qHeight: 50
                }]
            }
        },
        definition: {
            type: "items",
            component: "accordion",
            items: {
                dimensions: {
                    uses: "dimensions",
                    min: 1
                },
                measures: {
                    uses: "measures",
                    min: 0
                },
                sorting: {
                    uses: "sorting"
                },
                settings: {
                    uses: "settings"
                }
            }
        },
        snapshot: {
            canTakeSnapshot: true
        },
        paint: function ( $element, layout ) {
            var html = "<table><thead><tr>", self = this,
                morebutton = false,
                hypercube = layout.qHyperCube,
                rowcount = hypercube.qDataPages[0].qMatrix.length,
                colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length;
            //render titles
            hypercube.qDimensionInfo.forEach( function ( cell ) {
                html += '<th>' + cell.qFallbackTitle + '</th>';
            } );
            hypercube.qMeasureInfo.forEach( function ( cell ) {
                html += '<th>' + cell.qFallbackTitle + '</th>';
            } );
            html += "</tr></thead><tbody>";
            //render data
            html += createRows( hypercube.qDataPages[0].qMatrix, hypercube.qDimensionInfo );
            html += "</tbody></table>";
            //add 'more...' button
            if ( hypercube.qSize.qcy > rowcount ) {
                html += "<button class='more'>More...</button>";
                morebutton = true;
            }
            $element.html( html );
            if ( morebutton ) {
                $element.find( ".more" ).on( "click", function () {
                    var requestPage = [{
                        qTop: rowcount,
                        qLeft: 0,
                        qWidth: colcount,
                        qHeight: Math.min( 50, hypercube.qSize.qcy - rowcount )
                    }];
                    self.backendApi.getData( requestPage ).then( function ( dataPages ) {
                        rowcount += dataPages[0].qMatrix.length;
                        if ( rowcount >= hypercube.qSize.qcy ) {
                            $element.find( ".more" ).hide();
                        }
                        var html = createRows( dataPages[0].qMatrix, hypercube.qDimensionInfo );
                        $element.find( "tbody" ).append( html );
                    } );
                } );
            }
            return qlik.Promise.resolve();
        }
    };
} );

6_TT.qext

{
    "name": "6_TT",
    "description": "Table visualization template",
    "icon": "table",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

style.css

.qv-object-6_TT div.qv-object-content-container {
    overflow: auto;
}
.qv-object-6_TT td,
.qv-object-6_TT th {
    border-top: 0px solid #fff;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
    font-size: 12px;
}
.qv-object-6_TT td.numeric {
    text-align: right;
}
.qv-object-6_TT button {
    width: 100%;
}

Структура расширения

Как мы видим из примеров стандартных шаблонов экстеншенов для создания расширения необходимо минимум 2 файла – js и qext. Для более богатой функциональности добавляются css и html.

Опишем зачем нужны файлы:

• <name_extension>.js – это код Javascript – фактически это ядро вашего Extension. Здесь происходит отрисовка визуализации (например, в цикле заполняется html код с тегами при обходе гиперкуба qlik sense), настраивается логика работы с выборкой и другие действия.
• <name_extension>.qext – extension metadata file (QEXT) – файл JSON, который используется Qlik Sense для идентификации расширения визуализации. В этом файле указывается название расширения, тип расширения, версия, автор, ключевые слова. И другие атрибуты, которые будут расмотрены в дальнейших разделах.
• <name_extension>.css – в этом файле прописываются стили для кастомной визуализации (т.е. вашего экстеншена).
• <name_extension>.html – шаблон html кода, который будет использоваться в js коде и заполняться внутри js кода (например в цикле). Этот прием используется, например, в Angular Framework.
• wbfolder.wbl^* (не является обязательным) – Файл загрузки Workbench – используется редактором Extension & Mashup и содержит список файлов, которые должны быть загружены в редактор dev-hub (без него вы не сможете открыть или продублировать расширение в dev-hub).
  Когда вы сохраняете проект расширения или Mashup из редактора, WBL-файл автоматически создается и включается в проект. Если вы сделаете копию расширения или мэшапа, то будут скопированы только файлы, перечисленные в wbfolder.wbl.
  Добавляя дополнительные имена файлов – разделенные точкой с запятой и переносом строки – в wbfolder.wbl, вы также можете разрешить загрузку этих дополнительных файлов. При отсутствии файла может возникнуть ошибка Incomplete visualization. The visualization is incomplete and cannot be opened or duplicated (wbfolder.wbl file missing).

Рассмотрим процесс отрисовки экстеншена:

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

Пример Hello World можно посмотреть на сайте http://qliksite.io/tutorials/qliksense-visualization-extensions/part-01/03-Lets-Get-Started–Hello-World-Example/

Схема работы JS кода в QS Extension

define – это концепция, введенная RequireJS для определения зависимостей в ваших файлах JavaScript. Идея состоит в том, чтобы загрузить внешние зависимости до того, как будет выполнен ваш основной скрипт.

Зависимости – внешние модули (скрипты/библиотеки), которые необходимы для работы нашего расширения.

paint – основной метод визуализации визуализации, который будет вызываться каждый раз, когда визуализация должна быть отрисована, либо из-за новых данных с сервера, либо из-за изменения размера.

Метод paint получает два параметра $elementи layout.

todo

Видео “How to build Qlik Sense Visualization Extensions – Introduction”

Методы Qlik Sense Extension API

beforeDestroy

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

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

Источник: Практическое руководство по борьбе с утечками памяти в Node.js

mounted

Выполняется один раз при инициализации объекта.

mounted($element)

paint

Отрисовывает (или render) визуализацию расширения. Вызовите этот метод, когда необходимо отрисовать visualization extension либо из-за новых данных с сервера, либо из-за изменения размера расширения визуализации.

Параметры метода paint

$element

Оболочка jQuery, содержащая HTML-элемент, в котором должна отображаться визуализация.

layout

Данные и свойства для визуализации.

layout.qHyperCube.qDimensionInfo

Массив с данными об используемых dimensions. Включает qFallbackTitle, заголовок и qCardinal , количество различных значений.

layout.qHyperCube.qMeasureInfo

Массив с данными об используемых мерах. Включает qFallbackTitle, заголовок (title), qCardinal, количество различных значений, qMin и qMax для минимального и максимального значений.

layout.qHyperCube.qDataPages[0].qMatrix

Массив с данными из Qlik Sense . Каждому объекту соответствует строка в результате. Значения измерения (dimension) и меры (measure) являются объектами JavaScript в этом массиве.

layout.qHyperCube.qDataPages[0].qMatrix[0..#dimensions – 1]

Значения Dimension для строки результата. Каждый объект содержит текст ( qText), используемый для рендеринга, и значение ( qElemNumber ), используемое для selections, и состояние значения ( qState ).

layout.qHyperCube.qDataPages[0].qMatrix[#dimensions..]

Массив со значениями measure для строки результата. Каждый объект содержит данные, фактическое значение ( qNum ) и текст ( qText ), форматированное значение.

layout.qHyperCube.qSize

Общее количество строк (qcy) и столбцов (qcx) в результирующем наборе.

layout.qInfo.qId

qId – Уникальный идентификатор объекта. При необходимости полезно для создания уникального HTML-идентификатора.

layout.qSelectionInfo

Если пользователь находится в режиме выбора, это будет объект с двумя флагами: qInSelections и qMadeSelections.

updateData

Выполняется каждый раз при изменении layout или данных, например при осуществлении выборок или изменении свойств. Получает новый layout и возвращает promise.

updateData(layout)

Properties Qlik Sense Extension API

initialProperties

initialProperties()

Задает свойства, которые объект должен иметь при создании. Определите либо как гиперкуб ( qHyperCubeDef ), либо как объект списка ( qListObjectDef ).

Настройте все свойства и назначьте значения по умолчанию для custom properties.

Максимальное количество ячеек ( qWidth * qHeight ), разрешенное при исходной выборке данных, составляет 10 000. Получите дополнительные данные по частям с помощью метода getData в Backend API.

Пример: использование гиперкуба

initialProperties : {
    qHyperCubeDef : {
        qDimensions : [],
        qMeasures : [],
        qInitialDataFetch : [{
            qWidth : 2,
            qHeight : 50
        }]
    }
}

Пример, в котором используется объект списка, а также определяются некоторые custom properties

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

Ограничение 10000 ячеек

Ходят упорные слухи, что при работе с HyperCube с использованием клиентских API (в расширениях визуализации или мэшапах) можно загрузить только 10 000 ячеек данных.

Этот слух не соответствует действительности !!!

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

snapshot

Включает или отключает возможность делать снимки расширения визуализации для использования в Data Storytelling.

snapshot(enable)

export

Включает или отключает возможность экспорта расширения визуализации как изображения или как PDF-файл. Это также позволяет включить расширение визуализации в экспорт из Storytelling (PowerPoint или PDF).

Если задано значение true , включены параметры контекстного меню «Экспорт как изображение» и «Экспорт в PDF» для расширения визуализации. Это также позволяет расширениям визуализации быть частью историй, экспортируемых в PowerPoint или PDF, в параметрах контекстного меню «Экспорт истории в PowerPoint» и «Экспорт истории в PDF».

exportData

Включает или отключает возможность экспорта данных из расширения визуализации и сохранения их в файле XLSX. Если задано значение true, параметр контекстного меню «Экспорт данных» включен для расширения визуализации.

Пример

var ext = {
    support: {
        snapshot: true,
        export: true,
        exportData: true
    }
};

Property definitions

Array

todo

Integer

todo

Number

todo

String

todo

Text

todo

Button

todo

Button group

todo

Check box

todo

Color-picker

todo

Drop down list

todo

Link

todo

Media

todo

Radio button

todo

Slider

todo

Range-slider

todo

Switch

todo

Textarea

todo

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